[HTML/CSS] Content valt weg bij IE6/IE7

[console]

Momenteel ben ik met een website bezig waar ik een klein probleempje tegen kom en er niet uit kom waar dit nu precies aan ligt. Probleem komt alleen voor in IE6/IE7, wanneer ik over een menu item hover, vervalt een deel van de pagina en komt de rode border onder de 'Mijn account' box te liggen, wanneer ik deze box verleng dan verlengt ook de rode border mee.

Heb verschillende stylen een overflow: hidden, display block gegevens om te kijken of het iets uithaalde, maar helaas alles wat ik tot nu toe hebt geprobeerd werkt niet. Misschien dat één van jullie iets zie wat ik ook het hoofd zie?

Header CSS

Cascading Stylesheet:

/* header */
header { height: 100px; }
header nav { float: right; margin-top: 35px; }
header nav ul { list-style: none; }
header nav ul li { float: left; margin-left: 15px; display: block; }
header nav ul li a { height: 28px; display: block; line-height: 28px; color: #999; text-decoration: none; font-weight: bold; font-size: 12px; cursor: pointer; }
header nav ul li a span { padding-right: 14px; display: block; height: 28px; float: left; padding-left: 15px; }
header nav ul li a:hover, header nav ul li a.active { background: url(../../resources/img/menu-left-green.gif) top left no-repeat; color: #fff; text-shadow: #363636 1px 1px 1px; }
header nav ul li a span:hover ,header nav ul li a span.active { background: url(../../resources/img/menu-right-green.gif) top right no-repeat;  }

Header HTML <= blijkbaar de boosdoener

HTML:

    <header>
        <section><a href="#" title="#" id="logo">ibuddy project</a></section>
        <nav>
            <ul>
                <li><a href="#" title="#" class="active"><span class="active">Startpagina</span></a></li>
                <li><a href="#" title="#"><span>Inloggen</span></a></li>
                <li><a href="#" title="#"><span>Internetwinkels</span></a></li>
                <li><a href="#" title="#"><span>Aanbiedingen</span></a></li>
                <li><a href="#" title="#"><span>Vragen</span></a></li>
                <li><a href="#" title="#"><span>Contact</span></a></li>
            </ul>
        </nav>
    </header>

Een uitgeklede testcase: [linkje maar weg dan maar]

_{Hoop dat deze post wel voldoet, en sorry RobIII}

[SandaX]

IE kan niet overweg met html5 tags.

voeg het volgende stukje javascript eens toe aan je header, dit zorgt voor html5 interpretatie voor IE.

code:

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[console]

SandaX schreef op maandag 13 september 2010 @ 15:49:
IE kan niet overweg met html5 tags.

voeg het volgende stukje javascript eens toe aan je header, dit zorgt voor html5 interpretatie voor IE.

code:

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ik maak al elementen aan via een stukje JS en dit volgens mij niks te maken met het probleem wat ik nu heb, dus bovenstaande gaat mij niet verder helpen helaas.

[NMe]

console schreef op maandag 13 september 2010 @ 16:07:
[...]

Ik maak al elementen aan via een stukje JS en dit volgens mij niks te maken met het probleem wat ik nu heb, dus bovenstaande gaat mij niet verder helpen helaas.

Je kan het altijd proberen natuurlijk? Vergeet even niet dat je met een versie van HTML werkt die totaal niet ondersteund wordt door de browserversies waar je problemen mee hebt en die alleen werkt bij gratie van een javascriptje. Het javascript dat hierboven aangehaald wordt is completer dan het jouwe en dus wellicht de moeite van het proberen waard voordat je het afschrijft.

[MueR]

console schreef op maandag 13 september 2010 @ 16:07:
Ik maak al elementen aan via een stukje JS en dit volgens mij niks te maken met het probleem wat ik nu heb, dus bovenstaande gaat mij niet verder helpen helaas.

Dan zou je de eerste zijn. Ik gebruik dit script ook in een aantal sites en dat werkt vlekkeloos.

[console]

NMe schreef op maandag 13 september 2010 @ 16:16:
[...]

Je kan het altijd proberen natuurlijk? Vergeet even niet dat je met een versie van HTML werkt die totaal niet ondersteund wordt door de browserversies waar je problemen mee hebt en die alleen werkt bij gratie van een javascriptje. Het javascript dat hierboven aangehaald wordt is completer dan het jouwe en dus wellicht de moeite van het proberen waard voordat je het afschrijft.

Misschien had ik het er even bij moeten zetten dat ik het geprobeerd had

edit;

probleem opgelost, heb nu nog alleen een wrap voor de content, de header en aside heeft nu een fixed width met margin 0 auto;

[ Voor 10% gewijzigd door console op 13-09-2010 19:02 ]