Have an "almost" pure CSS page in strict mode; the left-side nav area (in green) is set to extend full length of page and is floated inside "maincontent" div. After "maincontent" is a footer div. Also inside "maincontent" is a table. The table content is extending beyond the containing div. All containers - html,body,wrapper,maincontent - are set to height:100%.
Look in Safari or Firefox (IE and Mac) and notice that the table extends beyond div. In Win IE, left nav doesn't extend to bottom of page.
Man, any help will be hugely appreciated.
CSS: <!-- m --><a class="postlink" href="http://help.hyperarts2.com/_includes/style.css">http://help.hyperarts2.com/_includes/style.css</a><!-- m -->
HTML: <!-- m --><a class="postlink" href="http://help.hyperarts2.com/wines.html">http://help.hyperarts2.com/wines.html</a><!-- m -->
Thanks! TimI'm not sure, but it looks like this is the problem :
#toppic {
width:760px;
height:114px;
text-align:right;
background:#4b3628 url(/images/background-588.gif) no-repeat 100% 50%;
border:0;
padding:16px 0 0 10px;
margin:0;
line-height:normal;
voice-family: "\"}\""; voice-family:inherit;
width:750px;
}
IE treats 'height' like it should be treating 'min-height'. Other browsers do it properly.
Nice spelling of 'topic' by the way.Thanks. First, "toppic" is just shorthand for "top picture"...
The problem I'm having isn't with the "toppic" div. That just contains the top dark brown area with the logo and primary navigation. The problem is with that table of wine pictures extending beyond the div called "maincontent" - I can't figure this out. It just happens with Mozilla browsers (eg Firefox - Mac & Win) and Safari.
In Win Internet Explorer, this isn't the problem. The problem is that the left light green column doesn't extend to the bottom of the page, to the brown footer w/navigation, even though I've set the heights of all the *containing* elements, including html and body, to 100%.
How were you viewing this? I didn't really get the relevance of your reply to the problem at hand. But thanks for trying to help.
TimOK... sorry. I'll have another look. (I'm a bit sleepy - I should be more careful).
And sorry about the 'toppic' thing.The footer problem seems mainly related to your 100% heights. I'd try it with the nav and content as peers.I hope this helps (<!-- m --><a class="postlink" href="http://bonrouge.com/test/wines.html">http://bonrouge.com/test/wines.html</a><!-- m -->) .Hey this looks pretty good. What changes did you make to the HTML or CSS? I can analyze myself, but it'd be easier if you just told me what changed.
It looks like maybe you just put a background image in "maincontent" to create the left-side color strip and border rather than with CSS. I was trying to avoid this, as I had done something similar, except I just modified the "outershadow-gray.gif" to include that area, and it did work, so...
Anyway, thanks so much for the assist. Please let me know if you changed anything other than adding that background gif.
TimI thought I'd done more, but looking again (besides removing the 100% height from the nav) that was more-or-less it...
Look in Safari or Firefox (IE and Mac) and notice that the table extends beyond div. In Win IE, left nav doesn't extend to bottom of page.
Man, any help will be hugely appreciated.
CSS: <!-- m --><a class="postlink" href="http://help.hyperarts2.com/_includes/style.css">http://help.hyperarts2.com/_includes/style.css</a><!-- m -->
HTML: <!-- m --><a class="postlink" href="http://help.hyperarts2.com/wines.html">http://help.hyperarts2.com/wines.html</a><!-- m -->
Thanks! TimI'm not sure, but it looks like this is the problem :
#toppic {
width:760px;
height:114px;
text-align:right;
background:#4b3628 url(/images/background-588.gif) no-repeat 100% 50%;
border:0;
padding:16px 0 0 10px;
margin:0;
line-height:normal;
voice-family: "\"}\""; voice-family:inherit;
width:750px;
}
IE treats 'height' like it should be treating 'min-height'. Other browsers do it properly.
Nice spelling of 'topic' by the way.Thanks. First, "toppic" is just shorthand for "top picture"...
The problem I'm having isn't with the "toppic" div. That just contains the top dark brown area with the logo and primary navigation. The problem is with that table of wine pictures extending beyond the div called "maincontent" - I can't figure this out. It just happens with Mozilla browsers (eg Firefox - Mac & Win) and Safari.
In Win Internet Explorer, this isn't the problem. The problem is that the left light green column doesn't extend to the bottom of the page, to the brown footer w/navigation, even though I've set the heights of all the *containing* elements, including html and body, to 100%.
How were you viewing this? I didn't really get the relevance of your reply to the problem at hand. But thanks for trying to help.
TimOK... sorry. I'll have another look. (I'm a bit sleepy - I should be more careful).
And sorry about the 'toppic' thing.The footer problem seems mainly related to your 100% heights. I'd try it with the nav and content as peers.I hope this helps (<!-- m --><a class="postlink" href="http://bonrouge.com/test/wines.html">http://bonrouge.com/test/wines.html</a><!-- m -->) .Hey this looks pretty good. What changes did you make to the HTML or CSS? I can analyze myself, but it'd be easier if you just told me what changed.
It looks like maybe you just put a background image in "maincontent" to create the left-side color strip and border rather than with CSS. I was trying to avoid this, as I had done something similar, except I just modified the "outershadow-gray.gif" to include that area, and it did work, so...
Anyway, thanks so much for the assist. Please let me know if you changed anything other than adding that background gif.
TimI thought I'd done more, but looking again (besides removing the 100% height from the nav) that was more-or-less it...