CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxcss-float
luca
luca

Reputation: 12601

css bug in IE with float:right or similar

I have this code:

<body>

<ul style="padding:0px;margin:0px;list-style-type:none">
<li>
<div>
<img style="display:inline" src="asdf_files/eng.gif">&nbsp;
<img src="http://dl.dropbox.com/u/1663633/ita.gif">
<span style="float:right;width:80%;">
<a href="#">BLA BLA BLA BLA BLA</a>
</span>
</div>
</li>

</ul></body></html>

in firefox and chrome it's fine (rows are aligned) in IE 7 and 8 (I guess in 6 too..) the BLA BLA lines are not aligned..

any idea? suggestions on how to fix this?

TRY IT HERE: http://jsfiddle.net/TGGFh/

Upvotes: 1

Views: 2374

Answers (3)

thirtydot
thirtydot

Reputation: 228162

It's still irritatingly unclear.. why does nobody understand this? http://sscce.org/

Do you have a doctype as the very first line? Without one, you're in Quirks Mode, and you'll have (what I think is your) described behaviour in all versions of IE.

If you don't have a doctype, add one as the very first line such as <!DOCTYPE html>. That will fix your problem in IE9 and IE8.

Here's your jsFiddle, and it already works fine in IE9/8: http://jsfiddle.net/TGGFh/
That's because jsFiddle adds a doctype - view the source of: http://fiddle.jshell.net/TGGFh/show/light/

So, I think your actual problem is only in IE7.

As far as fixing IE7 goes, the easiest fix is to (in the HTML) move your span with float: right to before your two images.

See: http://jsfiddle.net/TGGFh/4/

Upvotes: 2

Kyle Undefined
Kyle Undefined

Reputation: 776

Try this: http://jsbin.com/ajiqa5/3/

It was your float:right;. It was overflowing the div and dropping down on a new line. I've fixed it for IE/Chrome but it should work on others.

Upvotes: 0

alquatoun
alquatoun

Reputation: 590

If you want to display data in a tabular fashion, why not use a table?

Upvotes: 0

Related Questions