IE 7 est de transformer ma barre de navigation horizontale en une ligne double

Je travaille sur mon site dans Firefox 3.0.9 (et suis très vert avec CSS) et il semble juste jusqu'à présent. Cependant, j'ai une barre de navigation horizontale flottante au sommet qui semble descendre. Voici ce que j'ai essayé jusqu'à présent:IE 7 est de transformer ma barre de navigation horizontale en une ligne double

1) J'ai ajusté les marges, mis à zéro le rembourrage et changé la largeur de l'image de fond - le tout sans effet.

2) J'ai essayé de créer un dossier IE7 et de pointer le navigateur avec une feuille de style différente - aucun effet.

3) J'ai essayé d'utiliser IE7.js pour résoudre le problème - aucun effet.

IE me conduit batty! Des pensées? Voici mon CSS & HTML (pas de rire ;-))

Merci!

/--- --- mon css/

#body  { 
     margin: 0px 0px 20px 0px; 
     text-align: center; 
     background: #450000 url(images/greenstrip.jpg) repeat-x right top; 
     } 

#maincontainer { 
     width: 720px; 
     border-width: 8px; 
     border-color: #fff; 
     border-style: solid; 
     position: absolute; 
     margin-left: 50%; 
     left: -360px; 
     margin-right: auto; 
     } 


#box p  { 
     position: absolute; 
     color: #fffceb; 
     width: 450px; 
     margin-top: 275px; 
     margin-left: 16px; 
     background: #373635; 
     font-size: medium; 
     font-family: "arial rounded mt bold", "times roman"; 
     text-align: left; 
     line-height: 1.5em; 
     padding-left:7px; 
     padding-right:7px; 
     padding-bottom:7px; 
     border-style:solid; 
     border-color:#bec783; 
     border-width: 3px; 
     } 



#lowerbox p { 
     position: absolute; 
     color: #fffceb; 
     width: 450px; 
     background: #373635; 
     font-size: medium; 
     font-family: "arial rounded mt bold", "times roman"; 
     text-align: center; 
     line-height: 1.5em; 
     padding-left:7px; 
     padding-right:7px; 
     padding-bottom:7px; 
     border-style:solid; 
     border-color:#bec783; 
     border-width: 3px; 
     width: 450px; 
     margin-top: 433px; 
     margin-left: 16px; 
     } 

#featured p { 
     position: absolute; 
     color: #000; 
     width: 270px; 
     margin-top: 825px; 
     margin-left: 128px; 
     background: none; 
     font-size: small; 
     font-family: "arial rounded mt bold", "times roman"; 
     text-align: center; 
     line-height: 1.5em; 
     } 

#customize p { 
     position: absolute; 
     color: #000; 
     width: 270px; 
     margin-top: 825px; 
     margin-left: 420px; 
     background: none; 
     font-size: small; 
     font-family: "arial rounded mt bold", "times roman"; 
     text-align: center; 
     line-height: 1.5em; 
     } 


.name  { 
     font-weight: bold; 
     font-style: italic; 
     color: #bec783; 
     } 

ul  { 
     margin: 0px; 
     width: 680px; 
     line-height: 0em; 
     list-style: none; 
     font-size: medium; 
     font-family: "arial rounded mt bold", "times roman"; 
     float: left; 
     background: url(images/button.gif); 
     } 


ul a  { 
     display: block; 
     padding: 0 1.2em; 
     line-height: 2.2em; 
     text-decoration: none; 
     color: #fff; 
     float: left; 
     margin-left: 6px; 
     margin-right: 0; 
     } 


ul li  { 
     float: left; 
     width: auto; 
     } 


ul a:hover { 
     color:#f26214; 
     } 

ul a:visited { 
     text-decoration: none; 
     } 


#textpad ul  { 
     position:absolute; 
     width:100px; 
     margin-top: 335px; 
     margin-left: 481px; 
     background: none; 
     text-decoration: none; 
     } 


.promise a { 
     display: block; 
     color:#000; 
     line-height: 1em; 
     font-size: 30px; 
     font-family: "freestyle script"; 
     width:150px; 
     } 

.promise a:visited { 
      text-decoration: none; 
      } 

#fet a:link, #fet a:visited { 
       text-decoration:none; 
       color: #000; 
       } 

#fet a:hover { 
     color:#f26214; 
     } 



<!---HTML---> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title>Core 4 Innovative: Website Solutions For Your Small Business</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="keywords" content=" core 4,web,webpage developer,design,web designer, freelance,low cost" /> 
<meta name="robots" content="index,follow" /> 

<!--[if lt IE 7]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
<![endif]--> 

<link rel="stylesheet" type="text/css" href="styles.css" /> 

</head> 


<body id="body"> 
<div id="maincontainer"> 
<table id="Table_01" width="720" height="961" border="0" cellpadding="0" cellspacing="0"> 


<ul id="nav"> 
<li><a href="http://www.core4innovative.com/home.html">Home</a></li> 
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li> 
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li> 
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li> 
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li> 
</ul> 

<div id="textpad"> 
<ul> 
<li class="promise"><a href="#">Affordable Web Hosting Starting at $9.99 per month!<a></li> 
</ul> 


<div id="box"> 
<p><span class="name">Core 4 Innovative</span> puts your online success within reach. Using our affordable 
website solutions, unique development process and standardized 
methods for design you can be sure to recieve a customized product that adds value to your business!</p> 
</div> 

