Topic: CSS Layout Issues

I'm having a bit of trouble with a CSS layout I've been working on but I can't seem to recreate it on my own computer so I can't play and try to figure it out.

When looking at this page:
http://www.11oh1.net/lj/

One of my friends has told me she is able to see some extra pixels from the top red banner between the light-grey content holder and the nav menu on the right. It's only about 10 px and isn't blowing out the layout or anything like that.

However, I'd really like to learn more about positioning with CSS and making it cross browser so I'd appreciate it if you'd take a look at my stylesheet and tell me how horrible it is.
http://www.11oh1.net/lj/main.css

OK, here's a screenshot from Safari. See that extra little red square? Wassupwitdat? http://www.rawkawn.com/temp_photos/krets_journal.jpg

Also, the title isn't nudged up against the top. I used a margin: 0px; in the body tag to get rid of body margins. Is there something else I need to include?
Thanks all.

:::11oh1:::

[This message has been edited by krets (edited 08-25-2003).]

Hmm, did your friend say which browser she was using? This is what I'm seeing in IE6 and Firebird, and I'm not seeing the problematic area.

Your first step to clean CSS should be the validator. (Your only problem right now seems to be the proprietary scrollbar code you're using for IE.)

Now for a look into your CSS...

For you #content, #head, and #right, I'm seeing some of this (simplified for the sake of clarity):

#right {

        ...

	padding: 10px 10px 0px 10px;

	width: 120px;

	voice-family: "\"}\"";

	voice-family: inherit;

	}

I understand the voice-family is part of the IE5 box model hack, but right now it's not doing anything. The whole point of the hack is that IE5 trips over the voice-family code and fails to read any rules following it. As it is, you don't have any rules after it, so it's not doing anything.

If you're unfamiliar with IE5 box model hack works, check the FAQ

The correct code should look like this:

#right {

        ...

	padding: 10px 10px 0px 10px;

	width: 140px;

	voice-family: "\"}\"";

	voice-family: inherit;

        width: 120px;

	}



html>body #right {

        width: 120px;

        }

Why? Because you have 10px of padding to the left and right of the div. You add this padding to the 120px width, and you get 140px, which is the value you give IE5 because of it's incorrect box model.

The html>body area is a piece of code known as the "Be Nice to Opera 5 Rule." Basically, Opera 5 trips over the same "voice-family" code but gets the box model right. So you use this special selector to give Opera 5 the correct value. Everybody wins.

Now that I think of it, I think this is what's causing the problem. Your friend is most likely using IE5.


Anyways, hope this helps.



[This message has been edited by ozphactor (edited 09-15-2003).]

Thanks man, I made the change and fixed all the other CSS hiccups besides the scrollbar.

I can't preview it for myself but I emailed my friend and hopefully she will.

One of the browsers with the funky little box was Safari. I edited my first post and included a screenshot.

Thanks!

:::11oh1:::

quote:

---

Also, the title isn't nudged up against the top. I used a margin: 0px; in the body tag to get rid of body margins. Is there something else I need to include?

---

Add "padding: 0;" also. Some browsers use margins, some use paddings. Don't ask me why.

Jesus. How do you guys put up with this shit day after day? I'd have killed someone by now.

Thanks for the help. Got it to validate completely as xhtml 1.0 strict and CSS 2.0 with the exception of the scrollbar.

If anyone else finds breakages I'd much appreciate a note.

Thanks oz.

:::11oh1:::

quote:

---

Jesus. How do you guys put up with this shit day after day? I'd have killed someone by now.

---

By learning it, silly

(to clarify, that is - of course - a joke [sort of]. there are many frustrating things, but after a whole lot of time working with all of these types of issues, you learn to do it "right" from the start, and thus avoiding the compounding of problems after the fact)

[This message has been edited by DL-44 (edited 08-25-2003).]

By the way, it doesn't look like you'll be needing the box model hack for your #content and #head, so you can remove the voice-family code from those divs, as they're doing nothing but cluttering your code.

Also, I'm seeing a lot more redundancy in your code.

Things like:

margin-top: 0px;
...and...
padding: 0em;

...on objects that by default, have no margin or padding to begin with. (And also, zero values require no unit of measure.)

Also:

border: none;
...and...
width: auto;

...are unnecessary, because those are already the default values.

The only reason you would need such rules is in order to override other rules in the cascade, and from what I can see, that's not the case.