Ok, so i'm having trouble hiding the X scrollbar on IE. I'm wanting to have a fixed menu at the top, fixed background image, with a small content box vertically and horizontally aligned. I can't for the life of me figure out whats pushing out the body on IE. It has to be a margin somewhere but I cant seem to find it. The javascript is a browser selector which works well, so i'm sure this isnt the issue. Its more finding the right div i think that is pushing the body out. Any helpm would be great as I have spent way too long on trying to resolve this. Thanks in advance!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#outer {
margin-right:-50px;
}
#div2 {
overflow: auto;
height: 500px;
margin-top:80px;
}
body {
background-attachment:fixed;
background-image:url(bg.jpg);
color:#CCC;
text-align: center;
overflow-x: hidden;
}
</style>
<script src="css_browser_selector.js" type="text/javascript"></script>
<style type="text/css">
.ie body {
overflow-x:visible;
}
.ie #outer {
margin-right:-40px;
}
.ie #div2 {
overflow: auto;
height: 800px;
margin-top:80px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>
<style type="text/css">
/* menu */
#menu{
margin-top:-80px;
margin-left:43%;
padding:0px;
list-style:none;
color:#fff;
line-height:30px;
display:inline-block;
z-index:1000;
position:fixed;
overflow:visible;
width:600px;
}
#menu a { color:#fff; text-decoration:none; }
#menu > li {
background:#3f3f3f none repeat scroll 0 0;
cursor:pointer;
float:left;
position:relative;
padding:0px 10px;
z-index: 9999;
text-align:left;
}
#menu > li a:hover {color:#000;}
#menu .logo {
background:transparent none repeat scroll 0% 0%;
padding:0px;
background-color:Transparent;
z-index: 9999;
}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block; display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px; margin-top:30px; width:150px; line-height:16px; background-color:#3f3f3f; color:#0395CC; /* for IE */ display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; z-index:9999;}
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#fff; }
#menu li ul li a:hover { color:#000; }
/* main submenu */
#menu #main { left:0px; top:0px; background-color:#3f3f3f; color:#fff; z-index:9999;}
/* corners*/
#menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
#menu .corner_inset_right { position:absolute; top:0px; left:150px;}
#menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
#menu .corner_left { position:absolute; left:0px; top:0px;}
#menu .corner_right { position:absolute; left:132px; top:0px;}
#menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
</style>
</head>
<ul id="menu">
<li class="logo">
<a href="http://www.example.com/"> <img src="http://www.example.com/images/menu_left.png" alt="" height="30" border="0" style="float:left; z-index: 9999; margin-left:-190px;"/> </a> </li>
<li><a href="http://www.example.com/" target="_blank">buy.</a>
</li>
<li><a href="">photo.</a>
<ul>
<li>
<img class="corner_inset_left" alt="" src="http://www.example.com/images/corner_inset_left.png"/>
<a href="http://www.example.com/">animals.</a>
<img class="corner_inset_right" alt="" src="http://www.example.com/images/corner_inset_right.png"/>
</li>
<li><a href="http://www.example.com/architecture/index.html">architecture.</a></li>
<li><a href="http://www.example.com/">landscape.</a></li> <li><a href="http://www.example.com/">live.</a></li>
<li><a href="http://www.example.com/">other.</a></li>
<li><a href="http://www.example.com/">people.</a></li>
<li><a href="http://www.example.com/">wedding.</a></li>
</ul>
<li><a href="">web.</a>
<ul>
<li>
<img class="corner_inset_left" alt="" src="http://www.example.com/images/corner_inset_left.png"/>
<a href="http://www.example.com/">ebay.</a>
<img class="corner_inset_right" alt="" src="http://www.example.com/images/corner_inset_right.png"/>
</li>
</ul>
<li><a href="http://www.example.com/">contact.</a>
</li>
<li><a href="http://www.example.com/">me.</a>
</li>
</li>
<img src="http://www.example.com/images/menu_right.png" alt="" width="14" height="30" style="float:left; z-index: 481;"/></li></ul>
<div id="outer">
<div id="div2" align="center"><table align="center"> <tr><td>
<h1>content<span style="text-align:left"><a href="contact.php" target="_self"><font style="color:#FFF"><strong></strong></font></a></span></h1>
</td></tr></table>
</div>
</div>
[edited by: alt131 at 5:48 pm (utc) on Jul 10, 2011]
[edit reason] Thread Tidy [/edit]
