SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: margin: in IE6

  1. #1
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin: in IE6

    G'day:

    I have the following class applied to a <div> in my pages:

    Code:
    div.main-item-wide
    {
     border-bottom:	 1px solid #CCC;
     border-left:	 1px solid #CCC;
     padding:	  0 0 2px 2px;
     margin:	   0 0 0 10px;
     background-color:	transparent;
    }
    This <div> has a grey border to the left and bottom and should stretch the width of the page regardless of the window size. It also contains a <table> whose width is 100%. I have used both <table width="100%"> and a class which sets the table to width: 100%.

    Currently this setup leaves the <div>, <table> and all other page content disappearing off the page to the right in IE 5,5.5 and 6 (Win) but works perfectly in NS6,NS7,Opera6.4,Opera7.1,and Mozilla (Win).

    Can anyone suggest another way of achieving a window-width <table> inside the <div> with the above class or an IE hack? This should work but doesn't!

    Many thanks

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

    Firts of all if you give your page a full valid doctype then the page will display correctly in ie6.

    However for ie5 and 5.5. you will need to give a width to the outer element otherwise the table assumes 100% width of the window and not the outer.

    To avoid the broken box model you can nest the div as shown below or if you don't want to nest then use the box-model hack etc.

    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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {margin:0;padding:0}
    div.main-item-wide
    {
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    padding: 0 0 2px 2px;
    margin:	0 0 0 10px;
    background-color: transparent;
    }
    table{width:100%}
    div.inner{width:100%}
    </style>
    </head>
    <body>
    <div class="main-item-wide"> 
    <div class="inner">
    <table >
    	<tr> 
    	 <td>&nbsp;</td>
    	</tr>
    	<tr> 
    	 <td>&nbsp;</td>
    	</tr>
    </table>
    </div></div>
    </body>
    </html>
    Hope that helps.

    Paul

    BTW I hope that table is for tabular data

  3. #3
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi:

    Cheers for the tip - I actually figured it about 30 seconds before your mail turned up

    I'm using the XHTML Transitional Doctype - but as it is transitional, and the site is hybrid, some tables are used for layout - but mostly for tabular data yes

    Who are you my High School Teacher!!?
    Thanks a lot.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Who are you my High School Teacher!!?
    Go to the back of the class


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
  •