CSS Issue in Firefox

[scottdev]

I'm using an absolute position for a couple items in the header. They appear fine in IE and Chrome, but Forefox is wrong. Anyone have experience with any issues with Firefox and this tag?

http://www.mobilebellboy.com/order/

[yellow1912]

http://stopdesign.com/archive/2003/09/03/absolute.html

In short, you need to give the containers position:relative.

FF is behaving according to w3c standards

[kuroi]

When using absolute positioning you have to set a context. This is done by giving the element that contains those that you wish to position as "position:relative" style.

If you don't do this, browsers will assume one for you. In some cases they're position from the parent element, in others from the browser window.

In your case, I'd recommend adding "position:relative" to your headerWrapper div and then making any adjustments that you need to the top and right of the elements themselves.

[scottdev]

Thanks - that seems to be helping. Of course it brought some more issue up though.

IE8: Seems like I have to use z-index:1;, z-index:2; to get proper layering because my items layer over each other - which doesn't seem like a problem in the other browsers.

Chrome: Won't position the z-index:2; item at all - just stays in one place.

Netscape: Positions well, but the top drop-down does not drop-down. The bottom drop-down is ok. Drop-downs work in other browsers. Very weird.

Also, I have a span right above the mock shopping cart in the header on the home page. It displays well in Chrome, but in all other browsers, it displays a small section of the row with the red background. Not sure why.

One other item - not a css issue - the background image in the header does not display at all in IE8, but is fine in all other browsers - go figure.

Back to the positioning game now - still have three more items to go!

Thanks guys for your help.

[scottdev]

I've noticed as I place these items in the row in the top of my table, now my background image is repeating because the row is getting bigger. I assumed that even though I am using a standard html table, those items using float or position would not effect the table row. I guess I was wrong. I have ended up with a css/html hybrid for this custom header (and some other areas on the site) - still learning css.

I'm wondering if I floated or used the position css tag for that background header if that would fix the problem described above? If I did that, I guess I would not need that table row any longer?

I also have a problem with the two category drop down's. I'm not sure how to reduce the width of them. I've tried setting the width and no overflow, but didn't seem to help - width: 75; height: 130px; overflow: hidden;

As I position these items, does their position effect the position of other positioned items? Does setting the width and height as small as possible allow more room between the items?

[scottdev]

I also have a problem with the two category drop down's. I'm not sure how to reduce the width of them. I've tried setting the width and no overflow, but didn't seem to help - width: 75; height: 130px; overflow: hidden;

Found the fix for this by changing the code in the include file.

But seems like the overflow property would have cut it off - but didn't.

[scottdev]

Re: Found the fix for this by changing the code in the include file.

Looks like I spoke too soon - for some reason IE displays the drop-downs way over on the left side of the page!

Back to finding another solution.

[scottdev]

OK - it's starting to really get crazy with the css - both browser behavior and page positioning.

I'm beginning to I should create a large css container at the top of the page to hold all of the other positioned elements in - does that make sense? How would I do it?

Every time I add a new item to be positioned (both css and html), it creates space on the page causing all the other css positioned items to move.