Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: FF gone crazy

  1. #1
    Junior Member
    Join Date
    Jan 2007
    Posts
    5
    Member #
    14763
    my site is here in IE the layout is fine (apart from menu) but in FF it is all over the place.
    I am using includes
    my css is:
    Code:
     
    @charset "utf-8";
    /* CSS Document */
    body {
     background-color: #000000;
     text-align:center;
    }
    #contentmain { 
       margin: 0 auto;
        width: 929px;
    height: 1000px; 
        text-align:left;
     background-color: #DED6E2;
     border:solid #FFFFFF thin;
     
     }
    #apDiv7 {
     width:450px;
     height:495px;
     overflow: auto;
    float:right;
     background-color: #D9CFDE;
     }
    #apDiv8 {
     position:absolute;
     left:25px;
     top:545px;
     width:906px;
     height:144px;
    }
    #apDiv9 {
     position:absolute;
     left:76px;
     top:618px;
     width:780px;
     height:4px;
     background-color: #000000;
    }
    #apDiv10 {
     position:absolute;
     left:248px;
     top:539px;
     width:180px;
     height:232px;
     background-color: #DED6E2;
     
     } 
    #header { 
     width:929px;
     height:140px;
     border-left: solid #FFFFFF thin;
     border-right: solid #FFFFFF thin;
     border-top:solid #FFFFFF thin;
     margin: 0 auto;
     
     }
    #apDiv12 {
     position:absolute;
     left:41px;
     top:539px;
     width:180px;
     height:232px;
     background-color: #DED6E2;
     
     }
    #apDiv13 {
     position:absolute;
     left:74px;
     top:288px;
     width:322px;
     height:118px;
    }
    #apDiv14 {
     position:absolute;
     left:28px;
     top:428px;
     width:423px;
     height:90px;
     background-color: #CBB3FF;
     }
    #apDiv2 {
     width:100%;
     height:18px;
     background-color: #EFEFEF;
    }
    #apDiv3 {
     width:929px;
     height:36px;
    margin: 0 auto;
     background-color: #BDAEC6;
     border:solid #FFFFFF thin;
    }
    body {
     background-color: #000000;
    }
    
    }
    #footer {
     width:100%;
     height: 10px;
     top:1000px;
     background-color: #EFEFEF;
     }
     
    .content (line 60)
    {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #d4c7c1;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 10px;
    padding-bottom: 5px;
    color: #ce673a;
    line-height: 13px;
    padding-top: 5px;
    font-family: Arial;
    background-color: #d8cdc7;
    text-align: justify;
    }
    #apDiv6E {
     
     float:left;
     width:412px;
     height:492px;
     background-color: #D9CFDE;
    }
    .title3{
    background-color: #997c81;
    background-image: url();
    line-height:0.5;
    background-repeat: repeat;border-top-width: 0px;
    font-family: arial;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    color: #343a44;
    }
    .title {
    background-image: url();
    background-repeat: repeat;
    background-color: #746063;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #d3d3d3;
    border-right-color: #d3d3d3;
    border-bottom-color: #d3d3d3;
    border-left-color: #d3d3d3;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-family: arial;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    color: #c0c0c0;
    }
    .content {
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    background-color: #fcfcfc;
    font-family: Tahoma;
    font-size: 9px;
    color: #acacac;
    line-height: 11px;
    letter-spacing: 0px;
    text-align:left;
    }
    .content1 img{
    float: left;
    margin: 5px 5px 5px 5px;
    border: 1px solid #666;
    background-color: #fcfcfc;
    font-family: Tahoma;
    font-size: 9px;
    color: #acacac;
    line-height: 11px;
    letter-spacing: 0px;
    }
    .float {
    font-family: Tahoma;
    font-size: 9px;
    color: #acacac;
    line-height: 11px;
    letter-spacing: 0px;
    border-style: solid;
    border-width:1px;
    border-color: #dadada;
    padding:6px;
    margin: 2px;
    background-color:#ffffff;
    }
    .comments {
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    background-color: #fcfcfc;
    font-family: Tahoma;
    font-size: 9px;
    color: #acacac;
    line-height: 11px;
    letter-spacing: 0px;
    text-align:right;
    }
    .image {
            border-style: solid;
            border-width:1px;
            border-color: #dadada;
         padding:6px;
            margin: 2px;
            background-color:#ffffff;
    }
    .imageborder {
            margin-top: 30px;
            margin-bottom: 30px;
            background-color:#ffffff;
    }
    a img {
            border-style: solid;
            border-width:1px;
            border-color: #dadada;
         padding:6px;
            margin: 2px;
         background-color:#ffffff;
    }
    .img {
            border-style: solid;
            border-width:1px;
            border-color: #dadada;
         padding:6px;
            margin: 2px;
         background-color:#ffffff;
    }
    .content image {
            border-style: solid;
            border-width:1px;
            border-color: #dadada;
         padding:6px;
            margin: 2px;
            background-color:#ffffff;
    }
    .content imageborder {
            margin-top: 30px;
            margin-bottom: 30px;
            background-color:#ffffff;
    }
    .content img {
            border-style: solid;
            border-width:1px;
            border-color: #dadada;
         padding:6px;
            margin: 2px;
         background-color:#ffffff;
    }
    a:link 
    {
    text-decoration: none;
    color: #8ca8bc;
    font-weight: normal;
    }
    a:hover 
    {
    #sidebar { 
     width:426px;
     height:492px;
     float:right;
     background-color: #D9CFDE;
    }
    text-decoration: underline;
    color: #6772a7;
    font-weight: normal;
    }
    .wrapper { 
       margin: 0 auto;
        width: 950px; 
        text-align:left;
    } 
    .clear {
    clear: both;
    }
    have I messed some code?

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    If anything it looks better for me in Firefox (FF3, IE7 on res: 1280 by 1024).

    Make sure your XHTML is valid too as this can be the cause of some issues.

    Also, you have a lot of CSS, knowing where things start to go wrong is tricky. Try commenting all of the CSS and then uncomment little related sections at a time to pinpoint the offending code.

  4. #3
    Junior Member
    Join Date
    Jan 2007
    Posts
    5
    Member #
    14763
    attached are images of what the site is looking like for me in IE & FF are you not seeing it like this?
    Attached Images Attached Images

  5. #4
    Junior Member
    Join Date
    Jan 2007
    Posts
    5
    Member #
    14763
    so I commented out the header and got the follow attachment. The header image is the but has no styling so I guess that the header div & or css are one problem I'm having.
    if you view style information in FF at the bottom you find that there is a div for the footer but clicking it says 'not style information'
    Attached Images Attached Images

  6. #5
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Your CSS is a mess!
    For example, try putting all of the border properties in as little code as possible, so instead of doing this:
    Code:
     
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #990000;
    Do this, you can do it all at once
    Code:
    border-top: 2px solid #990000;
    It's much easier and will make sorting through your code a lot easier.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com