Siteman DA - Bent Inge wrote:
Hello fellow members of the Web Standards Group!
I'm trying to work out a centered layout with header, 2 columns and a footer. The background picture is suppose 2 follow the content right down to the footer, but appearently the float-property 'end' the pagewidth-div(sidebredde) at the end of the header-div.
The layout work as intended in in IE and Opera. The problem appears in Firefox and Netscape however gives me headache.
Hope some of you wizards out there can help me out :-)
The page is located here: http://www.siteman.no/prosjektweb/superoddsen/nettsted/index.htm and the stylesheet is here: http://www.siteman.no/prosjektweb/superoddsen/nettsted/global.css
This is the stripped code (layout only) comments translates div's into english:
<div id="sidebredde"><!-- PAGEWIDTH -->
<div id="header"></div><!-- HEADER -->
<div id="kol"></div><!-- LEFT COLUMN -->
<div id="hovedfelt"></div><!-- MAIN COLUMN --> <div class="clear"></div>
</div>"><!-- END PAGEWIDTH -->
<div id="kred"></div><!-- FOOTER --> <div class="clear"></div> ---------------- Best regards,
Bent Inge H�i�s
Address: Teknologiveien 22 N-2815 Gj�vik Norway
[EMAIL PROTECTED] - www.siteman.no
****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
Hi,
I played a little with it and it seems to me as IE (AGAIN) got it wrong and tricked you by letting you see what you thought it is right.
IE has a nasty habit of expanding any box to enclose all of it's content. Witch from a standard compliant browser point of view IT IS WRONG :)
Mozilla and Firefox got it right :
The div you use for page width has no content (!) since everithing inside it it is floated. Every div with no content will not be rendered on screen !
My quick solution: remove the divs with class="clear" and move the footer inside the pagewidth div. Since footer already has {clear: both}, beeing inside the pagewidth it will take up the desired role [ previously filled in by the "clear divs].
Now the page width has content [ the footer] and Mozilla and Firefox will finaly display everything. IE and Opera too.
Please take in consideration that i only tested [ lack of time ...] with Mozilla, Firefox and IE. You still need to test it over and over again until you are sure every[IE]body is on the same page :)
Hope it helps !
P.S. Pardon my english language skills ;) ****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
