Odd border + padding behavior: cross-browser

[muraii]

Hi all,

I've trolled through Google, a little of evolt, css-discuss archives,
and sent the list a request, all to no avail. I consulted
positioniseverything.net and quirksmode.org. The issue I have seems
simple enough that I'd have turned it up on any of those sources, but,
alas, that's not the case.

So, please refer to

http://www.erectlocution.com

for the page in question. Here are the issues:

(a) IE 6

This browser has some issues rendering the page. The borders of the
div with ID #contentWrapper render fine on initial loading, but there
is a portion of each of the right and left borders which isn't rendered
"below the fold", i.e. below the bottom of the rendered page, which is
evident on vertical scrolling. This behavior also occurs when
scrolling back up--the previously rendered border at the top of the
page is poorly rendered.

Additionally, when mousing over a link, the border rendering becomes
differently, if predictably, broken: some part of the left and right
borders of #contentWrapper disappear, starting around 100px below it's
top edge and 50px or so above its bottom edge. It's easily
reproducible, for me anyway.

Lastly--and this is probably somewhere on quirksmode.org or
positioniseverything.org, but of
lower priority for me--there is a gap of something like 3px between the
#header div and the
#contentWrapper div. This happens whether or not I feed IE special
rendering instructions via conditional comments.

(b) Firefox 1.0.7 / WinXP and Mac OS X

There is a gap of about 15px between the #header and #contentWrapper
divs rendered via Firefox. I have scoured through the fairly anemic
CSS and not found any reason for this in the code itself. Both the
XHTML and CSS validate, for what it's worth. I had applied a negative
margin, which, for FF, worked perfectly, but which caused Safari to
display part of the right border overlapping the header by those 15px.
Safari, then, renders the page better than anything else I've tried.

Overall, it's not critical faultiness; but I'd really like such a
simple site to render nicely. I appreciate any tips and pointers along
the way.

Thanks,

Daniel

[Tony]

Well, I can see no problems in FF 1.5, but Netscape and opera both show
the gap you describe for firefox. I find it interesting that the gap is
the same size as the gap you define in the conditional IE statement.

IE 6 shows the borders missing on the sides, about in the area you
describe - but on my browser, it loads that way and stays that way. And
it has nothing to do with where the page border is.

I don't know if this will help, or how much - but I have noticed that
leaving off the unit in FF tends to cause issues, and you have done
exactly this on a number of your paddng and margin definitions -
basically, all the '0' ones. It may not even be relevant, but I would
start there.

As for the display of the side margins in IE - it looks like you are
defining them with floats - that is probably causing them to overlay
the border of contentWrapper when they're displayed. You might want to
try adding a margin - see if you can pull them in a bit.

I can't promise any of that will help, but that's at least where I
would start if I were fixing it. Also, I would endeavor to get rid of
the conditional definitions (but I can understand why they may be
necessary).

Hope that's at least SOME help...

[Daniel Black]

Hey, Tony,

I very much appreciate this. I know the css-discuss list is
high-volume; but I'd figured that I would probably have had
<em>some</em> kind of response in a week or so. Oh well.

I'm a little concerned that the gap is there for FF 1.0.7 given that FF
1.5 penetration is probably kind of low still. I know Netscape is a
Gecko-based browswer, and whatever "feature" is causing the gap might
be shared by FF lt 1.5 and Netscape. However, I'm not personally to
aware of Opera's place in the browser code gene pool.

The borders don't concern me quite as much, but I don't want to shun IE
users if a relatively easy fix works.

Thanks again. This is at least a direction to head. I tried plumbing
through the Firefox Bugzilla database for something, but that proved
pretty daunting as an issue with phantom spacing is kind of generic.

Daniel

[Daniel Black]

So, well, I tried providing units for every measurement, to no great
affect. If anything, it seemed to stabilize IE 6's rendering of the
borders, such that they're mostly messed up without changing. I've
played with a few different values of floated-element width, margin,
and padding on the containing element, to no avail. I know I'm hacking
at my balsa wood with a machette and expecting something pretty.

Has anyone else ever noticed IE "unrendering" borders as you scroll?

I might need to get FF 1.5, but I want this to work properly in 1.0.7
still. And then there are the Netscape and Opera issues, neither of
which I have.

[kchayka]

mu****@yahoo.com wrote:

http://www.erectlocution.com

(a) IE 6

This browser has some issues rendering the page.

IE sucks when it comes to CSS, but there are 2 things that can cure a
whole pile of bizarre behaviors:

position: relative;
zoom: 1.0; (a proprietary property that other browsers will ignore)

Try adding position to different elements, containers in particular. If
that doesn't help, try adding zoom. If that doesn't work, go find a
2-column template on the css-discuss site that's already known to work.
<URL:http://css-discuss.incutio.com/?page=CssLayouts>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Tony]

Daniel,

Obviously, I'm at work right now, so I can't get into your code too
much, but I'll see if I can take a deeper look over the weekend. I know
I've seen and dealt with similar problems, but the details just aren't
coming to mind at the moment.

