Problème d'espacement avec IE7
Problème d'espacement avec IE7 - HTML/CSS - Programmation
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
---------------
Plop !
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 :
Marsh Posté le 27-06-2012 à 14:35:38
dans ce cas :
#title div {line-height:1.1em;} devrait suffire
---------------
Plop !
Sujets relatifs:
- [Résolu] Problème privilège oracle
- problème attributs
- probleme reponse a l'excecution d'une commande par code
- Problème select Max
- [BATCH] xcopy problème avec /D sur réseau
- Problème d'asynchronicité avec Node.js et Async.js
- Problème d'accès dll VBA/Excel
- netbeans - probléme
- [Résolu] Problème positionnement d'une note avec "vertical-align: top"
- flash cs5.5 chrono probleme
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 :
<!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 :
/**********
* 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