5 replies [Last post]
JayEss
Offline
newbie
West Sussex, England
Last seen: 15 years 24 weeks ago
West Sussex, England
Joined: 2005-10-30
Posts: 2
Points: 0

Hey guys,

I've got a little problem with the layout of my new site (first personal site).

I've got everything sorted in IE (http://www.jayessence.com), but am having a few issue with NN based browsers. I must admit I expected it to be the other way round.

I've simplified the design to try to solve this issue but still can't seem to fix it.

The page i'm working on is http://www.jayessence.com/simple.asp ;

-------------------

<body>
<div id="outerContainer">
<div id="container">
<div id="content">
<div id="header">
header
</div>
<div id="main">
main
</div>
</div>
</div>
</div>
</body>

-------------------

with the css http://www.jayessence.com/common/css/simple.css ;

-------------------

body{
margin:0;
padding:0;
}

#outerContainer{
position:absolute;
height:100%;
border:0;
margin:0;
padding:0;
padding-left:100px;
}

#container{
position:relative;
width:840px;
margin:0;
border:0;
padding:0;
background-color:#00FF66;
}

#content{
position : relative;
width: 800px;
height:100%;
left : 20px;
border:0;
margin:0;
padding:0;
background-color:#0000FF;
}

#header{
position:relative;
width:100%;
height:170px;
border:0;
margin:0;
padding:0;
}

#main{
position:relative;
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
background-color:#FF33FF;
}

--------------

The problem seems to lie with the 'main' div not taking into account the height of the header, and therefore adding an extra 170px onto the bottom of my page.

I'm using different stylesheets for different browsers so I don't need to worry about messing it up in IE.

Any ideas??

Thanks,

Jamie

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 26 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

100% height issue in Moz with only 2 rows

Lose the absolute & relative positioning; use margin: 0 auto on #outerContainer instead of padding-left; and margin: 0 auto on #content too.
Also, why do you have different stylesheets for different browsers? You should be able to get nearly all browsers working from the same stylesheet with maybe just a few hacks/special rules for IE.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

drhowarddrfine
Offline
Leader
Last seen: 11 years 19 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

100% height issue in Moz with only 2 rows

Without a doctype you're not keeping all browsers on the same rules page and putting some into 'quirks' mode. Use a proper doctype.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

JayEss
Offline
newbie
West Sussex, England
Last seen: 15 years 24 weeks ago
West Sussex, England
Joined: 2005-10-30
Posts: 2
Points: 0

100% height issue in Moz with only 2 rows

Cheers for the quick replies guys,

I've made the suggested changes but problem still remains. Any other ideas?

I've tried messing around with top & margin-top with values between -170px & 340px (in increments of 170) but still haven't cracked it.

I am planning on merging the style sheets together once I've got it working in all browsers, just keeping it simple until I've the layout 100% for all browsers.

I work in a 2 man team full time, and due to workload (we run and manage about 150 sites) we've never had the time to get a 100% table free layout working. Does anyone know of (or have) a tableless site with 100% height and multiple rows working in moz? (obviously all the columns need to stretch if content requires). It's perfect in IE as stated so It can't be anything major. If so I'd be grateful to have a look at the code.

Thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

100% height issue in Moz with only 2 rows

drhowarddrfine wrote:

Without a doctype you're not keeping all browsers on the same rules page and putting some into 'quirks' mode. Use a proper doctype.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 14 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% height issue in Moz with only 2 rows

How do you mean "not taking into account the height of the header" why should it take into account the height of the header? in actual fact it is and will if you add height:100% to the html, body the #main div is positioned to flow after the header so it starts 170px down the page if it has height 100% as all the other divs do then it will push on down.

If your comming from a table based background then you will find CSS height a bit of a problem and it will be worth you Googling on the subject to understand how it works or doesn't as is the case.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me