DIV HTML et la balise IMG espacement dans IE vs FF

J'ai de la difficulté avec la mise en page d'une page HTML simple. S'il vous plaît aider.

Voici la présentation que je vais faire...

Mise en page http://img516.imageshack.us/img516/9637/layoutfk5.gif

orange = corps
bleu/rouge = frame div
vert = en-tête de l'image
noir/blanc = menu div

Il semble correct dans Internet Explorer, mais dans Firefox, Safari et Chrome, il y a un 4-pixel d'écart entre mon image (en-tête) et mon div (menu).

Internet Explorer, Firefox, Safari et Chrome...

Les navigateurs http://img516.imageshack.us/img516/3292/browserszi8.gif

C'est mon HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    ...
    <body>
        <div id="frame">
            <img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
                <strong>One</strong> &nbsp;|&nbsp;
                <a href="two.html">Two</a> &nbsp;|&nbsp;
                <a href="three.html">Three</a> &nbsp;|&nbsp;
                <a href="four.html">Four</a> &nbsp;|&nbsp;
                <a href="five.html">Five</a> &nbsp;|&nbsp;
                <a href="six.html">Six</a> &nbsp;|&nbsp;
                <a href="seven.html">Seven</a> &nbsp;|&nbsp;
                <a href="eight.html">Eight</a> &nbsp;|&nbsp;
                <a href="nine.html">Nine</a>
            </div>
            <div id="content">
                ...
            </div>
            ...
    </body>
</html>

Avis il n'y a pas d'espace entre les IMG et le menu DIV.

C'est mon CSS...

...

div#frame {
    background: #FF0000;
    margin-right: auto;
    margin-left: auto;
    width: 700px;
    border: 5px #30AADE solid;
}

div#frame img#header {
    margin: 0;
    padding: 0;
    border: 0;
}

div#frame div#menu {
    margin: 0 auto 0 auto;
    padding: 5px 0 5px 0;
    border-top: solid 2px #FFFFFF;
    text-align: center;
    font-size: small;
    color: #88BE34;
    background-color: #000000;
}

div#frame div#menu strong {
    font-size: medium;
    color: #FFFFFF;
}

div#frame div#menu a {
    color: #88BE34;
}

Pourquoi Firefox, Safari et Chrome montrant que 4 pixels d'écart?

Cochez cette question stackoverflow.com/questions/489974/.... Cela devrait résoudre votre problème.
Je voulais juste dire que ce n'est joliment aménagé question: des images, des échantillons de code, question claire, avant de la cible. Je souhaite plus de questions ont été cela bien écrit.
vrai, +1 pour l'.
Ouais, ce annakata dit. Certainement le moyen de demander un code HTML/CSS question! Aussi, joli avatar. 🙂

OriginalL'auteur Zack Peterson | 2009-02-09

4

Il a à voir avec les règles par défaut pour les balises IMG.

Je recommande toujours d'utiliser cela à votre feuille de style par défaut de la règle:
```
img{
    display:block;
}
```
C'est corrigé. Je vous remercie.

OriginalL'auteur Dan
1

Ma conjecture est que c'est la hauteur de la ligne de l'image-les éléments de la ligne, depuis l'IMG est un élément inline. Vous pourriez probablement corriger en lui donnant de l'img en-tête#display: block;.

De toute façon, ce que vous devriez vraiment faire est de retirer la totalité de l'image et utiliser un H1-élément de plus l'un des nombreux image de remplacement-techniques.

Edit:
Lorsque ce qui est dit, votre menu devrait également être marquée comme une liste non ordonnée (UL).

OriginalL'auteur Arve Systad
1

Dans la "norme" des navigateurs (et, en fait, IE6 avec le bon DOCTYPE!), votre image est en mode INLINE par défaut, de sorte qu'il devient un espacement comme si c'était une lettre assis sur la ligne de base du texte.

freelookenstein a donné la solution pour supprimer les espaces en raison de l'alignement du texte de la mode INLINE.

C'est la solution, mais je serais prudent sur l'utilisation d'un display:block par défaut comme il est plus probable que gâchera votre page web typique du contenu en bas de la ligne.

Vous pouvez soit ajouter la propriété display:block à une classe ou de style en ligne sur votre image seule.

Ou quelque chose comme ceci:
```
img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }
```
Personnellement, je recommande de limiter display:block uniquement pour les images que vous connaissez sont utilisés pour la mise en page du site, ou de ceux qui sont expressément encart dans des boîtes. Dans lequel cas, vous avez déjà une classe sur l'élément parent comme:
```
<div class="imagebox">
   <img .... />
</div>

.imagebox img { display:block; }
```
OriginalL'auteur
1

Vous devez envelopper vos liens de menu dans une liste non triée et puis le style avec CSS. Il y a une raison pour cela:
1. La structuration de vos liens de navigation en tant que liste de résultats dans plus d'un balisage sémantique. Il représente mieux le contenu de la présentation. Si vous deviez afficher le site sans CSS styles (vous pouvez le faire avec la Web Developer Toolbar pour Firefox), vous pouvez toujours obtenir une représentation significative de votre mise en page du site. Ceci est particulièrement important si vous avez l'intention de le site pour être visible par les navigateurs mobiles.
2. Cela peut aussi (légèrement) aider les moteurs de recherche de hiérarchiser le contenu et d'augmenter votre classement.
3. Vous pouvez définir un style pour vos éléments de liste avec une bordure sur un côté et certaines marges afin d'obtenir la "pipe" délimité par effet. Ce sera réutilisable et le rend plus facile de changer les menus à un autre style dans le futur.
Voir A List Apart - CSS Design: Apprivoiser les Listes

Il est un exemple montrant complet CSS pour la réalisation de cet effet.

OriginalL'auteur kwcto

Vous devez vous connecter pour publier un commentaire.