Good ol' divs!

I don't usually work with divs or html much for that matter, but I wanted to attempt to with my latest project.

What I have is a css that looks like this:

body {
	color:#FBEC5D;
	background-color:#000066;
	font:10pt arial, verdana, helvetica, sans-serif;
	margin:0;
	padding:0;
}
a:link	{
	text-decoration: none; 
	font-weight: bold; 
	color:#FBEC5D; 
	font-size:9pt arial, helvetica, sans-serif; 
	font-weight:bold;
}
a:visited	{
	text-decoration: none; 
	font-weight: bold; 
	color:#EAEAAE; 
	font-size:9pt arial, helvetica, sans-serif;
}
a:active	{
	text-decoration: none; 
	font-weight: bold; 
	color:#E6E8FA; 
	font-size:9pt arial, helvetica, sans-serif;
}
a:hover	{
	text-decoration: underline overline; 
	font-weight: bold; 
	color:#000066; 
	font-size:9pt arial, 
	helvetica, sans-serif; 
	cursor:hand;
}
img	{
	border:0px none;
}
h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 12pt;
	color: #FFFFFF;
	font-family: arial, verdana, helvetica, sans-serif;
}
ol  {   list-style: upper-alpha 
}
#topbar {
	text-align: center;
	width: 750px;
	margin-right:auto;
	margin-left:auto;
	padding-top:200px;
	background-color:#27408B;
	border-left:2px solid #22316C;
	border-right:2px solid #283A90;
	background-image:url('/img/spadeology.gif');
	background-position:top center;
	background-repeat:no-repeat;
}
#lside { 
	width:505px;
	float:left;
	margin-top:5px;
	padding-bottom:15px;
	padding-left:20px;
	padding-right:0;
}
#rside { 
	width:200px;
	float:right;
	margin-top:5px;
	padding-bottom:10px;
	padding-right:15px;
	padding-left:0;
}
#footer {
	clear:both;
	padding-bottom:10px;
	background-color:transparent;
	font:8pt verdana, helvetica, sans-serif;
	color:#FFFFFF;
	letter-spacing:1px;
}
#lside fieldset {
	border:1px solid #22316C;
	padding:10px;
	width:475px;
	font:9pt arial, helvetica, sans-serif;
	color:#FFFFFF;
	text-align:left;
}
#lside legend {
	font:bold 11pt arial, helvetica, sans-serif;
	letter-spacing:1px;
	color:#FFFFFF;
	background-color:transparent;
	margin-bottom:5px;
}
#rside fieldset {
	border:1px solid #22316C;
	padding:10px;
	width:165px;
	font:9pt arial, helvetica, sans-serif;
	color:#FFFFFF;
	letter-spacing:1px;
	text-align:left;
}
#rside legend {
	font:bold 11pt arial, helvetica, sans-serif;
	letter-spacing:1px;
	color:#FFFFFF;
	background-color:transparent;
	margin-bottom:5px;
}

Code (markup):

Giving this output: http://www.spadeology.com

It looks exactly how I want it to look in IE, but not in Firefox. What can I do to get the output in Firefox to look like the output in IE? Or is there just no way to accomplish this?

 

1. Get it validated.
2. Get it working in FF2/Opera9/Safari2(or 3) first.
3. Then care about IE.

 

I don't care about IE. Please read the actual post before posting. I don't use IE. I use firefox. That is why I care about how it looks in FIREFOX. The output is correct in IE. I want what it looks like in IE to be the same in FF. I like FF and as I use it, I would like something as personal as this site to be something I can view in firefox.

 

Don't
look
at
the
output
in
IE
before
you
get
it
working
properly
in
Safari 2 or 3
Mozilla 1.7
Firefox 1.5 / 2.0
Opera 8 - 9

Make sure the page VALIDATES, did you even CHECK?! NO, YOU DID NOT. People need to stop asking why sh!t goes wrong before they even validate pages. Go validate, then I'll take a look at it.. chances are it fvcks up BECAUSE its not valid, you might've forgot a tag somewhere, all sorts of crap happens if you DONT VALIDATE.

 

#1. How do you KNOW I did not check it (fact is I did)?
#2. HOW DO I GET IT PROPERLY WORKING IN FIREFOX! Is the question I am asking.
#3. I would prefer you did not 'help' me as I don't appreciate the ASSumptions you have made so far and the 'help' you have offered so far.

 

You have many unclosed tags. That's properly why it does not work in Firefox. It is easy to pick up those careless mistakes and get it work on Firefox if you follow soulscratch's advice.

 

lmao did not validate.

 

http://validator.w3.org/check?uri=h...charset=(detect+automatically)&doctype=Inline

check that you have 155 errors, that is why it does not work in FF.

 

The problem is that the two divs, left and right side, are floating. Firefox correctly understands the top bar does not have to "contain" the two floating divs inside it. I use floating divs when they float to the left or right, not under/above so don't know of or cannot see an obvious fix...

I would have my layout structured like this:

<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="sidebar">
</div>
</div>
</div>

Code (markup):

And have the sidebar floating one side of the content div.

 

If you would look at the errors 99% of them were due to the metas, the java script, using the < br> so loosely and the ads which are links that I do not control. This is NOT why it does not work in FF. Observe the 'validated' version:

http://www.spadeology.com/testing.html

It STILL does not appear as it should. THIS is what I am trying to say. I do not care about anything else right now EXCEPT getting it to work in firefox. If it cannot be done, fine. I will restructure everything. But I'd like to know if yes it can be done or no it can't. Not that I still have work yet to do on something I just started working on Saturday and is merely a personal project for a hobby that I enjoy apart from being in here.

 

Thanks for explaining that to me mate-- I didn't know that about FF. I'll try that structure out. As it's almost 2am (and I just finished playing a couple of games of spades), I'm off to bed. Thanks for breaking that down for me-- it puts it in perspective.

 

For examples of how float elements may be contained, see Enclosing Float Elements.

Those errors may seem and may actually be trivial, but having them at all means the browser must guess as to what you meant. Browsers, in general, manage to be very fault tolerant and manage to make good guesses most of the time. When one doesn't, it creates a ripple that can expand to cause other elements to be mis-interpreted. Each browser employs its own algorithm to the problems. A major concern in discussions in the html5 working group is error handling, and a standard method for handling each error—getting everyone (the UA vendors) on the same page.

If you maintain validity of markup as you go, and you use a modern browser like Firefox or Opera as your prime test bed, you will know where a given problem lies&#8212;with your code. If you don't stay valid, and you use an obsolete, non-conforming and buggy PoS like IE, you will have no clue where the problem lies.

cheers,

gary

 

I'm going to try and keep this civil. If you have a problem with what I'm about to say, blame it on the vidodin I'm being forced to take.

You may not give a damn about IE, but your visitors most certainly might. Not everyone uses a different browser, and may be stuck using IE (even if they're accessing your site from a public library).

Soulscratch's advise is almost as bad as your disdain for IE as well. Don't ignore IE until the end. INCLUDE it it in your development cycle. Test in IE, Firefox, Opera, and Safari as you go along. Don't wait until the end. Developing for Browser X and hacking for Browser Y is BEGGING to have to re-code when the next "flavor of the month" distro hits the Net. By coding to the standards (being as agnostic as possible towards browsers) and checking in all four major rendering engines AS YOU CODE rather than waiting until the end, you can literally squash 99.95% of any bugs you may run into before you actually begin the debugging phase of your dev cycle.

 

Actually, I don't know what I was on when I posted that, but now I realize that you're right, and the times that I did check in both IE6 and FF at the same time in development saved me more time, and the layout looked a lot more consistent (having dual monitors helps too).