chechu
02-26-2010, 12:33 PM
Hey all,
I designed a page for IE, and alll works fine, but in FF it looks slightly different. I have searched a lot via Goole and DD, but can't find the solution. Can anyone help me out with this, please?
This is a link to the example page: test (http://www.hetbestevoordeel.be/beloved/test3.php)
This is the css:
* {
padding:0;
margin:0;
}
body {
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
text-align:center;
}
#content {
height : 538px;
width : 720px;
margin-left: auto;
margin-right: auto;
}
/* CHOICE */
#index {
background : url(trashy4.png) no-repeat;
width : 720px;
height : 538px;
}
#gallery {
background : url(trashy6.png) no-repeat;
width : 720px;
height : 538px;
}
/* CONTACT */
#contact {
height : 21px;
margin : 10px 0 0 590px;
}
#contact img {
border : 0;
}
/* MUSIC */
#music {
margin : 15px 0 0 435px;
}
/* GALLERY INDEX */
#slides {
height : 120px;
width : 118px;
margin : 260px 0 0 475px;
}
/* GALLERY CONTENT */
#screen1 {
height : 116px;
width : 674px;
margin : 264px 0 54px 20px;
background:#fff;
}
#screen2 {
height : 210px;
width : 674px;
margin : 202px 0 0 20px;
background:#fff;
}
#screen2 #form {
width : 305px;
height: 150px;
text-align:left;
float : left;
margin : 35px 70px 0 50px;
}
#screen2 #form p{
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
}
#screen2 #form a{
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
text-decoration:none,
}
#screen2 #form a:hover{
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
text-decoration:underline,
}
#screen2 #form input {
width : 300px;
margin-top : 5px;
text-align : left;
border : 1px solid #ccc;
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #565656;
}
#screen2 #form textarea {
width : 300px;
height : 50px;
margin-top : 5px;
text-align : left;
border : 1px solid #ccc;
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #565656;
}
#screen2 #data {
height:110px;
width: 200px;
float : left;
display : inline;
margin : 40px 0 0 0;
padding:0 0 0 20px;
text-align:left;
border-left:1px solid #000;
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #565656;
}
/* MENU INDEX */
#menu {
width : 720px;
height : 21px;
margin : 50px 0 0 0;
padding : 0 0 0 320px;
}
#menu img {
margin : 0 15px 0 0;
border : 0;
}
/* MENU CONTENT */
#menu2 {
width : 720px;
height : 21px;
margin : 22px 0 0 0;
padding : 0 0 0 320px;
}
#menu2 img {
margin : 0 15px 0 0;
border : 0;
}
I designed a page for IE, and alll works fine, but in FF it looks slightly different. I have searched a lot via Goole and DD, but can't find the solution. Can anyone help me out with this, please?
This is a link to the example page: test (http://www.hetbestevoordeel.be/beloved/test3.php)
This is the css:
* {
padding:0;
margin:0;
}
body {
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
text-align:center;
}
#content {
height : 538px;
width : 720px;
margin-left: auto;
margin-right: auto;
}
/* CHOICE */
#index {
background : url(trashy4.png) no-repeat;
width : 720px;
height : 538px;
}
#gallery {
background : url(trashy6.png) no-repeat;
width : 720px;
height : 538px;
}
/* CONTACT */
#contact {
height : 21px;
margin : 10px 0 0 590px;
}
#contact img {
border : 0;
}
/* MUSIC */
#music {
margin : 15px 0 0 435px;
}
/* GALLERY INDEX */
#slides {
height : 120px;
width : 118px;
margin : 260px 0 0 475px;
}
/* GALLERY CONTENT */
#screen1 {
height : 116px;
width : 674px;
margin : 264px 0 54px 20px;
background:#fff;
}
#screen2 {
height : 210px;
width : 674px;
margin : 202px 0 0 20px;
background:#fff;
}
#screen2 #form {
width : 305px;
height: 150px;
text-align:left;
float : left;
margin : 35px 70px 0 50px;
}
#screen2 #form p{
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
}
#screen2 #form a{
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
text-decoration:none,
}
#screen2 #form a:hover{
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #666666;
text-decoration:underline,
}
#screen2 #form input {
width : 300px;
margin-top : 5px;
text-align : left;
border : 1px solid #ccc;
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #565656;
}
#screen2 #form textarea {
width : 300px;
height : 50px;
margin-top : 5px;
text-align : left;
border : 1px solid #ccc;
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #565656;
}
#screen2 #data {
height:110px;
width: 200px;
float : left;
display : inline;
margin : 40px 0 0 0;
padding:0 0 0 20px;
text-align:left;
border-left:1px solid #000;
font : 10px Trebuchet MS, Arial, Helvetica, sans-serif;
color : #565656;
}
/* MENU INDEX */
#menu {
width : 720px;
height : 21px;
margin : 50px 0 0 0;
padding : 0 0 0 320px;
}
#menu img {
margin : 0 15px 0 0;
border : 0;
}
/* MENU CONTENT */
#menu2 {
width : 720px;
height : 21px;
margin : 22px 0 0 0;
padding : 0 0 0 320px;
}
#menu2 img {
margin : 0 15px 0 0;
border : 0;
}