Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

probleem met positionering in IE7

None
5 antwoorden
  • In Firefox is alles oké, in Internet Explorer 8 ook. Maar in IE7 gebeurt er iets raars. Ik heb een horizontaal menu dat niet met de pagina mee scrolt (position:fixed). Daaronder een logo en daarna de rest van de website. In Firefox en IE8 staat het logo netjes onder het hoofdmenu (zie: www.kleibakkers.nl). In IE7 echter niet. Het logo staat dan voor een deel onder het menu. Ik heb al van alles geprobeerd, maar kom er niet achter wat het probleem zou kunnen zijn. Zodra ik de fixed van het hoofdmenu weghaal, staat het logo wel goed.

    De css voor het logo:

    #head {
    width: 800px;
    height: 257px;
    margin:50px auto;
    background:url(logowebsite.jpg) no-repeat;
    border-bottom:1px solid #E2D9BA;
    }

    De css voor het menu:

    #nav1 {font-family: "Arial"; font-size:0.75em; margin:0; line-height:2em; text-align:center;}
    #menu {z-index:100; top:0; position:fixed; width:800px; background:url(bgboven.jpg) repeat-x;}
    #menu ul {list-style-type:none; border-bottom: 1px solid #7E7149;}
    #menu ul li {display:inline; padding-right:0.2em; padding-left:0.2em;}
    #menu ul li a {padding:5px; color:#fff;}
    #menu ul li a:hover {color:#ffffff; background-color:#7e7149; text-decoration:none;}
  • Niks aan de hand hier. Werkt goed in ie7.
  • Ik ben er zojuist achter gekomen dat het een 'collapsing margin' betreft.

    Door

    #head {
    width: 800px;
    height: 257px;
    margin: 50px auto;
    background:url(logowebsite.jpg) no-repeat;
    border-bottom:1px solid #E2D9BA;
    }


    te vervangen door

    #head {
    width: 800px;
    height: 307px;
    margin-bottom:50px;
    background:url(logowebsite.jpg) no-repeat 0 50px;
    border-bottom:1px solid #E2D9BA;
    }

    werkt het wel. Meer hierover is te lezen op http://css-discuss.incutio.com/?page=CollapsingMargin.
  • Voor zover ik weet onstaat collapsing margins alleen in IE6. Wellich dat je de IE versies in je first post door elkaar hebt gehaald?
  • Nee hoor, ik weet zeker dat ik het in Firefox en Internet Explorer goed had. IE7 gaf problemen en IE8 was weer goed. Door de css-code van head te vervangen door andere (zie mijn vorige bericht), heb ik het probleem opgelost. In IE7 werkt het nu ook naar behoren.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.