Gunlaug Sørtun wrote: > Administration wrote: > > >> When testing in FF and Opera . the background would not repeat / >> column widths are erratic / column lengths are erratic / top >> navigation is not staying within the <div id="wrapper"> >> >> http://www.kenomultimedia.com.au/ >> > > >> I did ask for help on the list and Ingo Chao replied with.. >> >> "Understanding CSS-concepts like floating is easier if you start >> creating your site in FF or Opera." After several attempts I still >> haven't managed to get the image to repeat in FF and Opera. >> > > Ingo was perfectly right. IE is pulling tricks on you with all its bugs > and non-standard behavior, so make it work in the standard-compliant > browsers first and fix IE later. > > >> I have since created another main page, this time to suit FF 1.5 and >> Opera 9.0 and this time I have used an image and color individually >> for the columns. >> > > That's the wrong approach for that layout, so I'll focus on making your > original page cross-browser reliable... > > <http://www.kenomultimedia.com.au/> > > To make the background stretch to contain floats in standard-compliant > browsers, you have to feed them some standard properties in the right > places. > I'll choose to establish a new 'block formatting context'[1] by adding... > #page {float: left;} > ...which makes that container expand properly, with background and all, > in all browsers. > > Then I'll add... > ul#nav {padding: 0;} > ...since both Firefox and Opera9 have default paddings on lists - making > that top navigation too wide. IE has default margins on lists, and you > have already taken care of those. > > That should be it - unless I have overlooked something. > > >> Just hoping someone on the list could help me out here .. I think I >> may have to go back to basics and start again. >> > > No need. Just keep on building on what you've got, and keep on learning. > > >> Is it possible to have on the same website, separate linked or import >> style sheets to suit different browsers, as I have never heard of >> this before .. >> > > You can use 'conditional comments'[2] to feed separate stylesheets to > IE-win - if you have to. > No such solution for other browsers, and there's rarely a need for > separate styles to make the more standard-compliant browsers get in > line. Try giving them a complete set of styles first, to even out any > major differences. > > regards > Georg > > [1]http://www.w3.org/TR/CSS21/visuren.html#q15 > [2]http://www.gunlaug.no/contents/wd_1_02_01.html#item2 >
Thank you Georg for your invaluable help ... http://www.kenomultimedia.com.au/ http://www.kenomultimedia.com.au/keno.css I now have a few more problems, not sure what I have done or haven't done here ... but maybe a fresh pair of eyes can help me sort this mess out :-) IE6 ...... margin/padding problem with the header: '...... a website business that means business for your website' ------------------------ FF 1.5 ...... margin/padding problem with the header: '...... a website business that means business for your website' When navigating 5 of the 7 site pages are skipping to the left.. or is it 2 are skipping to the right (the Home and Accessibility pages) ------------------------ Opera 9.02 ...... margin/padding problem with the header: '...... a website business that means business for your website' When navigating 5 of the 7 site pages are skipping to the left.. or is it 2 are skipping to the right (the Home and Accessibility pages) also there is a 2-3px gap beneath each image in the l-r columns. l-hand column, vertical spacing/column height erratic. ------------------------ Font sizing seems to be rendering differently over the 3 browsers h4 tag . sub headings differing from page to page Thanks in advance, Keno ... ______________________________________________________________________ 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/
