CSS frames

[Ryan M.]

Ok... so from looking at the CSS playground (which I discovered thanks to this thread), I've created a CSS frame based layout for a site I'm working on. It looks great on Firefox, and works in IE, but there's a small (well, two, but the one annoys me more than the other. ) problem. Here are two screenshots: (+the Firefox pic, so you know what it should look like.)
Firefox, the one that works:

IE, not scrolled: (see, it looks fine!)

IE, scrolled: (not the arrow and circle...)


I can't figure out why the select ends up on top. I've tried forcing the z-index below the header layer, but it doesn't help. Any ideas?

[Mike]

Try using the same exact code on that button class (id, whatever your using) as the code of a button that is working. If that works, keep on making minor changes until it doesn't work. Then post back here on when it broke.

[Ryan M.]

The difference is that it is a <select> form thing and not an <input>. The firefox screenshot is scrolled to the same spot and you can see that the select is hidden by the header as it should be. There's no special style information associated with any of the form elements.

[Mike]

Oh, thats odd then. Try setting the z-index on the header, instead of on the select.

[Ryan M.]

Originally Posted by MikeWasHere05

Oh, thats odd then. Try setting the z-index on the header, instead of on the select.

It's set on both... 1 for select (cause I got mad at it) and 3 for the header. :cry:

[Dan Zollman]

I've seen this occur before in various sites, i.e, a form select appears above another element. I don't think it's so much a problem with your CSS as a browser problem or glitch (and unfortunately, there isn't anything we can do about those but avoid them).

[Ryan M.]

So... I poked around some more and made some clever changes and now IE displays the main content in a div in a div to allow me to still have the fixed property work, while Firefox/everything else ignores the extra div (avoiding the no scroll wheel bug you frequently encounter on CSS playground.)

Yeah for CSS!

[Adam Richards]

IE is evil. Firefox wouldn't give you that problem...

[DarkJedi613]

That's a cool layout.

I don't suppose we can get the source?

I'm guessing its done the same way as bungie.net, which has two menus that are like frames...looks good though

[Ryan M.]

Originally Posted by DarkJedi613

That's a cool layout.

I don't suppose we can get the source?

I'm guessing its done the same way as bungie.net, which has two menus that are like frames...looks good though

I'm betting... no it's not the same. I'm at school right now, so it's blocked (under "Games" of all things... ), but I somehow doubt it.

I actually do have the code with me (always keep backups on your thumbdrive!). Normal.css is the stylesheet, header.php and footer.php are the top and bottom of the page. The actual page content gets thrown in between the include of those. I fixed both the problems in the screenshots.

[Greg Marra]

I'm not going to lie, I really dislike Bungie's page. It takes a while to load, and then scrolling goes sooo slowly because of all the graphics on it.

[robot180]

This is a little unrelated, but the title of this thread reminds me of something.

I was looking up a CSS property that I forgot and I found two other things I didn't know. One is on this page, the clip property. Does that work in most browsers? I am not sure what I could use it for, but I never saw it before.

The other one is overflow property. I have used this before, but I didn't know it could be used almost to make what appears to be Iframes. Does this work in most browsers and if so, do people use it? I am asking about browsers because this tutorial only mentions whether things work in three different browsers.

[jonathan lall]

Both clip* and overflow work in all modern browsers. With overflow you'll find some minor presentational variations across the browser spectrum. But the "iframe" scroll type implemetation works with everything.

*With clip, I recall hearing that different doctypes tend to change browsers' handling of the property. If memory serves, IE's shoddy CSS2 handling is the culprit. Again. Luckily, I can't really think of many reasons to use clip.