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

CSS and XHTML 1.1 Resize Issue (Percentage Widths) Internet Explorer

Discuss CSS and XHTML 1.1 Resize Issue (Percentage Widths) Internet Explorer in the CSS Help forum on Dev Shed.
CSS and XHTML 1.1 Resize Issue (Percentage Widths) Internet Explorer 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 August 21st, 2003, 11:50 AM
Gratzy Gratzy is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 3 Gratzy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Angry CSS and XHTML 1.1 Resize Issue (Percentage Widths) Internet Explorer
When using css width: 100%; on the body and then using multiple elements within the body also with percentage values i've noticed that when resizing with internet explorer (on Windows XP with the refreshing while resizing) the blocks will drop sometimes, as if they're too big for the width and drop to a 'new line'.

for example:
2 divs within a body of 100% width, div 1 (70%), div 2 (30%) and both div's floating left, or one left and one right. While SLOWLY manually resizing Internet Explorer at certain points in the resize the div 2 (30%) will drop below the div 1, and from what i can see, for no reason at all.

Note: I am using the most up to date version of Internet Explorer (Version: 6.0.2).

I have also tested this on, Firebird 0.6, Mozilla 1.4x, Opera 7.11 and Konquerer 3.1.0 and NONE of these had the same resizing error.


i have noticed this a few times before and managed to get away with losing a percentage here and there to make the page acceptable but still not how i would like it, and now it's really starting to get to me.

The code i am working on is located at:

URL

I have checked both the .html document and external style sheet for validity with URL and both are valid (though i may have made some slight alterations since validating and pasting my code here, i don't think i altered anything to 'invalidate' the code).

if you just want to see the code then i'll paste here:


// BEGIN layout.css


html
{
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
border: 0;
width: 100%;
}

body
{
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
background-color: #f1f1f1;
color: #000000;
overflow: auto;
}

img
{
border: 0;
}

#menu-bar
{
float: left;
width: 22%;
height: 100%;
background-color: #f8f8f8;
color: #000000;
overflow: auto;
margin: 0;
padding: 0;
border: 0;
}

#main-container
{
float: right;
width: 78%;
height: 100%;
background-color: #ff0000;
color: #000000;
margin: 0;
padding: 0;
border: 0;
}

#in
{
margin: auto;
width: 96%;
height: 35%;
background-color: #f4f4f4;
color: #000000;
overflow: auto;
}

#out
{
margin: auto;
margin-bottom: 2%;
width: 96%;
height: 33%;
background-color: #f8f8f8;
color: #000000;
overflow: auto;
}


// BEGIN divtest3.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Paul" />
<meta name="keywords" content="layout" />
<meta name="description" content="layout design" />
<link href="layout.css" type="text/css" rel="stylesheet" />
</head>

<body>


<div id="menu-bar">
MENU
</div>

<div id="main-container">

<table cellspacing="0" cellpadding="0" style="margin: auto; border:0; padding:0; width: 96%;">
<tr>
<td style="height: 2%; background-color: #ffffff;">
<table cellspacing="1" cellpadding="0" style="margin: auto; border:0; padding:0; width: 100%;">
<tr>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
</tr>
</table>
</td>
<td style="width: 20px; background-color: transparent;"></td>
</tr>
</table>

<div id="out">
Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1
</div>

<div style="clear:both; border:0; padding:0;"></div>

<table cellspacing="0" cellpadding="0" style="margin: auto; border:0; padding:0; width: 96%;">
<tr>
<td style="height: 2%; background-color: #ffffff;">
<table cellspacing="1" cellpadding="0" style="margin: auto; border:0; padding:0; width: 100%;">
<tr>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
<td style="height: 2%; background-color: #cc00ee;">Test</td>
</tr>
</table>
</td>
<td style="width: 20px; background-color: transparent;"></td>
</tr>
</table>

<div id="in">
Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2
</div>

</div>

</body>

</html>


Has anyone come up with a solution?
Last edited by Gratzy : August 21st, 2003 at 01:10 PM.
Reply With Quote
  #2  
Old August 21st, 2003, 01:10 PM
Gratzy Gratzy is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 3 Gratzy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
bump
Reply With Quote
  #3  
Old August 22nd, 2003, 05:16 PM
Gratzy Gratzy is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 3 Gratzy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Had to use position: absolute; in the end with top: 0; and right: 0; and left: 0; on the relavent blocks. Kinda lame that IE messes it up because it can't handle the percentage correctly... one day Microsoft will get it right i guess.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS and XHTML 1.1 Resize Issue (Percentage Widths) Internet Explorer

« 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.