CSS Absolute positioning Mac and Windows

H

HateEternal

Mac Metal Head
I used a lot of absolute positioning of elements on a page I had to make for a class. Funny thing is, I developed it on my Mac, but tested it on my PC because the monitors are right next to each other and I don't have an adapter to do dual monitors on my Mac.

Anyways my point is that it looks flawless on the PC but terrible on the Mac. It is almost like 1px on a PC is a different size on a Mac. In both IE and Firefox on my PC it looks identical. But Firefox and Safari on the Mac have things positioned wrong by several pixels.

Something I should know about or maybe I just suck? This was my first attempt at using CSS to really define a page. It works... on a PC but maybe there were some key things i missed to make it work on both platforms.
 
http://students.uww.edu/rebholzpt30/zengarden-sample.html

I made it for a class, it is quite ironic that it doesnt look right on a Mac.

I can get a screenshot up later when Im not on my gf's slow connection

basically the text is smaller on the mac so it messes with the replacing headers with images trick. I prolly could figure out a way to make it work if I get a chance, I just did it the first way that popped into my head and it worked on what I was looking at.
 
Problem is the use of absolute positioning using pixels. The fonts
are proportional depending on the actual font and the size set on
the system. Try using EMs (for the positioning) and see what that
does for you. There still might be some minor differences, but
they won't be nearly as bad as what's happening now.

Make sure you set a base font size in the body tag as a percentage
to ensure IE handles the EMs correctly.

PHP: 
body {
     font-size: 75%;
     }
 
Hmm, you could probably have better control of the text placement if you broke up each individual section, instead of just using #supportingText. I know that would make the css longer, but in the end you would have more control of its layout.

BTW, cool design. Are you planning to submit it back to Zen Garden afterwards?
 
Thanks for the suggestions, I will look into fixing it at some point.

I don't know If i will submit it, the graphics arn't really original. Thanks though.
 
They may not be original in of themselves, but there are very few sites out there that recreate the OS X user interface, much less do it with brushed metal, split panes (side note: any chance on using Javascript to make this work like its application counterpart? :)) and dialog boxes.
 
I tried doing a few that mimic the finder in Panther...never got around to finishing them. It's not an easy task. When you're limited by preformed HTML, it's a lot harder.

Arden: He's trying for a submission to the Zen Garden. You can't modify the HTML at all, just the CSS file. Using JS would totally destroy the whole point behind the Zen Garden any ways.


-----
EDIT
-----

Got bored, so I played a bit...ended up totally redoing the CSS. Works in Safari and Firefox. Has an issue in IE 5.2 Mac. Opera 7.54 has a minor and weird issue...the menu's there, but it isn't visable. You can still click on the links though...just blindly. WTG Opera! :) Haven't loaded VPC, just redid my computer, so I can't check out any of the Win browsers.

http://test.designs4efx.com/HateEternal/

http://test.designs4efx.com/HateEternal/Archive.zip
 
Hmm, when you scroll the "main" area, it ends up scrolling up the dialog window and the content of the split pane up in Safari for me. Works fine in Firefox, though.
 
Yea...I noticed that after posting. Looks to be a bug in Safari.
 
You must log in or register to reply here.
Back
Top