Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple width problem - IE vs FF

    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:
    Code:
    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 */

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    #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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    It's the border width of your container.

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

  • #4
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Scootertaj; 12-06-2005 at 04:11 AM.

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit: Nevermind, fixed it
    Last edited by Scootertaj; 12-07-2005 at 12:10 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •