Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag 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
Avatar of LZ1
LZ1
Flag of United States of America image

Any particular reason your supporting IE 6?
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

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....
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

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

Avatar of 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*/
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
Avatar of nanharbison
nanharbison
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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!
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.