Help with CSS (Layout screws up in IE on my Mac)

[eph115]

Hello all,

I have a question hopefully someone here can answer.

I'm not quite sure what is going on. The page renders correctly in Safari and NN7, but is choking in Internet Explorer 5.2.

Here is the link to the page...
http://cs.sunyit.edu/~yerdonj/IDT

Here is a link to the CSS...
http://cs.sunyit.edu/~yerdonj/IDT/layout/IDT.css

Also, if you want to see what it looks like on my machine, I attached some screenshots of the site on my machine (Mac G4/OS X.2) using Safari and IE 5.2.

Anyone have an idea of what is happening?
Any help is greatly appreciated,
eph

 

[uoba]

Simple answer... Absolute positioning.

Your site is simple enough not to use absolute positioning (apart for perhaps the pop-out menus, but maybe not even these).

You should get used to position within the flow of a html document. Try and position with the margin attribute and a bit of padding. Also, the float attribute might help with your sidepanel.

To be absolutely honest, whilst your intentions are very good with regards to CSS/XHTML, there's a long way to go before it 'fits in' with these conventions.

But don't worry, it's quick and easy. If you can, get your hands on Designing with Standards by Jeffrey Zeldman, or checkout a few of the relevant sites:

http://www.alistapart.com
http://www.w3c.org/Style/css

These are only a few, and I don't have the time right now to go through your work thoroughly, but hopefully someone else'll be along soon to help out

 

[azrad]

i would have used <table> instead...

i works fine with xml-coding... since the <table> itself follows xml tagging...

 

[Da_iMac_Daddy]

Hey I almost like the first picture in IE better than how it shows up in Safari. In my opinion you have too much white space. Basically what I'm saying is that if you moved your rollover menu up closer to the title it would look really good. Also the rollovers you have don't really stand out when you hover over the text boxes. I think something like an outline would make it pop more. I dunno you decide.

But just my opinion keep it up

 

[eph115]

Thanks for all the help everyone

I'm buying the book by Zeldman.
That design is the second; at this point it's all about the structure. Content is still coming...

 

[Darkshadow]

The problem with IE might be that you didn't give it all the info for absolute positioning. Mostly, you just gave it the top: and left: elements but not the right: and bottom: ones. If you don't want to set them to anything in particular, you can set them to auto (i.e. right: auto and bottom:auto).

This may or may not be the problem with IE, but it will be a problem in Netscape or Mozilla.

 

[Arden]

I think the problem is that you have too many positional attributes set to a certain percent instead of an absolute value. Try resizing the page in IE: notice how the content starting with The Master of Science, and the blue box as well, move along with the page. I don't think IE completely supports absolute % positions, as that part doesn't start 50% down the page.

You should set some of these values to pixels instead of % and see if you can get something that you like.