Firefox/IE divs & background grrrrrrr

[doverbey]

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;
}

[Paul O'B]

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.

#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.)

#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.

[doverbey]

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!

[BonRouge]

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 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 :

<!--#include virtual="menu.txt" -->

I strongly recommend using one of these - php if possible.