[RESOLVED] z-index in IE6 doesn’t work?

@dtm32236Sep 12.2007

Hi,

on my home page:
~~[url]~~http://www.foremostgroups.com/dev/2007corporate/index.html[/url]

there are image links on the right hand side (kitchen&bath, indoor, etc…) and other links on the bottom (corporate info, global sourcing, etc…).

in IE6, whenever the user hovers over the right hand side links, a few of the bottom links disappear, even after I set the z-indexes of these items.

Can anyone see why this is?

Haven’t tested on Mac yet, but on Windows, it looks fine in IE7 and FF2.

Thanks for any help.

to post a comment

CSS

24 Comments(s) _↴

@KDLASep 12.2007 — #Z-index only works with absolutely positioned elements. I didn't notice any when reviewing your CSS.

My guess is that it is a padding/margin issue, where IE is adding extra space to your links, thus pushing the ones at the bottom "out of the box."

@KravvitzSep 13.2007 — #1) Why did you set overflow:scroll on <html>? It's causing the vertical scrollbar in IE6 to always be disabled, even when it shouldn't be.

2) IE doesn't like having a width set on <body>.

3) Actually, KDLA, you're right that z-index doesn't apply to elements with position:static (the default value), but it is applied to elements with position:absolute, position:relative, and position:fixed. (IE6 doesn't support position:fixed.)

4) Try removing the comments from between those floated elements. Weird things can happen in that situation.

@dtm32236authorSep 13.2007 — #thanks for your help guys.

I've removed the overflow:scroll - thanks for pointing that out.

And I tried to remove the width in the body tag, but it messed up the entire layout. Both the HTML and CSS validates, and it looks fine in all browsers, so I'm going to leave that - for now at least. (There is one HTML error - using name=" ", but I haven't figured out how to fix it yet, I'll get to that).

And I've removed the comments.

I also set all the divs to display:block, and removed all padding and margins.

The problem cleared up - a little - now only the Sales/Service link disappears when you mouseover the right-hand side links.

I don't get it.

@dtm32236authorSep 13.2007 — #what a pain...

so, i took out the overflow:scroll, and IE6 still won't scroll when needed (check out the 'Careers' page).

any idea why?

i'm so sick of formatting for IE6.... everything seems to work fine with every other browser.

@WebJoelSep 13.2007 — #What part is actually supposed to 'scroll'?

@dtm32236authorSep 13.2007 — #the entire page, not any specific element.

IE6 isn't letting me scroll at all... even when the content extends below the fold.

@WebJoelSep 13.2007 — #So it's not an scrolling issue. -If it's IE, then it's probably uncleared floats or something.

Lookiing over your CSS and HTML, I note that the CSS is nearly as large as the HTML. It should be 'around or under' 10%.

Here is an example:


<div id="[B]main_content[/B]" style="overflow:hidden; height:auto; border:2px solid red;">

<h2>Careers with Foremost</h2>
  <img src="images/careers.jpg" alt="Foremost Groups Careers" class="border9ab3bc" style="float:right; margin-left:15px; margin-bottom:5px" /> 
  <!-- Site main content -->
  <p [B]class="justify"[/B]>Foremost is a U.S. based international company with a permanent commitment to serving North America, Europe, and Asia through our corporate presence and to bringing the strength of our global resources to work for the benefit of our customers.</p>
  <p [B]class="justify"[/B]>Through careful management of the design, manufacturing, and distribution of all items we produce and import, we create a &quot;Dynamic Synergy&quot; that gives our customers unparalleled value, quality, and service.</p>
  <p [B]class="justify"[/B]>Foremost is light-years ahead of its competition in providing customized services that enable us to produce and deliver better products more quickly, economically, and efficiently, and with the highest level of customer satisfaction.Our Global Design Center can create innovative and exciting new product designs to your custom specifications virtually overnight. Our Logistics and Global Supply-Chain Management Center saves you money and time by helping keep your product storage and inventory positions as low as possible, and by offering &quot;Just-In-Time&quot; or on-demand delivery.</p>
 
  <p [B]class="justify"[/B]>Our well-trained and highly professional Customer Service Representatives strive for 100% satisfaction on every customer contact. We invite you to explore our web site and discover how Foremost's &quot;Dynamic Synergy&quot; of innovative design, superior products, and exceptional service results in greater opportunities for you, and greater satisfaction for our customers. For all positions, competitive salary, along with dental and health benefits are provided.</p>

</div>

[/QUOTE] How many more times do you expect to re-write [I][B]class="justify"[/B][/I]? By simply stating thus:

# main_content [B]p[/B] {[I]the rules in CSS for [COLOR="Red"]class="justify"[/COLOR][/I]}

and delete:

.justify {the rules}

from the CSS, and you are saying the same thing.

I am seeing many examples of what could be condensed. ? Or omitted as the stated value is default anyway (i.e. "text-align:left;").

Anyway, I now have a working copy offline and will see if I can figure this out. ?

@WebJoelSep 13.2007 — #Well it's a quick-fix and I don't understand why this works yet, -but change to this:

#container {[B]position:absolute; left:0;[/B] width:750px; height:auto; margin:0 auto; border:1px solid #c2d1d7; text-align:left;} /* Bounding box for entire site */

and bottom of page becomes visible to IE.

Oh, -and [I]get rid of this[/I]:

body {[B]width:750px;[/B]...}

You don't want to squeeze the body. The container maybe, -but leave the body-width alone. ?

@dtm32236authorSep 13.2007 — #Thanks! That fixed both the scrolling problem, and the disappearing links problem!

But with the body {width:750px;...} gone, I can't seem to get the entire page centered again, it's left aligned now.

Sorry, this is the first site I've created with CSS-only positioning (I've always used tables). I'm trying to learn - that's why I'm here, but I'm sure that a lot of my coding syntax is terrible and redundant. Please excuse this.

If you know of any good CSS-learning sites please let me know. I know of meyerweb.com, and that's about it. I haven't got to read up on CSS extensively.

Any idea how to center the entire site?

Thanks so much.

@FerretSep 13.2007 — #Could try something like:

[code=html]<div id="container1" style="text-align:center;"><!-- obviously you could (and should) put these styles into the CSS file -->
 <div id="container2" style="margin: 0 auto;">
 
 ...content...
 
 </div>
 </div>
 [/code]

@dtm32236authorSep 13.2007 — #That worked to center the page, but now (again) the pages won't scroll down in IE6.

Wow, this is terrible.

PS - I changed the CSS around a little, in case you have it saved locally.

@WebJoelSep 13.2007 — #You know what? -Make "[B]body {width:750px;}[/B]" and, if that works, -leave it that way. I guess that this is no more harmful than say, -making the body width 95% or whatever... The main concern is one of lineage: if the parent "body" is 750px and you make a child "div" be a [I]percentage[/I] width, it is that percentage of 750px... this just invites confusion. But I am not seeing any 'percentage widths', so it's probably okay.

A 'problem' with this method is that is the "body" is 750px and yo have a container that is 750px and you add "border:1px solid color;", -you just exceeded the max width by 2-pixels and the thing looks okay in IE (which incorrectly expands by the two pixels to become 752px wide), but all other browsers start 'wrapping/dropping' and falling apart...)

(p.s., -yes, -I have your CSS locally, and <base href="" /> and noticed a difference again...) ?

@dtm32236authorSep 13.2007 — #I'm sorry to keep coming back here guys, but as I fix one problem, I seem to create others (should I create another thread?)

Thanks to you guys, everything seems to be working now. (except for one thing)....

it's the same disappearing link problem... in IE6, the 'site map' link in the footer isn't there.

I'm not comfortable with my understanding of the 'clear' property, and I haven't used it at all - despite the generous usage of 'float' on my page. Could this be part of the issue?

I've been working on this stupid header and footer all week (and some of last week) - it's so close - but I can't ever seem to get it perfect.

@WebJoelSep 13.2007 — #oh [I]nooooo[/I]! :eek: -Major problem!! -In Firefox, there is only a large (750px by 100% screen-height) white box, with just the footer links, arranged vertically! :eek: :eek:

