Forum Moderators: open
this is my first post, so nice to meet you!
I am trying to make a very simple seeming web page with a blog column using a div set to overflow:auto to give it it's own scrollbar. It works fine in IE, however it goes completely crazy in Mozilla. I'd really appreciate it if someone could explain why. The url is :
<Sorry, no personal URLs. See TOS [webmasterworld.com]>
Check it in IE then Mozilla!
Hit view>source to see whats going on(nb there are 2 frames in a frameset)
I'm really sorry if this problem has been discussed elsewhere, I have been researching and came up with this line of CSS:
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
Could someone also explain what this does aswell?
Thanks so much for your help,
Kind Regards
Ultraniblet
[edited by: tedster at 3:54 am (utc) on Nov. 14, 2004]
TOS says you cant post urls! please just post the source code
the line of css you posted is not proper css, as far as i can see
try specifying a height for the div that contains the blog. it seems like it firefox the div just goes outside of the frame
even better, dont use frames at all, and float:right; the div
if you post the source code it will be easier to help
take it easy
S
The CSS passes but I don't see the code you mentioned.
[edited by: tedster at 12:47 am (utc) on Nov. 15, 2004]
[edit reason] remove links that identify website [/edit]
thanks a lot for your replies. I'm sorry I didn't read the TOS before I posted.
If you couldn't see my test page, There was a frameset with 2 frames, one of which was composed of a div with an 8px white border set to overflow:scroll so it had its own scrollbar.
However in Mozilla the scrollbar was behaving strangely, like only letting you scroll half of the text (you could only scroll to the rest by highlighting it to move the text)
I ran the page through the W3C validator like g1smd suggested, and it told me to add a doctype, which I did.
But I think the main problem I am trying to understand at the moment is the box model used by Mozilla. I am sure this subject has been dealt with before on Webmasterworld, so stop me if you've heard this one before!
Well my problem in a nutshell is:
Say you set a div's width & height to 100% so it fills the page. Then you give it a scrollbar with overflow:auto, and a big border with border:50px solid #FFFFFF. Now your content goes off the page by 50px on the right and bottom edges! Is there a way to stop this?
If you remove the divs height&width settings and put it into a container div that has height&width set to 100%, the scrollbar stops working properly as described above.
So Im feeling a bit confused now!
I hope this all makes sense, thanks for reading,
Ultraniblet
I've got the W3C validater to pass my page now (all apart from the character encoding, which is to do with my host I think), but it hasn't helped the problems in Mozilla :(
the box model used by Mozilla. I am sure this subject has been dealt with before on Webmasterworld
You're right about that, but there's no damage in discussing it again!
set a div's width & height to 100% so it fills the page. Then you give it ...a big border with border:50px solid #FFFFFF. Now your content goes off the page by 50px
You are 100% correct that this is a box model issue. Here's the basic run down:
There are two box models that we have to deal with. The standards-compliant one that FF/Moz uses, and the proprietary one that IE5.x & IE6/Quirks use.
IE: The quirky box model takes your width value as the final word in box width. It then packs borders and padding INSIDE of that width. So a 100% wide box with a 50px border all around has a content area of 100% - 100px, and retains 100% as it's total width.
FF/Moz: The compliant box model takes your width value and uses it to define the content area of the box. It then ADDS border and padding to the outside. So your 100% wide box is actually 100% + 100px, making it too big for the browser screen and resulting in what you see. See the W3C's Box Dimensions page [w3.org] for details.
Whichever one you like best or think is 'right' (it's an ongoing debate, believe me), this is the reality right now: if you want cross-browser uniformity, you've got to hack the box model.
The solution is to give FF the values it needs, then hack IE to give it the values it needs. We hack IE because future browsers will depend upon the compliant box model, not IE's quirky one. This is evidenced by the fact that IE has already seen fit to go the compliant route...if your page has a valid DOCTYPE, IE6 renders it with the compliant box model.
Anyway, here's some code. You'll have to play around with the numbers since you're using percentages. I design in fixed widths, so for speed and ease of example, I'll shoot for a fixed width box size of 800px...
Solution #1:
#thebox {
width: 700px;
border: 50px solid #000;
}/* start iemac hide \*/
* html #thebox {
width: 800px;
w\idth: 700px;
}
/*end iemac hide*/
The first rule declaration feeds compliant browsers the correct value. It will ADD 50px of border to either side, resulting in a TOTAL of 800px.
The second one, starting with the comment line, gives IE/Win the full 800px width (remember it'll pack the border inside) via the Star Hack.
The "w\idth" property gives the smaller, compliant width back to IE6/Standards.
This rule declaration is inside of the Commented Backslash Hack in order to hide it from IE/Mac, which uses the compliant box model.
Solution #2:
If you don't like using hacks, there's another method which involves enclosing the element inside of a wrapper div, like this...
<div id="thewrapper">
<div id="thebox"></div>
</div>
Then applying the width to the wrapper and the border to the box...
#thewrapper {
width: 800px;
}
#thebox{
border: 50px solid #000;
}
Since neither element has BOTH a width and a border there's no conflict between box models. This method is probably better for your situation, since you want to use percentages for your width.
Either way, good luck, and welcome to WebmasterWorld!
cEM
No. Add it as a meta tag, as the first line after the <head> tag. You'll need ISO-8859-1.
I think I'm pretty good at doing what you are called!
Thank you for your in depth post & clear, concise description of the Box Method wars.
Having read your guide, I went for solution #2 as I want the height of my blog column to expand if the user resizes their window (it runs all the way down the right side of the page).
So now I have
body,html{
margin:0px;
padding:0px;
}
.wrap{
height:100%;
width:100%
}
as my style sheet, and the body of my document looking like this:
<body>
<div class="wrap">
<div style="overflow:auto; border:8px solid #FFFFFF; background-color:#cccccc;">
... All the Lorem Ipsum here ...
</div>
</div>
</body>
However, my page is still broken! :( The blog column+ its scrollbar & bottom border all extend off the bottom of the page! Why is this when my wrap div's height is set to 100%? Also, I just noticed it doesn't work in IE aswell now. It did work in IE when instead of a wrapper div I put a table with 1 cell set to height&width of 100%, & also set the main div's height&width thus.
I'm so confused.. I know Mozilla's box model is the correct one, but why is it so hard to make this simple seeming page?
Hmm.. I wish I could post my test url so you could see the page without having to go to the trouble of remaking or imagining yourself..
Well look forward to your response,
Ultraniblet
I added the character encoding meta tag, So I have a clean bill of W3C health at last!
The blog column+ its scrollbar & bottom border all extend off the bottom of the page! Why is this when my wrap div's height is set to 100%? Also, I just noticed it doesn't work in IE aswell now. It did work in IE when instead of a wrapper div I put a table with 1 cell set to height&width of 100%, & also set the main div's height&width thus.
Am I correct in assuming from this that your horizontal problems have been solved, but the vertical problems remain?
If you would like to Sticky the URL to me, go ahead. I can't promise that I'll be able to check it out soon, but if have time, I will.
In the meantime, could you try to explain how you WANT the page to look versus how it DOES look? I'm not 100% clear on exactly what you're trying to accomplish.
Regarding our talk about a 100% height div with a border,
I was looking on quirksmode.org at this page:
[quirksmode.org...]
If you click on the 1st pop-up example, he has a div with a border & height set to 100%. If you view his source though, you can see he has used the
-moz-box-sizing: border-box;
box-sizing: border-box;
box model fixes for mozilla & IE mac respectively. It seems this is the only way possible to do this (hey prove me wrong people!) + It wont work in Safari.
Well, still not quite there..
So to reiterate my Sphinx's CSS riddle to see if anyone can solve it..
How do you make a div set to 100% height, with a fat border & overflow:auto work in all browsers without using the box-sizing hack?
