8 replies [Last post]
lisauk
Offline
Regular
Last seen: 11 years 36 weeks ago
Joined: 2005-06-26
Posts: 33
Points: 0

Hi,

Please take a look at the url http://www.this-junction.co.uk/osm/baby.html

IE Problems

Firstly in IE the banner at the top of the page does not seem to be displaying.

Firefox Problems

If you make the screen so that the page has to scroll the white background color doe not fill the page and I can not work out why?

Thanks in advance for everyones help.

Lisa

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 41 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

1x IE Problem & 1x Firefox Problem

IE may not be displaying the banner because the div is empty. Firstly, there is no reason to absolutely position this div. Just let it be in the natural document flow (you'd have to change the top margins in the content divs to compensate). Then, why not include a header tag in that div containing the site/page/content name? You could use a negative text-indent to hide the text on screen but screen readers would be able to 'see' it. This way the div is no longer empty. But, there are other ways of displaying this image as well. It could be placed in the background of other divs as well - you don't (shouldn't) need extraneous markup for a background image.
As for the background not continuing past the browser window, it's because you have set html, body, and #wrap_outer to height: 100%. Why? It's not needed. It looks like you're trying to contain the floats. See Tony's write up here about that.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1x IE Problem & 1x Firefox Problem

Arggghh!!!! This is a double post. This is the answers I posted in the other thread. I deleted them on the other post and moved them here as they give a little more detailed explanation than Wolfcry.

The firefox issue is because you have set the height of #wrap_outer to 100%. That will give #wrap_outer a height equal to the height of its container, in this case body, which in turn gets its height from html, which means the height of the viewport. When an element overflows its height the "extra" content is displayed according to that elements overflow setting. The default setting is "visible", which means the content is displayed, but outside the element. Because its outside the element it doesn't get the element's background.

IE doesn't behave the same way, as it (incorrectly by w3c standards) treats height pretty much as min-height (when overflow is visible) so expands #wrap_outer to contain all of the "extra" content.

The solution:

html, body {
  height: 100%;
}

#wrap_outer {
  min-height: 100%;
}

* html #wrap_outer {
  height: 100%;  /* this targets IE only */
}

For the IE problem:
(its not because its empty, as its been given a non-zero height)

The banner has other content rendered above it, this is due to the non-standard way IE does stuff :?. There are two solutions:

- you have #banner first in your source order. If it comes first there is no need for it to be positioned absolutely. Remove position:absolute; left:0; top:0; from its styles. You will also need to adjust the margin-top of some other elements (#main, #main2, #buttonscontainer) to close up the extra gap that will leave.

- move #banner to just before the closing </div> of #page_wrap. No other changes are necessary.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

1x IE Problem &amp; 1x Firefox Problem

I deleted the old one Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

lisauk
Offline
Regular
Last seen: 11 years 36 weeks ago
Joined: 2005-06-26
Posts: 33
Points: 0

FANTASTIC

Fantastic, thank you to all.

As soon as I removed the banner position the banner appeared in IE, although it is not appearing in dreamweaver but I can live with that.

Thank you once again.

Lisa

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

1x IE Problem &amp; 1x Firefox Problem

newbie question:

what does this do:
" * html "

Is this so only IE will read it an FF will not?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

1x IE Problem &amp; 1x Firefox Problem

Yes. IE wrongly things that there is an element containing the <html> element (which there isn't), so it's used to target IE.

Verschwindende wrote:
  • CSS doesn't make pies

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

1x IE Problem &amp; 1x Firefox Problem

and is there a difference between:

"html>body" and "html body"?

And is the difference cross browser consistent?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1x IE Problem &amp; 1x Firefox Problem

semantically yes. effectively no. in reality yes Laughing out loud

html>body - the body element that is a child of the html element

html body - the body element that is a decendent, at any depth from the html element. Since its not valid to have a body element any deeper than one level below html there are no circumstances where html body will activate a different rule from html>body.

In reality, no released version of IE/Win recognises the child selector so html>body is a way to exclude the rule from IE. Its kind of the opposite of "* html" (except IE5/Mac sees both).