Maybe this would be a good time for a complete re-build. Clearly you have some idea what is supposed to be happening. I took a few screenshots of your site eariler and just snagged your images, -I'd like to take a kick at this and maybe I can get this CSS reduced to something more manageable. There is redundancy and such that can be cleared out. I think changes made to accomodate "careers" page has busted the other pages...

I'll work on this tonight after supper, -might have something to show you by tomorrow. ?

@dtm32236authorSep 13.2007 — #i just fixed that... it should be fine now.

is it still like that?

anyway - you're awesome.... thanks so much, WebJoel.

@WebJoelSep 13.2007 — #(done with supper) :

Yes, -the page is showing now in Fx. (whew!).

In Firefox however, the 'copyright' exceeds the allocated width: see screenshot image.

[upl-file uuid=7e0af81b-7590-4191-a4d1-162b85a675a2 size=18kB]ScreenHunter_3.gif[/upl-file]

@WebJoelSep 13.2007 — #Let's replace this:

<div id="footer_links_div">

<ul id="footer_links_ul">

<li class="footer_legal_notice"><a href="legal_notice.html" class="footer">Legal</a> <span class="copyright">|</span> <a href="privacy_notice.html" class="footer">Privacy Notice</a></li>

<li class="footer_copyright"><span class="copyright">Copyright © 2007 Foremost Groups Inc. All rights reserved.</span></li>

 <li class="footer_site_map"><a href="site_map.html" class="footer">Site Map</a></li>
  </ul>

</div>[/QUOTE]

with this:

<ul id="footer_links_div" style="margin:15px auto; height:19px; width:100%;">

<li style="width:22%; display:inline; float:left;">

<a href="legal_notice.html" class="footer" style="width:32%;padding-left:10px;">Legal</a> <span class="copyright">|</span> <a href="privacy_notice.html" class="footer">Privacy Notice</a></li>

<li style="width:55%; display:inline; float:left; text-align:center; padding-left:20px;"><span class="copyright">Copyright © 2007 Foremost Groups Inc. All rights reserved.</span></li>

<li style="width:18%; display:inline; float:left;text-align:right;padding-right:10px;"><a href="site_map.html" class="footer">Site Map</a></li>

</ul>[/QUOTE]

The styles are 'inline' and thus, over-ride the external. Basically, I used "footer_links_div" applied to the "ul", and everything else is 'inline' as shown.

@dtm32236authorSep 14.2007 — #hey WebJoel,

I tried this on the 'Corporate Information' page (http://www.foremostgroups.com/dev/2007corporate/corporate_information.html), and I'm still getting the same thing in IE6 - the 'site map' link is missing.

I still don't get it, no matter what I do, something is messed up in IE6.

@dtm32236authorSep 14.2007 — #i figured that all elements should have their own div container... is that a misconception?

@dtm32236authorSep 14.2007 — #i got completely fed up with this, and decided to reformat it.

i put all the links to the left, and the copyright to the right. this seems to work out a lot better.

thanks to everyone that helped me out with this. i really appreciate it.

-Dan

@WebJoelSep 14.2007 — #i figured that all elements should have their own div container... is that a misconception?[/QUOTE]
Not necessarily, but often, yes. Any 'style' you wanted to apply to the container's content, you could just as easily apply to the actual content itself and rid yourself of a un-necessary container. You could for instance, put multiple images in one container DIV like"<div style="width:auto; height:100px;">

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

</div>[/QUOTE] (and some STYLE to reduce this 'inline'). This makes more sence than:<div style="width:auto; height:100px; float:left;">

<img src="#" style="width:200px; height:100px; /></div>

<div style="width:auto; height:100px; float:left;">

<img src="#" style="width:200px; height:100px;" /></div>

<div style="width:auto; height:100px; float:left;">

<img src="#" style="width:200px; height:100px;" /></div>

<div style="width:auto; height:100px; float:left;">

<img src="#" style="width:200px; height:100px;" /></div>
[/QUOTE]the main difference being (apart from less redundant code), the "float:left;" would go on the container, not the individual images, to make them be "horizontally aligned".

(Porbably the images would require "display:block;" to get rid of an annoying 1 or 2-px 'gap' at the bottom and/or right edge).

Less really is more when it comes to CSS. ?

@dtm32236authorSep 14.2007 — #yeah, i wish i could make my css 'less'.

i don't really know how to shorten all of the redundancies in my css (there's a lot)... usually when i try to, i end up messing up my pages format.

