Using CSS to style tables

Images used extensively

[armigus]

I am having trouble cleaning up my table-happy FrontPage site. Each image has a 1-pixel border around it even when I use

table { border_collapse: collapse; }
img { 
 border: 0px;
 padding: 0px;
 margin: 0px;
}

The images are supposed to create a rounded border and a navigation bar and therefore they must be flush to the corners of the cells. The design is roughly as follows:

+-(Outer)--------------+-----------------------+ 
¦_Title1 (300x30)______¦_______Title2 {300x30)_¦ 
+-(Meta)------+--------+---------+-------------+ 
¦_nw (100x20__¦_Secondary NavBar_¦_ne (100x20)_¦ 
+---------+---+------------------+---+---------+ 
¦__Main___¦_Main_Content_____________¦__Logo___¦ 
¦_NavBar__¦__________________________¦(80x251)_¦ 
¦_(80x20)_¦__________________________¦_________¦ 
¦_9 Pages_¦__________________________¦_________¦ 
¦_________¦__________________________¦_________¦ 
¦_________¦__________________________¦_________¦ 
¦_________¦__________________________¦_________¦ 
¦_________¦__________________________¦_________¦ 
+-(Meta)--+---+------------------+---+---------+ 
¦_sw (100x20)_¦_Copyright, Date__¦_se (100x20)_¦ 
+-(Outer)-----+--------+---------+-------------+ 
¦_email: contact_______¦________Phone: contact_¦ 
+----------------------+-----------------------+ 

"Outer" and "Meta" are CSS table classes. Image sizes are in parentheses.

How would I replace the tables with CSS div classes so that the images are perfectly flush to the corners of their containers?

[photon]

Is it just at the bottom of the image, or is it all around? If it's just at the bottom, check out this thread [webmasterworld.com].

[armigus]

Actually I found td { padding: 0; } and it works...almost.

Now the navigation bar on the left has a border around each image representing the link color. I have tried altering the link and td elements but no luck.

[DrDoc]

img {
border: 0;
}

...should do it.

[VerNetzer]

Have you set the image border to 0?

[armigus]

img { border: 0; } was tried in my original attempts (note my first post) and proved futile. When combined with the effective but incomplete solution of td { padding: 0; } it failed utterly.

[armigus]

VerNetzer, it seems you were on the right track, but IE6 <img> tags cannot inherit the border attribute from CSS. One of my pages still had the border="0" attribute in the <img> tags themselves and they rendered properly.

I will experiment with a #NavBar class and see if it works.

[createErrorMsg]

**How would I replace the tables with CSS div classes**

One tehnique is to assign four (or five) classes to hold border images (you mentioned round corners, for which this technique works great), a div.class1 that holds the upper left corner image and is wide and tall enough to contain all your content, a div.class1 h3 that holds the upper right corner image, a div.class2 that holds a one pixel tall image of the right border, repeated vertically (if it has anything interesting, other wise I believe you just leave off that image and let the div stand alone), a div.class3 that holds the bottom left corner image and a div.class3 p that holds the bottom right corner image. By holds the image, I mean has the image set as the background in the CSS.

The h3 and p classes are optional. Any block level element will do (including another div), as long as you use it in your code so the background image gets displayed.

As you fill the divs with content, they display your rounded borders, like so:

<div class="class1"> //shows upper left corner
<h3>Blah-Blah Header</h3> //shows upper right corner
<div class="class2"> //shows right border
<p>Blahdy blah blah.</p>
<p>Yakety yak yak.</p>
</div>
<div class="class3"> //shows bottom left
<p>Blah Footer</p> //shows bottom right
</div>
</div>

Wrap the whole thing in another div to center, float or position it as needed. A List Apart has a pretty well known article on this very technique. It's called customcorners in their articles dir. That's where I got it from and it's worth checking out.

[armigus]

Here's where I am so far:

CSS:

body {
background: #c6ffb7;
font-size: 14pt;
font-family: Bookman Old Style, serif
}

a {
border: 0;
padding: 0;
}
a:link { color: #ffff00 }
a:visited { color: #00c060 }
a:active { color: #ffffff }
a:hover { color: #00ffff }
a.Section {
font-weight: bold;
font-style: oblique;
color: #008040;
}
a.Section:hover { color: #2682A3 }

div.outer {
width: 100%;
height: 30px;
background-color: #219265;
background-repeat: no-repeat;
background-attachment: scroll;
font-size: 100%;
color: #ffff00;
padding: 0;
margin: 0;
border: 0;
background-position: 0%
}

div.sep { clear: both; }
div.outleft { float: left; }
div.outright { float: right; }

div.meta {
color: #FFFF00;
width: 100%;
background-color: #2682A3;
background-repeat: no-repeat;
background-attachment: scroll;
font-size: 80%;
padding: 0
margin: 0;
border: 0;
background-position: 0%
}
div.mtext { text-align: center; }
div.nw {
background-image: url('Images/cornernw.gif');
background-repeat: no-repeat;
background-attachment: fixed;
float: left;
background-position: left top;
width: 100px;
height: 20px;
}
div.ne {
background-image: url('Images/cornerne.gif');
background-repeat: no-repeat;
background-attachment: fixed;
float: right;
width: 100px;
height: 20px;
position: relative;
background-position: right top;
}
div.sw {
background-image: url('Images/cornersw.gif');
background-repeat: no-repeat;
background-attachment: fixed;
text-align: Left;
float: left;
background-position: left bottom;
width: 100px;
height: 20px;
}
div.se {
background-image: url('Images/cornerse.gif');
background-repeat: no-repeat;
background-attachment: fixed;
text-align: Left;
float: right;
background-position: right bottom;
width: 100px; height: 20px;
}

HTML:

<body>
<div class="outer">
<div class="outleft">
<img id="Title" hidefocus disabled alt="Some Company" src="Images/titlew.png" name="Title" width="300" height="30">
</div>
<div class="outright">
<img id="Title" hidefocus disabled alt="" src="Images/titlee.png" name="Motto" width="300" height="30">
</div>
</div>
<div class="sep"></div>
<div class="meta">
<div class="nw"></div>
<div class="ne"></div>
<div class="mtext">Secondary NavBar</div>
</div>
<div class="sep"></div>
<div class="meta">
<div class="sw"></div>
<div class="outleft">(C) 2004 by John Doe</div>
<div class="se"></div>
<div class="outright">Last Modified: 6/15/2004</div>
</div>
<div class="sep"></div>
<div class="outer">
<div class="outleft">email: <a href="mailto:[e-mail]">[e-mail]</a></div>
<div class="outright">Phone: [phone]</div>
</div>

Now the hard part... The navigation bar. I've seen someone try to pull CSS on <ul>, <li> tags to create a horizontal navbar. I need a vertical one. I also plan to implement the image sprite technique. I have a 320x180 image set up as a 4x9 grid of buttons.

Any ideas?

[edited by: DrDoc at 9:33 pm (utc) on June 15, 2004]
[edit reason] Removed specifics [/edit]