CSS Clear and <hr/> vs <br/>

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Any ideas why IE8 would extend a container past an <hr/> element that clears both, but not a <br/> ?

Neither element has a single rule that applies to it in the stylesheet.
There isn't a single wildcard (*) selector in the stylesheet either.

Attachments:
br-version.gif

This is the version with <br style="clear:both;"/>



Attachments:
hr-version.gif

This is the version with <hr style="clear:both;"/>

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

<br /> is an inline element and <hr /> is block? Maybe. Just guessing.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

That does sound plausible. IEs "has layout" internal property or whatever it is came to mind. Giving the <br/> a display of block doesn't appear to make any difference though.

I've gone to a different layout where each category has its' own blue header so this isn't a pressing issue for me. It's still a curious quirk though.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

try giving the <br/> a display block, a height and a width. That would force the hasLayout in IE.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Title</title>
</head>
<body>
   <div style="background:#eee;">
      <div style="background:#ccc; width:100px; height:500px; float:right; margin-top:5px;"></div>
      stuff
      <br style="clear:both; width:1500px; height:10px; display:block; background:#f00;"/>
   </div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.    <title>Title</title>
  5. </head>
  6. <body>
  7.    <div style="background:#eee;">
  8.       <div style="background:#ccc; width:100px; height:500px; float:right; margin-top:5px;"></div>
  9.       stuff
  10.       <br style="clear:both; width:1500px; height:10px; display:block; background:#f00;"/>
  11.    </div>
  12. </body>
  13. </html>
  14.  


Code: [ Select ]
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)


Attachments:
odd.png
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

That user agent didn't look right when I posted it. I double-checked my "about IE" dialog box and I'm indeed on IE8.

Come to find out, my local intranet for some reason is automatically being put into IE7 compatibility mode.

When I put that test file on a remote server, or even remove my local server from my local intranet zone, it drops the container down below the darker gray box like expected.

I moved to this test page just to make sure of the UA being used.

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Title</title>
</head>
<body>
   <div style="background:#eee;">
      <div style="background:#ccc; width:100px; height:500px; float:right; margin-top:5px;"></div>
      <?php echo $_SERVER['HTTP_USER_AGENT']; ?>
      <br style="clear:both; width:1500px; height:10px; display:block; background:#f00;"/>
   </div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.    <title>Title</title>
  5. </head>
  6. <body>
  7.    <div style="background:#eee;">
  8.       <div style="background:#ccc; width:100px; height:500px; float:right; margin-top:5px;"></div>
  9.       <?php echo $_SERVER['HTTP_USER_AGENT']; ?>
  10.       <br style="clear:both; width:1500px; height:10px; display:block; background:#f00;"/>
  11.    </div>
  12. </body>
  13. </html>
  14.  
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

In IE8s "tools -> compatibility view settings" there is a checkbox labeled "Display Intranet sites in compatibility view". Definitely something I'm going to have to remember.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 25 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.