Topic: Overlap issue with CSS Rounded Tables |
|
|---|---|
| Author | Thread |
|
Bipolar (III) Inmate From: USA |
posted 08-24-2005 21:12
 
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"> 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: <!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>
|
|
Paranoid (IV) Inmate From: London |
posted 08-24-2005 21:56
Your URL doesn't seem to load for me |
|
Bipolar (III) Inmate From: USA |
posted 08-24-2005 22:30
Seems to be working fine for me from three separate workstations at the office. Just in case, I've uploaded a copy to http://www.flavored-air.com/temp/stack.html. |
|
Lunatic (VI) Mad Scientist From: Massachusetts, USA |
posted 08-24-2005 22:43
All of your content for each box is within a navCornerTopLeft div, whose height has been set to 26px. That might explain firefox's interpretation of your code. |
|
Bipolar (III) Inmate From: USA |
posted 08-24-2005 22:50
Oh duh. Duh duh duh. Wow. This is what happens when you stare at something for too long - you miss the simple stuff. |
|
Bipolar (III) Inmate From: USA |
posted 08-24-2005 23:00
Oh duh. Duh duh duh. Wow. This is what happens when you stare at something for too long - you miss the simple stuff. |
|
Paranoid (IV) Inmate From: Florida |
posted 08-24-2005 23:05
You could simplify that code a lot by using absolute positioning. |
|
Paranoid (IV) Inmate From: Florida |
posted 08-24-2005 23:12
/me grumbles at server |
|
Bipolar (III) Inmate From: USA |
posted 08-25-2005 19:51
I'd like to be able to use absolute positioning, except this template has to work in multiple resolutions on multiple platforms, and it's not going to be holding the same amount of content each time, nor will it look the same. |
|
Paranoid (IV) Inmate From: Florida |
posted 08-25-2005 20:18
Why's that? I seem to run into a lot of people that think absolute positioning is the devil that kills fluidity. It's not. I'm telling you, with absolute positioning, you wouldn't need all those nested divs. You could have something like this: code: <div class="box">
<h2>whatever</h2>
<p>whatever</p>
<div class="one"></div>
<div class="two"></div>
<div class="thr"></div>
<div class="fou"></div>
<div class="fiv"></div>
</div> |
|
Paranoid (IV) Inmate From: London |
posted 08-26-2005 11:43
Yeah absolute positioning is ok if used correctly, unfortunatly when developers/designers first learn about CSS they often start creating layouts with absolute positioning where they should be using floats, they end up abusing it. |
- Copyright ©1994-2024 by Doctor Thaddeus Ozone, all rights reserved. -
- Grail copyright ©2000-2024 by Tyberius Prime, all rights reserved. -
Debug: This page needed 0.00505996 seconds to process.
, 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.
