Unordered List (UL) causing me problems in IE

[punkrockbboy]

Hi all, i was hoping someone here could clue me in to what i have done wrong with my code, all i'm after is a simple left to right image gallery showing a row of photos.

I'm a mac user so i was able to check the results in Firefox, Safari and Opera and it displayed just fine, exactly as i wanted it, but when i finally got to check it on Internet Explorer the other day i found that the unordered list images slope down to the right, it's very annoying and i can't seem to get it to display right.

Here is the code:

HTML
<ul class="photos">
        <li class="photo01"><a href="gallery01.html"></a></li>
        <li class="photo02"><a href="gallery02.html"></a></li>
        <li class="photo03"><a href="gallery03.html"></a></li>
        <li class="photo04"><a href="gallery04.html"></a></li>
        <li class="photo05"><a href="gallery05.html"></a></li>
        <li class="photo06"><a href="gallery06.html"></a></li>
        </ul>

CSS
.photos {
		list-style-type: none;
		height: 112px;
		}
		
.photos li a {
		display: block;
		float: left;
		margin-left: 20px;
		}

.photo01 a, .photo02 a, .photo03 a, .photo04 a, .photo05 a, .photo06 a,
.classphoto01 a, .classphoto02 a, .classphoto03 a, .classphoto04 a, .classphoto05 a, .classphoto06 a {
		width: 78px;
		height: 112px;
		margin: 0px 5px 0px 5px;
		}

And here is a link to the site it is on: bgirl-firefly.co.uk

I'm thinking of installing Boot Camp on my mac in order to test my sites in IE rather than waiting a few days before i can get access to a PC, this sort of thing happens to me far too often and i'm sick of it, bloody useless IE, why must you cause me so many headaches??

Any help is greatly appreciated, cheers. :-)

[sreein1986]

please use your style sheets in another file and save it name.css

add this code in your html file

<link rel="stylesheet" type="text/css" href="name.css" />

and now check it

it's working in internet explorer also

[punkrockbboy]

Thanks for the quick response, but if you check the link i supplied and look at the source code you'll see i set up the css file separately in the first place when i started to build the site:

<link rel="stylesheet" type="text/css" href="firefly.css" />

Like i say, when i check it on Windows Vista with the latest version of IE the list of photos still displays in a sloping down fashion instead of straight across, the same goes for when my friend checks it on her computer running Windows XP with IE 6, i don't know what it is that i've done wrong here.

[sreein1986]

I didn't get in your reply wht r u asking second one

[punkrockbboy]

My CSS file is separate from the HTML, i never included them together in the first place is what i said.

The problem however is still present, the photos do not display properly.

[sreein1986]

now i understood can you send me files with diffrent attachments like style sheets is diffrent and html file is diffrent i will give solution to this

[moerpheus]

My CSS file is separate from the HTML, i never included them together in the first place is what i said.

The problem however is still present, the photos do not display properly.

Hey,
I think the way the photos are displayed in IE looks better than in firefox.
I like the slope style... But its ur web anyway...

Dont u think?

[mmann]

I had the same problem in the past and fixed it by changing the px sizes slightly. It made no difference to the look and feel but did fix the IE issue. It took a little experimenting but it worked in the end.

[punkrockbboy]

I asked on another forum and this guy spotted the problem straight away, i just needed to insert this:

.photos li{display:inline;}

into the CSS file, problem solved.

[MidiMagic]

The problem is in your style.

....{width: 78px;
     height: 112px;
     margin: 0px 5px 0px 5px;}

You have size styles and nonzero surrounding styles in the same style. This causes IE to behave differently than other browsers.

The other browsers put those 5px margins outside the 78px width, for a total width ofg 88px.

IE puts those 5px margins INSIDE the 78px width. This means the picture won't fit in the
space reserved for it. The browser drops into quirks mode, and tries to fit the pictures any way it can.