Firefox, IE and table borders

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Firefox, IE and table borders

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Community >> Computer Software and Hardware issues >> Firefox, IE and table borders

Page: [1]

Starhugger

Posts: 512
Joined: 4/12/2005
Status: offline

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

Posts: 2515
Joined: 1/31/2002
From: Australia
Status: offline

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!

< Message edited by Kitka -- 12/22/2006 0:40:28 >

_____________________________

Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**

(in reply to Starhugger)


Starhugger Posts: 512 Joined: 4/12/2005 Status: offline	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." SH Thumbnail Image Attachment (1) (in reply to Kitka)


Starhugger Posts: 512 Joined: 4/12/2005 Status: offline	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 Thumbnail Image Attachment (1) (in reply to Starhugger)

Kitka

Posts: 2515
Joined: 1/31/2002
From: Australia
Status: offline

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.

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
**It is impossible to make anything foolproof because fools are so ingenious.**

(in reply to Starhugger)

Kitka

Posts: 2515
Joined: 1/31/2002
From: Australia
Status: offline

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">

_____________________________

Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**

(in reply to Starhugger)


rdouglass Posts: 9227 From: Biddeford, ME USA Status: offline	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? _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to Kitka)


Starhugger Posts: 512 Joined: 4/12/2005 Status: offline	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 (in reply to Kitka)


Kitka Posts: 2515 Joined: 1/31/2002 From: Australia Status: offline	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. _____________________________ Kitka It is impossible to make anything foolproof because fools are so ingenious. (in reply to Starhugger)


Starhugger Posts: 512 Joined: 4/12/2005 Status: offline	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! Well, I'm still waiting for a wimble support payment from Womble, so I may wind up having to eat my young. SH (in reply to Kitka)