<div> position problem

[Hound]

Hello,

Using <div>s with code like this

#Layer1 {
position:absolute;
left:193px;
top:121px;
width:106px;
height:17px;
z-index:1;
}

seem not to be working in IE6. The site is for a friend and I really want to get it right... does that look wrong to anyone?

[jscheuer1]

There isn't really enough information there to tell much. We would need to see it in connection with the content. The width and height of an absolutely positioned element will not take up any layout space though.

[Hound]

I just shot you a PM. Need your opinion before I post more information. Thanks!

[jscheuer1]

The only problem in IE 6 that I see is that your png's which apparently use alpha channel transparency, look opaque. As someone suggested in another thread, try .gif's. Unless you are using partial transparency, this will be fine. Even if you are, there may be a way, with the full transparency of a .gif to get the effect you want. The alternatives are:


Have special css that uses .gif's for IE 6 and below only.

Use IE 6's alpha image loader filter (the filter is tricky and poorly designed, I do not recommend this but, it can be done).

Use a different design altogether.


I don't see this as having anything to do with the bit of style that you posted in your first post in this thread.

[Hound]

The .PNGs will be replaced by text soon. So I am not conserned with the alpha problem.

What I am having trouble with is the position of the nav menus in IE6. The position of the <div>s are defined in the .css file. They work like a champ in IE7 but not IE6.

www.coreyhine.com is the site.

Here is part of a screenshot Corey sent me http://www.flickr.com/photos/39111115@N00/358583119/

[jscheuer1]

It simply doesn't look like that in IE 6 here. Not much more I can say about it. Make sure that your friend empties the cache in the browser and tries again.

[Hound]

Ok, found out why it looked different to you. You didnt look at the 'graphic design' page. I have cleaned up the code so that all the nav buttons now pull from the same external css.

www.coreyhine.com/test

On IE6 stacks them all to the left. Here is the code for the graphic design button <div>

#LayerGraphicDesign {
position:fixed;
left:193px;
top:121px;
width:106px;
height:17px;
z-index:1;
}

[jscheuer1]

That's different than the style in your in your first post and is the problem. IE 6 and before don't do position:fixed; - so if you can live with position:absolute; - it would be the same in all browsers. If you want to only use position:absolute in IE 6 and earlier, you can probably use the hack:


#LayerGraphicDesign {
position:fixed;
left:193px;
top:121px;
width:106px;
height:17px;
z-index:1;
}

* html #LayerGraphicDesign {
position:absolute;
}

Fortunately, in this case, even IE 7 will ignore this as will all other browsers except IE versions 6 and less. But, it won't validate and will show errors in some browsers' error consoles. The preferred method would be an IE version specific conditional comment. This would require a separate stylesheet linked to, or a separate style section on each page though. To do that, make an IE version specific comment with the added stylesheet link contained within:


<!--[if lte IE 6]>
<link rel="stylesheet" href="ie_6_and_less.css" type="text/css">
<![endif]-->

Place that below the regular stylesheet link on each page and then in the ie_6_and_less.css file have:


#LayerGraphicDesign {
position:absolute;
}

[Hound]

FANTASTIC. I'll give this a shot tonight! MANY THANKS.

I apologize for the confusion about my previous code... being new at css the first few versions of the site weren't coded clean... i.e. most pages contained their own css in the header. I have since cleaned the code for the /test page. But even now if you go to www.coreyhine.com and go to the graphic design page, then look at the code, you will notice that has a different css than the other pages :( blah, I AM LEARNING THOUGH!

[Hound]

Here is what the site looks like in Safari.

http://www.flickr.com/photos/39111115@N00/361628244/

I want to learn CSS better, but my first understanding was to get sites to look the same across all browsers... this simply has been the oposite from my experience. :/

Am I doing something fundamentally wrong?

[jscheuer1]

From the looks of it, Safari either doesn't do position fixed and/or, it is not being shielded by the conditional comment. What version of Safari?

[Hound]

Safari 1.3.2 (v312.6)

[jscheuer1]

I know little about Safari, that is close to if not the latest version though, right? In any case, it is either a rendering bug or, as I said last post, Safari isn't doing position:fixed. I don't know of any good Safari styling hacks, so I would figure it this way:

Either just make all browsers use position:absolute or forget about Safari.

The first option would only be useful if it fixes Safari.

Some things to make sure of first:

1 ) Make sure you are using a valid HTML 4.01 DOCTYPE. Don't use an XHTML DOCTYPE.

2 ) Validate the style (http://jigsaw.w3.org/css-validator/) and markup (http://validator.w3.org/) (links are to the respective validators at w3c.org).

[Hound]

Ok. I may put the main body content in <div> so that the page fits in a 800x600 display.

What is the correct way to hide scroll bars? Right now i just have them as all colors black but that isnt working on some browsers also.

And is there a way to customize the graphic that is used for the scroll bars?