SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Firefox/IE divs & background grrrrrrr

    I am a novice, feeling my way around CSS - pretty much by trial & error - with varying levels of success (and failure/frustration).

    I'm currently redesigning some pages and there are two display problems I cannot figure out. If anyone can help sort either out, I would be SO grateful.

    In IE, this page is working fine: http://watershipdowns.com/try/index2.html

    (style sheet code follows)

    In Firefox, however -

    1) the main background image is fixed; I would like it to scroll.

    2) in the (navleft) DIV - where the navigation links are - the red border on the right side of the box has disappeared.

    I SO don't get it. Can anyone help lower my blood pressure? THANK YOU
    deb

    Style Sheet:

    body {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin: 5px;
    padding: 0;
    }

    a {
    color: black;
    text-decoration: none;
    }
    a:active{
    color: #black;
    text-decoration: none;
    }
    a:visited{
    color: black;
    text-decoration: none;
    }
    a:hover {
    color: #930000;
    text-decoration: underline;
    }


    #header1 {
    height: 191px;
    background-color: #930000;
    }

    #header2 {
    background-color: #666666;
    height: 18px;
    }

    #container {
    position: absolute;
    width: 98%;
    background-color:#DDDDDD;
    }

    #navleft {
    position: absolute;
    left: 5px;
    width: 120px;
    background: #CCCCCC url(graphics/horses/ebony/bank/bank_cut_2_tr.jpg) no-repeat center;
    margin-top: 10px;
    padding: 0px 0px 0px 5px;
    border: 3px solid #930000;
    }



    #content {
    background-color:#DDDDDD;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-left: 130px;
    padding: 10px;
    }


    #index {
    background:#DDDDDD url(graphics/horses/ebony/xc_jump/xc_jump2.jpg) no-repeat center;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-left: 130px;
    padding: 10px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The background is fixed in mozilla because you have told it to be fixed . Take out the fixed from your index style and it will scroll.

    Code:
    #index {
    background:#DDDDDD url(graphics/horses/ebony/xc_jump/xc_jump2.jpg) no-repeat center;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-left: 130px;
    padding: 10px;
    }
    The problem with the border is because you have not allowed for the box model differences between ie in quirks mode (the xml prologue is tripping it) and other browsers that use the correct box model. (See the faq for more info on the broken box model.)

    Code:
    #navleft {
    position: absolute;
    left: 5px;
    width: 109px;
    background: #CCCCCC url(http://watershipdowns.com/try/graphi...k_cut_2_tr.jpg) no-repeat center;
    margin-top: 10px;
    padding: 0px 0px 0px 5px;
    border: 3px solid #930000;
    }
    * html #navleft{
     width:120px
    }
    
    I can't understand why you are inserting your navigation into your page through javascript. Users with js disabled will be unable to navigate your site and mozilla doesn't seem to like it anyway as it is displaying it in the wrong position.

  3. #3
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul -

    background image - THANKS!!!! I was sure that I had tried that in my myriad of trials but I am partially blind from fooling with it so....??????

    I'll keep trying to sort through the box model stuff.

    I use js for navigation so I only have to make a one change in one place for the whole site (that's the best way I know to manage that???).

    thanks a million for taking a look at this!

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use php includes to do that rather than js.
    Basically, save your pages with a .php extension, save your menu as 'menu.php' (or menu.htm, menu.html or menu.txt) and add this where you want your menu :
    PHP Code:
    <?php include 'menu.php'?>
    Here's the manual.

    If your server doesn't support php you should be able to use SSI which is a good alternative. Do the same thing (save your menu as... let's say 'menu.txt') and add this where you want your menu :
    Code:
    <!--#include virtual="menu.txt" -->
    I strongly recommend using one of these - php if possible.
    Last edited by BonRouge; May 12, 2005 at 23:04.


Bookmarks

Posting Permissions

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