28172 sujets

CSS et mise en forme, CSS3

Problème d'espacement avec IE7

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 Smiley smile


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;
 }

Modifié par cescarment (13 Jun 2012 - 12:11)
J'ai declaré un doctype et l'encodage UTF-8.

Mais c'est juste un petit bout de code pour montrer les deux comportements css de IE7 qui me dérangent, pas la template définitive Smiley smile
Modifié par cescarment (13 Jun 2012 - 14:35)
Sujet clos
Aller à