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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post IE/Firefox DIV alignment

    Folks,

    If anyone is available to help me with this, I would be very appreciative.

    My CSS alignment is <perfect> in IE, but not so perfect in Firefox. I think it has something to do with IE setting automatic padding (i.e. not setting padding: 0 for elements that I don't want padding on), but obviously i'm not sure.

    Here's the site (well, enough of it for you to get an idea):

    www.sixth-fleet.com/zttb8xz

    div.bodycontainer is, naturally, the div that contains all of the content.

    My styles.css file is copied below:

    body {
    background-color: #000000;
    text-align: center;
    margin-top: 0px;
    margin-left: 0px;
    margin-height: 0px;
    margin-width: 0px;
    scrollbar-3dlight-color:#000000;
    scrollbar-arrow-color:#000000;
    scrollbar-base-color:#000000;
    scrollbar-darkshadow-color:#000000;
    scrollbar-face-color:#9191ff;
    scrollbar-highlight-color:#9191ff;
    scrollbar-shadow-color:#000000;
    scrollbar-track-color:#000000;
    }

    p.text {
    font-family: verdana;
    font-style: normal;
    font-variant: bolder;
    font-weight: normal;
    font-size: 7.5pt;
    color: #CDCDCD;
    line-height: 100%;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: justify;
    }

    p.date {
    font-family: verdana;
    font-style: normal;
    font-variant: bolder;
    font-weight: normal;
    font-size: 6pt;
    color: white;
    line-height: 100%;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    padding-top: 2px;
    }

    p.ticker {
    font-family: verdana;
    font-style: normal;
    font-variant: bolder;
    font-weight: normal;
    font-size: 6pt;
    color: white;
    line-height: 100%;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding-top: 2px;
    }

    div.bodycontainer {
    height: 600px;
    width: 800px;
    text-align: left;
    margin-top: 5px;
    }

    div.intro {
    height: 501px;
    width: 600px;
    text-align: left;
    margin-top: 5px;
    margin-left: 2px;
    }

    div.leftdiv {
    height: 600px;
    width: 145px;
    float: left;
    clear: left;
    }

    div.rightdiv {
    height: 600px;
    width: 620px;
    float: left;
    clear: right;
    }

    a:link {color: #CDCDCD; text-decoration: none;}
    a:active {color: #CDCDCD; text-decoration: none;}
    a:visited {color: #CDCDCD; text-decoration: none;}
    a:hover {color: blue; text-decoration: none;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Mr Carter,
    Try adding this to your CSS:
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,

    That helped align some of the elements, however if you look here:

    http://www.sixth-fleet.com/zttb8xz/l...l/manifest.htm

    The spacing and such is still a little fubared in Firefox, whereas it's perfect in IE.

    One obvious solution is to go redo *all* of the spacing, padding, lengths, etc., and test them in Firefox instead of IE, but it seems to me that if I did that, it would simply reverse the situation, and things would look screwed in IE instead.

    Any further suggestions?


  •  

    Posting Permissions

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