homepage Welcome to WebmasterWorld Guest from 54.167.144.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Fixed position menu causing x-scroll in ie
theartfulconception



 
Msg#: 4337581 posted 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]

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4337581 posted 6:24 pm on Jul 10, 2011 (gmt 0)

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.

theartfulconception



 
Msg#: 4337581 posted 9:28 am on Jul 12, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved