EPIC BOOBS FOR THE SOLUTION! IE 6&7 Bug I can't seem to shake

emp

emp

New member
Jun 29, 2006
7,465
211
0
OK, here is the deal.

Currently finalizing a page design for a local restaurant. You can see it here:
(Which is not going to be the final URL, do not worry)

Events - Events

If you paste this into the netrenderer
IE NetRenderer - Browser Compatibility Check -

You will see that the navigation is getting fucked up.
The right image, which is a float:right gets pushed to the bottom.

Hmpf.. at my wits end... anyone?

Here is the relevant bits of code...

HTML
Code: 
<div>
  <div><a href="?language=en&category=Home">Home</a></div>
  <div class="column span-4"><a href="?language=en&category=Our-Offers">Our Offers</a></div>
  <div class="column span-3 activoben">
    <img src="img/navactive_left.jpg" class="navactiveleft">Events<img src="img/navactive_right.jpg" class="navactiveright">
  </div>
  <div class="column span-3"><a href="?language=en&category=About-us">About us</a></div>
  <div class="column span-3 last"><a href="?language=de&category=Feiern-und-Anlaesse&page=Anlaesse"><img src="img/ch.gif"></a></div>
            
</div>
<div class="column span-19 navunten prepend-1 last">
            <!-- LOWER NAVIGATION FOLLOWS-->
and CSS

Code: 
.activoben {background:url(../img/activenavbg.jpg); font-size:12px; background-position:center bottom; background-repeat:x; font-weight:bold; display: inline; min-height:30px;}
img.navactiveleft {float:left; display:inline;}
img.navactiveright {float:right; display: inline; position:relative;}
Argh...

An epic boob thread for the solution (those who know my boobs threads know you will not be disappointed)

::emp::
 


You'd be better off using a ul/li list , with the li's floated left, and using the css background property on it for selected menu items, as opposed to divs, imgs, and other overcomplicated matters. (or even floated anchor tags with display:block enabled so you can give it a background image of a specific size)

I'd go into more details, but I usually charge to touch the fuck-up that is called IE6.
 
funny thing is, that it is IE7 that is fucking up here. I do not even provide any support for IE6, I just do not care if it breaks.

Also can not use a fixed background image, as the menu items are different width (also different width for English/ German version).

::emp::
 
emp said:
funny thing is, that it is IE7 that is fucking up here. I do not even provide any support for IE6, I just do not care if it breaks.

Also can not use a fixed background image, as the menu items are different width (also different width for English/ German version).

::emp::
Click to expand...

When it comes down to variable width situations is when spans and such come in handy. For example the anchor or li having the front half as the background, then a span within the li, could be absolutely positioned to hang on the "right: 0px; top: 0px;" making sure you give the anchor or li enough left/right padding for both to fit (and to make them position: relative; so that the absolutely positioned span or div within the element goto the edge of that element and not the containing document)
 
EMP,

Do you have a vm to run an actual copy of ie7 with? Grab tinyxp and upgrade it to ie7 and then test this. When you're testing it, fire up firebuglite so you can at least see the dom as you're trying to fix things.

I don't trust those netrenderers, and plus you need to interact with the design to troubleshoot it. I'll be around all day, shoot me a pm and we can discuss it if you need to.
 
You don't even need to float a list left for the navigation. Just make them display inline and it will make them line up horizontally. In IE 6, most everything you need to float will also need "display: inline". So, it's usually best to test it with that set first prior to floating so you don't have to deal with clearing.
 
backlinkgurus said:
Eh a sprite based css menu would definitely be the route to go with this one.
Click to expand...

hehe, I haven't done that since MonsterLp.com (I guess his domain expired, linked to the mockup I sliced)

example:
menu.png


with a bit of background positioning etc, you'd just use a different single graphic for another language.
 
Rexibit said:
You don't even need to float a list left for the navigation. Just make them display inline and it will make them line up horizontally. In IE 6, most everything you need to float will also need "display: inline". So, it's usually best to test it with that set first prior to floating so you don't have to deal with clearing.
Click to expand...

Tested that, no dice.

::emp::
 
A lot of ie6 problems are box model sizing or haslayout problems

Try removing position:relative for img.navactiveright for ie

You can also use ie7-js - Project Hosting on Google Code to fix a lot of ie6's minor irritations, there's an ie8.js also that'll help ie7 act a little more like ie8.

some more info that may help

HasLayout Overview

Internet Explorer CSS Bugs - hasLayout.net by Zoffix Znet

You also need to check it in an actual browser, I wouldn't fully trust that online renderer.

Final Builds Site - Internet Explorer Collection
 
Release the boobies!

Add this to your CSS

Code: 
.activoben {
    position: relative;
}
.activoben div {
    float: left;
    width: 100%;
    position: absolute;
    left: 0;
}
#anlaesse { padding-top: 15px; }
And for your active node (the one with the activoben class), wrap the display text in a `div` instead of just stripping the `a`

Code: 
<div class='column span-3 activoben'>
    <img src='http://194.150.248.188/~tobelhof/img/navactive_left.jpg' class='navactiveleft'>
    <div>Home</div>
    <img src='http://194.150.248.188/~tobelhof/img/navactive_right.jpg' class='navactiveright'>
</div>
Lastly, you need to add the ID to that image that you have in the nav. This is to fix a vertical positioning error that cropped up magically

Code: 
<img id="anlaesse" src="img/ch.gif">
Firefox 3.6
23molds.jpg


IE 7
4l2irc.jpg
 
FUCK YEAH! +rep... I will get to the boob thread as well.

You saved me I do n ot know how many fucking hours. Thanks!!

Edit... fuck.. seems I gave you rep for something else... need to spread the love around first.

::emp::
 
You must log in or register to reply here.
Top Bottom