<div id="lowerbox"> 
<p><span class="name">We Serve Every Major Industry:</span></br> 
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services</p> 
</div> 

<div id="featured"> 
<p><span id="fet"><a href="http://www.core4innovative.com/portfolio/portfolio.html" alt="our featured client">Our Featured Client</a></span></p> 
</div> 

<div id="customize"> 
<p>Customize Your website</p> 
</div> 

<tr> 
<td colspan="3"> 
<img src="images/top.jpg" width="720" height="12" alt=""></td> 
</tr> 

<tr> 
<td> 

<img src="images/logo.jpg" width="258" height="137" alt=""></td> 

<td colspan="2"> 
<img src="images/apple_graphic.jpg" width="462" height="137" alt=""></td> 
</tr> 

<tr> 
<td colspan="3"> 
<img src="images/topdivider.jpg" width="720" height="48" alt=""></td> 
</tr> 

<tr> 
<td colspan="2"> 
<img src="images/topdivider-06.jpg" width="502" height="3" alt=""></td> 

<td rowspan="2"> 
<img src="images/notepad.jpg" width="218" height="305" alt=""></td> 
</tr> 

<tr> 
<td colspan="2"> 
<img src="images/getaquotebox.jpg" width="502" height="302" alt=""></td> 
</tr> 

<tr> 
<td colspan="3"> 
<img src="images/roundboxes.jpg" width="720" height="370" alt=""></td> 
</tr> 

<tr> 
<td colspan="3"> 
<img src="images/footer.jpg" width="720" height="88" alt=""></td> 
</tr> 

<tr> 
<td> 
<img src="images/spacer.gif" width="258" height="1" alt=""></td> 
<td> 
<img src="images/spacer.gif" width="244" height="1" alt=""></td> 
<td> 
<img src="images/spacer.gif" width="218" height="1" alt=""></td> 
</tr> 
</table> 

</div> 

</body> 
</html>

Source

2009-04-24 Anonymous

Peut-être voudrez-vous ajouter "css" & "html" tags pour obtenir ce vu par plus de gens. – Alconja

... et vous voudrez peut-être rechercher des «sélecteurs à main courte» pour un code plus succinct. – alex

Eh bien, se débarrasser de la largeur: 680px dans le ul résout le problème ... pas sûr de ce que le bug IE spécifique est qui cause mais cette largeur semble être appliquée au dernier élément de la liste plutôt qu'à la liste dans son ensemble. Utilisez un firebug d'un pauvre en plaçant une bordure dans votre style ul li (border: solid 1px # f00;) pour le voir.

Peut-être que quelqu'un d'autre peut fournir des informations plus détaillées sur le pourquoi ...

Source

2009-04-24 02:22:30 Alconja

Vous avez oublié de mettre votre navigation dans un <td> et un <tr>. Une fois que vous commencez un <table>, tout après cette étiquette, ce n'est pas une « étiquette de table » (comme <th> a besoin d'être dans un <tr> et un <td> Pour plus d'informations sur ce sujet, voir:. http://www.w3schools.com/html/html_tables.asp

Pour résoudre ce problème, il suffit de mettre votre ul dans un <tr> et <td>

<tr><td> 
<ul id="nav"> 
<li><a href="http://www.core4innovative.com/home.html">Home</a></li> 
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li> 
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li> 
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li> 
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li> 
</ul> 
</td> 
</tr>

en outre, tous les autres éléments HTML sur la page doivent être dans un <tr> ou <caption>) et une étiquette <td> (comme la « boîte » et « lowerbox » de votre div ; les divs doivent être fermés avant d'en commencer un autre td).

Si j'étais vous, je me débarrasserais de tous les éléments de la table. Si vous voulez vraiment utiliser une table pour la mise en page de votre contenu, utilisez-la uniquement dans la zone de contenu. Vous n'avez pas besoin de démarrer votre table avec toutes vos images avant d'accéder à la zone de contenu.

De même, pour éviter de futurs problèmes de css, commencez toujours votre fichier css avec un css reset. Cela vous aidera sur votre chemin!

Le css que vous utilisez pour styliser votre navigation est très bien. Pour tous les mauvais rap que IE obtient (totalement mérité), les erreurs sont parfois dues à la négligence du codeur (c'est-à-dire que vous oubliez de fermer vos tags). La plupart des navigateurs sont gentils et ignorent votre négligence, mais IE ne nettoie souvent pas votre tag tag manquant.

Je propose une structure de page simple dans laquelle placer votre code.

<html> 
<head> 
<title></title> 
</head> 
<body> 
    <div id="header"> 
     <!-- your <ul> nav --> 
    </div> 
    <div id="content"> 
     <!-- your table with images (if you really want to use a table! --> 
    </div> 
    <div id="footer"> 
     <!-- your footer info --> 
    </div> 
</body> 
</html>

Source

2009-04-24 05:32:52 superUntitled

Juste comme un point latéral, l'élément n'a pas besoin d'être dans un ou . Les éléments , ou ne le sont pas non plus. :) –

naturellement! Merci pour la clarification. dûment noté. – superUntitled

IE 7 est de transformer ma barre de navigation horizontale en une ligne double

Répondre

Questions connexes