homepage Welcome to WebmasterWorld Guest from 54.227.11.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Line seperator looks very different in IE 6
vikasvrao




msg:3973729
 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.

<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




msg:3973864
 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




msg:3973882
 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="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




msg:3973886
 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




msg:3974038
 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




msg:3978142
 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




msg:3978143
 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




msg:3978145
 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




msg:3978167
 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




msg:3978589
 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




msg:3978608
 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>.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved