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 somemis-positioning in Netscape 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.
<!-- m --><a class="postlink" href="http://www.siriustechnology.com/sites/singletrackmindIt's">http://www.siriustechnology.com/sites/s ... ckmindIt's</a><!-- m --> 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."need more input"
?Johnny5, Short Circuit
In other words, what is it I should do?Read about it at:
<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->
width is width of the element (such as div)
padding is added around the element (not inside the element)
border is added around the padding (not inside the element)
margin 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;
wid\th: 100px; /* IE doesn't understand this */ }Thank you!Wondering, what is Shenksh!It's "thanks" with candy in my mouth
Hi,
IE handles it incorrectly. For IE
-> All of it is 100px wide
-> Margin of 10px around means 80px available
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 <!-- m --><a class="postlink" href="http://www.ericmeyeroncss.com/bonus/render-mode.html">http://www.ericmeyeroncss.com/bonus/render-mode.html</a><!-- m -->)
Hope this is of some use.
PaulOriginally posted by Paul O'B
Yes you are right. Sorry for the error.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 NS7What 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.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.Try the following for all ".box"es
.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>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>body .box1 {height:178px;}
Please let me know if that worksBTW, I'd do the following (saving filesize)
.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>body .box1 {width:308px;}
html>body .box2 {width:308px;}
html>body .box3 {width:308px;}
html>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>body .box1 {height:178px;}
html>body .box2 {height:178px;}
html>body .box3 {height:178px;}
html>body .box4 {height:178px;}
yes, it works!!!!!!!!!
THANK YOU!!!!!!!!!!!!!!!!!!!!!!
now I'm off to analyzing...
D.
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 somemis-positioning in Netscape 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.
<!-- m --><a class="postlink" href="http://www.siriustechnology.com/sites/singletrackmindIt's">http://www.siriustechnology.com/sites/s ... ckmindIt's</a><!-- m --> 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."need more input"
?Johnny5, Short Circuit
In other words, what is it I should do?Read about it at:
<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->
width is width of the element (such as div)
padding is added around the element (not inside the element)
border is added around the padding (not inside the element)
margin 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;
wid\th: 100px; /* IE doesn't understand this */ }Thank you!Wondering, what is Shenksh!It's "thanks" with candy in my mouth
Hi,IE handles it incorrectly. For IE
-> All of it is 100px wide
-> Margin of 10px around means 80px available
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 <!-- m --><a class="postlink" href="http://www.ericmeyeroncss.com/bonus/render-mode.html">http://www.ericmeyeroncss.com/bonus/render-mode.html</a><!-- m -->)
Hope this is of some use.
PaulOriginally posted by Paul O'B
Yes you are right. Sorry for the error.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 NS7What 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.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.Try the following for all ".box"es
.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>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>body .box1 {height:178px;}
Please let me know if that worksBTW, I'd do the following (saving filesize)
.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>body .box1 {width:308px;}
html>body .box2 {width:308px;}
html>body .box3 {width:308px;}
html>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>body .box1 {height:178px;}
html>body .box2 {height:178px;}
html>body .box3 {height:178px;}
html>body .box4 {height:178px;}
yes, it works!!!!!!!!!
THANK YOU!!!!!!!!!!!!!!!!!!!!!!
now I'm off to analyzing...
D.