Topic: Still learnin' (Page 1 of 1)

I haven't done much web design for a while and lately I've been trying to brush up. I've put together a simple page layout in CSS just to see what was involved and I've run into a few hiccups. I've searched around a bit but it gets frustrating trying to load pages in a hotel on a 24k dial up connection. So I thought I'd hit up the pros.

Please realize, I haven't had a chance to test this on any other browser than IE 5.5 so you might not be seeing the same issues as me. I don't have any choice right now because this is my company laptop and I'm limited as to what I can install on it.

So here's my questions:

#1. See that 3px line between the #right and #left divs? What's causing that? I notice that if I specify a margin-left of -3px for the right div the line is gone. Do I have to specify borders/padding/margins? I thought if I didn't it would default to 0?

#2: I've arbitrarily specified 500px height for #right and #left just to take up space. Is there a way to force them to take up the entire page? The #top div is 75px high so how can I tell the other two to just take up the rest of the space?

If you notice anything else I've omitted I'd appreciate a note about it. I'm taking this a bit slowly so I can make sure I have a solid understanding of the basics before I try something stupid.

Thanks.

HAHA *shoots self in head*
http://www.11oh1.net/test/test.html

:::11oh1:::

[This message has been edited by krets (edited 09-10-2003).]

A link would be nice

heh And here I was trying to make sure I included all the relevant info to get the kinds of answers I wanted....
http://www.11oh1.net/test/test.html

:::11oh1:::

First of all, let me tell you that IE5 isn't the best browser to be testing CSS layouts in Now, I know you have no control over that right now, but until you do, things are gonna look screwy because of IE5's incorrect box model.

Just a quick overview in case you don't know what I'm talking about (forgive me if you do):
The correct way that browsers are supposed to handle boxes is to add padding and border onto the declared width. So if I had "width: 500px; padding: 10px; border: 5px;", the overall width of the box would be 530px (500+10+10+5+5). Unfortunately, IE5 screws up by applying padding and borders as part of the width. So the above example would turn out to be 500px, instead of 530px.

Your options are to use the Box Model Hack... or, since this is for testing purposes only, avoid using padding or borders on any page elements that have the width explicitly declared. I believe that should take care of the first problem. If not, let us know.

And oh, I'm getting some cross-browser discrepancies on the page. In IE6, the left column appears underneath the right column, whereas in Firebird, they're side by side (which I assume is how you want them to look). Again, I'm guessing this has to do with the box model.

As for #2:

quote:

---

how can I tell the other two to just take up the rest of the space?

---

You can't. It seems like a perfectly logical thing to do, and believe me, I've tried, but there's just no way to do this without resorting to tables.

Ahhhh, there's my problem I *think*. I was misinterpreting the box hack.

#right {
background-color: #FFCC00;
color: #000000;
float: right;
/* margin-left: -3px; */
width: 120px;
height: 500px;
padding: 10px 10px 0 10px;
voice-family: "\"}\"";
voice-family:inherit;
width:100px;
}

html>body #right {
width:100px;
}

See, I always thought the 120px declaration was for I.E. 6 and the 100px declaration was for I.E. 5.x. Now I see it's the other way around. That's why things were looking OK for me but not you.

I'm still getting that 3px white line between the divs though and I can't figure that one out. The only element with a padding declaration is the #right div and I've applied the box model hack (correctly this time) to it.

That's what's frustrating me now.

:::11oh1:::

[This message has been edited by krets (edited 09-10-2003).]

The page seems to work in Mozilla and Opera so it is probably something faulty with IE's rendering, as usual. Try setting the margin to 0, it might be that IE5 has a default margin of something else...

Noticed another little thing. Both #left and #right have a height set to 500px, but you have added a 10px padding to #right. This causes the #right div to have a effective height of 500px + 20 px (10px on top and bottom) = 520px, while the #left still is only 500px. So you should add similair padding to #right so they align correctly.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

Thanks Vene. I'll keep that in mind about the heights but I just chose 500 as an arbitrary value to give the divs some height.

I've tried changing both margins to 0px but the line still remains. The only thing that I have found that will work is to change the left margin of #right to -3px. That fixes the problem no matter how big I set my browser window.

There has to be some little bug with IE 5.x that I'm not aware of that's causing this. I'd like to figure out what it is so I can find the appropriate hack. This layout has got to be a pretty popular way of doing things so I know there must be some way to fix it. I could just set my background-color the same as #right but that still leaves 3 extra px on the left side of my #nav div.

Weird.

:::11oh1:::

[This message has been edited by krets (edited 09-10-2003).]