[Jim Moe]

mu****@yahoo.com wrote:

http://www.erectlocution.com
for the page in question. Here are the issues: [...]

I could find no way to get the layout to look as I think you do with
the code as it is. Here is what I changed:
- I removed "contentWrapper" altogether. It is unnecessary.

- "header" and "header img" were changed to:
#header {
height: 46px;
background: url("./t_files/erectlocutionHeaderBG.jpg") repeat-x top left;
margin: 0px;
padding: 0px;

/* Changed: */
width: 720px;
margin: 0px auto;
padding: 0px;
}

#header img {
margin: 0px;
padding: 0px;

/* Changed: */
display: block;
}

- "allContent" was changed to:
#allContent {
width: 720px;
margin: 0px auto;
padding: 0px;
background: rgb(235,235,235) url("./t_files/erectlocutionBGWhite.jpg")
repeat-y top left;

/* Changed: */
border: 1px solid black;
border-top: 1px solid transparent;
}

- To get <h1> to work the same cross-browser you must specify both padding
and margin:
h1 {
padding: 0;
margin: 1em 0;
...
}

- In <body> "header" is placed first, then "allContent", and
"contentWrapper" removed. Everything else is the same.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Daniel Black]

Wow. This is a phenomenal effort. I feel like a teenage girl gushing,
but it's just refreshing.

Tony, please do take your time. This is--as the content should
evince--simply personal, and not a client project with a deadline (and,
yes, we should all be a little skeptical if I'd have a client with this
basic a need).

kchaya, I'll certainly play around with that stuff. I'd hate to go too
far to appease one poorly-constructed (from our perspective, anyway)
browser; but if a solution is found after some roughly arbitrary
measures, all of which can eventually be removed as I gather a bit more
sophistication, that'll do. Again, though I've got Zeldman's book
(haven't finished it, and I have precious little time to post at the
moment let alone read his book), and I appreciate the practical appeal
of standards (completely beside the purist's fastidiousness), I'm happy
if it basically just works for the time being.

Jim, I'd have preferred not to have the extraneous container; but I
felt that, given that I wanted to have the background tile properly
(providing the vertical separator via faux columns, and with my use of
the horizontal background image providing the faux border to the top of
the page), a container would suffice [NOTE: I'm leaving that, but I
now realize that I have that bg image tiling in the #allContent div,
and not the other]. I get the feeling that you may have used the
Firefox Web Developer extension and toyed with the CSS till it worked,
which I'd considered doing myself. I generally (and a little guiltily)
work on the site from work, so I wasn't comfortable going too far, and
I very much appreciate the lengths to which you went to provide what
should be an improved user experience. I'll try your changes this
weekend and see what I can do.

Thanks again, folks. A fairly humbling and educational experience so
far.

Daniel

[Chris Hughes]

In message <11**********************@g43g2000cwa.googlegroups .com>,
Daniel Black <mu****@yahoo.com> writes

So, well, I tried providing units for every measurement, to no great
affect. If anything, it seemed to stabilize IE 6's rendering of the
borders, such that they're mostly messed up without changing. I've
played with a few different values of floated-element width, margin,
and padding on the containing element, to no avail. I know I'm hacking
at my balsa wood with a machette and expecting something pretty.

Has anyone else ever noticed IE "unrendering" borders as you scroll?

I might need to get FF 1.5, but I want this to work properly in 1.0.7
still. And then there are the Netscape and Opera issues, neither of
which I have.

Download Opera (it's free) from http://www.opera.com/download/

--
Chris Hughes
"Reality is that which, when you cease to believe, continues to exist."
http://www.epicure.demon.co.uk

[Daniel Black]

Jim,

It works like a charm thus far. Thank you very much. I need to figure
out why my content widths, padding, and margins seemed to have been
screwing everything up, at least compounded by the extra <div>. It
shouldn't have created problems, though, logically, since it had no
padding or margin. Then again...

Thanks again,

Daniel

[Tony]

Well, it looks like you got it! I just checked everything in IE, FF,
Netscape and Opera - displays the same across the board. Good job!

[Jim Moe]

Daniel Black wrote:

It works like a charm thus far. Thank you very much. I need to figure
out why my content widths, padding, and margins seemed to have been
screwing everything up, at least compounded by the extra <div>. It
shouldn't have created problems, though, logically, since it had no
padding or margin. Then again...

You are welcome.
You could try restoring the div. It was just getting in the way while I
was working on the layout. It may be okay now.
The "border-top: 1px solid transparent" was necessary because of an odd
behavior in Mozilla. When I set "border-top: 0", Mozilla would add about
an em of space there.
Adding "display:block" to "#header img" gets rid of the space below the
image that is there to allow for descenders. An image (an inline element)
is normally positioned like text.

A typo slipped in: there is a missing space between "horridly-named"
and "blogoshere."
BTW: This is not a "Google Group". It is
comp.infosystems.www.authoring.stylesheets (c.i.w.a.s), a Usenet group.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)