Firefox displaying footer div on top... what am I doing wrong?

HTML & CSS
1

Hi all,
I’m trying to build a css theme which I hope to convert to a Wordpress theme.
I am stacking up divs in a big wrapper container div, but Firefox displays the footer div on top. Any idea why? Also, Explorer centers a horizontal line in the sidebar, I don’t know why either…
The test page is online here

Thanks for your help,

2

Because it is following floated items, you need to add this rule to your CSS:

#footer {
  clear:both;
}

Not sure about the IE issue (I don’t have access to it at the moment) but margin-right: auto may be confusing it.

I would suggest not using <hr> but instead place a background image on the sitenav div (give it some top padding to make room for the image).

3

Ok thanks, now it’s down there, but now it overflows above the sidebar, why is that?
(I’m reading about that clear property)

4

I don’t see any overflow on the sidebar with the clear:both added - unless you meant something else?

You should give the left float a width to make sure it doesn’t get pushed wide by content. The menu items in that left column should be in a list structure and don’t use breaks to make space as that is bad.

The hr is aligned center in IE and yu need to add this:


#sidebarline {text-align:left;}

The hr is hard to get consistent between browsers and you would be better off just using a border on a div or on an existing element.

Your 100% height routine is bad and you need this instead.


#wrapper {
  [B]  min-height: 100%;[/B]
    width: 940px;
    margin-right: auto;
    margin-left: auto;
}
[B]* html #wrapper{height:100%}[/B]

Don’t use the !important hack as it is not only confusing it is prone to break in IE7. IE6 is the one with the problem so just target IE6 and leave other browsers alone. :slight_smile:

5

Oops Paul, those wrapper properties just pushed all the main content div lower than the sidebar in Firefox.
Regarding the items in the sidebar, I did put them in an ul, am I misunderstanding what you’re telling me? Edit: I see, I didnt put the li tag.
Regarding the hr, yes I’m definitely going to do just a top border (thanks for the text-align tip).

6

I only suggested a background image because it looked like you didn’t want a full width line. But it’s probably better to have full width anyhow, in which case border-top is much better.

7

Is that sorted now or do you still have some problems? :slight_smile:

8

Thanks for your help guys.
But why won’t Firefox take into account the 230 px width property I set to my left container (or any of the properties for that container)? I see in Firebug that none of the css settings appear, only the initial body and html properties. Do they supersede or something?
This is what Firebug shows for that container:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
margin:0;
padding:0;
}
test1.css (line 8)
Inherited from body
html, body {
font-family:arial,verdana,sans-serif;
font-size:14px;
}
test1.css (line 1)
Inherited from html
html, body {
font-family:arial,verdana,sans-serif;
font-size:14px;

Whereas I set the following css

#sidecontainer {
      font-family: monospace;
      float: left;
      width: 230px;
      }

PS I see your point Ralph, now the line is the width of the div, I’ll see whether I stick with that, put a background image, or get rid of the line altogether.

9

Yes Ralph you got it! It was the curse of the curly brace.
Thanks a lot.
One last thing: any idea why in Firefox the footer overflows onto the sidebar container and why it’s color attribute won’t display?
I think it’s going to take years before I can produce a Wordpress theme…

10

It might be that you have one too many curly braces in the preceding rule:

* html #wrapper{height:100%}
      [COLOR="Red"]}[/COLOR]
11

Not exactly—but it’s probably a problem of the top margin not pushing away from a floated item.

I would suggest wrapping #sidecontainer and #main together in a containing div that has overflow: hidden; on it. That way, the footer will have something solid to push off.

and why it’s color attribute won’t display?

Because it has no height. As soon as you add some content to that div, you’ll see the background color.

I think it’s going to take years before I can produce a Wordpress theme…

It’s not really all that hard. It’s more about learning CSS than anything else. I managed to knock up a WP theme for my site very quickly.

12

Yes, seems like that’s the problem. I’ll follow your advice.
I’ll also read carefully your article about theme creation.

Thanks a lot for your help.