PDA

View Full Version : Simple CSS gone Bad ?



X-Rayden
Apr 3rd, 2007, 03:38 PM
I've done an easy and simple css page to provide a squeletton page for domain names we have nothing for... but the page works only in IE6 and I dont know why... in Firefox it seams to have a top margin where it doesn't exist....

can you tel where my problem is ?

here is the page
http://www.votreespace.net/nd/

it's a simple php page saying the name we provide him like this :

http://www.votreespace.net/nd/?voir=codingforums.com

here the css :
.Textuel {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: right;
}
body {
background-color: #FFFFFF;
background-image: url(background.gif);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Backologos {
background-image: url(promopageindisponible.jpg);
background-repeat: no-repeat;
height: 520px;
width: 600px;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Backologos #Texte {
width: 340px;
margin-left: auto;
height: 200px;
margin-right: 10px;
padding: 0px;
margin-top:0px;
}
.Titre {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #C83C2D;
}

and the html :

<div id="Backologos">
<div id="Texte">
<p align="right" class="Titre">www.votreespace.net</p>
<p align="right" class="Textuel">Le site web que vous tent&eacute; de rejoindre<br />

est pr&eacute;sentement en Construction,<br />
veuillez revenir plus tard. </p>
</div>
</div>

if you want the whole PHP :

<?PHP
if(isset($_GET['voir'])) {
$domaine = str_replace('>','&gt;',str_replace('<','&lt;',$_GET['voir']));
} else {
$domaine = $_SERVER['SERVER_NAME'];
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?=$domaine ?></title>
<style type="text/css">
<!--
.Textuel {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: right;
}
body {
background-color: #FFFFFF;
background-image: url(background.gif);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Backologos {
background-image: url(promopageindisponible.jpg);
background-repeat: no-repeat;
height: 520px;
width: 600px;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Backologos #Texte {
width: 340px;
margin-left: auto;
height: 200px;
margin-right: 10px;
padding: 0px;
margin-top:0px;
}
.Titre {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #C83C2D;
}
-->
</style>
</head>
<body>
<div id="Backologos">
<div id="Texte">
<p align="right" class="Titre"><?=$domaine ?></p>
<p align="right" class="Textuel">Le site web que vous tent&eacute; de rejoindre<br />
est pr&eacute;sentement en Construction,<br />
veuillez revenir plus tard. </p>
</div>
</div>
</body>
</html>


thanks to anybody who would help me understand this mistake...

ronaldb66
Apr 3rd, 2007, 03:49 PM
Some browsers implement body spacing with padding instead of with margins; set both padding and margins on the body element to zero:

body {
...
margin: 0;
padding: 0;
}

(Note the shorthand notation; the three dots though represent other properties I was to lazy to copy entirely).

the_scyphe
Apr 3rd, 2007, 03:51 PM
.Textuel {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: right;
}
body {
background-color: #FFFFFF;
background-image: url(background.gif);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Backologos {
background-image: url(promopageindisponible.jpg);
background-repeat: no-repeat;
height: 520px;
width: 600px;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Backologos #Texte {
width: 340px;
margin-left: auto;
height: 200px;
margin-right: 10px;
padding: 0px;
margin-top:0px;
}
.Titre {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #C83C2D;
}

--> see the bolded text. They can be condensed to one property.
--> #000 and #000000 are the same in color. You can delete the other three digits. See the underlined text in your code.

remember that the font: property must always contain the font family and font size. the rest options are optional. see for yourself. http://w3schools.com/css/css_font.asp

karinne
Apr 3rd, 2007, 03:52 PM
Salut! ;)

This should solve your problem.


#Backologos {
background:transparent url(promopageindisponible.jpg) no-repeat 0 0;
float:right;
height:520px;
margin:0;
padding:0;
width:600px;
}

X-Rayden
Apr 3rd, 2007, 06:23 PM
THANKS, karinne, your solution was the one.

You're like an digital angel descending upon me to cast your knowledge! :) Thanks again!

karinne
Apr 3rd, 2007, 06:37 PM
Well ... errr... thanks http://jeepsunlimited.com/forums/images/smilies/girl.gif