Tue, 2005-06-14 15:09
If you take a look at the pathetic mock-up for a future project at http://fm.5thperiod.net/tests/necromunda.html, you'll notice that the red, solid bordered boxes and the white, dashed bordered boxes don't seem to be behaving properly. Since this is true in every browser I've tested in (IE5/Mac, FireFox/Mac,Win, IE6/Win, Safari), then I'm obviously doing something wrong.
Problem is, I have no idea what I would be doing wrong. Having no training in CSS, I figured I'd post this issue here on the noob board.
The style sheet can be found at http://fm.5thperiod.net/tests/basics.css
What I have, aside from a top/header area that rips off another site (I'm going to change it - it's more of a placeholder), are two columns. The right (or, content/main) column contains a white, dashed bordered box that's 100% of the width of the main col. Within the dashed, white bordered box are a couple of red, solid bordered boxes that, despite being 100% width within the white, dashed bordered box, go outside it. This, obviously, is unacceptable!
And, while I'm here! Is there any way for me to avoid having the left column expand in size when a user keeps increasing the text size? It ends up overlapping the right column.
All help is greatly appreciated! So, thanks in advance.
Tue, 2005-06-14 15:33
#1
100% Width Issues
You seem to have forgot that borders go outside the width; that is, they add to the box. Since a block element (eg. div) will take all the available width, there is no need to declare {width: 100%;}. If you don't say anything, it will auto-adjust to fit.
I suspect the same thing is happening to cause the checkerboard pattern of boxes in the main area.
cheers,
gary
Tue, 2005-06-14 21:56
#2
100% Width Issues
Err, yes. You're right. Thank you!
The checkerboard effect is an unfortunate side-effect of the same oversight. If you make the window big enough, this isn't a problem.
However - with the smaller boxes appearing one line after the other instead of 2 side by side per line - doesn't it seem like that shouldn't be a problem?
I'll change the widths to auto and see how that goes, and then, if neccessary, just get rid of the width lines all together.
Thu, 2005-06-16 18:35
#3
100% Width Issues
I made some changes, in addition to the auto width for the roster-sheet style, such as % margins and now the whole page scales a lot better.
The checkerboard effect is still something I'd like to be able to not worry about, but it looks like right now it'll only happen when the window is just too small to accomodate the margins, borders, and content of the boxes. Oh, well. It displays fine on an 800x600 resolution, so that's good.
The only browser giving me grief with the checkerboard (ie, it always does it) is IE5/Mac. Does anyone even use IE5/Mac? I hope not... It's a terrible browser.
Well, thanks for the help. I'm sure I'll find lots of other advice here on these forums.
Thu, 2005-06-16 20:47
#4
100% Width Issues
WaaMatt wrote:
The only browser giving me grief with the checkerboard (ie, it always does it) is IE5/Mac. Does anyone even use IE5/Mac? I hope not... It's a terrible browser.
Yes, people still use it. Especially those stuck on OS 9. But there's plenty of people in OS X still using it as well - simply because they don't know any better.
And it's not a terrible browser. It was superior to most others when it debuted. Heck, it's part of the reason we have better standard compliant browsers today. It's just that's it's long in the tooth now, and has been out of development for quite a number of years and no longer even supported.
Fri, 2005-06-17 01:12
#5
100% Width Issues
Yeah, as a lifelong Apple user, I'm well aware of the IE for Mac story.
I'm on a quiet and lazy campaign to make sure people don't use it anymore. Heheh.
In any case, it's not a priority for me right now to get everything working 100% as it should in IE 5.x/Mac.