View Full Version : My site Firefox vs IE - argggh


chaser7016
12-03-2006, 03:33 PM
Im wondering why in Firefox www.ryanspahn.net looks more like I want it to, but in IE the mainbox is larger and the tab links are larger also.

I am aiming for the way it looks in FireFox to look the same in IE.

Below is my .css for the page layout...

body {
background-color: #191970;
background-repeat: no-repeat;
padding: 10px 0 0 0;
margin: 0;

}

div.mainbox {
margin-left: 20px;
background-color: #FFF8DC;
border: solid 3px #000000;
width: 700px;
height: 480px;
}

div.box{
position:absolute;
top:10px;
left:775px;
width:140px;
height: 462px;
padding:10px;
background-color: #FFF8DC;
border: solid 3px #000000;
line-height:17px;

}

#mainMenu{
background-color: #FFF; /* Background color of main menu */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
font-size:0.9em; /* Font size of main menu items */
border-bottom:1px solid #000000; /* Bottom border of main menu */
height:40px; /* Height of main menu */

position:relative; /* Don't change this position attribute */

}

#submenu{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
background-color:#E2EBED; /* Background color of sub menu items */

}

#scrollingContainer{
width:695px; /* 170 pixels in width */
height:70px; /* Height of box */

border:1px solid #000; /* Black border around box */
background-color: #E2EBED; /* Light blue background color */
}


Thanks to anyone who can help!

Cheers, ryan

Computer_Girl13
12-09-2006, 05:00 AM
OK this is just a quick reply based on skimming thru what you have.

Firstly, FF displays different to IE because they are different browsers. Most browsers will display a page at least slightly different to each other browser. And it works in FF but not IE because if your code is not valid (I haven't actually visited the site btw - this is just while I'm checking emails) IE will just guess, and so will FF, but Firefox's rendering is a lot closer to W3C standards for specific tags and for CSS.

Another thing I noticed, in #scrollingContainer css you have:
width:695px; /* 170 pixels in width */
height:70px; /* Height of box */

How does 695px equal 170px???

Have a great day and I hope that helps,