Forum Moderators: not2easy
Im stuck with a bit of a problem and was wondering if prehaps you guys could help me .
CSS Code
#wrap {
margin: 40px auto 0 auto;
width: 800px;
}
.left {
margin-top: 10px;
width: 570px;
float: left;
text-align: justify;
border: 1px solid #000;
padding: 10px;
}
.left h2 {
color: #DC143C;
font-size: 24px;
letter-spacing: -3px;
font-weight: 500;
padding : 10px 0 15px 0;
}
.left h1 {
color: #DC143C;
font-size: 24px;
letter-spacing: -3px;
font-weight: 500;
padding : 10px 0 15px 0;
}
And the html code
</head>
<body><div id="wrap">
<div id="header">
<h1><a href="./../index.html" title="">Blah</a></h1>
<h2> </h2>
</div>
<div class="left">
<div class="articles"><table width="560" cellspacing="0" cellpadding="5%" bgcolor="#ffffff" ALIGN="center" >
(php loop) {
<tr> <td></td></tr>
<tr> <td></td></tr>
<tr> <td></td></tr>
<tr> <td></td></tr>
}</table>
What im trying to do is to creat a class for the table so that i can put borders around certain row (all the rows that are in one loop)
but im struggling to find a solution .
any suggestions will be appreciated.
Regards
Malcolm
[edited by: swa66 at 6:21 pm (utc) on Oct. 30, 2008]
[edit reason] double line spacing [/edit]
<div class="table-border"><tr> <td></td></tr></div>
Then in the CSS.
.table-border{
margin: 0;
padding: 0;
border: 1px solid #000;
}
<div class="table-border"><tr> <td></td></tr></div>
The above is actually invalid html. I'd make that
<tr class="table-highlight"><td></td></tr>
In standards compliant browsers this is almost trivial:
<?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</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: gray;
}
.example {
width:560px;
border-collapse:collapse;
background-color: #fff;
margin: 0 auto;
}
.example td {
padding: 5px;
}
.example .highlight {
border: 1px solid red;
}
</style>
</head>
<body>
<table class="example">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr class="highlight"><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Clean, short sweet, what more could you wish for.
That's till you fire up IE7 (IE 6 is even far worse).
So ... we're faced with implementing graceful degradation e.g.:
<!--[if IE 7]>
<style type="text/css">
.example .highlight {
background-color: pink;
}
</style>
<![endif]-->
On to IE6: the centering isn't working either (as usual). We can try to fix it all ourselves, or let IE8 handle it, and it's got the same problem as IE7 with not rendering borders on <tr>s. Even worse a lot of the possible solutions are cut off due to IE6's far less generous options in selectors.
So putting it together:
<?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</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: gray;
}
.example {
width:560px;
border-collapse:collapse;
background-color: #fff;
margin: 0 auto;
}
.example td {
padding: 5px;
}
.example .highlight {
border: 1px solid red;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.example .highlight {
background-color: pink;
}
</style>
<![endif]-->
<!--[if IE 6]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<table class="example">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr class="highlight"><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
I almost stopped here on a sad note. But then I looked back at just IE7, and tried to figure out a way to select the last <td> in a row anyway and then it dawned on me: IE8.js implements the :last-child pseudo selector, and ... we can add borders on the <td>s to create the box the tr should have painted. Combined that works. So no epic failure in the end.
Even better: it works exactly the same in IE6.
<?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</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: gray;
}
.example {
width:560px;
border-collapse:collapse;
background-color: #fff;
margin: 0 auto;
}
.example td {
padding: 5px;
}
.example .highlight {
border: 1px solid red;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.example .highlight td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.example .highlight td:first-child {
border-left: 1px solid red;
}
.example .highlight td:last-child {
border-right: 1px solid red;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<table class="example">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr class="highlight"><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html><![endif]-->
