Re: CSS positioning help - Mozilla

David Graham · Jun 28, 2003

Lorne Cameron said:
I've been trying to change my site's layout to CSS, but I've run into
some trouble. The layout is a header image, 760x115, then a menu image
on the left below that, 160x439, and then the main content in the
remaining space. Here's what I have just now (borders are in place so
that I can see what's happening):

<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>

<BODY>
<div style="border: solid red;">
<IMG SRC="images/header_large.gif" ALT="header.gif">
</div>

<div style="position:absolute; top:0px; padding-left:0px;
padding-top:115px; height:439px; width:160px; border: solid green;">
<IMG SRC="images/menu.gif" ALT="menu.gif">
</div>

<div style="position:absolute; top:0px; padding-left:160px;
padding-top:115px; height:100%; width:100%; text-align:center;
border:solid blue;">
TESTING
</div>
</BODY>
</HTML>

It looks great in IE6, but in Mozilla it seems as if the padding-left
and padding-top aren't taken into account when sizing the third DIV at
100% (I want this DIV's dimensions to be 100% so that
vertical-align:middle and text-align:center will be correct relative to
the whole window), and so the DIV's height is actually (100% + 115px)
and width is (100% + 160px), so scrollbars are present. I've played
around with padding and margins and can't find a solution to get what
I'm looking for. Can anyone help me out?

Thanks.
LC.

----- Original Message -----
From: "Lorne Cameron" <[email protected]>
Newsgroups: alt.html
Sent: Saturday, June 28, 2003 3:23 PM
Subject: CSS positioning help - Mozilla

I've been trying to change my site's layout to CSS, but I've run into
some trouble. The layout is a header image, 760x115, then a menu image
on the left below that, 160x439, and then the main content in the
remaining space. Here's what I have just now (borders are in place so
that I can see what's happening):

<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>

<BODY>
<div style="border: solid red;">
<IMG SRC="images/header_large.gif" ALT="header.gif">
</div>

<div style="position:absolute; top:0px; padding-left:0px;
padding-top:115px; height:439px; width:160px; border: solid green;">
<IMG SRC="images/menu.gif" ALT="menu.gif">
</div>

<div style="position:absolute; top:0px; padding-left:160px;
padding-top:115px; height:100%; width:100%; text-align:center;
border:solid blue;">
TESTING
</div>
</BODY>
</HTML>

It looks great in IE6, but in Mozilla it seems as if the padding-left
and padding-top aren't taken into account when sizing the third DIV at
100% (I want this DIV's dimensions to be 100% so that
vertical-align:middle and text-align:center will be correct relative to
the whole window), and so the DIV's height is actually (100% + 115px)
and width is (100% + 160px), so scrollbars are present. I've played
around with padding and margins and can't find a solution to get what
I'm looking for. Can anyone help me out?

Thanks.
LC.

Hi
I'm no expert but this sounds to me like you have run into the broken box
model thing. Basically, Netscape does it correctly and adds on the border
width and padding width to the content width (reason for the 100% div being
too wide/high) and IE in quirks mode does not (you have no DTD so your in
quirks mode
I would absolutely position the main div with a top: 115px; left: 160px
so you don't need the padding, that way Netscape will look the same as the
quirky IE. Mind you, you should not be using IE in quirk mode, better to
write code for a standard compliant IE instead. There is a hack which you
can use which basically, lets a broken IE see the wrong width and Netscape
and IE6 (standard mode) see the correct width (which becomes the same size
as the bigger incorrect width after padding and borders are added on.

I have used the hack here
#navigation,#navigationcp {
width: 200px;
z-index: 50;
position: relative;
top: 0px;
left: 0px;
float: left;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 75px;
margin-bottom: 0px;
height: auto;
background-color: #f74902;
color: #000000;
voice-family: "\"}\"";
voice-family: inherit;
width: 180px;
}

all browsers get a width of 200px. The incorrect browsers read the bit above
the voice-family: "\"}\""; and put all the padding within the content width
of 200px, so it doesn't get any bigger than 200px, the good browsers can
read past the voice-family: "\"}\""; bit so get 180px but then they add the
padding onto this which brings you back to 200px.

HTH (I might have made some terrible errors here but its fun helping,
couldn't help myself. Others will be along to put you right

bye
David

Lorne Cameron · Jun 28, 2003

David said:
[SNIP]
I would absolutely position the main div with a top: 115px; left: 160px
so you don't need the padding

IF you mean setting top:115px;left:160px; and ditching the
height/width:100%; then yes, I've considered that (in fact, I think that
was my original implementation), but that will lead to the main DIV
being only as wide as is necessary to fit in the content, as opposed to
the width of the remaining window space. Say the only content in the
main DIV was a 200x200 pixel image - even when centered in the DIV, it
would not be centered on the screen.

So, as I see it my options now are:

1) Set a constant pixel width for the main DIV. Problem: won't look
good at very high/low resolutions - I'll need to find a compromise for a
width to choose.

2) Use javascript to find out window width then set main DIV width as
(window_width - 160). Worth the hassle?

3) ?? Is there simple solution with CSS that I don't know about? Any
input would be much appreciated.

LC.

Positioning CSS components	1	Nov 16, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Interfering CSS	1	Feb 9, 2024
Trouble with css	4	Mar 20, 2020
I need help fixing my website	2	Oct 15, 2023
Positioning a popup	10	Dec 13, 2020
Help with my responsive home page	2	Dec 14, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022

Re: CSS positioning help - Mozilla

David Graham

Lorne Cameron

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads