Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2923 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème d'espacement avec IE7

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème d'espacement avec IE7

n°2145708
cedric_e
Posté le 13-06-2012 à 14:31:21  profilanswer
 

Bonjour,
J'essaie de faire une template à partir d'un design qui m'a été fourni.
Je rencontre deux problèmes avec IE7.
 
Premier problème : j'ai besoin d'avoir un logo (image), avec un titre et un sous-titre affichés à sa droite. Le sous-titre doit être parfaitement aligné sur le logo, donc que ces jambages inférieures (lettres "g" et "p" ) soient dessous de cet alignement. Le problème est que ces jambages inférieur sont coupées sous IE7, alors qu'elles sont affichées correctement sur firefox et IE8.
 
Mon deuxième problème est que sur IE7, le div "header" mesure 20px de plus que sur les autres navigateurs, comme ci j'avais 20px de plus de margin-bottom... Alors que non. Je ne vois pas du tout d'ou ça vient ?
 
Merci de votre aide sur ces deux points  :)  
 
 
Vous pouvez voir la template ici :
 
http://www.cedricescarment.com/template
 
code html :
 

Citation :

<!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" xml:lang="fr-FR" lang="fr-FR">
    <head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
  <div id="site">
   <div id="header">
    <a title="Retour à l'accueil" href="#"><img width="40" height="40" title="mon logo" alt="mon logo" src="images/logo.png"/></a>
    <div class="title">
     <h1>Mon site</h1>
     <div>mon sous-titre avec des g et des p</div>
    </div>
    <div class="switchlanguage right">
     <a href="#" title="english site"><strong>english</strong></a>
    </div>
    <div class="clear"></div>
   </div>
   <div id="content">
    <p>homepage</p>
   </div>
  </div>
 </body>
</html>


 
 
 
Code CSS :
 
 

Citation :

/**********
 * RESET *
 **********/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
/*table, caption, tbody, tfoot, thead, tr, th, td,*/
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font: inherit;
 vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
 
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section {
 display: block;
}
html {
 font-size: 62.5%;
}
body {
 line-height: 1;
 color: #000;/*#656565;*/
}
ol, ul {
 list-style-type: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
 
 /**********
 * COMMON *
 **********/
body {
 font-family:Arial;
 color:#333333;
}
 
.left {
 float:left;
}
.right {
 float:right;
}
.clear {
 clear:both;
}
#site strong {
 font-weight:700;
}
#header, #content, #footer {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
 padding-left:20px;
 padding-right:20px;
}
 
 /**********
 * HEADER *
 **********/
 
 #header {
 padding-top:20px;
 padding-bottom:20px;
    background-color: #FFF;
 }
 
 #header img {
    float: left;
 margin:0;
 padding:0;
 border: none;
 }
 
 #header div.title {
    float: left;
 padding-left:20px;
 }
 
 #header div.title h1 {
    font-size:2.6em;
 line-height:0.904em;
 height:0.904em;
 }
 
 #header div.title div {
    font-size:1.8em;
 line-height:0.917em;  
 height:1em;
 }
 #header .switchlanguage {
 font-size:1.1em;
 }
 #header .switchlanguage a {
 background-image:url('images/icn_langage.png');
 background-repeat:no-repeat;
 background-position:left center;
 padding-left:20px;
 color:#333333;
 text-decoration:none;
 }
 /**********
 * CONTENT *
 **********/
 
 #content {
 background-image:url('images/bg_body_repeat.jpg');
 background-repeat:repeat;
 min-height:400px;
 padding-top:10px;
 padding-bottom:20px;
 border-top:1px solid #ccc;
 border-bottom:1px dotted #909090;
 }


Message édité par cedric_e le 13-06-2012 à 14:33:10
mood
Publicité
Posté le 13-06-2012 à 14:31:21  profilanswer
 

n°2146377
pop-pan
yay!
Posté le 19-06-2012 à 10:16:15  profilanswer
 

c'est normal, tu depasse de la box et line-height est buggué sous ie7.
 
les regles d'heritages sont pas exactement les memes sous ie7
.clear{height:0px;} devrait regler ton souvi
 


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
n°2146521
cedric_e
Posté le 20-06-2012 à 10:09:20  profilanswer
 

Merci de ta réponse.
 
Du coup, je ne vois pas comment faire pour aligner une image et un texte sur deux lignes, fonctionnant sur IE7 :
 
http://img15.hostingpics.net/pics/146620verticalalignbaseline.png

n°2147321
pop-pan
yay!
Posté le 27-06-2012 à 14:35:38  profilanswer
 

dans ce cas :
#title div {line-height:1.1em;} devrait suffire


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème d'espacement avec IE7

 

Sujets relatifs
[Résolu] Problème privilège oracleproblème attributs
probleme reponse a l'excecution d'une commande par codeProblème select Max
[BATCH] xcopy problème avec /D sur réseauProblème d'asynchronicité avec Node.js et Async.js
Problème d'accès dll VBA/Excelnetbeans - probléme
[Résolu] Problème positionnement d'une note avec "vertical-align: top"flash cs5.5 chrono probleme
Plus de sujets relatifs à : Problème d'espacement avec IE7


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR