Firefox, IE and table borders

Firefox, IE and table borders (Full Version)

All Forums >> [Web Development] >> Computer Software and Hardware issues

Message

Starhugger -> Firefox, IE and table borders (12/20/2006 23:15:38)

I have a one-cell table as a sidebar. I'm using one CSS style for the border colours for the table and another style for the cell, giving an alternating colour effect.

Here's the CSS:

.edtableredgreen { /* CELL STYLE */
 border-left: 3px solid #B22222; 
 border-right: 3px solid #006600; 
 border-top: 3px solid #B22222; 
 border-bottom: 3px solid #006600;  
 } 
.edtablegreenred { /* TABLE STYLE */
 border-left: 3px solid #006600; 
 border-right: 3px solid #B22222; 
 border-top: 3px solid #006600;  
 border-bottom: 3px solid #B22222; 
 }

Frontpage generates this starter code for the table definition:

<table border="0" cellpadding="20" cellspacing="2"
style="border-style:solid; border-width:3px; font-size:95%; 
margin-left: 20px; margin-bottom: 10px; margin-top: 5px;
padding-left:6px; padding-right:6px; padding-top:10px; padding-bottom:6px" 
width="320" align="right" class="edtablegreenred" bgcolor="#FFFFE3">
<tbody>
<tr>
<td style="border-style:solid; border-width:3px; text-align: center" 
valign="top" class="edtableredgreen">
/* ETC... */

In IE7, it shows up as it should, with a double border spaced 2px apart. But in FF1.5.0.9 the double border gapes apart by what looks like about 15px. Huh??

Here's the URL, if it will help:

http://www.evolvingdoor.ca/readings/personal_astrology_readings.htm

Thanks for the help!

Starhugger

Kitka -> RE: Firefox, IE and table borders (12/22/2006 0:32:51)

Hi Starhugger,

The main problem is the padding applied to the table here:

<table border="0" cellpadding="20" cellspacing="2"
style="border-style:solid; border-width:3px; font-size:95%; 
margin-left: 20px; margin-bottom: 10px; margin-top: 5px;
padding-left:6px; padding-right:6px; padding-top:10px; padding-bottom:6px" 
width="320" align="right" class="edtablegreenred" bgcolor="#FFFFE3">

Firefox and IE deal with padding and margins completely differently - which can be quite confusing.

I've cut most of the table and cell styles out of the body and placed them in the headers - it is much neater and more compliant, especially as you are using XHTML. It might be best to put it in your external stylesheet though.

This code works in FF, IE and Opera for me (I've abridged the cell contents to keep the code here to a minimum):

<!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=iso-8859-1" />
<title>Readings</title>
<style type="text/css">
.edtableredgreen { /* CELL STYLE */
 border-left: 3px solid #B22222; 
 border-right: 3px solid #006600; 
 border-top: 3px solid #B22222; 
 border-bottom: 3px solid #006600; 
 background-color:#FFFFE3;
 text-align: center;
 padding:20px;
 vertical-align:top;
 } 
.edtablegreenred { /* TABLE STYLE */
 border-left: 3px solid #006600; 
 border-right: 3px solid #B22222; 
 border-top: 3px solid #006600;  
 border-bottom: 3px solid #B22222; 
 font-size:95%; 
 margin: 5px 0 10px 20px;
 width: 320px;
 float: right;
 } 
</style>
<meta name="Microsoft Border" content="tb, default" />
</head>

<body>
<table class="edtablegreenred">
<tbody>
<tr>
<td class="edtableredgreen">
<h2 class="h1price" style="text-align: center; font-size: 150%; color: firebrick">Holiday 
Discount Special!</h2>
<h3 class="h3price" style="margin-bottom: 10px; color: black">Get one Astrology Reading for regular price and Get a Second Reading for<br />
<span style="font-size: 140%; color: firebrick">40% OFF!</span></h3>
</td>
</tr>
</tbody>
</table>
</body>
</html>

I hope this helps - and also hope the "two" of you are keeping well! [:)]

Starhugger -> RE: Firefox, IE and table borders (12/22/2006 1:54:49)
Hi Kitka, Thanks so much for helping with this! However... I'm afraid it's still not working in my FF. [:(] I loaded the code into my external style sheet and trimmed the table code, as you posted. Still getting wide separations. Are you using version 2 maybe? I'm still on 1.5. Just wondering if it's a version thang. IE7 still works fine. (Who knew?) I'll attach a screenshot of what I'm getting in FF. quote: I hope this helps - and also hope the "two" of you are keeping well! [:)] The "two" of me?? Is that like an old friend once quipped: "I may be schizophrenic but I still have each other." [:D] SH [image]local://upfiles/15141/2BFB7367E42240DD8CF38DA2A82FFA9C.jpg[/image]

Starhugger -> RE: Firefox, IE and table borders (12/22/2006 1:57:43)
Here's what it looks like in IE7, which is what I was aiming for. SH [image]local://upfiles/15141/A7DD7AA32D6644008253F85FE8F657D8.jpg[/image]

Kitka -> RE: Firefox, IE and table borders (12/22/2006 2:23:19)
quote: Are you using version 2 maybe? No - was waiting for them to fix the inevitable bugs that plague a new version and for my favourite extensions to catch up. But - still haven't got around to upgrading. [:o] Did you try copying and pasting the full code I posted? It is a whole page in its own right and the table works correctly for me in FF 1.5.0.9 and 1.0.7, Opera 9 and IE6. Once you get it working in page of its own, then you can place the code in its intended place and fix any bugs that might surface then. quote: The "two" of me?? Um - I guess I meant you and your bundle of joy.

Kitka -> RE: Firefox, IE and table borders (12/22/2006 3:23:00)

I just thought to look at the page you posted, and notice that while you have added the CSS to your external stylesheet, the code for the table hasn't changed.

This is the code you have:

<table border="0" cellpadding="20" cellspacing="2"
				style="border-style:solid; border-width:3px; font-size:95%; 
				margin-left: 20px; margin-bottom: 10px; margin-top: 5px;
				padding-left:6px; padding-right:6px; padding-top:10px; padding-bottom:6px" 
				width="320" align="right" class="edtablegreenred" bgcolor="#FFFFE3">
					<tbody>
					<tr>
						<td style="border-style:solid; border-width:3px; text-align: center" 
      valign="top" class="edtableredgreen"

And the following is the edited code (from the page I posted above) to replace that entire block, which should work the way you would like it to:

<table class="edtablegreenred">
<tbody>
<tr>
<td class="edtableredgreen">

rdouglass -> RE: Firefox, IE and table borders (12/22/2006 9:55:07)
Why not place the table inside a div and style the div instead?

Starhugger -> RE: Firefox, IE and table borders (12/22/2006 15:54:57)
quote: ORIGINAL: Kitka I just thought to look at the page you posted, and notice that while you have added the CSS to your external stylesheet, the code for the table hasn't changed. Now, I KNOW I changed that code!! [>:] Anyway, it's changed now and working FINE, thank you. [:)] Thanks so much for your help! Starhugger

Kitka -> RE: Firefox, IE and table borders (12/22/2006 16:05:20)
quote: working FINE, thank you. You're very welcome! Glad we got it sorted.

Starhugger -> RE: Firefox, IE and table borders (12/22/2006 16:15:17)
quote: ORIGINAL: Kitka quote: The "two" of me?? Um - I guess I meant you and your bundle of joy. Oh -- the little wimble! [:D] Well, I'm still waiting for a wimble support payment from Womble, so I may wind up having to eat my young. [sm=sick.gif] SH

Starhugger -> RE: Firefox, IE and table borders (12/22/2006 16:19:01)
quote: ORIGINAL: rdouglass Why not place the table inside a div and style the div instead? Yes, that would prolly do it too. Thanks for the alternative suggestion, RD. quote: Why do they put braille instructions at drive-thru' s? DO they put braille instructions at drive-thru's???? The mind boggles... SH

Page: [1]

0.078125