Forum Moderators: not2easy

Message Too Old, No Replies

floating images in IE

images don't float properly in IE

         

rocketscience

11:12 pm on Jul 28, 2004 (gmt 0)

10+ Year Member



When I float images, I'm having problems. It looks great in Safari and Mozilla, but the accursed IE renders them as having spaces between them. Argh! What is going on?

The HTML:


<div class="brandFrame">
<div class="brandNav" style="padding: 9px; " >
<img src="../images/retail/ranking.gif" width="54" height="22">
<img src="../images/retail/ranking/octothorpe.gif" width="8" height="22">
<img src="../images/retail/ranking/1.gif">
<img src="../images/retail/ranking/of.gif" >
<img src="../images/retail/ranking/2.gif">
<img src="../images/retail/ranking/2.gif">
<img src="../images/retail/level.gif" width="30" height="22">
<img src="../images/retail/levels/1.gif" width="16" height="22">
<img src="../images/retail/levels/2.gif" width="16" height="22">
<img src="../images/retail/levels/3.gif" width="16" height="22">
</div>
</div>

CSS:

.brandFrame { background: url(../images/retail/brandFrame.png) top left no-repeat; width: 252px; height: 180px; }
.brandNav { height: 22px; }
.brandNav img { margin: 0px; padding: 0px; border-width: 0px ; float: left; }

[edited by: SuzyUK at 5:02 am (utc) on July 29, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]

Stratus42

11:00 am on Jul 29, 2004 (gmt 0)

10+ Year Member



ahh... yes.. accursed indeed!

The problem you're having is the dreaded IE whitespace issue.

instead of :

<img src="whatever.gif">
<img src="whatever.gif">
<img src="whatever.gif">

try doing it like this:

<img src="whatever.gif"><img src="whatever.gif"><img src="whatever.gif">

IE should be able to then sort out that you really didn't intend a space to be there in the first place and stop putting it in!

:-)

cheers

L.

rocketscience

3:42 pm on Aug 3, 2004 (gmt 0)

10+ Year Member



Thanks Stratus. Someone on CSSCreator pointed out to me that after using a standard DocType <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> the float corrected itself.