I’m writing a website for someone I work with - it’s for their holiday villa in turkey.
I’ve got it looking OK in IE, but in Firefox / Mac browsers it just looks awful 
Any tips on what I need to do to make it look OK across different browsers? :smack:
This is screenshot of what it should look like:
http://img164.imageshack.us/img164/9869/screenshot2az.jpg
This is what it looks like on a mac (firefox is similar):
Will have a look for you, but before I continue - why on earth are you using frames? There’s no pupose for them in context, so I respectfully suggest you desist.
I see “Microsoft Frontpage” in the page source, which explains a lot. Are you able to change the HTML yourself, or are you using FP to autogenerate? If the latter, it’s a bit difficult to help.
No frames used at all - some CSS in there though
Not autogenerated in FP, just use that as a WYSIWYG tool - 99% of the coding is done by me (which may explain a lot…)
Any tips welcome - am happy to tweak any of the code required!
ah - the frames info is there because I have a domain redirect.
the page is hosted at www.robstanton.plus.com/turkey - if you “view source” from that page, you’ll get the full coding
Okay, here are the problems:
Don’t specify a width in your “cont” div
Do specify the correct height in your “cont” div, which is 400px
Don’t specify a height in your “nav” div (just use a BR or spacer gif before your nav text)
Close all paragraph tags, and remove the one around your nav text
Make sure all widths are the same - 756px
Don’t repeat your CSS in both your stylesheet and the HTML
All your CSS references should be CLASS and not ID.
I think that was everything.
Oh, and here’s the lesson:
Design in Firefox, and it should work okay in IE. Design in IE and it probably won’t work in Firefox.
(most of the time anyway, there are a couple of quirks you may stumble on if you do it in FF first)
Here’s a fixed version. I updated index.html and stylesheet.css.
Here were the problems I saw (if I remember them correctly):
-Firefox and IE interpret padding differently. I think FF adds padding onto the existing width and IE subtracts it from the existing width… or maybe it was the other way around? That caused some things to stretch beyond their intended limits.
-The bottom rounded corners img was placed in the wrong place; it should’ve been inside the “bodyblock” div. That causd it to appear in the wrong place in FF, though IE magically dealt with it.
-The specified height for the “cont” div was too low and also redundant; it was specified in both the stylesheet and the html.
Really appreciate that - thanks a million.
Will have a look through the changes and make sure I see where I went wrong.
Anothe vote for GuanoLad’s advice. Designing anything in IE first is asking for trouble. Designing for Firefox/Safari first and them tweaking things in IE is the way to go, but you’ll still tear your hair out trying to accommodate IE’s quirks so it won’t break your design. Double the hair-tearing if you plan to be an “ideologically pure” web designer, make full use of CSS 2.0, and shun table-based layouts – anything that’s cutting-edge and standards-compliant is guaranteed to get mangled by IE.
(And if you’re embedding Flash animation, make sure you get a fix for the “Click to activate this object” screwup that came out of Microsoft last month. That one bit me on the rear last week…)