Avatar of nsitedesigns
nsitedesigns
Flag for United States of America asked on

z-index pushes object down in ie6

The proper way this is to look is to have the blue nav bar go through the shark graphic.  Works in all browsers but IE 6.  In that browser the nav bar floats BENEATH the shark.  I used z-index to position shark graphic

http://nsitedesigns.com/nsitedesigns/golfito/index.html
http://nsitedesigns.com/nsitedesigns/golfito/golfito.css
CSSAdobe DreamweaverWeb Development

Avatar of undefined
Last Comment
nanharbison

8/22/2022 - Mon
LZ1

Any particular reason your supporting IE 6?
nanharbison

IE 6 may be adding padding or a margin to the nav bar, you can target IE 6 specfically by putting an underscore in front of style items.

#navigation {
	font-size: 14px;
	text-align:left;
	margin:0px;
        width:880px; /* blue bar width*/
        padding-bottom:20px;  /* pushes content down */
        _padding-top: 0px;
        _margin_top: 0px;
}

Open in new window

nanharbison

wait, that's not it. I think the blue nav bar is too long, and it is being pushed down for lack of space. I am working on it....
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
nanharbison

This is close, there must be a padding or margin so I can't get the two ends of the blue bar to be right next to each other.

#navigation {
	font-size: 14px;
	text-align:left;
	margin:0px;
	width:880px; /* blue bar width*/
	_width:623px; /* blue bar width*/
	padding-bottom:20px;  /* pushes content down */
}

Open in new window

nanharbison

You are also going to have to add some CSS for IE6 in your main content window, because it is getting pushed down also, which you can't tell until the blue bar is fixed.

.thrColFixHdr #mainContent {
	width:320px;
	_width:310px;
	margin-top: 0px;
	margin-right: 250px;
	margin-bottom: 0px;
	margin-left: 305px;
} 

Open in new window

nsitedesigns

ASKER
LZ1 - The reason I am worried about IE 6 is that there are still some people in my area that use this and the site breaks down in it so I feel it is important to fix.

Nanharbison - Well, got a partial fix so we are making progress.  At least now the blue bar is next to shark but there is a small white gap.  At first I thought maybe the shark image had a white border but that is not the case.  I also added the following but it didn't totally fix it either.

_padding-right:0px;  /* ie 6*/
            _margin-right:0px;  /* ie 6*/
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
nanharbison

My method of attach in this case to to put temporary borders on the divs, to see where the problem is. A border around the navigation div shows NO white space, and then a border around the logo_bluebar also has no white space, which doesn't make any sense!
ASKER CERTIFIED SOLUTION
nanharbison

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
nsitedesigns

ASKER
cool beans!  That pushed it next to shark, I then increased the width and it filled the area with blue.

 _width:626px; /* ie 6 blue bar width*/

You rock!
nanharbison

Thank you! It is all those years of beating my head against the wall trying to get various versions of  IE to behave. I have really learned to HATE Micro$oft's shoddy products.
Your help has saved me hundreds of hours of internet surfing.
fblack61