PDA

View Full Version : style="border-bottom: solid 1px black; want to put this in <head>

canadianjameson
05-01-2005, 06:26 PM
if I wanted to acheive a 1px solide black boder for a table and its cells without inline CSS, what would the code be?


<style type="text/css">
table {border: solid 1px black}
TR {border: solid 1px black}
TD {border: solid 1px black}
</style>


because right now i have this sort of set-up and i want to streamline the code


<table width="536" style="border: solid 1px black;" cellspacing="0" cellpadding="1">
<tr>
<td width="155" style="border-bottom: solid 1px black; border-right: solid 1px black;"><strong>Date of Request:</strong></td>
<td width="381" valign="middle" style="border-bottom: solid 1px black;">{= date =}&nbsp;</td>
</tr>


i want to remove all the style="border-bottom: solid 1px black; border-right: solid 1px black;" from the actual table code itself and just have it in the head.
mark87
05-01-2005, 06:47 PM
That should work? You can remove the inline CSS and the border should still work...
canadianjameson
05-01-2005, 07:09 PM
it does, the only problem is that the border is double the width it should be.

try it out:
this

<style type="text/css">
table {border: solid 1px black}
TR {border: solid 1px black}
TD {border: solid 1px black}
</style>

<table cellpadding="0" cellspacing="0" onMouseover="changeto('lightgreen')" onMouseout="changeback('white')">
<td id="ignore">Main Menu</td>
<td>Eggs</td>
<td>Ham</td>
</table>


and this

<table width="536" style="border: solid 1px black;" cellspacing="0" cellpadding="1">
<tr>
<td width="155" style="border-bottom: solid 1px black; border-right: solid 1px black;"><strong>Date of Request:</strong></td>
<td width="381" valign="middle" style="border-bottom: solid 1px black;">{= date =}&nbsp;</td>
</tr>
</table>


yield different borders because the top border of one and the bottom border of another BOTH get 1px solid black, making it a 2px solid black

how can i get rid of this overlap without having to code each cell individually?
mark87
05-01-2005, 07:25 PM
It's double the width it should be because it's applying a border to the td, and then to the tr, and then to the table. Just specify one element to add the border to and it should be ok? Otherwise, don't use tables - unless you have to - and just use CSS.
canadianjameson
05-01-2005, 07:30 PM
I've never only used CSS for tables, i dont really know how.

are you telling me there's no way not to use CSS to give a table and all its cells a 1px solid black border?

i tried only applying it to TD or TR and it didnt help. am i doing something wrong?
mark87
05-01-2005, 08:05 PM
I'm not sure soz, hum, well I meant if you aren't using tables to display data then you should use divs etc, but if you are displaying data then tables are fine. Have you tried just applying it to the table?

Just this seems to work for your example -

td {border: solid 1px black}
canadianjameson
05-01-2005, 08:19 PM
ya it works, but it still doubles up 98% of the borders. what i need is a way to not have the 2px borders
Bill Posters
05-01-2005, 10:30 PM
Is this the sort of thing you mean?
(view in Firefox)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">

table {
border-collapse: collapse;
}

td {
background: #fc0;
border: 1px solid #333;
}

</style>
</head>
<body>

<table width="100%" cellspacing="0">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>

</body>
</html>


(Count MSIE/Mac out and I can't vouch for MSIE/Win either - which probably means count that out too.)
canadianjameson
05-01-2005, 10:49 PM
it seems to do exactly what i need... and i tested it in I.E

How does adding border-collapse change things? is that the part that may not be cross-broswer compatible?
chilipie
05-02-2005, 09:56 AM
I don't know about being cross-browser compatible, but it is valid CSS: http://www.w3schools.com/css/pr_tab_border-collapse.asp
canadianjameson
05-02-2005, 03:15 PM
good old chillie :D

it being valid CSS would techically make it more probable that it is cross browser, no?
chilipie
05-02-2005, 03:16 PM
Yah, I should think so... only way to find out is to try it, I suppose ;) .
canadianjameson
05-02-2005, 03:26 PM
heh

i'm working on something else you might be able to help with, how long are you on for?
chilipie
05-02-2005, 03:39 PM
i'm working on something else you might be able to help with, how long are you on for?Until the men in white coats take me away :D . Seriously though... I dunno. A couple of hours, give or take, but I'll probably be on later as well :) .
canadianjameson
05-02-2005, 03:54 PM
cool, just fixing some stuff up on another page i had to deal with

it has to do with this thread here

http://www.codingforums.com/showthread.php?t=58190

but i'm going to repost my question and simplify things