Forum Moderators: not2easy
I have several tables, i created jpg headers for the tables, i want the table boxes below the header to have a simple 1px border. The problem being the border sits 1px outside of the width of the header. So the jpgs appear to sit ontop, rather than be joined with.
It there a way of creating an inner border? or stop it adding a 1px to the table size?
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:854px;
height:263px;
z-index:1;
left: 10%;
top: 150px;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<table width="850" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><img src="../../My Documents/Brighton Sculpture/image/nav/nav1.jpg" width="150" height="70" /></td>
<td width="22"> </td>
<td width="150"><img src="../../My Documents/Brighton Sculpture/image/nav/nav2.jpg" width="150" height="70" /></td>
<td width="22"> </td>
<td width="150"><img src="../../My Documents/Brighton Sculpture/image/nav/nav3.jpg" width="150" height="70" /></td>
<td width="22"> </td>
<td width="150"><img src="../../My Documents/Brighton Sculpture/image/nav/nav4.jpg" width="150" height="70" /></td>
<td width="22"> </td>
<td width="160"><img src="../../My Documents/Brighton Sculpture/image/nav/nav4.jpg" alt="" width="150" height="70" /></td>
</tr>
<tr>
<td width="150" style="border:1px solid #000000; border-top:0px;"> </td>
<td width="22"> </td>
<td width="150" style="border:1px solid #000000; border-top:0px;"> </td>
<td width="22"> </td>
<td width="150" style="border:1px solid #000000; border-top:0px;"> </td>
<td width="22"> </td>
<td width="150" style="border:1px solid #000000; border-top:0px;"> </td>
<td width="22"> </td>
<td width="150" style="border:1px solid #000000; border-top:0px;"> </td>
</tr>
<tr>
I hope this is at least a little bit clear?
#apDiv1 table tr td img {display:block;}
E.g. you should not need those whitespace 22px wide cells at all.
Read this:
[w3.org...]
Skip section 17.2 on a first read, it'll confuse you, and you're not going to use it anytime soon I guess.
It's important to note CSS has 2 border modes for tables:
'border-collapse:' collapse ¦ separate (separate is the default)
One can set cellspacing in CSS:
'border-spacing:' <length> <length>
which allows the border to be different in vertical and horizontal directions.
Now a border sits outside the element's content width and the padding, so the easiest is going to be to let the header cells also have the border.
Anyway. I'd start off without adding layout in the html. Something like:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrap">
<table id="apDiv1">
<tr>
<th><img src="1.jpg" alt="one" /></th>
<th><img src="2.jpg" alt="two" /></th>
<th><img src="3.jpg" alt="three" /></th>
<th><img src="4.jpg" alt="four" /></th>
<th><img src="4.jpg" alt="five" /></th>
</tr>
<tr>
<td>ipso</td>
<td>ipso</td>
<td>ipso</td>
<td>ipso</td>
<td>ipso ipso ipso ipso ipso ipso ipso</td>
</tr>
</table>
</div>
</body>
</html>
now my test images had the wrong size, so I need to scale them to your size:
#apDiv1 th img{
width: 150px;
height: 70px;
}
Now the spacing:
#apDiv1 {
border-spacing: 22px 0;
}
Next I add some padding to the content cells and a border except fo the top as well as reduce the width to make sure the total end up at 150px width:
#apDiv1 td {
border: 1px solid black;
border-top: 0;
padding: 3px;
width: 142px;
}
I this the following in Firefox, safari and opera without any trouble:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#apDiv1 th img{
width: 150px;
height: 70px;
}
#apDiv1 {
border-spacing: 22px 0;
}
#apDiv1 td {
border: 1px solid black;
border-top: 0;
padding: 3px;
width: 142px;
}
</style>
</head>
<body>
<div id="wrap">
<table id="apDiv1">
<tr>
<th><img src="1.jpg" alt="one" /></th>
<th><img src="2.jpg" alt="two" /></th>
<th><img src="3.jpg" alt="three" /></th>
<th><img src="4.jpg" alt="four" /></th>
<th><img src="4.jpg" alt="five" /></th>
</tr>
<tr>
<td>ipso</td>
<td>ipso</td>
<td>ipso</td>
<td>ipso</td>
<td>ipso ipso ipso ipso ipso ipso ipso</td>
</tr>
</table>
</div>
</body>
</html>
I've not yet looked at it in IE at all at this point.
I've only just started using css and such so i tend to mash html and css together, perhap nows a good time to make the change.
Okay, i'm having a slight hiccup working with what you gave me, it seems the rules for positioning have changed. Where can i specify the position on the page, top, left etc? Thanks
You can position the table using absolute positioning as you did before.
E.g.:
#apDiv1 {
border-spacing: 22px 0;
border: 1px solid red;
position: absolute;
left: 10%;
top: 150px;
}
margin-left: -22px;
