Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: CSS positioning help - Mozilla

Reply
Thread Tools

Re: CSS positioning help - Mozilla

 
 
David Graham
Guest
Posts: n/a
 
      06-28-2003

"Lorne Cameron" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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" <(E-Mail Removed)>
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



 
Reply With Quote
 
 
 
 
Lorne Cameron
Guest
Posts: n/a
 
      06-28-2003
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
css positioning: help me find a better/more elegant solution. sagejoshua HTML 2 10-10-2005 04:40 AM
CSS Mozilla: Make Mozilla not ignore height style of an inline element Henri HTML 9 02-22-2005 06:08 PM
help request: css positioning & text bg scalable image Ilya HTML 9 06-30-2004 02:24 PM
HELP: Relatively positioning a block element to an inline element in Mozilla. Woolly Mittens HTML 8 09-22-2003 06:29 AM
Re: CSS positioning help - Mozilla brucie HTML 8 06-29-2003 05:39 PM



Advertisments