Overlap issue with CSS Rounded Tables — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Overlap issue with CSS Rounded Tables

This page's ID: 26525

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I'm using CSS rounded tables for a homemade CMS, and I'm having an overlap issue. The CSS and HTML are 100% valid, and they render quite nicely in IE and Firefox. Problem is, in Firefox, I can't stack the rounded tables. They overlap each other. I've tried a number of approaches (yes, even <br clear="all">), and haven't been able to get it to stack nicely in both Firefox and IE (a requirement) unless I set absolute heights or margins - which I can't do, since the content that's going to be in the tables will vary. An example of what I've got is available at http://sandbox.relativequiet.com/roundCSS/stack.html and the code is below. CSS: [code]body { background: #fff; font-family: verdana; font-size: 12px; margin: 0; padding: 0; } img { border: 0;} table, tr, td { font-size: 12px;} /* navCorner */ .navWrapper { display: block; margin: 3px 3px 0 3px; } .navCornerTopLeft { background: url("../images/topLeft.gif") top left no-repeat; height: 26px; } .navCornerTopRight { background: url("../images/topRight26.gif") top right no-repeat; height: 26px; } .navCornerTopRight div { background: url("../images/topMiddle.gif") center repeat-x; height: 26px; margin: auto 26px; text-align: center; } p.navCornerHeadingFix { font-weight: bold; margin: 0 auto; padding: 6px 0 0 0; } .navCornerBottomLeft { background: url("../images/bottomLeft.gif") bottom left no-repeat; height: 16px; margin: 0; padding: 0; } .navCornerBottomLeft div { background: url("../images/bottomMiddle.gif") center repeat-x; height: 16px; margin: 0 0 0 16px; text-align: center; } .navCornerContent, .navCornerContent p { background: #fff; margin: 0 2px; padding: 0 1px; } div.navCornerBottomRight { background: url("../images/bottomRight16.gif") bottom right no-repeat; height: 16px; margin: 0; padding: 0; }[/code] [b]HTML:[/b] [code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <title>Rounded Tables With Divs</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Pragma" content="no-cache"> <link rel="stylesheet" type="text/css" href="css/stack.css" media="screen"> </head> <body> <div class="navWrapper" id="nav1"> <div class="navCornerTopLeft"> <div class="navCornerTopRight"><div><p class="navCornerHeadingFix">Section Heading</p></div></div> <div class="navCornerContent"> <p>Lorem ipsum dolor sit amet...[snipped for ease of posting]</p> </div> <div class="navCornerBottomLeft"><div><div class="navCornerBottomRight"></div></div></div> </div> </div> <div class="navWrapper" id="nav2"> <div class="navCornerTopLeft"> <div class="navCornerTopRight"><div><p class="navCornerHeadingFix">Section Heading</p></div></div> <div class="navCornerContent"> <p>Lorem ipsum dolor sit amet...[snipped for ease of posting]</p> </div> <div class="navCornerBottomLeft"><div><div class="navCornerBottomRight"></div></div></div> </div> </div> </body> </html>[/code] As always, thanks in advance for your expert help. ----------------------------------- -Dave Maker of stuff, user of things ----------------------------------- [small](Edited by [internallink=4443]DaveFA[/internallink] on 08-24-2005 21:14)[/small] [small](Edited by [internallink=51]bitdamaged[/internallink] on 08-24-2005 21:59)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu