SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,062
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)

    Controlling Tables with CSS

    I've attempted to specify table attributes using CSS. I'm specifying the width in the style like so:

    Code:
    #BottomBox  {
    	  	width: 100%;
    		  height: 24px;
    	  	background: #f3a038;
      		}
    I'm appying the style to the table like this:

    Code:
    <table id="BottomBox">
            <tr>
                <td>Copyright blah blah blah</td>
            </tr>
    </table>
    In some instances, I've applied the ID to the <td> tag rather than the <table> tag.

    Everything works perfectly in all browsers/platforms except IE5-6/Windows, where it totally blows up. Can anyone shed some light on what the problem might be? Thanks!

  2. #2
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mostly just that fact that IE doesn't support CSS as well as Gecko-based browsers, I would imagine. At any rate, you would probably have more success using divs for positioning your layout and reserving tables for *tabular data*. When you only use tables for tabular data, being able to specify the exact size of each cell becomes much less of an issue.

  3. #3
    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,

    Take out the very first line the xml prolog:

    <?xml version="1.0" encoding="iso-8859-1"?>

    This is a well known major bug in IE6 which causes it to go into quirks mode and uses the broken box model of IE5 etc.

    As it is optional it is best to leave it out anyway. Just make sure that you have the character encoding in the meta tag instead.

    But that still won't make it work in IE5 (i don't think so anyway).

    Hope this helps.

    Paul

  4. #4
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,062
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Guys, thanks for the replies. I tried what you suggested, Paul, but it turns out that my problem is actually related to colspans in one of the tables.

    Originally quoted by KillAllDash9
    ...you would probably have more success using divs for positioning your layout...
    You'd think so, wouldn't you? Since this is a personal site, I thought I'd take the opportunity to really delve into learning CSS-P.

    My first attempt (using all absolute positioning) looked perfect in all browsers & platforms.

    Then I decided that it should be centered. That wasn't so sucessful in Netscape or in Windows.

    I got really brave and tried to make it auto-stretch, but it's still all jacked up.

    I was going to save this for another post, but if you can give me some tips on how I can make it work cross-browser/platform, I'd certainly appreciate it!

  5. #5
    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,

    Glad you found the problem.

    Here are some links that will keep you busy if you want to make it cross platform:

    http://www.tantek.com/CSS/Examples/boxmodelhack.html
    http://glish.com/css/hacks.asp
    http://members.lycos.co.uk/lawnet/NUTSCRPE.HTM

    (Remember to leave the xml prolog out anyway because it will only cause problems in IE6)

    Paul

  6. #6
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by johntabita
    I got really brave and tried to make it auto-stretch, but it's still all jacked up.
    I was bored so I played around with your code a little bit, and I came up with a lyout that works pretty well for an auto-stretch design. You can view my changes at http://www.goodchrist.com/archive/tabita_net_stretchy .

    The only part I couldn't do without tables was the three columns at the botttom. Actually, I could do it without tables, but Internet Explorer's less than spectacular support for CSS2 was an issue because it doesn't support "display:table" and "display:table-cell". However, once IE does support that property fully, you could simply change the 'table' and 'td' tags to 'div's and remove the 'tr' tags.

    There is another way to do a three-column layout by using one relative and two absolutely positioned divs ( http://www.goodchrist.com is this way) but the problem is that you have to know up front which column will contain the most content (for vertical height) and the absolutely positioned divs will most likely have to be fixed-width. Because of that, the table solution seemed like a better plan for now to ensure that it's cross-browser.

  7. #7
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should mention that IE on my wife's windows box had a problem with the 'geese' image that should be floated right in the Main Content area. It left space for the image, the text wrapped around it, but it wouldn't display the image (however, I could right click on the blank area and save the image. WTF?!?!)

    If I removed the float, the image would display. That seems really wierd, so I'm thinking that her IE installation must be buggered somehow. It's IE 6 for the curious.


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
  •