...

View Full Version : Simple width problem - IE vs FF



Scootertaj
12-05-2005, 11:52 PM
Hey, IE isn't cooperating with me.
In FF, the width is how I want it, but in IE it's a little short.
Here's the link: http://www.c-pawd.moved.in/Parry/

As you can see there's a little white space in IE.

I know the CSS is a little messy right now, will change it later.

CSS:

body {
background: #CC3333 url('filly3.jpg') repeat-y top center;
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: Georgia;
font-color: #E6E6E6;
margin: 0 auto;
width: 668px;
height: 100%;
text-align: center;
}

#container {
width: 668px;
height: 100%;
border: 1px solid #000000;
margin: 0 auto;
text-align: left;
}

#content {
margin-left: 13em;
margin-right: 2em;
}


/* rounded boxes*/
#rounded-box {
position:relative;
width: 9em;
background-color: #840029;
/* original #E6E6E6 */
margin: 3px;
float: left;
padding-right: none;
margin-left: 12px;
font-color: #FFF;
float: left;
}


#top-left-corner, #bottom-left-corner, #top-right-corner, #bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}

#top-left-inside, #bottom-left-inside, #top-right-inside, #bottom-right-inside
{position:relative; font-size:150px; font-family:arial; color:#840029; line-height: 40px;}


#top-left-corner { top:0px; left:0px; }
#bottom-left-corner {bottom:0px; left:0px;}
#top-right-corner {top:0px; right:0px;}
#bottom-right-corner {bottom: 0px; right:0px;}

#top-left-inside {left:-8px;}
#bottom-left-inside {left:-8px; top:-17px;}
#top-right-inside {left:-25px;}
#bottom-right-inside {left:-25px; top:-17px;}

#box-contents {
position: relative;
padding: 8px;
color:#FFF;
font-family: Georgia;
font-size: 14px;}

#box-contents ul {
list-style-type: none;
}
#box-contents li {
border-top: 1px solid #000;
text-align: left;
margin-left: -2.9em;
font-color: #FFF;
width: 100%;
margin-bottom: 2px;
}
#box-contents a, #box-contents a:link, #box-contents a:visited {
color: #FFF;
width: 100%;
height: 100%;
}
#box-contents a:hover, #box-contents a:active, #box-contents a:focus
{
background-color: #B00039;
color: #E0CD61;
}

/* end rounded boxes*/

/* navigation */
#navlist
{
border-bottom: 1px solid #FFCC66;
border-top: 1px solid #000000;
margin: 0;
margin-bottom: 30px;
padding: 0;
background-color: #CC3333;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-bottom: 3px;
margin-top: -3px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 190px;
height: 20px;
}

#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #CC3333;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #000000;
font-weight: bold;
text-decoration: none;
}

#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 1px solid #FFCC66;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
}

#navlist li
{
padding-right: 1px;
display: inline;
font-size: 0.6em;
}

#navlist ul
{
margin: 0px;
}

#navlist #active a { background-color: #FFCC66; }
/* end navigation */

harbingerOTV
12-06-2005, 12:16 AM
#header {
width: 668px;
}


you do have a double line on the left side in Mozilla. is it suppossed to be there? it's not there in IE.

drhowarddrfine
12-06-2005, 01:10 AM
It's the border width of your container.

Also, don't forget to get a doctype. IE is in quirks mode.

Scootertaj
12-06-2005, 03:04 AM
Ahh, thanks harbinger.
Fixed the little line that I think you were talking about.

Hey harbinger, while were at it, do you know how I could get IE and FF to display the same thing on the nav. It seems when FF is too low, IE is too high and vice versa. It's not a huge deal for FF to be right since it's for a school, but I would like it.

Also, could you check out the left rounded-corner box a little? I would like for it to look like the USATF in which the li extends the whole box. Also, when you resize the window in IE, it moves. http://www.usatf.org/

Hope this isn't too much trouble harbinger, I'm getting better, but still need a little help along the way.

Scootertaj
12-06-2005, 10:45 PM
Nevermind, fixed it



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum