So I noticed when I make the font in IE bigger using “view->text size->largest”, that it has no affect on the font size in facebook. Can anyone tell me how I can do this?
Little background info on why I’d like to do this because maybe someone can suggest another work around…
I’m creating a horizontal navigation menu using an unordered list, with certain menu items having drop down menus containing another unordered list.
So the structure of the html would be something like…
To position the drop down(sub_menu), I am trying the following…
Give the navigation bar a height, say 30px.
Set position:relative on the li elements (so I can position the nested unordered lists relative to appropriate menu item)
Set position: absolute on the sub_menu div and top:30px (or whatever height of navigation bar is) and left:0
I guess I’m not really sure how else to position the drop down without knowing the height of the navigation bar. But at the same time, I know adding the height creates a situation where an overflow can occur if the user sets their font really large, so I know there has to be a better way.
Thanks for the info on IE. I had a feeling I wouldn’t be able to rely on that to prevent overflows, but it was interesting that facebook seemed to be getting around it. Apparently I just need to upgrade my IE.
Anyone have any insight on the proper way to position a drop down menu, without knowing the height of the main horizontal menu that it drops down from?
That’s a bug in some versions of IE where font sizes set in pixels don’t get resized.
The bug can be corrected by overriding pixel font sizes with ems in a stylesheet attached to the browser but most people using the old versions of IE with that bug don’t know how to do that.
Apart from that the font sizes your visitor chooses can’t be blocked by the web page.
In most cases you can use top:auto instead of using a dimension. In the following example you can resize the text and the drop down always stays in contact with the top menu.
<!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=utf-8" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
}
ul#nav{font-size:62.5%}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
left: 0;
[B] top: auto;[/B]
margin-left:-999em;
}
#nav li li{width:149px;}
#nav li ul ul {
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fffccc; /* IE6 likes a background here */
padding: 5px;
border: 1px solid #ccc;
}
/* commented backslash mac hiding hack \\*/
* html ul#nav li a {
height:1%
}
/* end hack */
/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #777;
background: #fffccc;
}
#nav li ul li a {
padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, u#navl li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">testing ></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">testing ></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
