CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Problem with CSS absolute positioning and table in IE

Discuss Problem with CSS absolute positioning and table in IE in the CSS Help forum on Dev Shed.
Problem with CSS absolute positioning and table in IE Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old October 24th, 2003, 07:37 AM
jkoerber's Avatar
jkoerber jkoerber is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Location: Bay Area California
Posts: 324 jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 7 m 21 sec
Reputation Power: 6
Problem with CSS absolute positioning and table in IE
My Web site utilizes a CSS template for all its pages that consists of a sidebar <div> along the left side of the screen and an absolutely positioned content area <div> for the right.

I discovered when using a <table> in the "content" division that has a width of 100% (to fill the content area's width), IE on Windows renders this wider than the screen. All other browsers on Mac and Windows seem to handle this fine. Here is a simple HTML page to illustrate the problem:
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>SafariBug</title>
    <style>
        #sidebar {
            border: 4px solid blue;
            width: 170px;
            padding: 3px 3px 3px 3px;
        }
        #content1 {
            position: absolute;
            border: 4px solid green;
             top: 8px;
             left: 200px;
             right: 6px;
             width: auto;
        }
    </style>
</head>
<body>
    <div id='sidebar'>                <!-- BEGIN Sidebar Division -->
    Sidebar
    <br><br><br><br><br><br>
    </div>                            <!-- END Sidebar Division -->

    <div id="content1">             <!-- BEGIN content division -->
    <table width='100%' border="1" cellspacing="2" cellpadding="2">
        <tr>
            <td>Table1 Cell1</td>
        </tr>
    </table>
    </div>                            <!-- END content division -->
</body>
</html> 
I desperately need a solution or workaround for this problem. I have the ability to apply seperate style sheets for different platforms and browsers, so a solution in CSS would be great! Thanks for your help.
Reply With Quote
  #2  
Old October 24th, 2003, 07:43 AM
Schwarzwald Schwarzwald is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: KY, USA
Posts: 15 Schwarzwald User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to Schwarzwald
I've had a similar problem out of IE 6.0 with a design I've been working on.

Apparently, the tables are not inheriting the width of their parent element and instead are wanting to take their width as a percentage of the original screen width.

I've went back and "encased" my <table>'s with 100% width divs

PHP Code:
<body>
    <div id='sidebar'>                <!-- BEGIN Sidebar Division -->
    Sidebar
    <br><br><br><br><br><br>
    </div>                            <!-- END Sidebar Division -->

    <div id="content1">             <!-- BEGIN content division -->
        <div style="width:100%;">
            <table width='100%' border="1" cellspacing="2" cellpadding="2">
            <tr>
            <td>Table1 Cell1</td>
            </tr>
            </table>
        </div>
    </div>                            <!-- END content division -->
</body>
</html> 


So far that's worked on my design - hope it works for you!
Reply With Quote
  #3  
Old October 24th, 2003, 12:22 PM
jkoerber's Avatar
jkoerber jkoerber is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Location: Bay Area California
Posts: 324 jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 7 m 21 sec
Reputation Power: 6
Schwarzwald, I tried your example but it did not work. IE is still drawing the table the original width of the window, not the remaining width??? Did you try the html code I posted with your fix? If it does work for you, let me know what version and platform of IE you are running. I know that IE 5.2.2 and IE 5.2.3 on the Mac do not have this problem, it seems to be limited to IE for Windows?

I am running IE v 6.0.2800.1106xpsp1.

Thanks for the help.
Reply With Quote
  #4  
Old October 24th, 2003, 01:51 PM
Schwarzwald Schwarzwald is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: KY, USA
Posts: 15 Schwarzwald User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to Schwarzwald
Hmm, you're right, I'm sorry bout that.
:\

I worked around in IE some and came up with this..it doesn't use absolute positioning but it uses CSS, at least for the solution:
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>SafariBug</title>
    <style>
        #sidebar {
            border: 4px solid blue;
            width: 170px;
            padding: 3px 3px 3px 3px;
            float : left;
        }
        #content1 {
            float : left;
            margin-left : 12px;
            border: 4px solid green;
        }
    </style>
</head>
<body>
    <div id='sidebar'>                <!-- BEGIN Sidebar Division -->
    Sidebar
    <br><br><br><br><br><br>
    </div>                            <!-- END Sidebar Division -->

    <div id="content1">             <!-- BEGIN content division -->
            <table width='100%' border="1" cellspacing="2" cellpadding="2">
            <tr>
            <td>Table1 Cell1</td>
            </tr>
            </table>
    </div>                            <!-- END content division -->
</body>
</html> 


It works right in IE's crazy rendering engine (6.0.2600 - pre SP-1), but won't display properly in Netscape 7.1 or Opera. (I checked 'em).

See if that works, if not, I'll go back to the drawing board.
Reply With Quote
  #5  
Old October 24th, 2003, 07:29 PM
jkoerber's Avatar
jkoerber jkoerber is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Location: Bay Area California
Posts: 324 jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 7 m 21 sec
Reputation Power: 6
SchwarzwaldThanks again for the post. I'll try out the latest code you sent this weekend and see if that helps the situation out. Stupid thing works fine in IE on the Mac and that has been discontinued!! You'd think Microsoft could get it right on their own platform!
Reply With Quote
  #6  
Old December 6th, 2003, 03:21 AM
eeziebeet eeziebeet is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Posts: 5 eeziebeet User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
<td width="100">
If your still needing a fix for your above code,
I found <td width="100"> in your contents are works for me.
Reply With Quote
  #7  
Old December 6th, 2003, 03:23 AM
eeziebeet eeziebeet is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Posts: 5 eeziebeet User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
ooops the above should be 100%
<td width="100%> as well as your <table="100%"............
Reply With Quote
  #8  
Old December 7th, 2003, 12:20 PM
jkoerber's Avatar
jkoerber jkoerber is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Location: Bay Area California
Posts: 324 jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level)jkoerber User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 7 m 21 sec
Reputation Power: 6
No, that does not work using the example code I provided, try it yourself. The problem is with IE and how it interprets the browser window width with absolutely positioned elements in CSS. Netscape on Mac and Win and Safari on Mac do not exhibit this problem.

I still do not have a workaround other than to hardcode an exact width for the elements which is not a good fix.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Problem with CSS absolute positioning and table in IE

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway.