# web design crew - advice needed on browser compatibility
**URL:** https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623
**Category:** Cafe Society
**Created:** [May 21, 2006, 11:34am UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623 "2006-05-21T11:34:25Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Wallenstein](https://boards.straightdope.com/u/Wallenstein)
#### Post date: [May 21, 2006, 11:34am UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/1 "2006-05-21T11:34:25Z")
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:
[www.thestantons.net/turkey](http://www.thestantons.net/turkey)
This is screenshot of what it _should_ look like:
[http://img164.imageshack.us/img164/9869/screenshot2az.jpg](http://img164.imageshack.us/img164/9869/screenshot2az.jpg)
This is what it looks like on a mac (firefox is similar):
[ ](http://img.photobucket.com/albums/v320/mrschop69/villa.gif)
---
### Author:  [@jjimm](https://boards.straightdope.com/u/jjimm)
#### Post date: [May 21, 2006, 11:40am UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/2 "2006-05-21T11:40:21Z")
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.
---
### Author:  [@jjimm](https://boards.straightdope.com/u/jjimm)
#### Post date: [May 21, 2006, 11:42am UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/3 "2006-05-21T11:42:41Z")
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.
---
### Author:  [@Wallenstein](https://boards.straightdope.com/u/Wallenstein)
#### Post date: [May 21, 2006, 12:11pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/4 "2006-05-21T12:11:36Z")
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!
---
### Author:  [@Wallenstein](https://boards.straightdope.com/u/Wallenstein)
#### Post date: [May 21, 2006, 12:14pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/5 "2006-05-21T12:14:00Z")
ah - the frames info is there because I have a domain redirect.
the page is hosted at [www.robstanton.plus.com/turkey](http://www.robstanton.plus.com/turkey) - if you “view source” from that page, you’ll get the full coding
---
### Author:  [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [May 21, 2006, 1:20pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/6 "2006-05-21T13:20:57Z")
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.
---
### Author:  [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [May 21, 2006, 1:24pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/7 "2006-05-21T13:24:18Z")
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)
---
### Author:  [@Reply](https://boards.straightdope.com/u/Reply)
#### Post date: [May 21, 2006, 1:29pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/8 "2006-05-21T13:29:13Z")
Here’s a fixed version. I updated [index.html](http://vd9.net/index.html.txt) and [stylesheet.css](http://vd9.net/stylesheet.css.txt).
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.
---
### Author:  [@Wallenstein](https://boards.straightdope.com/u/Wallenstein)
#### Post date: [May 21, 2006, 3:16pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/9 "2006-05-21T15:16:06Z")
Really appreciate that - thanks a million.
Will have a look through the changes and make sure I see where I went wrong.
---
### Author:  [@rjung](https://boards.straightdope.com/u/rjung)
#### Post date: [May 21, 2006, 9:19pm UTC](https://boards.straightdope.com/t/web-design-crew-advice-needed-on-browser-compatibility/357623/10 "2006-05-21T21:19:53Z")
> [@GuanoLad](#):
>
> 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)
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…)