homepage Welcome to WebmasterWorld Guest from 54.145.183.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Line seperator looks very different in IE 6
vikasvrao

5+ Year Member



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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+ Year Member



 
Msg#: 3973727 posted 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

5+ Year Member



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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

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



 
Msg#: 3973727 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3973727 posted 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