browser incompatibility

[Ninjakreborn]

[b]SOLVED- HA HA HA, I figured it out, that was cool. I was getting frustrated, I went through my validation, fixed my xhtml like usual, dug into my css, and found the
/ symbol after a comment that wasn't supposed to be there, I had put it twice, I fixed that, and when I rechecked in opera, the ENTIRE site snapped into place, went back into perfect formation the way it should have, that was the coolest thing that ever happened, THUS another reason to ALWAYS validate your materials.[/b]


I can't figure out what's wrong with this, can someone help me figure out how to fix this.
[a href=\"http://www.funnyemailforwards.com/\" target=\"_blank\"]Funny Email Forwards[/a]

Here is my issue, look at it in IE, it looks great, then when you look at it in all the other browsers, it looks horrible, I wasn't expecting compatibility issues with just a simple layout, any advice, or ideas would be greatly appreciated.
My XHTML, CSS is below.
[code]
body /* This part styles the body, and prepares it for the content */
{
font-family:Arial, Helvetica, sans-serif; /*this sets the font type*/
font-size:15px; /*This sets the general setup of the text on the site*/
}

h3
{
font-weight:bold;
text-decoration:underline;
}

img /* this removes borders around linked images */
{
border:none;
}

/*Everything in this section below here controls the form field boxes, this allows them to all be spaces properly and make them all look even from the form names */
#type
{
margin-left:30px;
}

#name
{
margin-left:80px;
}

#keywords
{
margin-left:122px;
}

#file
{
margin-left:55px;
}

/* End working with form fields */
/* Below starts working with the header, situating the text, and the images for the header, and getting it all aligned and set up properly */
#header
{
padding-left:10px;
padding-top:10px;
}

#headertext
{
padding-left:15px;
text-indent:0px;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
font-weight:bold;
}

#headerbelow
{
padding-left:20px;
}
/* End header modification */

/*Everything in the following sections lays the foundation for the main body set up.  What happens here is I set the 3 main sections in the middle, below the header.  I wrapped them in something, and put them all in a container, and working with all 3 I set them up to style correctly, and made it easier to make any types of modifications on any of the 3 elements in the containment div */
#containleftright
{
padding:0px;
width:900px;
margin-top:20px;
}

#leftdiv
{
float:left;
}

#middlediv
{
font-weight:bold;
float:left;
margin-top:30px;
}


#rightdiv
{
float:left;
margin-top:4px;
margin-left:40px;
}

/*end structuring main sections */\

/* everything in this section is going to set up the way the stuff looks at the bottom, and how it is all organized. This whole part may seem confusing, what it does to wrap the entire section at the bottom in 1 div, then it has 6 different sections for new divs, I made it this way so someone could very easily add in more rows if necessary with only having to change around a few tag names, and working a little bit adding some to the css.  This way also allows it to wrap around as it minimizes, it just adds more rows for people with smaller browser windows. */
#wrapmiddle
{
width:900px;
clear:both;
}


#upperleft
{
float:left;
}

#uppermid
{
float:left;
}

#upperright
{
float:left;
}

#lowerleft
{
float:left;
}

#lowermid
{
float:left;
}

#lowerright
{
float:left;
}

#specialheader1
{
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
font-size:1em;
width:300px;
}

#specialheader2
{
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
font-size:1em;
width:300px;
}

#specialheader3
{
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
font-size:1em;
width:300px;
}
/* end bottom structuralization */

/* This below here is goign to kill some of the obnoxious parts out of the lists, removing the bullets, pulling away the padding on the left hand side ex cetera. */
li
{
list-style-type:none;
margin-left:0px;
padding-left:0px;
}
/* end the part with messing around with the lists */

/* this is just random styling, and doing things here and there to the general structure of the site */
#bottomwrap
{
clear:both;
text-align:center;
}

#bottomnav li
{
display: inline;
list-style-type: none;
padding-right: 20px;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}

#copyright
{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}

#directory
{
margin-bottom:0px;
}[/code]

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="funnyemails.css" />
<meta name="Description" content="If you have a funny email, feel free to put it into our database, to send to all the people signed up to recieve funny emails" />
<meta name="Keywords" content="funny, emails, email, fowards, joke, video, song, poem, picture, yellow pages, services" />
<meta name="author" content="A service of Yellow Pages Online" />
<title>Funny Email Forwards</title>
</head>
<body>
<div id="header">
<img src="images/logo.gif" /><br />
<p id="headertext">The web's directory of funny Email forwards<br />
<a href="http://www.yellowpagesservices.com" id="headerbelow" title="The Yellow Pages Services" target="_blank"><img src="images/ypol.gif" /></a></p>
</div>
<div id="containleftright">
<div id="leftdiv">
<h3>Add Something Funny:</h3>
<form name="submitinformation" id="submitinformation" action="post">
<label for="type">What Type of Funny is it:</label>
<select tabindex="1"name="type" id="type">
<option>Video</option>
<option>Picture</option>
<option selected="selected">Joke</option>
<option>Song</option>
<option>Poem</option>
<option>Story</option>
</select><br />
<label for="name">Name the Funny:</label>
<input tabindex="2" name="name" id="name" type="text" maxlength="80" /><br />
<label for="keywords"><a href="keywords.htm">Keywords:</a></label>
<input tabindex="3" name="keywords" id="keywords" type="text" maxlength="80" /><br />
<label for="file">Upload your file here:</label>
<input tabindex="4" name="file" id="file" type="file" /><br />
<input tabindex="5" name="submit" id="submit" type="submit" value="Do It!" />
</form>
</div>
<div id="middlediv">
<p>OR</p>
</div>
<div id="rightdiv">
<h3>Search For Something Funny:</h3>
<form name="search" id="search">
<label for="searchfield">What would you like to search for?</label>
<input tabindex="6" name="searchfield" id="searchfield" type="text" size="33" maxlength="80" /><br />
<input tabindex="7" name="search" id="search" type="submit" value="Do It!" />
</form>
</div>
</div>
<div id="wrapmiddle">
<h3 id="directory">Directory of Listings:</h3>
<div id="upperleft">
<h3 id="specialheader1">VIDEOS</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="uppermid">
<h3 id="specialheader2">PICTURES</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="upperright">
<h3 id="specialheader3">JOKES</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="lowerleft">
<h3 id="specialheader1">SONG</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="lowermid">
<h3 id="specialheader2">POEM</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="lowerright">
<h3 id="specialheader3">STORY</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
</div>
<div id="bottomwrap">
<ul id="bottomnav">
<li><a href="about.htm" tabindex="8" title="The About Page">About!</a></li>
<li><a href="signup.php" tabindex="9" title="Sign up for the newsletter">Sign Up!</a></li>
<li><a href="contactus.php" tabindex="10" title="Contact Us">Contact Us!</a></li>
</ul>
<p>Copyright 2000-2006 FunnyEmailFowards.com a service of YellowPages Online.  All Rights Reserved.</p>
</div>
</body>
</html>[/code]

[moberemk]

I've gotta say that I really just am not seeing the issues. I look at it in Firefox and IE, and there doesn't seem to be any issues to it, as far as I can see. Can you be any more specific about these issues, and explain what they are?

[Ninjakreborn]

Well for one check it in opera, that is the main issue, it's horrible in Opera.
In firefox in general, I needed to try and get the search for something funny section back up there beside te other one, it doesn't look right down below it. Those are the main things, that and opera.

[moberemk]

All right. I'll download Opera (something long overdue, probably) and take a look at it then.
Also, just a word of advice: don't put exclamation marks at the end of every word in your footer.
EDIT: I've looked at it in Opera, and I can see the problem that you're talking about. I've no idea as to why it looks like that though. Although one suggestion for how you can create that style of categories would be to make an unordered list containing all of those categories in list items. By making all the list items float to the left, it'll make a grid-based layout. And by setting the <ul> parent to have a specific width, you can have a limited number of squares per row. (IE the number of squares you want multiplied by the width of the quares as the width)

[Ninjakreborn]

I will fiddle with that, it's just I am so confused why it went haywire in opera, even in firefox it's not perfect bu hey atleast it looks presentable. I will have to see if I can fix this all day today, any more advice would be greatly appreciated.

[Ninjakreborn]

At the top I figured the cause for what was making it do that in firefox, what I did was lowered the margin on the right div, but I can't have it like that, the client wanted it spaced, I need it spaced, but still working in firefox, does anyone have any advice on this, I don't know what you meant by the way about the unordered list, if you mean those bottom 6 sections, I could, but then I have the blue line, He wants that there, and after fighting with it for 2 hours, that is the only thing I could figure out, I am not really on a deadline on this, but I was hoping not to encounter these problems because I was on other projects, if anyone catches anything I missed, or has any advice as I fight with this it would be greatly appreciated.

[wildteen88]

I see in your css that you hardly style any block elements such as your header tags (h1, h2, h3 etc). All your headers display different in each browser, ie they jump around, the reason for is IE, FF and Opera use different default margins/paddings on elements. Dont just set one side of an element a difined marging set all the sides, top, left, right and bottom a margin and use the short sytax too:
[code]margin: top right bottom left;[/code]
What I suggest you to do is set defined a margin that you want for all tags you are styling, so for your header tags do it like so:
[code]h1, h2, h3 {
    margin: 10px;
    padding: 0px;
}[/code]
Also Opera tends to apply a defualt padding to most html elements rather than a margin so its a good practice to supply both margin and padding values when stying tags. Dont always rely in on a browsers defualt margin/padding values (for example IE's) as not all browsers will have the same.

If you provide defualt values of margin/padding for all the tags you style then you page will look consitant in all browsers, so when you swap back and forth between browsers you shouldn't see much of a different in the way your page looks in a different browser. Currently yours jumps around a bit.

edit: editted the bad grammer/spelling mistakes (hurrt up FF2! In-line spelling checker - lazy i know)

[Ninjakreborn]

I fixed the main problem, but I like this advice, I will keep these practices in mind when working on future projects.