2 replies [Last post]
rocketscience
Offline
Regular
Calgary, AB
Last seen: 16 years 18 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

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? You can see a test page here http://threespeedpress.com/dev/float/test/
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; }
[/code][/url]

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

floating images in IE

Your Doctype is old, and therefore your page puts browsers in Quirks Mode.

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.

I tried other ways before doing this but could not get it to work. Looks like you will have to upgrade the doctype.

Regards
Day

The only way to learn is to do it yourself

rocketscience
Offline
Regular
Calgary, AB
Last seen: 16 years 18 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

floating images in IE

Thanks Daybreak_0. That fixed it; I should have hit upon that. If all else fails, its the doctype!