SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Tables and css

  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tables and css

    Hi!

    I'm using a css for the layout of my site(2 and 3 column), and some tables to tabulate data. The problem is that I can't get IE to properly limit the width of the table, when using css for the layout.

    Code:
    <div id="logo">
    Logo
    </div>
    
    <div id="menu">
    Bla 
    bla 
    bla
    </div>
    
    <div id="main">
    <table width="90%" cellspacing="0" cellpadding="6" class="table2">
    <tr>
        <td class="table1"><h3>Article name</h3></td>
        <td class="table1"><h3>Published</h3></td>
        <td class="table1"><h3>Publish now!</h3></td>
        <td class="table1"><h3>Delete</h3></td>
    </tr>
      <tr>
      <td class="table1" width="50%"> <p> test</p></td>
      <td class="table1"><p>test </p></td>
      <td class="table1"><p>test </p></td>
      <td class="table1"><p>test</p></td>
      </tr>
    </Table>
    </div>
    The css:

    Code:
    #main{
       padding-top : 140px;
       padding-bottom : 30px;
       padding-left : 165px;
       padding-right : 0px;
    }
    
    #top{
    	position : absolute;
    	top : 0px;
    	left : 0px;
    	width: 100%;
    	height: 130px;
    	background: #718BBC;
    	border-bottom: 1px solid Black;
    }
    #menu{
    	position : absolute;
    	top : 140px;
    	left : 0px;
    	width : 140px;
    	background: white;
    	margin-left: 10px;
    
    }
    IE positions the table correctly, but it's too wide. It seems like it gives it a 90% width of the whole page, and not the div area it's inside.

    Firebird shows the code correctly.

    Are there any solutions to this problem, or do I have to set absolute values for the table?


    Vidar

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You're probably working in quirks mode. Give the page a full doctype.
    e.g.
    Code:
    <!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">
    Otherwise you will probably need to supply a width to your #main style.

    Paul
    Edit:


    Or wrap your table in an inner div and give that inner div a width of 100% and then the table will take its 90% from that.
    Code:
    <div style="width:100%">
    <table>
    etc.......
    </table>
    </div>
    Use a class to make it neater though

  3. #3
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You're probably working in quirks mode. Give the page a full doctype.
    e.g.
    Code:
    <!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">
    Thanks! That worked!

    Vidar


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
  •