473,809 Members | 2,940 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE CSS hell

4 New Member
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 2079
drhowarddrfine
7,435 Recognized Expert Expert
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 Recognized Expert Expert
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 New Member
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 New Member
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 Recognized Expert Expert
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 New Member
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 Recognized Expert Expert
Very good! To tell the truth, I think it's a hack, but if it works.... :)
Sep 17 '07 #8
scrm
4 New Member
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

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

Similar topics

0
1598
by: kayodeok | last post by:
We're Mad As Hell And We're Not Going To Take It Anymore http://hownow.brownpau.com/index.html The web is a mess. We're tired of this deluge of <font> tags, nested tables, spacer GIFs, and broken HTML. We're tired of having to make separate pages for Netscape 4 users and adding "?printable=1" query strings to URLs just to come up with text only output. We're tired of unclosed tags and unquoted HTML tag attributes. We're tired of <p>...
3
2052
by: .DLL hell II - The Evil Empire Strikes Back | last post by:
I can't figure out how this side-by-side assembly stuff it supposed to work. I have a stack of four assemblies A has no references B references A & C C References A & B D References A, B and C During a built I invariably end up with the wrong assemblies in the final bin directory even though I have
22
2317
by: Jim Hubbard | last post by:
I am reposting a portion of a thread that I am involved in under a new topic because it seems that there are still people that believe the whole "DLL Hell" myth. I hope I can shed some light on this deception for some..... "Michael A. Covington" <look@ai.uga.edu.for.address> wrote in message news:%23tKbygELFHA.576@TK2MSFTNGP15.phx.gbl... > > "Jim Hubbard" <reply@groups.please> wrote in message
2
2193
by: Nad | last post by:
Hello, dll hell has been eliminated in .NET using assembly versioning. I am new in .NET and would like to know if there is any dll-hell-equivalent in .NET Windows or Web development environments that need to be addressed/aware of? Thank you.
21
1691
by: Nx | last post by:
Hi I am unpacking a list into variables, for some reason they need to be unpacked into variable names like a0,a1,a2....upto aN whatever is in the list. How to create the variables dynamically ? I am looking for something like pseudo code line follows :
1
1729
by: GreatB | last post by:
Bill Gates died in a car accident. He found himself in Purgatory being sized up by God . .. "Well, Bill, I'm really confused on this call. I'm not sure whether to send you to Heaven or Hell. After all, you enormously helped society by putting a computer in almost every home in the world and yet you created that ghastly Windows 95. I'm going to do something I've never done before. In your case, I'm going to let you decide where you
18
2028
by: Dave Sauny | last post by:
Ok, its a friday, I'm at work and I cant get this to work: I have 3 listboxes on one tab control page. when i select an item in listbox1 i want whatever is selected on the other 2 listboxes unselected. when listbox2 is selected, 1 and 3 should have no items selected and the same with listbox 3. Sounds simple... should be simple! I have tried listbox.clearselected(), listbox.selectedindex=-1 and beating it with a large stick. But so...
3
1634
by: fyleow | last post by:
I just spent hours trying to figure out why even after I set my SQL table attributes to UTF-8 only garbage kept adding into the database. Apparently you need to execute "SET NAMES 'utf8'" before inserting into the tables. Does anyone have experience working with other languages using Django or Turbogears? I just need to be able to retrieve and enter text to the database from my page without it being mangled. I know these frameworks...
2
2047
by: Scott M. | last post by:
I need a little help please... I'm simply trying to set up a very basic event for a class and then create an event handler for that class in a Console application. I think I'm very close, but I'm missing something. Here's what I've got... //Abbreviated class code using System; namespace foo
0
9603
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10391
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10121
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7664
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6881
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5550
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5690
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3862
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3015
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.