u24y...@gmail.com wrote: Once you have cleaned up the source-code - as has already been pointed at - you can look for solutions to the more CSS related problems.
> The only problem is with explorer with the footer. I have 2 images > with a single line of text between the images, all centered The 2 > images are about 2 inches below the line of text? Delete the 'vertical-align: -25%;' you have on those images. IE/Mac can't handle it as intended - see below. > On a PC, no problem with any of the other browsers except explorer 7. > This time the images are in their proper position in the footer, but > the text below which is in a smaller size, isn't lining up to > centre, but the images are? I'm not sure how you want those images to line up with the text, but I suggest you try 'vertical-align: middle;'. Will align text/images the same in all browsers, I think, and even IE/Mac can handle that style. > The really big concern is the side navigating bar image and the css > text is being pushed about 3 inches toward the centre which destroys > the whole lay-out on the page. This is only happening on a pc using > explorier 7. > > I'm wondering what explorer bugs am I encountering and what hacks I > need to write in. Somewhat wrong approach. 1: an element can either be absolute positioned or floated - not both, since absolute positioned elements can't float. 2: if you choose absolute positioning for the #sidebar1, then you also have to declare 'left: 0;' on it as IE/win will otherwise not know where to position that element and places it "where it falls". I suggest you float #sidebar1, like in my example below. > The other problem that I have with all browsers on both mac & pc is > that the Image behind the navigation bar doesn't repeat as the main > body text increases in size. I have it set to repeat on the y axes. The height of #sidebar1 is unaffected by the height of other elements, and background can't go outside its own element. For solutions: google for "faux columns", or apply "Equal Height Columns"... <http://www.positioniseverything.net/articles/onetruelayout/equalheight> ...as I have in the example below. > I've read that explorer doesn't like padding so I've stayed away from > using any at all. Only true for IE in quirks mode - related to IE's proprietary box model. IE6 and later versions are in standards mode for your page, and therefore use the W3C box model same as all other browsers. > http://www.drbjornsauto.com/index_01.html Example that'll render the same in all browsers: <http://www.gunlaug.no/tos/alien/nm/test_08_1215.html> ...all major CSS corrections / additions here... <http://www.gunlaug.no/tos/alien/nm/test_08_1215_files/index000.css> Not intended for copy and paste. I have removed all unnecessary relative and absolute positioning from the CSS, and also all superfluous <br /> and <p>nbsp;</p> from the source-code in this example. (The source-code is clean apart from that I have butchered some of your UTF-8 coding. It didn't play well with my editor's default settings and I didn't bother to change settings... <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gunlaug.no%2Ftos%2Falien%2Fnm%2Ftest_08_1215.html&charset=utf-8&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.606> I have also partially ignored IE/Mac, since that old bugger will need special treatment the way I have styled my example :-) ) regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
