Designing pages for IE6 AND Firefox. Where to start?

[sabbath180]

I created a website a while ago to practice HTML, and spent ages getting it to look right in IE6 (this is back before I'd heard about Firefox). I was trying to keep the HTML/CSS as valid as possible (eg. using stylesheets rather than tables).

I've finally got round to downloading Firefox, and.... dammit..... my site looks terrible in it!! See...

http://www.freewebtown.com/dothemetal/

My question is: Where do I go from here?

The way I see it, I have 2 options.

1) Design separate pages for Firefox and have maybe a button on each page saying "click here if you're using Firefox", so it transfers to the "mirror site". Probably not the best idea.

2) Adjust the HTML so that it looks good in both IE6 and Firefox. This sounds complicated. It took me ages to get it right in IE6 - I don't want to get it right in Firefox only to mess it up in IE6.

So, what should I do now? I assume (2) is the way to go, but where do I start? If you look at my site with IE6, will I actually be able to keep it looking this way, but have it looking identical in Firefox?

Thanks for reading this!

PS. Any criticism of website design gratefully accepted, but only if you give me tips on what I should do to change it! (Bear in mind I did this entirely in notepad).

[Nedals]

1) Design separate pages for Firefox...No!
2) Adjust the HTML so that it looks good in both IE6 and Firefox.No!

The HTML should be the same for both browsers. And, if your style sheet is correct, it should work for both.

You may need to add a few tricks to make it work correctly in IE. The main difference is in the way Firefox (compliant) and IE (non-compliant) handle the box model. One trick you can use is to not have 'width/height' and 'margin/padding' in the same style definition. Use nested divs instead.

<div style="width:600px">
<div style="margin:20px">
content
</div>
</div>

[drhowarddrfine]

And validate your html and css for errors and do not use a transitional doctype. Use strict.

[Ascendancy]

So it's the cell padding that divids the two tables apart, and they align left in Firefox... Hmm. Well, it's not really a big deal. I mean the pages still work correctly in both browsers, which is good. Try checking out some CSS for alignment?

[_Aerospace_Eng_]

Try this for your stylesheet
body
{
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
color: black;
background-color: #B6B6B6;
}

a
{
font-size: small;
color: #000000;
font-weight: bold;
}

a:link, a:visited, a:hover, a:active
{
text-decoration: none;
}

a:visited
{
color: #000000;
}

a:hover
{
color: #FFFFFF;
}


.sub
{
font-size: 80%;
font-weight: normal;
line-height: 250%;
}

.currentpage
{
color: white;
font-weight: bold;
}

.bold
{
font-weight: bold;
}

.italic
{
font-style: italic;
}

.menu
{
font-size: 100%;
}

.center
{
text-align: center;
}

.right
{
text-align: right;
}

.large
{
font-size: small;
}

.underline
{
text-decoration: underline;
}

.nobold a
{
font-weight: normal;
}

#container
{
margin: 10px auto 0;
width: 750px;
text-align: left;
background-color: #B6B6B6;
}


#header
{
height: 96px;
text-align: right;
border: 2px solid #000000;
background-color: #F99341;
}


#mainnav
{
margin: 10px 0px 10px 0px;
height: 30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
border: 2px solid #000000;
background-color: #F99341;
}


#maincontent
{
text-align: left;
}


#menu
{
float: left;
border: 2px solid #000000;
padding: 30px 30px 10px 30px;
width: 130px;
height: 380px;
text-align: center;
font-size: 80%;
line-height: 1.8;
background-color: #F99341;
margin-right:10px;
}


#content
{
border: 2px solid #000000;
padding: 20px 35px 20px 35px;
height: 380px;
background-color: #F99341;
overflow: hidden;
}

#gigcontent
{
border: 2px solid #000000;
padding: 20px 20px 20px 35px;
height: 380px;
background-color: #F99341;
overflow: hidden;
width:551px;
}

#gig
{
border: none;
padding: 0px 0px 0px 0px;
height: 100%;
width: 92%;
background-color: #F99341;
overflow: hidden;
float: left;
}

#scroll
{
border: none;
padding: 0px 0px 0px 0px;
height: 100%;
width: 5%;
background-color: #F99341;
text-align: right;
float: right;
}

#content2
{
width: 100%;
text-align: center;
font-style: italic;
font-size: 80%;
}

#content2 div
{
margin: 0px 7px 14px 7px;
width: 110px;
border: none;
height: 110px;
float: left;
background: ;
}

div.ls img
{
height: 74px;
width: 100px;
margin: 17px 0px 0px 3px;
}

div.ls2 img
{
height: 56px;
width: 100px;
margin: 24px 0px 0px 3px;
}

div.ls3 img
{
height: 40px;
width: 100px;
margin: 33px 0px 0px 3px;
}

div.pan img
{
height: 59px;
width: 224px;
margin: 24px 0px 0px 3px;
}

div.pt img
{
height: 100px;
width: 74px;
margin: 3px 0px 0px 4px;
}

div.pt2 img
{
height: 100px;
width: 56px;
margin: 3px 0px 0px 4px;
}

div.pt3 img
{
height: 100px;
width: 40px;
margin: 3px 0px 0px 4px;
}

#content2 a img
{
border: 2px solid black;
}

#content2 a:hover img
{
border: 2px solid white;
}

#footer img
{
margin-bottom: -6px;
}

#footer a
{
font-size: x-small;
}


#footer
{
margin: 10px 0px 10px 0px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: x-small;
border: 2px solid #000000;
background-color: #F99341;
}
Standards compliant browsers need margin:auto; to center block level elements. Also when using margins and using any overflow property will make the margin start from the right side of the previous element. I removed the margins and set a width on gigcontent.

[Ascendancy]

Question! What does the 'overflow: hidden;' command do?

[drhowarddrfine]

Overflow attribute. (http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow)

[Ascendancy]

Clipped meaning cut out whenever it is not in the box?

[drhowarddrfine]

Cut off, yes.

[sabbath180]

Thanks for all the great help. I'm going to get started on this and may get back to you if I have any trouble!

Out of interest, how do you guys design websites? Do you do everything in notepad (or equivalent) or use something like Dreamweaver or another program? I'd prefer to use some program in the future just to speed everything up, but are there any programs that write valid HTML and CSS without tables and all the useless filler they tend to put in (like not using stylesheets)?

[drhowarddrfine]

are there any programs that write valid HTML and CSS without tables and all the useless fillerNo, though the latest version of Dreamweaver is better, I hear, I still won't use it, though 'code view' and file management is helpful.

I only use a text editor in FreeBSD or Notepad2 in Windows along with Illustrator and PHotoshop along with the excellent web dev toolbar in Firefox.

[Ascendancy]

Yea I just use some advanced form of Notepad, it's so much easier. If I forget how to hard code something, I have a large library of books that I can referance back to, or I just go to the internet. Dreamweaver, GoLive, all of those programs are not worth the money.

[_Aerospace_Eng_]

I use Dreamweaver "Code View". I was able to get it at a good price from a student discount. DW is just a tool and if you don't know how to use it properly you aren't going to like it. It has so many time saving features. Built in FTP, built in validator, built in file manager, it also completes tags for you in code view which is useful. They have just released an update that converts flash code into the js version to get around the EOLAS thing in IE.

[mikem3]

I just Joined here hoping to find some help myself, but in this
case, I might be able to help you!

I recently bought a copy of serif Web-Plus 10 and find it very
easy to use, but there are issues.

The one thing that it does is to allow you to preview your web
site project in IE, Firefox and Opera, so you can fix most things
before uploading.

I find that Firefox needs Plug-ins added more than the others.

Regards.
Mike