Problem with list used as horizontal navigaton

[FrancesL]

Hello

I've started trying to lay out my web pages using css instead of html tables, and I've set up a horizontal row of images to act as the navigation on the page. The sizes of the images are specified in the html of the page, like so:

[CODE]
<li><a href="content2. html" rel="ajaxconten tarea"><img src="bumper-tab.jpg" alt="click for info on bumper" width="150" height="110" border="2"></a></li>

[kestrel]

so whats your problem?

[FrancesL]

Hello

Sorry - looks as though my message got cut off near the beginning. The problem is that I can't get the images to stay in one line - if the window is resized, or not big enough to begin with, the last one or two images go down onto a new line.

It is apparently particularly bad in IE viewed on a pc (I'm working on a Mac), because the images are much larger there to begin with.

I have tried specifying percentage or absolute pixel sizes for the images in the style sheet, but when I do that, the list no longer displays horizontally at all in IE, so I'm really stuck.

This is the code in the css sheet for the navigation:

#maintab {
		color: #003366;
		margin: 15px 0px 15px 0px;
		padding: 10px;
		z-index: 1;
		display: inline;
		padding-left: 10px }

#maintab ul {
		display: inline;
		overflow: hidden;
		width: 100%
		list-style-type: none; }
		
#maintab ul li {
		display: inline;
		overflow: hidden;
		list-style-type: none; }

#maintab li.selected {
		border-bottom: 20px solid #003366
		}
		
#maintab li.active {
		border-bottom: 20px solid #003366
		}

And this is the page itself:

http://www.independent living.co.uk/new-ad/new-ad.html

I'd be very grateful if you have any suggestions!

Thanks

Frances

[jaymanson]

Having a quick look at the code, you could remove the image dimensions from your HTML <img src> tags and add this to your CSS:

#maintab ul li img {
		width: 15%;
}

With 6 images across the screen, I guess 15% would be fine, but you could play with it a little. Do not specify a height, as doing so will ensure the image always keeps it's ratio - if you specify a height, it will rescale in both directions.

I can't see why this would change the way your list displays. It also tidies up the code a little.

Jay

[FrancesL]

Thanks, Jay, that works perfectly. Problem solved!

Much appreciated,

Frances