i don't really know what to do.... my CSS file is larger than my actual pages.

@WebJoelSep 15.2007 — #yeah, i wish i could make my css 'less'.....[/QUOTE] From my previous example:<div style="width:auto; height:100px;">

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

</div>[/QUOTE] Let give the DIV an [I]id[/I] and move it's STYLE to a CSS sheet:

HTML<div id="pic-holder">

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

<img src="#" style="width:200px; height:100px; float:left;" />

</div>

[/QUOTE]And the CSS is: #pic-holder {width:auto; height:100px;}[/QUOTE]
----------------

Now, we do for the images (the children of~) the parent container [I]#pic-holder[/I]

HTML:
<div id="pic-holder">

<img src="#" />

<img src="#" />

<img src="#" />

<img src="#" />

</div>[/QUOTE]and the CSS is now just:#pic-holder {width:auto; height:100px;}

#pic-holder img {width:200px; height:100px; float:left;}[/QUOTE] So what we have, is complete seperation of the 'presentation' (the CSS: what makes it look the way it does), from the 'content' (the HTML). This reduced the page-weight. Applied consistantly, the saving of page-size can really add up. And 'bots/spider having to not wade-through inline and same-page STYLE, can read 'deeper' into your page, searching for indexable content. This improves ranking and search results. The supposed 'max' the CSS should be, is 10% of the HTML. More than that, there are redundancies or over-stating/re-stating when a value is actually inherited anyway. Re-stating is not an error, -but it is bloat.

There are nice CSS-validators and CSS-optimizers out there. *I* don't really use CSS-optimizers (or HTML optimizers) as they super-uber optimize and make the associations almost un-readable to anyone whom has to edit the file later on. Example:

If any "<form>"s exist on your page and has the style of "margin:6px;", and you have other elements that also have a 6-pixel all-around margin, like:

img {[B]margin:6px[/B]: display:block;, etc etc}

#footer {[B]margin:6px[/B]; width:100%; etc etc etc}

#navs ul {[B]margin:6px[/B]; display:inline;...etc etc}

(and so on),

The CSS-optimizer would condense this into:

[B]form, img, #footer, #navs ul,[/B] (and so on), {margin:6px;}

and remove any instance of "margin:6px;" from :

img {display:block; etc etc}

#footer {width:100%; etc etc etc}

#navs ul {display:inline;...etc etc}

(and so on),

From looking at, say, "#footer" in the above section, you cannot tell that is has a 6px all-around margin so one might wrongly assume that there is no margin for it.....

---
Later, you need to increase the margin of "#footer" to margin-top:10px , and zero left & right, and margin-bottom:8px; ("<form>" already has 6px all-around), -how do you do that? It becomes madness to straighten that out... A few hundred such associates to flesh-out..

HTML & CSS optimizers clearly have their place... when a site is absolutely, 100% "finished".

Clean, small code is great to work on. I loathe working on 'previously-optimized' files though... ?

@dtm32236authorSep 17.2007 — #that helps a lot, and i'll be working on my CSS to clean it up.

thanks a lot, WebJoel.

Also in #CSS _↴

IE6 disappearing float CSS not displaying 1px gap in IE5

Success!

Help @dtm32236 spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] z-index in IE6 doesn’t work?

24 Comments(s) _↴

# main_content [B]p[/B] {[I]the rules in CSS for [COLOR="Red"]class="justify"[/COLOR][/I]}

</div>

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] z-index in IE6 doesn’t work?

24 Comments(s) ↴

# main_content [B]p[/B] {[I]the rules in CSS for [COLOR="Red"]class="justify"[/COLOR][/I]}

</div>

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #CSS _↴