Image float problem

I'm trying to get two images side by side at the top of the page. When in dreamweaver they work but in safari the second image goes below first and is consequently unviewable.

http://www.timothy-clark.com/equipment/punchbags.html

It seems to create a 10-15 pixel gap between them. Could you help me, maybe look at css?

The images, together, come to a width of 750 - the same width as wrap.

I'm none too cool on CSS but, could it be:

Code: Select all

<div id="wrap">

(Maybe make the wrap 1 pixel larger?)

(problem exists in IE6 too)

well i tried making the images 5-10 pixels smaller and no luck.

Had a look @ your CSS but I'm outta my depth so I'd better leave ya to the big boys.

your problem is with this css code.

Code: Select all

#logo {
	background: #000;
	height: 92px;
	width: 750px;
	
	border-style:none;
	float:left;
	padding: 0;
	margin: 0;
	}
	
#logo .img {
	padding: 0;
	margin: 0;
}

Remove the . from in front of img. You are not defining a class called img, you are refering to img's contained inside an element with an id of logo.

The float: left; needs to be in the '#logo img' style definition and not in the '#logo'. At the moment your floating the containing div left and not the images it contains.

brilliant! thanks.

I'm using IE6 (1024x768) and your two header images are lined up in it now, but there appears to be a white gap just to the right of the second, and the line beneath is broken to the left (start of the NavBar).