# CSS Absolute positioning Mac and Windows



## HateEternal (Jan 27, 2005)

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.


----------



## HateEternal (Jan 27, 2005)

Ok I think it was just a bad choice of fonts now that I look at it more.


----------



## Arden (Jan 27, 2005)

Can we see?


----------



## HateEternal (Jan 27, 2005)

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.


----------



## mdnky (Jan 28, 2005)

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.


```
body {
     font-size: 75%;
     }
```


----------



## Darkshadow (Jan 28, 2005)

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?


----------



## HateEternal (Jan 29, 2005)

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.


----------



## Arden (Jan 29, 2005)

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.


----------



## mdnky (Jan 29, 2005)

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


----------



## Darkshadow (Jan 29, 2005)

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.


----------



## mdnky (Jan 29, 2005)

Yea...I noticed that after posting.  Looks to be a bug in Safari.


----------

