Log in

View Full Version : IE and 100% width?


TheJoshMan
08-16-2008, 08:09 PM
Ok, I've done my best to keep from having to post this in the forums for others to help me with it since this is a submission of mine... However, I can't seem to find a "fix" for this issue.

I created a CSS based horizontal menu which resembles the Vista look and feel. The problem with it is that it's set to 100% width. IE won't display the width at 100% if you zoom out your browser. If your browser is set to 100%, then it displays fine, but if you zoom out, then the menu shrinks UNTIL you hover over a menu item, then it re-expands and fills the entire width of the browser.

I am nearly bald now from trying to figure this out. I have tried countless methods and hacks to try to get this to work right, but I can't seem to get it.

Can anyone help?


Here is the demo page:
http://www.eight7teen.com/Vista_CSS_Menu/Vista_Menu.html

and...

Here is the source code:


<HTML>
<HEAD>
<TITLE> Vista Style CSS Menu </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Josh Jones">
<base href="http://www.eight7teen.com/Vista_CSS_Menu/" />
<style type="text/css">
/*///////////////Tried adding this to reset padding/margin thinking maybe that was the problem...////////////////////
*{
margin:0;
padding:0;
}
////////////////////////////////No avail///////////////////////////////////////*/
body{
background:#ababab;
font-size:14px;
font-family:Verdana;
color:#505050;
/*Thought maybe this little hack that is often used to keep footers at the bottom might be able to be used to make sure this thing stays 100% width*/
width: auto !important;
width: 100%;
min-width:100%;
/*End Footer Style percentage hack*/
}

#menubar{
overflow: hidden;
width: auto !important; /*This is the footer hack used in another area (still not working)*/
width: 100%; /*This is the footer hack used in another area (still not working)*/
min-width:100%; /*This is the footer hack used in another area (still not working)*/
height:32px;
background: url('images/menubar_x.png') repeat-x;
padding: 0;
}

/*This was a suggestion from someone else which didn't work, then I added many other things to it, still didn't work*/
* html #menubar{
width: auto !important;
width: 100%;
min-width:100%;
position:absolute;
right:0px;
left:0px;
margin-right:0px;
padding-right:0px;
}
/*End suggestion*/


/*Begin Menubar Buttons CSS*/
#menubar a.button{
background: transparent url('images/button_left.png') no-repeat top left;
display: block;
float: left;
line-height: 30px;
height: 32px;
margin-left:25px;
padding-left: 12px;
margin-right: 15px;
}
#menubar a.button:link, #menubar a.button:visited{
background: transparent;
display: block;
float: left;
font-family:Calibri, Arial;
font-size: 18px;
color: #ffffff;
font-weight:normal;
line-height: 30px;
height: 32px;
margin-left:25px;
padding-left: 12px;
text-decoration: none;
margin-right: 15px;
}
#menubar a.button span{
background: transparent;
display: block;
padding: 0px 12px 0px 0;
}
/*End Menubar Buttons CSS*/


/*Begin Menubar :hover & :active effect*/
#menubar a.button:hover{
background: transparent url('images/button_left.png') no-repeat top left;
display: block;
float: left;
font-family:Calibri, Arial;
font-size: 18px;
color: #ffffff;
font-weight:normal;
line-height: 30px;
height: 32px;
margin-left:25px;
padding-left: 12px;
text-decoration: none;
margin-right:15px;
}
#menubar a.button:hover span{
background: transparent url('images/button_right.png') no-repeat top right;
display: block;
padding: 0px 12px 0px 0;
}
#menubar a.button:active{/*Note: "active" links only seem to work in IE*/
background: transparent url('images/button_left.png') no-repeat top left;
display: block;
float: left;
font-family:Calibri, Arial;
font-size: 18px;
color: #ffffff;
font-weight:normal;
line-height: 30px;
height: 32px;
margin-left:25px;
padding-left: 12px;
text-decoration: none;
margin-right:15px;
}
#menubar a.button:active span{/*Note: "active" links only seem to work in IE*/
background: transparent url('images/button_right.png') no-repeat top right;
display: block;
padding: 0px 12px 0px 0;
}
/*End Menubar :hover & :active effect*/


/*Begin Menubar Left "Cap"*/
#menubar .leftcap{
background:url('images/menubar_leftcap.png') no-repeat;
float: left;
width: 5px;
height:32px;
position: relative;
top: 0px;
left:0px;
}
/*End Menubar Left "Cap"*/


/*Begin Menubar Right "Cap"*/
#menubar .rightcap{
background:url('images/menubar_rightcap_search.png') no-repeat;
float: right;
width: 162px;
height:32px;
position: relative;
top: 0px;
right:0px;
}
#menubar .rightcap input{
height:17px;
width:132px;
background:url('images/search_bg.png') no-repeat;
color:#5E646F;
font-size:10px;
border:1px solid #254367;
position:relative;
top:7px;
right:0px;
}
/*End Menubar Right "Cap"*/
</style>
</HEAD>

<BODY>
<h2>Josh's Vista Style CSS Menu Bar</h2>

<!--Begin Menu HTML-->
<div id="menubar">
<span class="leftcap"> </span>

<a href="#" class="button"><span>Home</span></a>
<a href="#" class="button"><span>About</span></a>
<a href="#" class="button"><span>Products</span></a>
<a href="#" class="button"><span>Services</span></a>
<a href="#" class="button"><span>Clients</span></a>
<a href="#" class="button"><span>Downloads</span></a>
<a href="#" class="button"><span>Contact</span></a>
<a href="#" class="button"><span>FAQ</span></a>

<span class="rightcap">
<input type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="search" id="search"/>
</span>
</div>
<!--End Menu HTML-->
</BODY>
</HTML>
Medyman
08-16-2008, 08:22 PM
Use a proper DTD.

You have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

It should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

That should fix it (I think). By the way, why transitional?
TheJoshMan
08-16-2008, 08:26 PM
Well, that at least gives it "uniformity" LOL

Now instead of shrinking until you hover over a menu item... It just stays shrunk instead of re-expanding upon hovering over menu item.
TheJoshMan
08-16-2008, 08:27 PM
By the way, why transitional?

I just forgot to change it, I use EditPlus3 Text Editor and that's the default DOCTYPE placed at the beginning of each new document.
Medyman
08-16-2008, 08:34 PM
Now instead of shrinking until you hover over a menu item... It just stays shrunk instead of re-expanding upon hovering over menu item.

That's how it's supposed to behave (in IE). Without javascript, you won't be able to keep the menu at 100% of the viewport at all times. View for a deeper understanding.
wenwenguo
08-16-2008, 08:58 PM
Ok, maybe something wrong with the wire speed
TheJoshMan
08-17-2008, 05:12 AM
Well that's a stupid idea! Why would IE have to be different than any of the others?
*Ah yes, just remembered... Because Microsoft doesn't care about standards*

I guess I'll just have to deal with it since I wanted to make it STRICTLY a css menu.
Medyman
08-19-2008, 12:00 AM
Well that's a stupid idea! Why would IE have to be different than any of the others?
*Ah yes, just remembered... Because Microsoft doesn't care about standards*

I guess I'll just have to deal with it since I wanted to make it STRICTLY a css menu.

I actually think that the Microsoft model makes more sense here. If I'm zooming in/out of a page, I expect to do it uniformly.
TheJoshMan
08-19-2008, 01:01 AM
I think I'd have to disagree... If zooming out... Then something which has the width defined as 100%, in my opinion should expand to fill the empty space and stay true to "100%".