Web Design Forum: IE vs the rest - CSS bug - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

IE vs the rest - CSS bug

#1 User is offline   scaz182 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 365
  • Joined: 01-April 08
  • Reputation: 2
  • Gender:Male
  • Location:Reading UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 08 April 2009 - 11:47 PM

Hi people,

Does anybody know a fix for this bug with IE 7... The code should help to explain it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

p {
   border:solid #000 2px;
   margin:15px 0;
}


div#box {
	border:solid #000 2px;
	height:55px;
	width:200px;
	padding:25px;
}

</style>

</head>

<body>

<div id="box">
<p>A test paragraph</p>
</div>

</body>

</html>


So all there is is a <div> containing a <p>.

The <p> has a top and bottom margin of 15px

The <div> has a padding of 25px on all sides.

Firefox, Chrome, Safari and Opera all show a 40px gap between the paragraph and the <div>'s top border...which makes sense as that is 15px from the <p>'s margin plus 25px from the <div>'s padding.

Whereas IE 7 (probably 6 as well) likes to forget about <p>'s margin and leaves just a 25px gap between the paragraph and the <div>'s top border.

Has anyone ever come across this before and if so how do you combat it?
0

#2 User is offline   scaz182 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 365
  • Joined: 01-April 08
  • Reputation: 2
  • Gender:Male
  • Location:Reading UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 09 April 2009 - 11:07 AM

Hope no one minds if I bump this up.
0

#3 User is offline   peterpearson 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 53
  • Joined: 01-April 09
  • Reputation: 0
  • Location:London, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 09 April 2009 - 05:58 PM

Have a look into IE collapsing margins: http://www.search-this.com/2007/05/07/wher...one-or-why-111/
0

#4 User is offline   mr p 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 325
  • Joined: 09-December 08
  • Reputation: 6
  • Gender:Male
  • Location:London
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 09 April 2009 - 07:19 PM

try using padding instead of margin on <p>. got a feeling that worked for me on something like this.

it seems a bit much to do a separate css file, but if you have any other IE bugs you can use conditional comments to make it behave.

pop this in your head:

<!--[if IE 7]>
	  <link rel="stylesheet" type="text/css" href="ie7_hacks.css" media="screen" />
  <![endif]-->

0

#5 User is offline   scaz182 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 365
  • Joined: 01-April 08
  • Reputation: 2
  • Gender:Male
  • Location:Reading UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 09 April 2009 - 08:00 PM

View Postpeterpearson, on Apr 9 2009, 18:58, said:

Have a look into IE collapsing margins: http://www.search-this.com/2007/05/07/wher...one-or-why-111/


Cheers for that link, I've never looked into collapsing margins to be honest...quite interesting and helps to explain IE's bug:

It appears that IE will collapse the <p>'s margin not only if the containing <div> has a margin but also if it has padding!

Firefox, chrome and safari etc. only collapse the <p>'s margin if the containing <div> has a margin...as the specification states.


View Postmr p, on Apr 9 2009, 20:19, said:

try using padding instead of margin on <p>. got a feeling that worked for me on something like this.

it seems a bit much to do a separate css file, but if you have any other IE bugs you can use conditional comments to make it behave.

pop this in your head:

<!--[if IE 7]>
	  <link rel="stylesheet" type="text/css" href="ie7_hacks.css" media="screen" />
  <![endif]-->


Yeah, for something like this I don't like using a separate stylesheet, starts to defeat the point of a stylesheet.

I've ended up setting more padding for IE using the asterix trick:

* padding:40px;


Cheers people.
0

#6 User is offline   nickyoung 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 355
  • Joined: 24-October 08
  • Reputation: 1
  • Gender:Male
  • Location:Cayman Islands
  • Experience:Intermediate
  • Area of Expertise:Entrepreneur

Posted 09 April 2009 - 11:43 PM

Personally I avoid all use of padding-left or padding-right...because IE can't get it right....pretty lame huh?
0

#7 User is offline   scaz182 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 365
  • Joined: 01-April 08
  • Reputation: 2
  • Gender:Male
  • Location:Reading UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 09 April 2009 - 11:56 PM

View Postnickyoung, on Apr 10 2009, 00:43, said:

Personally I avoid all use of padding-left or padding-right...because IE can't get it right....pretty lame huh?


I've never had a problem with left and right padding before (maybe in IE6 actually) only the top padding like above.
0

#8 User is offline   Dorset Web Designs 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 19
  • Joined: 26-February 09
  • Reputation: 0
  • Location:Dorset, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 10 April 2009 - 01:57 AM

Personally I would start with p {margin: 0px auto; padding: 0px; line-height: whatever em;} Then use span class for all of your <p>
If you bring all your <p> to ground zero from the start and build from there. All the browsers seem to understand that.

Hope this helps
0

#9 User is offline   scaz182 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 365
  • Joined: 01-April 08
  • Reputation: 2
  • Gender:Male
  • Location:Reading UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 10 April 2009 - 02:58 AM

View PostDorset Web Designs, on Apr 10 2009, 02:57, said:

Personally I would start with p {margin: 0px auto; padding: 0px; line-height: whatever em;} Then use span class for all of your <p>
If you bring all your <p> to ground zero from the start and build from there. All the browsers seem to understand that.

Hope this helps


Yeah I bring everything to a neutral basis as well (using this) but this problem isn't related to any browser default styling but in fact is a CSS rendering bug in IE7 by which the margin of the <p> element is collapsed even though the containing <div> has padding (and doesn't even have a margin).

Whereas the specification says this should not be the case:

Quote

"In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."


Its as if IE treats the padding on the <div> as a margin.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users