Css Alignment Issues

[Ninjakreborn]

I was able to work through most of these but a few things I am confused about
www.betterchoiceloans.com/upfront.htm
For some reason it looks perfect in ie, but bad in the other 2, I even fixed quite a number of issues already like the bottom, it was all the way at the top, I threw in an id for it, and clear:both, and text-align:center, and it went to where it was supposed to, but now the main text for some reason is down one on ie, and ff.  It looks good in ie, I had to get this part fixed, because I have to get the top logo area pixel perfect after I am done with all of that, if I release this to a major organization like this, they might never hire me for a project again, any advice ,here is my current css, but it's not just upfront.htm, if you look on that page there are a bunch of links, and 1 page to an external site, but for some reason all of them are doing the same thing.  They are all based on the same css page, and all of them are having the same problem, I think I just have 1-2 things wrong in my css, I used tables for some of the tabular data throughout those pages I did, and the rest css div/span tags, my css was validated, for this project, and since it's not getting portfoliod I didn't entirely validate the xhtml, because the previous designer has the stuff set up like that and I don't know enough flash to mess with those components, any advice on the alignment issues.

CSS

[code]body /* Sets the body for the page, and background picture */
{
background-image:url(http://www.betterchoiceloans.com/images/BG_COLOR_BLUE2GRAY.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
background-position:top left;
background-repeat:repeat-x;
background-color:#688EB3;
font-family:"Times New Roman", Times, serif;

}

a:link
{
color:#003399;
}

a:visited
{
color:#003399;
}

a:hover
{
color:#FF6600;
}


h2
{
color:#003399;
font-style:italic;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

h3
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#003399;
font-size:20px;
}

h4
{
color:#003399;
font-family:Arial, Helvetica, sans-serif;
}

#logoarea
{
width:200px;
height:100px;
background-color:#333333;
}

#footer
{
clear:both;
text-align:center;
}
/* Market Niches Priced Table */
#markettable
{
text-align:center;
width:540px;
border-style:double;
}

#markettable td
{
border-width:medium;
border-style:double;
}

#xmarket
{
background-color:#FFFFFF;;
}

#middlemarket
{
background-color:#FFFFFF;;
}

#leftmarket
{
background-color:#FFFFFF;;
}

#marketheader
{
background-color:#3399CC;
}

#rightmarket
{
background-color:#FFFFFF;;
}
/* End Market Niches Priced Table */

/* Evaluate An Arm Styling Tabular Data */
#armtable
{
text-align:center;
width:554px;
border-style:double;
border-top-color:#000000;
border-bottom-color:#000000;
border-left-color:#000066;
border-right-color:#000066;
}

#armtable td
{
border-color:#660066;
border-width:medium;
border-style:double;
}

#leftarm
{
background-color:#006699;
}

#rightarm
{
background-color:#006633;
}

#alonearm
{
background-color:#666666;
}
/* End styling Tabular data for Evaluate an Arm */
#smalltext /* For small text in various places */
{
font-size:10px;
}
/* Begin section, everything in this section sets the general format and allows
this sets the top areas, and formatts the main section for body content */
#mastertopdiv
{
clear:both;

}

#topcontent
{
text-align:center;
}

#mainnav
{
float:left;
}

/* Everything in this section is related to displaying the actual content sections of the webpage */
#content
{
float:left;
background-color:#FFFFFF;
margin-left:10px;
}

#masterpagediv
{
width:700px;
margin:auto;
background-color:#FFFFFF;
}

#masterpagedivguaranteed
{
width:750px;
margin:auto;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}

/* top loan */
#loanamountleft
{
float:left;
font-weight:bold;
}

#loanamountright
{
float:left;
font-weight:bold;
margin-left:55px;
}

#loanamount
{
margin-left:65px;
clear:both;

}
/* end top loan */
/* Section 1 */
#section1
{
margin-left:100px;
clear:both;
}

#section1left
{
float:left;
}
#section1right
{
float:left;
margin-left:100px;
}
/* End Section 1 */
/* Section 2 */
#section2
{
margin-left:100px;
clear:both;
}

#section2left
{
float:left;
}

#section2right
{
float:left;
margin-left:100px;
}
/* End Section 2 */
/* Section 3 */
#section3
{
margin-left:100px;
clear:both;
}

#section3left
{
float:left;
}

#section3right
{
float:left;
margin-left:100px;
}
/* End Section 3 */

/* Section 4 */
#section4
{
margin-left:95px;
clear:both;
}

#section4left
{
float:left;
}

#section4right
{
float:left;
margin-left:95px;
}
/* End Section 4 */

/* Section 5 */
#section5
{
margin-left:85px;
clear:both;
}

#section5left
{
float:left;
}

#section5right
{
float:left;
margin-left:70px;
}
/* End Section 5 */

/* Section 6 */
#section6
{
margin-left:85px;
clear:both;
}

#section6left
{
float:left;
}

#section6right
{
float:left;
margin-left:70px;
}
/* End Section 6 */[/code]

[lead2gold]

Off the top of my head i can't see any issues yet, but you might want to try cleaning up some errors on the page first.  Maybe the bug will correct itself.
[url=http://validator.w3.org/check?uri=http%3A%2F%2Fwww.betterchoiceloans.com%2Fupfront.htm]http://validator.w3.org/check?uri=http%3A%2F%2Fwww.betterchoiceloans.com%2Fupfront.htm[/url]

[Ninjakreborn]

I can't do that unfortunately, believe me, I hate that too, I am obsessed with clean code, but for this project, I can't the errors are all caused by issue's relating to some flash files that were already tehre, I already rebuilt the general design greatly, in css div/span instead of tables, but I can't modify those because if they mess up I am screwed.  Any advice any more on this issue?

[lead2gold]

ok, i was able to kinda fix it, with 2 small changes

change your #content tag to read this

[code]
#content
{
      /* get rid of this float:left; */
float:right; /* new*/
width: 500px; /* new, you can probably play with this value and make it larger */
background-color:#FFFFFF;
margin-left:10px;
}
[/code]

[Ninjakreborn]

I see what you mean, it made some of the issues go away, but take a look now
www.betterchoiceloans.com/upfront.htm
it kicks them all the way over there now, I don't know how to fix that, any advice.  Once I get it back in place, atleast where it was, originally, then I can do modifications to get the margins at the top like he wanted, and he is about to call me in an hour.

[Ninjakreborn]

Actually it was something I did wrong, i left content on there 2 times, thanks that fixed almost everything, I should be able to handle some of these other issues.  Thanks for the help, that fixed a majority of it, I get confused on when to use float left, and when float right, because a lot of times if I have 2-3 columns side by side, float left on left one, float right on right one, the right one kicks down below the left one, I end up having to double up float lefts those always confuse me

[Ninjakreborn]

I also had one more issue I couldn't seem to fix, on the other browsers, the background isn't working, ont he main one the whole area is while, on internet explorer, the whole thing looks perfect, but in the other 2 browsers, the background isn't staying all the way white, it's broken, do you see an obvious reason for this.

[Ninjakreborn]

Does anyone notice any reason why this might be happening, I triple checked, i have something wrapping the entire thing, with the background color set to white.  It should be making the whole entire page white, but it's not for some reason, and I really, really, don't understand why.

[Ninjakreborn]

Here is a cut down version I am sure it's none of these
Here are the issues I am having for some reasons
[CODE]body /* Sets the body for the page, and background picture */
{
background-image:url(http://www.betterchoiceloans.com/images/BG_COLOR_BLUE2GRAY.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
background-position:top left;
background-repeat:repeat-x;
background-color:#688EB3;
font-family:"Times New Roman", Times, serif;

}

a:link
{
color:#003399;
}

a:visited
{
color:#003399;
}

a:hover
{
color:#FF6600;
}


h2
{
color:#003399;
font-style:italic;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

h3
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#003399;
font-size:20px;
}

h4
{
color:#003399;
font-family:Arial, Helvetica, sans-serif;
}

#logoarea
{
width:200px;
height:100px;
background-color:#333333;
}

#footer
{
clear:both;
text-align:center;
}

#smalltext /* For small text in various places */
{
font-size:10px;
}
/* Begin section, everything in this section sets the general format and allows
this sets the top areas, and formatts the main section for body content */
#bottomwrap
{
background-color:#FFFFFF;
}

#mastertopdiv
{
clear:both;
background-color:#FFFFFF;

}

#topcontent
{
text-align:center;
background-color:#FFFFFF;
}

#mainnav
{
float:left;
background-color:#FFFFFF
}

/* Everything in this section is related to displaying the actual content sections of the webpage */
#content
{
      /* get rid of this float:left; */
float:right; /* new*/
width: 500px; /* new, you can probably play with this value and make it larger */
background-color:#FFFFFF;
margin-left:10px;
}

#masterpagediv
{
width:800px;
margin:auto;
background-color:#FFFFFF;
}

#masterpagedivguaranteed
{
width:750px;
margin:auto;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}[/CODE]
I took out everything I am 100% sure has nothing to do with it, like modifications made to elements that couldn't be causing it, here are the pages that are acting up and how, there all based on the same layout, but I don't understand why they are messing up, first of all in internet explorer, they all look 100% like they should, except for some minor stuff I have to manually hcange about the top margins to make it look like the pages from his old site, but as far as looks decent, those all do in internet explorer.

[URL=http://www.betterchoiceloans.com/upfront.htm]page 1[/URL]
internet explorer- looks perfect
Firefox- The white around the body isn't there, it should be there, it is in ie, I have a master div surrounding them but it's still not there in the other browsers for some reason like in ie
It's severely off alignment and if I move the alignment at all, then in the other browsers it kicks them down ot the next line.
opera- exact same problems as firefox.

[URL=http://www.betterchoiceloans.com/marketnichespriced.htm]page 2[/URL]
internet explorer- perfect
note-this was my special page, it's the one I worked the hardest on, and I don't understand why it's even worse than the others.
ff-opera- the white problem is still there, it's not showing my background, it has the bottom bar, allt he way up somewhere in the middle of my content, I used clear, and it even fixed it on the other pages, even in these browsers, but this page is causing some sort of problem with these browsers, here are my css styles directly relating to the table of tabular information pertaining to this page.
[CODE]/* Market Niches Priced Table */
#markettable
{
text-align:center;
width:540px;
border-style:double;
}

#markettable td
{
border-width:medium;
border-style:double;
}

#xmarket
{
background-color:#FFFFFF;;
}

#middlemarket
{
background-color:#FFFFFF;;
}

#leftmarket
{
background-color:#FFFFFF;;
}

#marketheader
{
background-color:#3399CC;
}

#rightmarket
{
background-color:#FFFFFF;;
}
/* End Market Niches Priced Table */[/CODE]

[URL=http://www.betterchoiceloans.com/guaranteedclosingcosts.htm]page 3[/URL]This page is confusing me too
I have a little css different on this one but it's still messed up just the same.
Its giving me the same issues in the same browser as above, and this is hte only thing added into the css for specifically this page only

[CODE]#masterpagedivguaranteed
{
width:750px;
margin:auto;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}[/CODE]

[URL=http://www.betterchoiceloans.com/ratelockpolicy.htm]page 4[/URL]
This is giving me the same problems, but nothing new in the css.

So I know 100% it has to do with my css file, because htey are all having the same issues because they are all basd on the same external css file, I normally haven't been seeking help much lately, I have figured out a lot for myself, but I never encountered this, never before, and with me only have like 3 hours or so left, I really, really need help on this.  I am stuck, I tried collapsing all my code, pouring through it line by line, what pisses me off is I know that it's only 1 tag in there causing this, just 1 css command is making it all look like this, I am thinking 1 thing hcanged, and everything will pop back into proper place, I have never encoutnered this big of an issue before, can someone see anything, please, I really really need help on this, I have been working onthis for him for a few weeks, and now he finally rounded up the deadline, a list of changes, adn he is callling me, we are making some color touch ups, and gramatical changes, and then he is turning it into his boss, this could be a lot of projects down the road, if anyone sees anything that might help me fix some or all of these issues I would greatly appreciate it.

[foreverhex]

This probably wont change anything but I noticed you had some quotations around one of your fonts.
[code]font-family:"Times New Roman", Times, serif;[/code]

[Ninjakreborn]

It was worth a try but no luck, the quotation marks in css font-family style sets by the way, is there to show the browser it's 100% default and it should choose that above all else.

[foreverhex]

lol. that is correct.. brain fart.

[Ninjakreborn]

can anyone at all help with this, or see anything that might point me in the right direction, I have dissected my code 3-4 times over.

[AndyB]

http://www.inknoise.com/experimental/layoutomatic.php

Get some working code from there for the basic layout you want - works with IE, FF, Opera, etc.  Then you'll know you have stuff right and can add the CSS that control text later.

[Ninjakreborn]

Nothing is working, I pulled the stylesheet into a seperate test sheet and pulled just one of my pages, I tore apart both files and rebuild them 3-4 times with no luck on any approach.

[Ninjakreborn]

I don't know what ot say, all I can do is ask one more time, hopefulyl someone will try to help or find the answer, or anything by tomorrow night, I have to turn this in on monday he gave me the weekend, if I don't figure out something by tomorrow night, I ahve to rebuild them based on the rest of the site just in tables, I hate to do that more than anything but if I can't figure out something else I have absolutely no choose, cna someone please help on this, anybody.