John Burk wrote: > I'm trying to get a layout with a horizontal list nav bar to work in IE 7, > and the bar keeps breaking into two parts, as seen in the link below: > > <http://preview.standrews-de.org/athletics/sportdisplay5.cfm?sportID=5&level=j> > > The layout does seem to work fine when I remove the photo that is set to > float:right: > > <http://preview.standrews-de.org/athletics/sportdisplay6.cfm?sportID=5&level=j> > > I've been able to get the layout to work perfectly in FF and safari: > > <http://preview.standrews-de.org/athletics/sportdisplay4.cfm?sportID=5&level=j> > > > I'd appreciate any ideas or advice. > > Thanks, > -John
Hi John The layout is incorrect in any browser. The black background image is an <img> in the source and appears in the source between the closing tags of the list </li> <img> </ul>. This along with other instances is incorrect xhtml. You have way to many validation errors in your markup which need to be corrected. <http://validator.w3.org/> Now since markup is off topic on this list, no more said. Now concerning CSS on topic. Sending such a request to this list, where you are using inline style doesn't help any on this list to edit the CSS. Using the Firefox web developers toolbar to edit the CSS, I can not overrule this inline style. All such styles should be embedded in the header or in an external CSS file, which can be edited. I have prepare a little demo of how this part of the page can be layout and styled. <http://css-class.com/x/sports/sportdisplay1.htm> You will notice that the background image and parts of are now backgrounds of the <ul> and <li> element in the first list menu. The div that contains them with the gray background has an background image for the rounded top right corner and the outer div also has a background image for the rounded top right corner. Nesting both the list menus and these divs with more divs, you can create more round corners. The outer div has overflow:hidden. If this was auto, then you would end up with a scrollbars after resizing the text since I have given the gray inner div a height, so the bottom part just moves further down and is hidden. Lastly this part of the page doesn't handle text resizing to well, some thought should be given to that. Kind Regards, Alan <http://css-class.com/> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/
