saskia verlinden wrote: >> saskia verlinden wrote:> > Hi, > website: http://www.tulipdesign.nl/ > > ... This website I'm working > on, works wel in FF and IE6 (don't> > have 7). But if you look in > Opera and watch the horizontal navigation> > with the red background > (id=navig), you see at the right side a white> > gap of some > pixels.... > > #navig li {> ...> width: 14.286%;> > Is rounded to 14% > in Opera and Safari, this means, it is calculated to > 750px*0.14 = > 105px. In Fx: approx. 107px. This results in 14px > difference, a > white gap.> > You could make the ul#navig contain (by floating, by > setting > overflow:hidden) the floating li, so its red background > would become > visible.> > Ingo > > > Hi Ingo, > > Thanks for a quick reply. I understand what caused the problem now, > but I'm not sure I understand your solution. I tried several changes > in my CSS but the red background won't come visible. Sorry, but > please explain.... CSS: http://www.tulipdesign.nl/tulipstyle.css > > Saskia
ul#navig already has a width of 750px, and it has a red background, but we cannot see it in good browsers. This is because ul#navig has no height, it is collapsed to 0. The reason is that ul#navig does not 'contain' the floating list entries. See our wiki for containing floats [1]. I've choose overflow:hidden for ul#navig, but the easyclearing method could be a better alternative. Once the floating li are contained, the ul will expand to their height. Then, a part of the ul's red background will appear to the right of the last list entry. Ingo [1] http://css-discuss.incutio.com/?page=ClearingSpace -- http://www.satzansatz.de/css.html ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
