CSS positioning help

07-01-2007, 1:47 PM

"Lorne Cameron" <lcameron@cis.strath.ac.uk> wrote in message
news:3efda4d2@nntphost.cis.strath.ac.uk...
> 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" <lcameron@cis.strath.ac.uk>
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

07-01-2007, 1:47 PM

David Graham wrote:
> [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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css positioning vs. tables	PeterMcC	HTML	0	07-01-2007 1:22 PM
UK Positioning Problem / TrakM8	John P	GPS	1	06-12-2007 5:20 PM
The Death of Positioning?	Advanced Web Technologies	Building An Internet Business	0	05-29-2007 1:44 AM
banning this browser: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)	no.reply7@comcast.net	Website Reviews And Website Questions	13	05-28-2007 12:42 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)