OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

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

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
 

Table borders in Firefox and overflow:hidden

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

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Table borders in Firefox and overflow:hidden 		Page: [1]
 
Starhugger

 

Posts: 631
Joined: 4/12/2005
From: Canada
Status: offline

  		Table borders in Firefox and overflow:hidden - 2/13/2009 19:52:22   
Here's a puzzle. Maybe someone can explain why this happens.

This seems to happen in Firefox but not in IE7 or Opera 9. Background: I'm (still) in the process of recoding my site. (This is like the novel that never gets finished. :) ) Someone here had suggested a while back that I use "overflow:hidden" in a DIV style, so that any DIVs inside that one wouldn't get smushed if it didn't have something "solid" in it. So I started to use it by default.

However, when I use a table (to display tabular data, not for layout :) ), the left border of the table disappears in Firefox. Through process of elimination, I discovered that the culprit was the "overflow:hidden" declaration. When I remove it, the table displays fine. Here is some sample CSS and HTML code. 

div#withhidden {
width: 750px;
margin: 0 auto;
padding: 20px 0 20px 0;
vertical-align: top;
font-size: 90%;
overflow: hidden; 
}

div#nothidden {
width: 750px;
margin: 0 auto;
padding: 20px 0 20px 0;
vertical-align: top;
font-size: 90%;
}


Here's the HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<div id="container">

<div id="withhidden">
<table border="1" cellpadding="0" cellspacing="0" width="200px" 
style="border-collapse: collapse; border-spacing: 0">
	<tr><td>overflow: hidden</td></tr>
	<tr><td>cell</td></tr>
</table>
</div>

<div id="nothidden">
<table border="1" cellpadding="0" cellspacing="0" width="200px" 
style="border-collapse: collapse; border-spacing: 0">
	<tr><td>overflow: not declared</td></tr>
	<tr><td>cell</td></tr>
</table>
</div>

</div></body></html>


Any ideas why Firefox does this? Thanks!

Starhugger
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 2:34:04   
Hmmm... dunno...

Try any of these:

1. Remove the border attribute from the table tag and have it in the css instead (e.g. table {border:1px solid;} or whatever)
2. Add a small margin around the table to see if that moves them off the edge.
3. Remove overflow:hidden unless you really need it and see if that helps at all.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to Starhugger)
d a v e

 

Posts: 4348
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 3:32:02   
remove the table?! ;)

_____________________________

David Prescott
Gekko web design

(in reply to Tailslide)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 5:08:52   
If it's tabular data then it can only really be a table.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to d a v e)
d a v e

 

Posts: 4348
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 6:19:58   

quote:

ORIGINAL: Tailslide

If it's tabular data then it can only really be a table.

well if i'd read the whole question like i should have done i wouldn't suggest something so stupid!

sorry :)

_____________________________

David Prescott
Gekko web design

(in reply to Tailslide)
Starhugger

 

Posts: 631
Joined: 4/12/2005
From: Canada
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 15:31:20   
quote:

ORIGINAL: d a v e
quote:

ORIGINAL: Tailslide
If it's tabular data then it can only really be a table.

well if i'd read the whole question like i should have done i wouldn't suggest something so stupid!

sorry :)

LOL That'll learn ya.

I suppose I could do it in CSS if I really wanted to be a glutton for punishment, but since it's tabular data I thought I'd actually use (gasp!) a Table! :)

Starhugger

(in reply to d a v e)
Starhugger

 

Posts: 631
Joined: 4/12/2005
From: Canada
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 15:34:21   
quote:

ORIGINAL: Tailslide
Hmmm... dunno...

Try any of these:

1. Remove the border attribute from the table tag and have it in the css instead (e.g. table {border:1px solid;} or whatever)
2. Add a small margin around the table to see if that moves them off the edge.
3. Remove overflow:hidden unless you really need it and see if that helps at all.

Thanks! I'll try these. Obviously removing the overflow:hidden would do it. I'm just puzzled why it would work that way; why overflow and tables would conflict like that. I'll let you know how I make out.

Starhugger

(in reply to Tailslide)
Starhugger

 

Posts: 631
Joined: 4/12/2005
From: Canada
Status: offline

  		RE: Table borders in Firefox and overflow:hidden - 2/14/2009 19:44:24   
quote:

ORIGINAL: Tailslide
Try any of these:

1. Remove the border attribute from the table tag and have it in the css instead (e.g. table {border:1px solid;} or whatever)
2. Add a small margin around the table to see if that moves them off the edge.
3. Remove overflow:hidden unless you really need it and see if that helps at all.

#1 didn't have any change. The left border was still missing.
#3 works, but I knew that already.

#2 worked! All I had to do was put margin-left: 1px (minimum) on the table CSS and it worked. Very weird, but at least it works.

Thanks Tailslide!

Starhugger

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Table borders in Firefox and overflow:hidden 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.