Welcome to WebmasterWorld Guest from 107.21.175.43

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)

5+ Year Member



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

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

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)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5+ Year Member



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="container">

<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)

5+ Year Member



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)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



<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>.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month