severe browser incompatibilities

[businessman332211@hotmail.com]

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.I figured out codebox, it was code to get it to show big, not codebox, I got it working thoughI can't figure out what's wrong with this, can someone help me figure out how to fix this.Funny Email ForwardsHere 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.

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;}

<!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>

Edited June 6, 2006 by businessman332211@hotmail.com

[scott100]

NOTE-I tried setting it with codeboxes like I was asked it didn't work, I changed code, to codebox and it didn't work.I can't figure out what's wrong with this, can someone help me figure out how to fix this.

Codebox seems to have worked

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 advice is build your site using Firefox not IE. Then when you are finished patch it up for IE using hacks or whatever

[businessman332211@hotmail.com]

Well there are just a few problems now how do I fix these, if you look in ie, and opera you can see the difference. In firefox the only thing is the upper section with the 2 forms, in ff the form on the right is knocked down below the other one, instead of both side by side, in opera it plain looks like dog crap, any advice would be greatly appreciated, it would help a lot tomorrow when I get ready to tackle this, thanks for the help I really appreciate it.

[businessman332211@hotmail.com]

bump

[scott100]

in ff the form on the right is knocked down below the other one, instead of both side by side

Your margin-left was pushing it down, reduce it's size:#rightdiv { MARGIN-TOP: 4px; FLOAT: left; MARGIN-LEFT: 5px}

[businessman332211@hotmail.com]

Ok so that was the cause of the problem, but my client said he wants them spaced, How do I get them spaced properly, that is something that I can't do, I have to figure out how to space it, and get it to still work in firefox, I could leave it but eventually someone is going to tell him about it, I don't want to look bad, this guy could be permanent work, any advice would be greatly appreciated.

[scott100]

Ok i've found the real source of the problem, you need to add a line break before the search field, if you look IE automatically add this but firefox doesn't. Put in a break and you should then be able to use the space.

[businessman332211@hotmail.com]

PERFECT It completely fixed it in Internet explorer and firefox, and it did a substantial bit of surgery to opera, if anyone sees anything that's causing opera problems let me know, until then I am going to randomly throw in more br's to try and see if it can fix it more.