Re: CSS positioning help - Mozilla

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Quoted text here. Click to load it

----- Original Message -----
Newsgroups: alt.html
Sent: Saturday, June 28, 2003 3:23 PM
Subject: CSS positioning help - Mozilla

Quoted text here. Click to load it
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


Re: CSS positioning help - Mozilla

David Graham wrote:
Quoted text here. Click to load it

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.


Re: CSS positioning help - Mozilla

Lorne Cameron said...

Quoted text here. Click to load it

" ">
<style type="text/css">
h1{height:115px;margin:0;border:2px solid red;}
#menu{width:160px;height:439px;float:left;border:2px solid green;}
#content{margin-left:165px;border:2px solid blue;}
<div id="menu">menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br></div>
<div id="content">content<br>content<br>content<br>content<br>content<br></div>

brucie a. blackford. 29/June/2003 07:02:51 am kilo. /

Re: CSS positioning help - Mozilla

When Wipkip was making a web page, a :-? appears and wrote:
Quoted text here. Click to load it
We aren't in the army.
Edwin van der Vaart (Geen familie van....) Links to Semiconductors sites
                               (will expire at 01 Sept '03) (under construction) Experimental site Test site

Re: CSS positioning help - Mozilla

William Tasso wrote:
Quoted text here. Click to load it

You have to start somewhere.

If a turtle doesn't have a shell, is he/she homeless or naked?

Site Timeline