IE7 / Firefox table borders 1

[Kalisto]

Ive got a web page, and when it is drawn in firefox, my table (which has rounded images in the top left / right cells) is fine.

When I draw it in ie7, I can see a faint border round the image.

The code produced via the css / asp.net is the same in both browsers, and is;

<Table cellspacing="0" rules="all" border="1" id="grdClaims" style="border-style:None;width:100%;border-collapse:collapse;">

So how do I prevent the appearance of the border around the
table in ie7 ?

 

[cLFlaVA]

??

maybe the [tt]border="1"[/tt] has something to do with it.

also, [tt]border-style:None[/tt] should be [tt]border-style:none[/tt]



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Kalisto]

The border="1" is in both firefox and ie. so why does one browser render it and the other not?

K

 

[Vragabond]

Because frankly, css should override the html attributes and since css says border-style: none; it removes the border. Use only css or only html attributes (preferably the former), not both.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[cLFlaVA]

because border-collapse properly renders in one and not the other, most likely because you are not using a complete doctype in your page.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Kalisto]

Thanks, that gives me more to look at

The border=0 is a .net 'ism, it automatically adds it when the gridview is rendered as a table (presumably as the css should then override it)

I'll look into the doc types as well, and post back what the solution is.

Thanks again.

K

 

[Lowet]

the TABLE element has 2 properties for that. RULES which sets the innerboders (between the cells) and FRAME which sets the surrounding border.

[green]// Without outer border and with inner borders.[/green]
<table frame="void" rules="all">
<tr><td>A cell</td></tr>
</table>

[green]// With outer border and without inner borders.[/green]
<table frame="box" rules="none">
<tr><td>A cell</td></tr>
</table>

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Kalisto]

ok, Im starting to be able to narrow this down now.
Using Firebug, I can see what style is being applied to the row that conatins my cells.

background-color:#E4D2E1;
border-bottom:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
color:#666666;
font-family:Verdana;
font-size:1em;
font-weight:normal;
height:68px;
text-align:center;
vertical-align:middle;

Which means that when I click on the cell (as opposed the the row) I am told that the style is now

tr.GridItemStyle {
color:#666666;
font-family:Verdana;
font-size:1em;
font-weight:normal;
text-align:center;
}

so to my mind, the cell should have the borders set to 1px, white on 3 sides.

But they are appearing as black.

Anyone got any ideas?

Cheers

K

 

[ChrisHunt]

Borders aren't inherited. If you put a 1px border around a <div>, you wouldn't want it to put the same border around all the <p>s, <a>s, and whatever other elements the <div> contains. Tables are the same.

So if you want your cells to have white borders, you're going to have to put something like this in your stylesheet:

tr.GridItemStyle th,
tr.GridItemStyle td { border: 1px solid white; }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Kalisto]

Fantastic, thats cracked it.
(So long as they dont notice that the 2 end cells now appear 1 px thinner on the outside edge !)

I had almost fixed it using .net properties, but for some reason firefox was insisting on doing the collapsed borders black. That code above sorts that one out

Cheers again

K