Alignment problem in IE - OK on Firefox - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Alignment problem in IE - OK on Firefox

bob742

9:18 am on Sep 29, 2004 (gmt 0)

I am trying to make a bar chart with CSS. My cunning plan is to create spans next to each other which are all the same height (300px) but the span is part padding and part background.

The following works fine in Firefox but not in IE6. A small value (less than about 10px) shifts down the span. Hard to explain, but see the example. Can anyone suggest a workaround - or spot the problem.

Bob

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
.bar { background-color:green; width:30px;margin-left:5; float:left}
</STYLE>
</HEAD>
<BODY>
<DIV>
<SPAN STYLE="height:135px; margin-top:165; " CLASS="bar"></SPAN>
<SPAN STYLE="height:200px; margin-top:100; " CLASS="bar"></SPAN>
<SPAN STYLE="height:1px; margin-top:299; " CLASS="bar"></SPAN>
<SPAN STYLE="height:135px; margin-top:165; " CLASS="bar"></SPAN>
</DIV>

</BODY></HTML>

jetboy_70

11:01 am on Sep 29, 2004 (gmt 0)

IE is leaving space for text in the spans. Try adding:

font-size: 0;
(and possibly line-height: 0;)

to your .bar class.

Also add units (px) to your margin-top declarations.

bob742

11:22 am on Sep 29, 2004 (gmt 0)

font-size: 0 fixed it!

Many thanks.

Bob