[css-d] bottom border vs padding in IE, retry

[Trevor Nicholls]

Hmm. I see that putting my tiny HTML file on freehomepage.com has caused it
to be engulfed by an advertising monster. If it helps, the relevant bits of
the problem are this:

HTML -

 html
  head
   link rel=stylesheet type=text/css href=gloss.css
  /head
  body
   div class=gloss
div class=head/div
div class=entry
 p/p
 p/p
/div
   /div
  /body
 /html

CSS -

  body {
font-family: Arial,sans-serif;
font-size: small;
color: black;
  }

  div.gloss {
border: 1px solid black;
  }

  div.head {
color: black;
background: #c0c0c0;
font-size: 133%;
margin: 0;
padding-left: 0.5em;
padding-right: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
  }

  div.entry {
color: black;
background: #e0e0e0;
margin: 0;
padding-left: 0.665em;
padding-right: 1em;
padding-top: 0;
  /*  padding-bottom: 0.2em; */
  }

  p {
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
  }


With the div.entry { padding-bottom: 0.2em; } line commented out Firefox
looks OK but IE7 drops the border.
With the padding restored the border appears in both browsers.

If I comment out the padding-bottom line again, but add a border: 1px solid
red to the div.entry block I see both a red and a black border.

I've tried Google, but it doesn't want to be my friend on this one.

Cheers
T
 
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Trevor Nicholls
Sent: Friday, 11 January 2008 4:13 p.m.
To: css-d@lists.css-discuss.org
Subject: [css-d] bottom border vs padding in IE

Hi

I'm coding up a simple glossary function and have found that IE loses the
bottom border of my display when the final div has no bottom padding.

A simple example:
http://trevor.freehomepage.com/glossary_documentation.html


The stylesheet is 
http://trevor.freehomepage.com/gloss.css

In Firefox this displays as expected, but in IE7 the bottom border is
missing. If I restore the line which is commented out in the div.entry
then IE displays the border.

Can somebody please explain why this is so?

Cheers
Trevor


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bottom border vs padding in IE, retry

[Gunlaug Sørtun]

Trevor Nicholls wrote:
 Hmm. I see that putting my tiny HTML file on freehomepage.com has 
 caused it to be engulfed by an advertising monster.

It does indeed complicate things a bit, and parts of your layout gets
hidden by ads in IE6. I think you need a better place to serve your work.

 I'm coding up a simple glossary function and have found that IE 
 loses the bottom border of my display when the final div has no 
 bottom padding.

 http://trevor.freehomepage.com/glossary_documentation.html

IE/win (all versions) needs its Layout[1].

The addition of...

div.gloss {
height: 1% /* hasLayout trigger */;
}

...will stabilize IE's rendering-engine around that point, and make it
render that container and its border as intended - regardless of styling
on elements within.

Declaring a similar 'hasLayout' trigger on '.entry' will have the same
effect, but is not as reliable if the amount of content grows. Same goes
for a padding or a border on '.entry', which engages and counteracts
other unstable/buggy parts of IE's rendering engine.

Since this is all caused by a set of genuine IE bugs, the article[1] is
the only somewhat complete description I can give you for what's going
on and how to deal with them.

regards
Georg

[1] http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/