Problem with table in Firefox

**XandroZ** · Nov 26, 2006 06:06

I have a problem with a table in Firefox 2.0.
I have a div (Layer for Macromedia users), inside div is a table.Also in layer is text.I want the Text to wrap around the table.There is no problem in IE but Firefox not wrap the text around the table.Here is un example code:

Code:

<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:256px;
	top:27px;
	width:503px;
	height:337px;
	z-index:1;
	background-color: #CCCCCC;
}
-->
</style>
</head>

<body>
<div id="Layer1">

  <table align="left" valign="top" width="335" height="276" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#CCCCCC">
    <tr>
      <td>bla DSADASDASDAS</td>
    </tr>
  </table>
  <p>fdfffffffffffffffffffffffffffffffffffffffffffffffffffff<br />
  sadddddddddsssssssssssssssssssssss<br />
  dsssssssssssssssssssssssssss<br />
  dsssssssssssssssssssssssss<br />
  dddddddddddddddddddddddddddddddddddddd</p>
  <p >ffffffffffffffffffffffdsfdsfdsfds</p>
 
  
</div>
</body>
</html>

**DaveWoods** · Nov 27, 2006 06:21

There's a few problems with what you're doing.

1) You're trying to get text to fit into a space it won't fit. Because you don't have any spaces in the text then it automatically drops down to wherever it can fit. Realistically you won't have words that long in paragraphs so put spaces in them.

2) Never code in Internet Explorer and then expect it to work in Firefox. IE6 isn't standards compliant so you should code in a standards compliant browser first (like Firefox) and then best practice is to fix problems in other browsers that you want to support as you go along by regularly checking in these.

3) You're using tables to do something that they weren't meant for. Tables should only be used for tabular data and unless you are changing this at some point and adding rows and table headings, you shouldn't be using tables.

4) By the looks of things, you're using Dreamweaver "layers" to position this div? You shouldn't need to use absolute positioning in most cases and it will cause more trouble once you get into complex layouts.

Try this...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<style type="text/css">
* {
	padding: 0px;
	margin: 0px;
}
body {
	width: 503px;
	margin: 27px auto;		
}
p {
        margin: 5px 0px;
}
#content {
	float: left;
	width: 503px;
	background-color: #CCCCCC;
	padding: 5px;
}
#contentborder {
	float: left;
	width: 335px;
	height: 276px;
	border: solid 1px #FF0000;
	background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="content">
<p id="contentborder">bla DSADASDASDAS</p>
<p>fdffffffffffffffffffffffff fffffffffffffffffffffffffffff</p>
<p>sadddddddddsssssss ssssssssssssssss</p>
<p>dsssssssssssssss ssssssssssss</p>
<p>dssssssssssssss sssssssssss</p>
<p>dddddd ddddddddddd dddddddddddd ddddddddd</p>
<p>ffffffffffffff ffffffffdsfdsfdsfds</p>
</div>
</body>
</html>

**XandroZ** · Nov 27, 2006 08:06

thx very much

but that was a sample example.
I have a body with many divs(Layers) and in one LAYER(Layer1) i have inside another Layer(Layer2) and some text.I need to float Layer2 right and the text to wrap around Layer1.My code was wrong so I try to use to align a table or to float a table instead Layer2.
I need the designed to be fixed and centered(for change resolution).In your example the design was "liquid" because it changes position if I minimize or maximize the browser window.
So I adapt your example to this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head>
<title>Demo</title>
<style type="text/css"> 
#Layer1 { width: 503px; margin: 27px auto; } 
p { margin: 5px 0px; } 
#Layer2 { float: left; width: 503px; background-color: #CCCCCC; padding: 0px; } 
#contentborder { float: left; width: 335px; height: 276px; border: solid 1px #FF0000; background-color: #CCCCCC; } 
#AnotherLayer { position:absolute; left:57px; top:60px; width:134px; height:234px; z-index:1; background-color: #FF33CC; }

#wrapper { text-align:left; width:1000px; margin:0 auto;position:relative; }
</style>

</head>
 <body>
 <div id="wrapper"> 
 <div id="Another Layer"></div> 
  <div id ="Layer1">
     <div id="Layer2"> 
          <p id="contentborder">bla DSADASDASDAS</p>
          <p>fdffffffffffffffffffffffff fffffffffffffffffffffffffffff</p>
          <p>sadddddddddsssssss ssssssssssssssss</p> 
          <p>dsssssssssssssss ssssssssssss</p> 
          <p>dssssssssssssss sssssssssss</p> 
          <p>dddddd ddddddddddd dddddddddddd ddddddddd</p> 
           <p>ffffffffffffff ffffffffdsfdsfdsfds</p> </div> 
     </div>
  <div>
  
 </div>
</body> 
   </html>

It is working,but maybe it is a better method.

User Tag List

Thread: Problem with table in Firefox

Thread Tools

Display

Problem with table in Firefox

Bookmarks

Bookmarks

Posting Permissions