help with positioning? IE vs. Netscape

@DariaApr 15.2003

Hi, guys!

Here’s another site I need help with.

It is my first no-tables site, a work-in-progress sketch, with no true content. It passed the validation. However, the styles are over-sized and could be simplified with one external sheet, but I left the styles on each page for other reasons and will deal with it later.

Here is the problem: It looks beautiful in IE, of course, but there is some~~[COLOR=firebrick]~~mis-positioning in Netscape [/COLOR] I can’t figure out.
Meanwhile, I suspect the answer to my question is simple, but before I dig through the books, maybe someone can through me a bone.

~~[url]~~http://www.siriustechnology.com/sites/singletrackmind[/url]

to post a comment

CSS

14 Comments(s) _↴

@VladdyApr 15.2003 — #It's IE that interprets the element bounding rectangle incorrectly:

for the same width/height

according to W3C standard margin, borders are added to the outside

IE sticks them inside.

@DariaauthorApr 15.2003 — #"need more input"

© Johnny5, Short Circuit

In other words, what is it I should do?

@nkaisareApr 15.2003 — #Read about it at:

http://tantek.com/CSS/Examples/boxmodelhack.html

[b]width[/b] is width of the element (such as div)

[b]padding[/b] is added around the element (not inside the element)

[b]border[/b] is added around the padding (not inside the element)

[b]margin[/b] is added outside the border.

Thus {width: 100px; padding: 5px; border: 2px; margin: 10px} means:

-> The main <div> will be 100px wide.

-> In addition, it will carry padding of 5px on all four sides.

----> So div+padding is 110px wide

-> In addition, there will be a 2px border on all four sides

----> So div+padding+border is 114px wide

-> Finally beyond border, margin is applied

----> So all of it is 134px wide.

IE handles it incorrectly. For IE

-> All of it is 100px wide

-> Margin of 10px around means 80px available

-> Border of 2 px means 76px available

-> Padding of 5px means the actual contents will span 66px

Read the tantek.com site for more details and workarounds. Simpler workaround is (but not totally proven)

{ width: 134px;

width: 100px; /* IE doesn't understand this */ }

@DariaauthorApr 15.2003 — #Thank you!

@nkaisareApr 15.2003 — #Wondering, what is [b]Shenksh![/b]

@DariaauthorApr 15.2003 — #It's "thanks" with candy in my mouth ?

@Paul_O_BApr 15.2003 — #Hi,

IE handles it incorrectly. For IE

-> All of it is 100px wide

[b]-> Margin of 10px around means 80px available [/b]
[/quote]

I was under the impression that it was only border to border that was incorrect. I thought that the margin in IE5 was interpreted correctly and doesn't need to be accounted for in the above equation.

IE6's box model is ok in standards mode but uses the broken box model in quirks mode. Using a 4.01 transitional doctype without a URI will cause IE6 to run in quirks mode and use the broken box model. (see http://www.ericmeyeroncss.com/bonus/render-mode.html)

Hope this is of some use.

Paul

@nkaisareApr 16.2003 — #[i]Originally posted by Paul O'B [/i][/QUOTE]
Yes you are right. Sorry for the error.

@DariaauthorApr 17.2003 — #Thanks for additional correction, I'm reading up on this, great info.

Follow-up question: my in-box border image is getting positioned inside of content area, not inside of <div>????? Is it something wrong on my part or is it the browser issues again?

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

forgot to mention, I view it in IE6 and NS7

@nkaisareApr 17.2003 — #What image is showed outside the box? Seems OK to me.

Suggestion:

Instead of

<div class="box1" style="left:20px; top:20px; background-color: #3A5176; background-image: url(images/tll.gif)">

Its makes more sense if you put these styles into the stylesheet. Both are correct. However, putting all the styles in a stylesheet makes it easier at a later stage:

- changing single CSS file rather than each page. This will be true if you use external stylesheet.

- All styles (at least most) are in a single location, making your html code easier to read.

@DariaauthorApr 17.2003 — #Thanks for suggestion!

re: image:

if you see my quartered wheels - according to design plan they are supposed to fit in the box, to the pixel, into each corner. Each box (box1, box2, etc) should have a 1px black border, plus some space between each other, forming a cross. I want them to look the way they look in IE for now.

If I take margin:10 px off, it clears up my problem with image positioning, but it looks ugly in regards to the text.

When I was trying to adjust the settings for the correct appearance I noticed that if I take my margin: 10px off the boxes, in Netscape, too my quartered wheels are sitting nicely right in the corner.

That lead me to believe that margin: 10px affects the positioning of the background inside the division.

So, looking up the info via both links in the thread above, it made me think - the background image (my wheel) is fitting into the content area, not the <div>.

Therefore my question is - is it supposed to be this way (and I can adjust by creating the background image custom fit for each box) or is it me doing something wrong with the code (which is most likely, since it's my first uneducated css attempt)

BTW, I did not change anything on the site yet, fur the purity of experiment. I'll re-post it once I figure and fix everything up.

@nkaisareApr 17.2003 — #Try the following for all ".box"es

<i>
 </i>.box1 {
 border: 1pt solid black;
 position:absolute;
 color:#697C9E;
 padding:10px;
 margin-bottom:30px;
 text-align:left;
 font-size:11px;
 font-family:Verdana,Arial;
 }
 .box1 { 
 width:330px; 
 voice-family: ""}""; 
 voice-family:inherit;
 width:308px;
 } 
 html&gt;body .box1 {width:308px;} 
 /* Note: 308px = 330 - 2*(10) - 2*(1)
 width+padding+border=330 */
 
 .box1 { 
 height:200px; 
 voice-family: ""}""; 
 voice-family:inherit;
 height:178px;
 } 
 html&gt;body .box1 {height:178px;}

Please let me know if that works

@nkaisareApr 17.2003 — #BTW, I'd do the following (saving filesize)

<i>
 </i>.box1, .box2, .box3, .box4 {
 border: 1pt solid black;
 position:absolute;
 color:#697C9E;
 padding:10px;
 margin-bottom:30px;
 text-align:left;
 font-size:11px;
 font-family:Verdana,Arial;
 }
 .box1, .box2, .box3, .box4 { 
 width:330px; 
 voice-family: ""}""; 
 voice-family:inherit;
 width:308px;
 } 
 html&gt;body .box1 {width:308px;}
 html&gt;body .box2 {width:308px;}
 html&gt;body .box3 {width:308px;}
 html&gt;body .box4 {width:308px;}
 /* Note: 308px = 330 - 2*(10) - 2*(1)
 width+padding+border=330 */
 
 .box1, .box2, .box3, .box4 { 
 height:200px; 
 voice-family: ""}""; 
 voice-family:inherit;
 height:178px;
 } 
 html&gt;body .box1 {height:178px;}
 html&gt;body .box2 {height:178px;}
 html&gt;body .box3 {height:178px;}
 html&gt;body .box4 {height:178px;}

@DariaauthorApr 17.2003 — #? ? ?

yes, it works!!!!!!!!!

THANK YOU!!!!!!!!!!!!!!!!!!!!!!

now I'm off to analyzing...

D.

Also in #CSS _↴

CSS layout help CSS / Browser Hacks HTML / CSS Table Strangeness

Success!

Help @Daria spread the word by sharing this article on Twitter...

Tweet This

help with positioning? IE vs. Netscape

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

help with positioning? IE vs. Netscape

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