IE CSS hell

[scrm]

Hi there -

I've just redesigned my site (http://scandal.org ) as a simple photo gallery. I'm having some trouble getting it to display as I'd like on IE (7.0, Win). I'd like your advice on a few points:

1) Positioning

The design is very no-frills: 750px fixed width, a centred photo with a logo on the top left, navigation menu on the top right, a link to the photo's Flickr page on the bottom left, and a footer graphic on the bottom right. Each element is left- or right-justified depending on which side of the page it's on.

While Firefox and Safari render this correctly, IE displays the navigation menu a good few hundred pixels too far to the right, and shunts the photo link a few hundred pixels to the right.

Why is this? I'm using absolute positioning to get the elements to display exactly where I want them, which I figured was the easiest way. Could this be the problem, and is there a better way of doing this that would display correctly in all browsers?

2) Font

I'm using the Courier font. On a Mac, Firefox and Safari both display this as I'd like. On Windows, both Firefox and IE display the font slightly differently - the characters appear thinner. How can I get exactly the same font to display on both platforms?

Lastly, I'd be interested in any other comments on the code that you may have so I can optimise it.

cheers

Mehran

PS I should also note that I'm working on a Mac, using Coda, and I use the FSViewr script to pull the images out of Flickr - but this shouldn't have much of a bearing on the design.

[drhowarddrfine]

As to the font, Macs display fonts in a 'for publication' style, that is, anti-aliased, while Windows does not, hence the difference in looks.

I'm now looking at the first problem.

[drhowarddrfine]

I have to go but I'm wondering why the navigation is not inside the #header. Didn't quickly see why IE is placing it outside of #header.

You do have six html errors. Validate for that list.

[scrm]

Thanks for your response. I've rectified the HTML errors. The IE positioning problem persists.

The navigation div (#fjs-flickrphotonav) is generated by the gallery script I'm using (see the PS in my first post for a link). I couldn't find a way to include that specific div in the header, because as I understand it, all the div's relating to the gallery script are written out one after the other when the script runs. That's why I'm using absolute positioning with these divs to get the elements where I want them on the page - which seems to be causing this problem with IE.

Any guidance on this would be appreciated.

cheers

Mehran

[scrm]

Guys - sorry to chase but I still need help on this one. To summarise the problem:

I'm having trouble getting my site (http://scandal.org) to display properly with IE (7.0, Win). The design is very no-frills: 750px fixed width, a centred photo with a logo on the top left, navigation menu on the top right, a link to the photo's Flickr page on the bottom left, and a footer graphic on the bottom right. Each element is left- or right-justified depending on which side of the page it's on.

While Firefox and Safari render this correctly, IE displays both the navigation menu (#fjs-flickrphotonav) and the photo's Flickr link (#fjs-flickrlink) a few hundred pixels too far to the right, which breaks the whole design.

These two problematic divs are generated by the FSViewr gallery script I'm using to pull images out of Flickr. As I understand it, all the divs relating to the gallery script are written out one after the other when the script runs. So I'm using absolute positioning with these divs to get the elements where I want them on the page - which seems to be causing this problem with IE.

Any ideas? I have a feeling I'm missing something really obvious!

cheers

Mehran

[drhowarddrfine]

It's hard to see what the js is doing but seems to be generating the markup outside the header. Why IE is responding the way it does, I can't tell.

[PaulVS]

Hi,

I fixed it by using this CSS code:

#fjs-flickrphotonav {
 
    top: 0px;
    margin-top: 43px;
    position: absolute;
    z-index: 0;
    text-align: right;
    margin-left: 593px;
    color: #999999;
    font-size: 10px;
    float :left;
}
 

The float: left; solved the problem. IE excluded the logo image in the margin-right. While Firefox included this. A float solved this.

Greetings,

Paul

[drhowarddrfine]

Very good! To tell the truth, I think it's a hack, but if it works.... :)

[scrm]

Paul thanks, a float: left fixed the positioning of both of the problem divs in IE.

cheers both for your help.