Probleme CSS iE Firefox et Safari

jibouz -  
jibouzeuh Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'ai un petit probleme avec mon site.

Je suis debutant et jai acheter un Pack Graphique pour le site d'une association de mon ecole.

Le probleme est que sous iE tout s'aligne correctement mais sous Firefox et safari le contenue et decalé.

Mon site: www.skiclub-ipsa.com


Voici le contenue de mon fichier CSS:
--------------------------------------------------------------------------------------------------------------
/** Daniel KAMENI ::: http://www.kacart.be | https://apprendre-php.com/ **/

* { padding : 0; margin : 0; }

body {
background: #184F76 url(images/back-body.png) repeat-x left top;
font-size: 12px;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #FFF;
}
h2 {
line-height: 16px;
margin-bottom: 15px;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
letter-spacing: -0.05em;
}

p {
line-height: 11px;
font-size: 11px;
letter-spacing: 0.05em;
color: #CCC;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: 0; }


/** Global layout **/
#back {
background: url(images/back.jpg) no-repeat center top;
width: 1000px;
height: 700px;
margin: 0 auto;
}

#page {
width: 599px;
margin: 0 auto;
padding-top: 141px;
}

#header, #content, #footer {
width: 100%;
margin-left: -13px; /* Correcting to center all div */
}

#header {
height: 25px;
margin-bottom: 10px;
position: relative;
}

#content {
width: 567px;
height: 342px;
padding: 16px;
margin-bottom: 10px;
margin-left: -17px;
}

#footer { height: 25px; }
/** end of Global layout **/

/** #header **/
#header h1 a {
background: url(images/logo.png) no-repeat;
width: 202px;
height: 190px;
margin-top: -55px;
display: block;
overflow: hidden;
font-size: 0;
text-indent: -2000em;
}

/** #menu **/
#menu {
position: absolute;
bottom: 1px;
right: 4px;
list-style: none;
}

#menu li {
margin-left: 1px;
float: left;
}

#menu a {
height: 22px;
line-height: 22px;
padding: 0 6px;
display: block;
float: left;
font-weight: bold;
text-transform: uppercase;
color: #FFF;
}

#menu a:hover {
background: url(images/menu-shadow.png) repeat-x;
text-decoration: none;
}
/** end of #menu **/
/** end of #header **/

/** #content **/
#content {
background: #3C3C3C;
overflow: hidden;
}

#content a { color: #339BE2; }
#content p { text-align: justify; }

/** #welcome **/
#welcome {
width: 274px;
margin-right: 41px;
float:left;
}

#welcome h2 { margin-bottom: 6px; }

#welcome h3 {
width: 100%;
height: 74px;
padding-top: 9px;
margin-bottom: 7px;
text-align: center;
}

#welcome p { margin-bottom: 14px; }

#welcome a.list {
background: url(images/list.gif) no-repeat 5px;
padding-left: 13px;
}
/** end of #welcome **/

/** #capacites **/
#capacites {
width: 250px;
float:right;
}

#capacites h2 {
margin-bottom: 12px;
clear: left;
}

#capacites div { clear: left; }
#capacites div p { margin-bottom: 16px; }

#capacites div img {
margin-right: 18px;
margin-bottom: 16px;
float: left;
}

#capacites div h3 {
line-height: 11px;
font-weight: bold;
font-size: 11px;
color: #339BE2;
}

#capacites fieldset { border: 0; }
#capacites legend { display: none; }
#capacites label { color: #CCC; }

#mail, #submit {
background: #707070;
border: 1px solid #FFF;
color: #CCC;
}

#mail {
width: 160px;
height: 16px;
padding: 1px 2px;
}

#mail:hover, #mail:focus { background: #808080; }

#submit {
height: 20px;
padding: 0 2px;
vertical-align: bottom;
}
/** end of #capacites **/
/** end of #content **/

/** #footer **/
#footer { position: relative; }
#footer p { color: #000; }

#footer a {
font-weight: bold;
color: #FFF;
}

#footer img { vertical-align: text-top; }

/** #copyright && #valid **/
#copyright, #valid {
position: absolute;
bottom: 0;
}

#copyright { left: 0; }
#valid { right: 0; }
/** end of #copyright && #valid **/
/** end of #footer **/







Et voici le contenu de ma page index.html:
-------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Kit graphique Bafang par Daniel KAMENI ::: www.kacart.be" />
<meta name="keywords" content="kac art, kameni, bafang" />
<meta name="Generator" content="KAC Art, Daniel KAMENI. All rights reserved." />
<meta name="robots" content="index, follow" />
<title>SkiClub IPSA 2009-2010 </title>
<link rel="stylesheet" media="screen" type="text/css" href="css/global.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie/ie6.css" />
<![endif]-->
</head>

<body>
<!-- Kit graphique par Daniel KAMENI :::: www.kacart.be | www.apprendre-php.com -->
<div id="back">
<div id="page">
<div id="header">
<h1><a>Skitrip</a></h1>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="tarif.html">Tarifs</a></li>
<li><a href="resa.html">Reservation</a></li>
<li><a href="membres.html">Le SkiClub</a></li>
</ul>
</div><!-- end of #header -->
<div id="content">
<div id="welcome">
<h2>Bienvenue chez le SkiClub</h2>
<h3><img src="images/avoriaz.png" alt="Version 2" /></h3>
<p>Le voyage au ski 2010 se deroulera dans la station d'Avoriaz durant la derniere semaine de Janvier !!! Vous pourez tres bientot reserver votre place par cheque en remplissant votre fiche et en la donnant directement a un membre du SkiClub. Vous pourrez découvrir la station d'Avoriaz et son domaine skiable vous permetant d'aller skier jusqu'en Suisse. Le soir de nombreux bar et discotheque pourons vous accueillir dans cette station entierement pietoniere. Les membres du Skiclub se chargerons de veillez a ce que tout ce passe bien durant le sejour.
</p>
<h2></h2>
<p><h3><img src="images/pertenaire.png" alt="Version 2" /></h3>
</p>
</div><!-- end of #welcome -->
<div id="capacites">
<h2>L'affiche</h2>
<div>
<a href="images/affiche_full.jpg"><img src="images/affichage.jpg" alt=""/></a>
</div>
</div><!-- end of #capacites -->
</div><!-- end of #content -->
<div id="footer">
<p id="valid">www.skiclub-ipsa.com © 2009</a></p>
</p>
</div><!-- end of #footer -->
</div><!-- end of #page -->
</div><!-- end of #back -->
</body>
</html>











Que pui-je faire pour ranger ce probleme.

Mercii
A voir également:

1 réponse

Réponse 1 / 1
jibouzeuh Messages postés 1 Date d'inscription   Statut Membre Dernière intervention  
 
En fait, j'ai l'impression que mon contenu (cadre gris) est en fait placé par rapport au coin haut gauche de ma fenetre et non pas au coin haut gauche du cadre d'affichage.

Comment pui-je le fixer par rapport a la partie haut gauche de mon background ?
Merci
0

Discussions similaires

Safari pour Android
Liliane Boemare -
CCMBot -

1 réponse
Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
Comment "inspecter l'élément" sur Mac ?
enzo2501 -
Tatazazazizi -

14 réponses