From: "Pat" <[EMAIL PROTECTED]> Sent: Sunday, May 28, 2006 10:16 PM Subject: [css-d] site check please
> Hello, > > Could someone have a look at a site that I've rebuilt. It is my first > attempt at a proper website since starting to learn XHTML and CSS last > year. > I've put the complete site here temporarily: > http://www.wonderweb.co.nz/index.html > Anyway, I've rebuilt the National New Zealand Singing School web site > and I'm having problems getting it to resize properly in IE6 and FF. The > left hand column sticks up into the header when it's made bigger and > when resized smaller, a gap appears between the column and the header. > Also, I've had to make the column a different height on every page so > that it will reach the bottom of the page in IE, which invariably makes > the column too long in FF. I think it's to do with the left column being > absolute instead of relative, but when I try to rectify it by changing > the css to position: relative, and in the html file moving the div to > different positions, it just seems to make matters worse. > If anyway has any suggestions I would be most grateful. > > Pat Welcome, Pat: Yes, I am pretty sure you are right aboout the overlap/gap being caused by the absolute positioning. You have the <div class="leftcolh"> positioned absolutely relative to the <wrapper>, fixed 102px below the top of the page. When the header box expands with the text to a size greater than 102px, the overlap occures. When the header box shrinks with the text to a size smaller than 102px, the gap occurs. Try adding, let's say, <div class="innerwrapper"> after the <div class="underbar">, and close it before <p class="updated"> in the html. Add .innerwrapper { position: relative;} to the core.css, and change .leftcolh to {...position: absolute; top:0...} in the home.css, and see what that does. That way the <div class="leftcolh"> is positioned relative to what is essentially the bottom of the <div class="underbar">. I am sure you will get suggestions about floating the leftcolh. IE can be fickle about absolute positioning; something about having to explicitly declare position: relative on the element it's positioned by...but I may be FOS. Also, you may want to position the nav list using em units from the top, rather than px. The positioning is probably causing the the column length problems as well. You could nest another division inside the innerwrapper, but closed before the <div class="leftcolh">. Make the innerwrapper background color the same as the column color and make the background coloe of the nested div white, or whatever. That way the gap between the column and the footer is the same color as the column. I think... It's 12:30 a.m. GMT minus 6, so my brain is rather fuzzy at this point. I hope this makes some sense. Good luck and Cheers, Peter www.fatpawdesign.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
