471,605 Members | 1,431 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

IE CSS hell

4
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.
Sep 10 '07 #1
8 1923
drhowarddrfine
7,435 Expert 4TB
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.
Sep 10 '07 #2
drhowarddrfine
7,435 Expert 4TB
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.
Sep 10 '07 #3
scrm
4
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
Sep 10 '07 #4
scrm
4
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
Sep 15 '07 #5
drhowarddrfine
7,435 Expert 4TB
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.
Sep 16 '07 #6
PaulVS
13
Hi,

I fixed it by using this CSS code:

Expand|Select|Wrap|Line Numbers
  1. #fjs-flickrphotonav {
  2.  
  3.     top: 0px;
  4.     margin-top: 43px;
  5.     position: absolute;
  6.     z-index: 0;
  7.     text-align: right;
  8.     margin-left: 593px;
  9.     color: #999999;
  10.     font-size: 10px;
  11.     float :left;
  12. }
  13.  
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
Sep 17 '07 #7
drhowarddrfine
7,435 Expert 4TB
Very good! To tell the truth, I think it's a hack, but if it works.... :)
Sep 17 '07 #8
scrm
4
Paul thanks, a float: left fixed the positioning of both of the problem divs in IE.

cheers both for your help.
Sep 18 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by .DLL hell II - The Evil Empire Strikes Back | last post: by
22 posts views Thread by Jim Hubbard | last post: by
2 posts views Thread by Nad | last post: by
21 posts views Thread by Nx | last post: by
1 post views Thread by GreatB | last post: by
18 posts views Thread by Dave Sauny | last post: by
3 posts views Thread by fyleow | last post: by
2 posts views Thread by Scott M. | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.