Problème d'espacement avec IE7

Marsh Posté le 13-06-2012 à 14:31:21

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

Reply

Marsh Posté le 13-06-2012 à 14:31:21

Reply

Marsh Posté le 19-06-2012 à 10:16:15

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

Reply

Marsh Posté le 20-06-2012 à 10:09:20

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 :