Problem formatting in Firefox (IE looks fine)

[WildCactus]

Hi,

I just recently started a business website and I edited a .css template to put it together. Everything looks fine in IE but when I look at the site in firefox my third column is starting at the bottom right of the page rather than the bottom top of the page.

I've played around with this for hours but I can't seem to find the glitch. I've run the CSS debugger but it isn't helping at all. I'm trying to get my Google Adsense ads to display in the right column. My website is http://www.widcactusproperties.com and my style sheet is at http://www.wildcactusproperties.com/style.css .

Thanks in advance to anyone who can help me work out this glitch!
Mike Mueller
wildcactusproperties@gmail.com

[WebJoel]

Here's a screenshot of what your CSS (I imported it directly to HTML page so I could work with it offline) is doing:

[WebJoel]

A lot here could be condensed...

<div id="header">
<p><font color="#000000">Wild Cactus </font><font color="#505050">Properties, LLC</font></p>

</div>

is overkill.

How about doing it like this?:

<h1 id="header">Wild Cactus <span style="font-color:#505050">Properties, LLC</span></h1>

and say exactly the same thing, sans the extra DIV. In so doing, the page-size is lighter in size, -less code to have to pour over (reduced DIV-itis).

I could almost go over this with a re-write easier than trying to repair little things like this. I can't quite seem to figure out what everything does, -there's so many "float:left;"s that I'm losing track of what is floating against what... I found two or three DIVs that overlap each other, -they 'float:left', but the overlap keep sending the NEXT thing 'down'..
It is a nice-looking page though. Relatively clean, nice colors.

[felgall]

Internet Explorer misunderstands a lot of CSS. Your pager will look pretty much the same in all other browsers apart from IE. In Opera the google ads on the right are below everything else alongside a huge whitespace. Looks like lots of repositioning of content in the stylesheet to get it to display properly in IE which are probably the cause of it looking like it does in everything else. Most browsers will allow you to flow the page properly without ever having to use negative positioning.

[WildCactus]

Hi,

Thanks everyone for your help. I've just about got the page working now. One thing got messed up by changing the:

body {
text-align: center;
}

to

body {
text-align: left;
}

is my left column headings such as Available Rental Units, Weather, etc. are left-aligned rather than centered. Any idea where I can place a text-align: center to correct this issue without mucking up the rest of the page?

Thanks again!
Mike Mueller

[ray326]

If they're coded properly (as headings) then you can style them accordingly. E.g.,

h2 { text-align:center }