Line seperator looks very different in IE 6

Forum Moderators: not2easy

Message Too Old, No Replies

Line seperator looks very different in IE 6

vikasvrao

10:57 pm on Aug 17, 2009 (gmt 0)

I have a simple div which I am using as a line seperator between 2 blocks of text.

While this looks as expected in firefox, safari and IE 7 and 8 but looks like very different, rectangular(height should be 1px, but looks more like 5?), and I'm not sure why.
Please help!

Thanks!

JAB Creations

4:26 am on Aug 18, 2009 (gmt 0)

Isn't IE simply special? Try setting the font-size...for some reason that comes to mind.

- John

vikasvrao

5:12 am on Aug 18, 2009 (gmt 0)

hmm, what do I set it to?

If you want to see how it looks, try this:

<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}

</style>
</head>
<body>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<div style="margin:1px 0; background:#eee; height:1px;"></div>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>

</div>

</body>
</html>

See the line seperator after the line "Free Web Building Tutorials" and if you can look at it in IE 6, you will see how different it looks...

vikasvrao

5:28 am on Aug 18, 2009 (gmt 0)

You were right!
I tried:
<div style="margin:1px 0; background:#eee;font-size: 1px; height:1px;"></div>

That works :) Thanks a lot.

swa66

10:48 am on Aug 18, 2009 (gmt 0)

Why not use the html element that's intended to be a separator instead of abusing an empty div ?

<hr> ...

Yes you can style them too.

JAB Creations

6:44 am on Aug 25, 2009 (gmt 0)

Swa66, vikasvrao's goal is to implement a purely CSS solution to fix the problem. Unnecessary (X)HTML works against SEO, in other words the less code/more content the better! ;)

- John

JAB Creations

6:46 am on Aug 25, 2009 (gmt 0)

vikasvrao, I forgot to mention, be sure to implement IE specific fixes in conditional comment style sheets. You don't want to end up looking at that code and removing it only to later see IE rendering as a mess.

- John

tangor

7:05 am on Aug 25, 2009 (gmt 0)

I have to agree with swa66 on this one. <hr> is your rule element...and using it as such will IMPROVE both code AND css.

swa66

9:39 am on Aug 25, 2009 (gmt 0)

I know and appreciate effort to just use CSS and not being allowed/able to change the (x)html.

But not being able to change the html isn't the case here as the OP is using inline CSS.

I'm by far not a SEO specialist, but if you seek to have a better content/size ratio, it seems "<hr>" is _far_ shorter than "<div style="margin:1px 0; background:#eee;font-size: 1px; height:1px;"></div> " and then style it from a stylesheet. Even using a stylesheet with a "<hr>" is still a serious factor shorter than "<div class="xyz"></div>" ... and it has the semantics of <hr> fully on it's side.

JAB Creations

12:01 am on Aug 26, 2009 (gmt 0)

Give it a class, there are exceptionally few if any instances where inline styling is necessary.

- John

D_Blackwell

12:55 am on Aug 26, 2009 (gmt 0)

<div style="margin:1px 0; background:#eee; height:1px;"></div>

I agree that what is being described fits purpose of the <hr />. it's purpose is to 'buffer' content. "The amount of vertical space inserted between a rule and the content that surrounds it..."

Don't see how a <hr /> would impact SEO at all, certainly not worse than a 'junk' <div>.