Firefox and IE are interpreting this in two different ways. IE has got it right:
#wrap {
background: url(../graphics/side-bar.jpg) repeat-y left top;
text-align: left;
margin: auto;
width: 780px;
min-height: 100% }
* html #wrap {height:100%}
see here (<!-- m --><a class="postlink" href="http://www.cityofpoulsbo.com/citysite/sample">http://www.cityofpoulsbo.com/citysite/sample</a><!-- m --> pages site folder/index.asp) for example. The background only goes as far as the "main" div does, when it should go down as far as the wrap div does (in FF). What do I need to change?Firefox and IE are interpreting this in two different ways. IE has got it right:Well that's almost never the case. I don't see enough difference there to make a difference. IE's botched box model is causing far worse problems in the horizontal direction. Also there's a Javascript error:
Error: tP is not defined
Source File: <!-- m --><a class="postlink" href="http://www.cityofpoulsbo.com/citysite/sample%20pages%20site%20folder/index.asp">http://www.cityofpoulsbo.com/citysite/s ... /index.asp</a><!-- m -->
Line: 36Okay, maybe not on the index page. But if you go to the clerk's page for instance, (In the drop down menu under departments) you can see it messing up. And I'm not getting any javascript error...Please, does anyone know how to fix this problem with the background? I really need to fix it, but can't for the life of me figure it out.Maybe I'm blind but they look the same to me in IE and FF.<!-- m --><a class="postlink" href="http://cityofpoulsbo.com/citysite/sample%20pages%20site%20folder/Clerk/clerk.asp">http://cityofpoulsbo.com/citysite/sampl ... /clerk.asp</a><!-- m -->
go there in FF and it will definitely not look the same.Ah, I see it. If that's a div on the left, holding the nav, make the height:100%;Well...that sort of helps. It reaches the bottom of the links now. BUT I want it to reach the bottom of the page, like it does in IE. Check out what it's doing now in FF.then instead of a % hard code it in px. Experiment til you find the right number. My starting point (a guess) would be around 500px. If they still show it differently, then use the !important hack. Code the value that works in FF 1st, and follow the value with !important; Then in the same set of style rules code the attribute again with the value that works in IE, and DON'T put the !important. FF (and opera) will use the 1st value, IE the 2nd.Ok, forget the hack part. I just checked and Opera shows it like IE does, so the hack will probably mess it up in Opera. You could try though.Well, not all the pages are going to be the same height in px though. Some have more content than others, some have more "community links" than others. But thank you. I have it working good enough for now. At least now, it works perfectly in IE and in FF the background shows as far as the links. So even if it isn't as pretty in FF it is still functional, so for now it'll do.Well ok, but even if the pages differ in height, you could code that value on each page. Actually, if you set NO height for the div at all, it should expand to just large enough for the content, in all 3 browsers.if I put the code on each page, I would have to have the css inline on the page, instead of in an external file, which is what I have now. And I didn't have a height for the div before, and it wasn't working, I'm not sure why.
#wrap {
background: url(../graphics/side-bar.jpg) repeat-y left top;
text-align: left;
margin: auto;
width: 780px;
min-height: 100% }
* html #wrap {height:100%}
see here (<!-- m --><a class="postlink" href="http://www.cityofpoulsbo.com/citysite/sample">http://www.cityofpoulsbo.com/citysite/sample</a><!-- m --> pages site folder/index.asp) for example. The background only goes as far as the "main" div does, when it should go down as far as the wrap div does (in FF). What do I need to change?Firefox and IE are interpreting this in two different ways. IE has got it right:Well that's almost never the case. I don't see enough difference there to make a difference. IE's botched box model is causing far worse problems in the horizontal direction. Also there's a Javascript error:
Error: tP is not defined
Source File: <!-- m --><a class="postlink" href="http://www.cityofpoulsbo.com/citysite/sample%20pages%20site%20folder/index.asp">http://www.cityofpoulsbo.com/citysite/s ... /index.asp</a><!-- m -->
Line: 36Okay, maybe not on the index page. But if you go to the clerk's page for instance, (In the drop down menu under departments) you can see it messing up. And I'm not getting any javascript error...Please, does anyone know how to fix this problem with the background? I really need to fix it, but can't for the life of me figure it out.Maybe I'm blind but they look the same to me in IE and FF.<!-- m --><a class="postlink" href="http://cityofpoulsbo.com/citysite/sample%20pages%20site%20folder/Clerk/clerk.asp">http://cityofpoulsbo.com/citysite/sampl ... /clerk.asp</a><!-- m -->
go there in FF and it will definitely not look the same.Ah, I see it. If that's a div on the left, holding the nav, make the height:100%;Well...that sort of helps. It reaches the bottom of the links now. BUT I want it to reach the bottom of the page, like it does in IE. Check out what it's doing now in FF.then instead of a % hard code it in px. Experiment til you find the right number. My starting point (a guess) would be around 500px. If they still show it differently, then use the !important hack. Code the value that works in FF 1st, and follow the value with !important; Then in the same set of style rules code the attribute again with the value that works in IE, and DON'T put the !important. FF (and opera) will use the 1st value, IE the 2nd.Ok, forget the hack part. I just checked and Opera shows it like IE does, so the hack will probably mess it up in Opera. You could try though.Well, not all the pages are going to be the same height in px though. Some have more content than others, some have more "community links" than others. But thank you. I have it working good enough for now. At least now, it works perfectly in IE and in FF the background shows as far as the links. So even if it isn't as pretty in FF it is still functional, so for now it'll do.Well ok, but even if the pages differ in height, you could code that value on each page. Actually, if you set NO height for the div at all, it should expand to just large enough for the content, in all 3 browsers.if I put the code on each page, I would have to have the css inline on the page, instead of in an external file, which is what I have now. And I didn't have a height for the div before, and it wasn't working, I'm not sure why.