Jump to content

Div positioning and IE driving me crazy.


lindm

Recommended Posts

Obviously Internet Explorer has serious flaws regarding div positioning etc but I am still trying to  design a layout which works in IE. Have come pretty far but one obstacle remains...

 

Here is my test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
         height: 100%; overflow: hidden; margin:0px;
      }
  
div#content
  {
         height: 100%; width: 100%; overflow: auto; position: relative; z-index: 2;background-color: #6633CC; 

  }
  
div#content2
  {
         overflow: hidden; background-color:#CCFF66; padding-left:10px;padding-top:50px;

  }

div#menu {
background-color: #003366;
height: 45px;
width: 550px;
position: absolute;
left: 5px;
top: 5px;	
z-index: 3;

}
div#menu2 {
background-color: #FF0033;
height: 150px;
width: 80px;
position: absolute;
left: 600px;
top: 50px;	
z-index: 4;

}

-->
</style>

</head>



<body>

<div id="content">
<div id="content2">

x
x
x
x
xxxxxxxxxxxxxxxxxxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbxxxxxxxxxx
x
x
x<br />
x
x
x




x
x
x
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
x
x
x
x
x
x
</div>
</div>

<div id="menu">
menu1
</div>
<div id="menu2">
menu2
</div>

</body>
</html>

 

When you make the window smaller a scrollbar appears to the right. That is fine, but I want the scrollbar to begin 50 pixels lower (in line with the bottom of menu1). Tried a lot but no luck. I can live with the way it is now but if there is a solution any help is appreciated.

Link to comment
Share on other sites

I'm not exactly sure what you're trying to do? Could you be a little more clear, or post an example/picture?

 

Edit: On second glance, what is 'position: relative; z-index: 2' all about? You haven't added any left/right etc.. Lots of browsers don't like relative positions with Z-index.

Link to comment
Share on other sites

Only ie6? be happy, my friend :) ....the greatest thing about ie6 is that you can talk to it, individually.

 

just use a foreign character like so:

 

instead of

 

width:100px;

 

use

 

_width:100px;

 

if you want to make tweak, do this:

 

#id{width:100px;_width:99px;}

 

Hope that helps.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.