Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Wardofsky

macrumors 65816
Original poster
Aug 6, 2002
1,194
0
I've been working on this new design for a bit and the things going wrong are associated with the browser displaying tables and fonts incorrectly.

I recently started using FireFox on my PC and so I started proofing my websites with it, and everything has gone the way I wanted it. But I figured that the majority Mac users use Safari and Windows use IE, so I checked them in those and the problems began.

Below is the comparison between the Win Firefox and IE, the Firefox shot is the way I want it. But you can see on IE that the red bar above the text is enlarged. Also the text alignment goes up for the text on the right.

Firefox:
winfire.jpg


IE:
winie.jpg


The Mac Firefox displays it the way I want, but Safari displays both the red bar differently and also the font (bottom left, next to the coloured image) goes funky:

macsaf.jpg


This is the actual page:
http://thefotokid.com/black2/contact.htm
 

FattyMembrane

macrumors 6502a
Apr 14, 2002
966
154
bat country
the html of this page is a nightmare. you should probably work on bringing it up to snuff before trying to solve this problem, lest you end up chasing your tail. there are no <html> tags, or a closing <body> tag and there's a lot of auto-generated javascript stuff for those rollovers that you could probably either re-write to be much smaller, or re-implement in css. i have a feeling what's causing the larger red box on IE and Safari is the way you've set up the table and the cell that contains "contact".

the font issue is most likely due to the fact that in the stylesheet (main.css), you've set the font to a variation of goudy, but if that font doesn't exist on the user's computer (goudy isn't included in a default mac os installation). the browser is defaulting to a sans because you haven't specified what to use in the absence of the requested font. try this

Code:
body,td,th { font-family: "Goudy Old Style", "GoudyOlSt BT", serif; }

this will make the browser use a serif in the event that goudy isn't on the user's system, and should look more like you intended.
 

Wardofsky

macrumors 65816
Original poster
Aug 6, 2002
1,194
0
FattyMembrane said:
the html of this page is a nightmare.

Ah nuts, I knew it would come down to the nitty-gritty code.
To be honest I know relatively little about code, I can tweak it, but everything else I do through Dreamweavers visual editor.

Maybe I should start from scratch again and make sure the code does make sense. Remove the java would be a good start.

Thanks for the help
 

James L

macrumors 6502a
Apr 14, 2004
850
1
always, Always, ALWAYS validate pages to ensure no coding errors first! You can validate your html/xhtml, and your css, on the w3 site:

http://www.w3.org

Browsers will display pages a certain way (usually correctly) when they encounter error free code. When they find code that has errors or is written incorrectly they go into what is called quirks mode, which essentially means the browser guesses at how to display the page.

Do a google for "quirks mode" and you will learn more!

The bottom line is to get the page rendering with no errors in standards mode, and that will usually clear up 90% of all errors. Then you can go from there and see what the deal is. Sometimes there are specific browser bugs, etc.

Get your code clean first!

Cheers,

James
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.