SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot XandroZ's Avatar
    Join Date
    May 2006
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with table in Firefox

    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>

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Zealot XandroZ's Avatar
    Join Date
    May 2006
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •