CSS et Internet Explorer

J'ai du mal à travailler avec Internet Explorer.CSS et Internet Explorer

un problème:

J'ai utilisé min-height:100% et je ne que cela ne fonctionne pas dans IE. Comment pourrais-je définir la "min-height" dans mon css?

Problème deux:

J'ai utilisé

position: relative; 
    z-index:50000;`

pour mon en-tête et maintenant son non aligné où il est nécessaire.

Je Shiv installé

Le lien vers le site est http://buddywalknz.org

HTML (avec CMS tags)

<!DOCTYPE html> 
<head> 
    {pyro:theme:partial name="metadata"} 
<body> 
     <header> 
      <div id="logo"></div> 
     </header> 

      <nav> 
       <ul> 
        {pyro:navigation:links group="header" indent="tab"} 
       </ul> 
      </nav> 

<div id="mainContent"> 
    {if ('{pyro:page:is_home}' == TRUE)} 
    <h1>Welcome</h1> 
    {else} 
    <h1>{pyro:page:title}</h1> 
    {/if} 
    <p> 
    {pyro:page:body}  
    </p> 
     <div id="gallery"> 
       <div id="galleryMain"><img src="http://buddywalknz.org/uploads/default/files/accouncil_s.jpg" width="375" height="149" title="Proudly Supported by Auckland Council" alt="Auckland Council"></div> 
      {pyro:streams:cycle stream="sponsors"} 
      {entries} 
       <div class="galleryLogo"><a href="{company_website}"><img src="{company_logo.thumb}" title="Proudly Supported by {company_name}" alt="{company_name}"></a></div> 
      {/entries} 
      {/pyro:streams:cycle} 
     </div> 
</div><!-- Main Content Close --> 
    </body> 
</html>

CSS:

html{ 
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll; 
    background-color:#0C0C0C; 
    height:100%; 
    width:100%; 
} 
body{ 
    width:960px; 
    height:100%; 
    min-height: 100% !important; 
    margin: 0 auto; 
    font-family:Verdana, Geneva, sans-serif; 
} 
h1{ 
    margin:25px 0 0 25px; 
    font-family: 'Quicksand', sans-serif; 
    font-size:30px; 
} 
header{ 
    height: 219px; 
    width: 551px; 
    margin:0 auto; 
} 
header #logo{ 
    background:url('../img/logo.png') no-repeat scroll 0 0 transparent; 
    width:551px; 
    height:219px; 
    position: relative; 
    z-index:50000; 
} 
nav{ 
    background:url('../img/navBG.png') no-repeat; 
    float:right; 
    width:135px; 
    height:100%; 
    padding:30px 0 0 0; 
} 
nav ul{ 
    list-style:none; 
    margin:15px 0 0 0; 
} 
nav li{ 
    margin:10px 0 0 -30px; 
    text-align:left; 
    text-indent:5px; 
} 
nav li a{ 
    text-decoration:none; 
    color:#ff9f30; 
    font-family: 'Quicksand', sans-serif; 
} 
#mainContent{ 
    float:right; 
    background:url('../img/mainBG.png') no-repeat; 
    width:707px; 
    height:auto; 
    min-height:100%; 
    margin:-35px auto; 
} 
#mainContent h1{ 
    font-family: 'Quicksand', sans-serif; 
} 
#mainContent a{ 
    color:#ff9f30; 
    font-weight:bold; 
    text-decoration: none; 
} 
#bottomBanner{ 
    background: url('../img/bottomBanner.png') no-repeat; 
    width:478px; 
    height: 47px; 
    margin: -47px 0 0 300px; 
} 
#mainContent p{ 
    margin:0 30px 0 30px; 
    font-size: 13px; 
    text-align:justify; 
} 

#Video{ 

    margin: 30px 0 0 150px; 

} 

#Video #Vid{ 

    border: 5px solid #4e2b97; 
} 

.img{ 

    border: 5px solid #ff9f30; 
} 


a { 
    outline: none; 
} 

a img { 
    border: 1px solid #BBB; 
    padding: 2px; 
    margin: 10px 20px 10px 0; 
    vertical-align: top; 
} 

a img.last { 
    margin-right: 0;  
} 

ul { 
    margin-bottom: 24px; 
    padding-left: 30px; 
} 


#img{ 

    margin-left: 25px; 
} 

#map{ 
    margin:0 0 0 115px; 
} 

/* Sponsor Gallery CSS */ 
#gallery{ 
    width:707px; 
    min-height: 100% !important; 
    margin:0 0 0 30px; 
} 
#galleryMain{ 
    margin:0 0 0 150px; 
} 
.galleryLogo{ 
    float:left; 
    width:200px; 
    height:200px; 
    margin:0 8px 5px 0; 
} 
#galleryLogo img{ 
    border:none; 
} 
#galleryLogo a{ 
    border:none; 
    text-decoration: none; 
} 
/* End Sponsor Gallery CSS */ 

#contact-form{ 
    width:350px; 
    margin:10px auto; 
} 

#contact-form label{ 
    float:left; 
    width:175px; 
} 
#contact-form input{ 
    width:175px; 
}

Source

2011-11-07 Jess McKenzie

Vous savez qu'il vous manque une balise fermante ''? –

De quelle (s) version (s) d'IE parlons-nous ici? Astuces min-height pour IE: http://www.dustindiaz.com/min-height-fast-hack/ En ce qui concerne votre réglage d'en-tête, l'index z ne devrait pas changer sa position. N'était-ce pas la position: relative avant de la changer? –

@MystereMan Merci :) –

min-height fonctionne dans IE7 et versions ultérieures, mais ne fonctionne pas dans IE6. Puisque l'utilisation d'IE6 est minime, vous devriez considérer simplement l'ignorer.

Vous avez ce code:

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

Débarrassez si le premier bloc, il vous suffit de la seconde. C'est ce qui inclut deux copies de html5shim dans IE7.

Source

2011-11-07 04:36:10

Ne résout pas encore mon problème http://cl.ly/3s3t3p391x1h2S2j2a1I Le blanc devrait être vers le bas à la fin de la navigation (violet) –

@JessMcKenzie - C'est vraiment très difficile pour savoir ce qui se passe uniquement par une capture d'écran. Le HTML que vous donnez n'aide pas parce que nous n'avons pas les images. –

C'est une solution barbare - et probablement obsolète -, mais IE respecte les limites de l'image. Créez un GIF ou PNG transparent 1x1-px, collez-le dans votre espace avec une hauteur. Cela vous donnera aussi un pixel de shim (appelez-le en tête si vous voulez être chic) alors assurez-vous d'ajuster votre CSS autour de cela.

Source

2011-11-07 04:37:52 ssamuel

CSS et Internet Explorer

Répondre

Questions connexes