CSS question
Miscellaneous Forums/General Discussion/CSS question
Hi I have a problem with a table. I'm trying to use css to remove any borders. The goal is one of those tables that are using corner ans side images in the outter cells of a 3 TR * 3 TD table.
No matter that I do, in the internet explorer I just can0t get rid of some black borders of about 2mm width.
In the css I have already tried
margin: 0px;
padding: 0px;
border-spacing: 0px;
border-width: 0px;
in all "table", "tr" as well as "td" style definitions.
What am I doing wrong?
BTW I am using the images as background images of the table TD cells and I force an explicit cell min width/height. I tried to reduce the width for example, but this had no impact on the borders.
I remember I have already done this a few years ago, so there must be a way. I just don't remember how :)
Tried adding 'border-style: hidden' or 'border-style: none'?
I'm new to this CSS/HTML stuff - I'm not sure if you'd need to specify your CSS class in the TD tags as well as the TABLE tag.
Just tried that without success. Was that an intuitive guess? :) In fact css sometimes can be used inuitively. But when you're stuck then you're really stuck.
I have some links to PHP and CSS sites I've been using to make my own site.
Is the border around individual cells, images, or the whole table?
Around cells. Basicly I want to use my own "borders" based on images (left, right,top,bottom, corners).
I have just seen:
when I use <table cellspacing="0"> in the html code then they disappear.
A CSS solution would be better of course.
Are you already doing <TD class="myCSSClass"></TD>?
From my (albeit limited) experience with this stuff, I reckon that you have to be Captain Obvious sometimes. You can't let browsers assume anything if you want your site to be consistent.
Have you tried?
border-collapse: collapse;
or
border-spacing: 0px 0px;
I've never really used tables, except in there basic form, so not come across this issue.
After some Googling, it doesn't appear there to be a solution to this that works on all the browsers....
border-collapse is CSS2, so IE6 pretty much won't work with it..
Looks like the best route is to keep with the cellspacing/padding HTML tags unfortunately.
Thanks. Got to live with it :/
s'funny.. Im sure ages go when I was faffing about in html I found various places where the 'gurus' were sayign IE6 needs
border-collapse: collapse
to make it work like other browsers using
margin: 0px;
In fact... here is a link to one site that says it.
http://www.digitalramble.com/tags/css/(about halfway down the page )
and Im sure I hit several places where the solution was this.
Maybe it depends on what you have the doctype set up as for your page ?
Tried cell-collapse, I think. Thanks, I'll retry.
quote "gurus ... lol. wise men who have found the meaning of live probably.
This works for me...
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-uk" />
<title></title>
<style type="text/css">
<!--
table {
border: none;
margin: 0;
padding: 0;
border-collapse: collapse;
}
table tr {
margin: 0;
padding: 0;
}
table tr td {
margin: 0;
padding: 0;
background-color: #ff0000;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>
border-width: 0px 0px 0px 0px;
In my expirence, this works in all browsers. However, I haven't tried opera.
I know it works in IE6 IE7 FF and FF2 and Safari.