My website displayed exactly as I wanted it to in all versions of all browsers that I tested it with. Until I downloaded IE8. And IE8 doesn't display the photo gallery correctly.

Taking http://www.jrosworld.com/gallery/can...ery_index.html as an example page, what should be displayed, is a photo gallery where photos are displayed in rows of 3. In IE8, the photo gallery only displays in rows of 2.

So I thought that the easiest thing to do, would be to reduce the size of the photos so that they are small enough that IE8 displays them in rows of 3 as well. But the problem in doing that, is that firefox then shifts the photos around and it doesn't display correctly there anymore. And I'm pulling my hair out, because I cannot figure out what it is, that is making Firefox act like this. And also, why the f**k couldn't IE8 just act like IE7? It worked there.

This is the relevant part of the style sheet as it currently is.

div.photo {
    margin-left:4%;
    margin-right:4%;
    border-style:none;
    display:inline;
}

div.photo img {
    margin-top:25px;
    max-width:25.3%;
    min-width:25.3%;
    border-width:1px;
    border-style:solid;
    border-color:#0044AA;
    vertical-align:middle;
}

Altering this code to

div.photo {
    margin-left:4%;
    margin-right:4%;
    border-style:none;
    display:inline;
}

div.photo img {
    margin-top:25px;
    max-width:24.7%;
    min-width:24.7%;
    border-width:1px;
    border-style:solid;
    border-color:#0044AA;
    vertical-align:middle;
}

and the gallery displays correctly in IE8, but not in Firefox.

Altering the code to

div.photo {
    margin-left:4%;
    margin-right:4%;
    border-style:none;
    display:inline;
}

div.photo img {
    margin-top:25px;
    max-width:24.8%;
    min-width:24.8%;
    border-width:1px;
    border-style:solid;
    border-color:#0044AA;
    vertical-align:middle;
}

and the gallery displays correctly in Firefox, but not IE8.

And I've tested altering the min/max img width to something like 10 decimal places. There is no point that it works in both.

Similarly, I can alter this code to

div.photo {
    margin-left:3.7%;
    margin-right:3.7%;
    border-style:none;
    display:inline;
}

div.photo img {
    margin-top:25px;
    max-width:25.3%;
    min-width:25.3%;
    border-width:1px;
    border-style:solid;
    border-color:#0044AA;
    vertical-align:middle;
}

then it displays perfectly in IE8, but not in Firefox.

But if I alter it to

div.photo {
    margin-left:3.8%;
    margin-right:3.8%;
    border-style:none;
    display:inline;
}

div.photo img {
    margin-top:25px;
    max-width:25.3%;
    min-width:25.3%;
    border-width:1px;
    border-style:solid;
    border-color:#0044AA;
    vertical-align:middle;
}

then it displays perfectly in Firefox, but not in IE8.

If anyone can help me figure out, either what I can add to this code to make it work in both IE8 and Firefox, or what the problem is with either IE8 or Firefox, so I can fix it so that it works in both browsers, I'll be so greatful. Because this is really making me pull my hair out. I am totally stumped.

CALM DOWN and read this thread, I think it has the solution to your problem.

why the f**k couldn't IE8 just act like IE7?

Watch the language please.

IE8 was FINALLY made to be more standards-compliant than any of it's predecessors, although bugs are being discovered, which is no surprise whatsoever.

Unfortunately, I don't have IE8 installed anywhere, so I cannot be certain what is going on, IE8 should render much more closely to Firefox, but the linked thread, which references the need to use conditional comments and a separate "fixes only" css file is what you will likely need anyway.

This is how my document header currently looks:

<title>Photos of Gabriola Island BC, Canada</title>
    <meta name="description" content="The main photos page for the Gabriola Island leg of my round the world travelling and backpacking" />
    <meta name="keywords" content="Gabriola Island BC,Canada,photos,photographs,pictures,petroglyphs,Drumbeg provincial park" />
    <link rel="stylesheet" type="text/css" href="../../masterss.css" />
    <script type="text/javascript" src="../../masterjs.js"></script>

I don't fully understand all the code used here, so just to confirm how I should be entering it, if I was to create a stylesheet called "ie_ss.css" in my root folder, which would be my IE stylesheet, then would my document header therefore look like this? Or do I need to incorporate the <link> tag into the code somewhere?

<head>
    <title>Photos of Gabriola Island BC, Canada</title>
    <meta name="description" content="The main photos page for the Gabriola Island leg of my round the world travelling and backpacking" />
    <meta name="keywords" content="Gabriola Island BC,Canada,photos,photographs,pictures,petroglyphs,Drumbeg provincial park" />
    <link rel="stylesheet" type="text/css" href="../../masterss.css" />
    <!--[if IE]> <style type="text/css">@import "../../ie_ss.css";</style> <![endif]-->
    <script type="text/javascript" src="../../masterjs.js"></script>
</head>

Thanks for the help. That article was good for explaining what conditional comments were, but it didn't make it too clear how to implement them.

I typically do it this way:

<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if gt IE 6]>
<link href="ie7fixes.css" rel="stylesheet" type="text/css" /> <![endif]-->

Not sure why you want to use the @import, you actually run the risk of the dreaded 'flash of unstyled content" or FOUC, and the import takes longer.

Awesome, I got it figured out thanks!!!

Originally Posted by LadynRed

Not sure why you want to use the @import, you actually run the risk of the dreaded 'flash of unstyled content" or FOUC, and the import takes longer.

I was just copying the code from the thread linked to earlier. I've never used, or even heard of, conditional comments before. I wasn't sure if I'd be messing it up by taking out the @import.

In the end I just used one comment:

<!--[if gte IE 8]><link href="ie_override_ss.css" rel="stylesheet" type="text/css" /><![endif]-->

I've managed to write my site so, as far as I'm aware, it's always worked with IE (with a lot of effort), prior to IE8. I didn't want to make life harder for myself than it had to be by adding in 2 new stylesheets.

God I hate Internet Explorer!

Well, the ONLY thing that needs to be in those ie only stylesheets is JUST the rules to make IE behave, you don't need to duplicate the rest of the main stylesheet.