Welcome to WebmasterWorld Guest from 54.162.141.212

Forum Moderators: not2easy

Message Too Old, No Replies

Fixed position menu causing x-scroll in ie

     
6:45 am on Jul 10, 2011 (gmt 0)



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]

6:24 pm on Jul 10, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi theartfulconception and welcome to [webmasterworld.com]

The issue isn't visible on the provided code because the body has been set overflow-x: hidden;. With that removed, the issue is visible in ie7&8, winsafari, ff4 and Op11, and is caused by the -50px margin-right set on div#outer. Removing that fixes the issue for all tested browsers on the provided code.

However, the .ie styles indicate there is another .js browser sniffing and inserting those classes into the html just for ie. If I am right, ie is being sent:
.ie body {
overflow-x:visible;
}
.ie #outer {
margin-right:-40px;
}
- which are removing the overflow-x: hidden just for ie, then setting a margin-right wide enough to create the issue - again, just for ie.

So in summary, the issue appears to be the margin-right on div#outer. All other browsers have been sent overflow-x:hidden; on body which prevents the scoll - leaving only ie being explicitly told to create one.
9:28 am on Jul 12, 2011 (gmt 0)



hi, thanks for the reply. I will see what I can do to fix it.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month