Horizonal list/menu problem in IE

AJM Project · #1 August 28th, 2008, 03:40 PM

Hello,

I've been trying to make a horzontal menu and I'm getting different results in IE. Also I've tried different ways of positioning and was wondering what is the best way.

Underneath is the code for the html and CSS of the menu. I have also attached images of what I mean by different results, hover over them to see.

Firefox 3 (works fine):

Opera 9.51 (works fine):

IE 7 (Changes sizes etc):

CSS:

Expand|Select|Wrap|Line Numbers

 
/***********************Main navigation Menu *************************/
 
div.navbar {

    padding:10px 2px 0px 6px;

    height:28px;

}
 
 #nav ul {

    list-style-type:none;

    padding:0;

    margin:0 auto;

}
 
#nav li {

    display:inline;

}
 
#nav a {

    background-color:black;

    color:white;

    border:1px solid white;

    padding:.4em 2em;

    text-decoration:none;

    font-variant:small-caps;

}
 
#nav a:hover {

    background-color:#1a1a1a;

    filter:alpha;

    opacity:20%;

}
 
#nav a:active {

background-color:#262626;

}

HTML

Expand|Select|Wrap|Line Numbers

 
<div class="navbar">                                                  
 
    <div id="nav">    

     <ul>

     <li><a href="http://www.trance.nu">home</a></li>

     <li><a href="http://www.trance.nu">charts</a></li>

     <li><a href="http://www.trance.nu">blog</a></li>

     <li><a href="http://www.trance.nu">bio</a></li>

     <li><a href="http://www.trance.nu">web design</a></li>

     <li><a href="http://www.trance.nu">web design</a></li>

        </ul>

    </div>

</div>

Thanks for any help.

Andrew

AJM Project · #2 August 28th, 2008, 08:37 PM

You can now view it at: www.andyboyjlm.obxhost.net

Also someone may be able to tell me why a scrollbar has been added to the browser now that I've uploaded it to a host - I had no scrollbar before and I don't want one unless I incorporate it myself.

David Laakso · #3 August 28th, 2008, 10:14 PM

Quote:

Originally Posted by AJM Project

You can now view it at: www.andyboyjlm.obxhost.net

Quote:

Also someone may be able to tell me why a scrollbar has been added to the browser...

Good idea to validate the markup and CSS, to also check the page with and without +2 font-scaling in Safari, Opera, and Firefox; and, at text-size "largest" with font-sizes ignored (when setting frozen-fonts) in IE/6 & IE/7; and to check the page in a short window in all above browsers before posting.

AJM Project · #4 August 28th, 2008, 10:38 PM

Was that answer just relating to my 2nd post then?

You're going a bit too fast for me here. I'm new, so frozen fonts, font sizes ignored and largest doesn't mean much to me.

I've checked in 3 browsers as you can see, and I've resized them to simulate smallers resolutions etc, which are all good in 1024x768. Anything smaller I'm not bothered about at the moment - I'm just experimenting. I've held control in and scaled a couple of times up with my mouse if that's what you mean by font scaling.

Otherwise I'm not quite sure what you're on about.

Sunny1957 · #5 August 29th, 2008, 12:56 AM

Sorry AJM Project,

but I think in this case IE7 does he's work fine, because he starts top and bottom padding in the middle of text. The others from the bottom of text. I reduced your code to what is necessary to show what I mean

Expand|Select|Wrap|Line Numbers

 
<!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>

<title>Menu's</title>

<style type="text/css">

div.navbar {

    height:30px;

    background-color:#767676;

    background-repeat:repeat-x;

    margin-left:1px;

}

</style>

</head>

<body>

  <div class="navbar">                                                  

    Text<BR>

  </div>

</body>

</html>

The behavior is for IE7 and FF3 the same. But if you add "padding:20px;" you can see what I mean In IE7 the text is centered between top and bottom. FF3 adds a slight padding at the bottom.

I found a quick and dirty solution: Add after the padding "padding-start=0pt" without a semicolon at the end. It's normally used in XML, I believe.

Another possibility is, because you give navbar a fixed height, give the navbuttons also a fixed height.

I hope, I could help you.

David Laakso · #6 August 29th, 2008, 12:57 AM

Quote:

Originally Posted by AJM Project

Was that answer just relating to my 2nd post then?.

Yes. You have to start somewhere. Validate the markup and the CSS.

Sunny1957 · #7 August 29th, 2008, 01:17 AM

Quote:

Originally Posted by AJM Project

Was that answer just relating to my 2nd post then?

Hello AJM-Project,

I am also again "Confused? Bewildered? Stuck?".

Sunny1957

AJM Project · #8 August 29th, 2008, 02:22 AM

I'm sorry sunny but I don't quite understand what you're trying to say. I tried what I think you said and there is no difference.

David, thanks again. Hopefully I can validate it and then you or someone else will help.

David Laakso · #9 August 29th, 2008, 02:33 AM

Quote:

Originally Posted by AJM Project

David, thanks again. Hopefully I can validate it and then you or someone else will help.

Good. Once validated, I think you'll need to count on someone else to help. I pretty much summed up my opinion in reply to your thread of Aug 21 subject line: "Div doesn't expand for content, help?"

David Laakso · #10 August 29th, 2008, 07:14 PM

Regarding the list issue, for whatever reason neither IE/6 or IE/7 is capable of adjusting the glyph height of the small-caps in the last two links. An /ugly/ workaround is to assign a line-height (only px line-height works in this situation) for the IEs (see the conditional comments). Additionally, a little different structure for the list may work better all around.

Please see on-line example here:
horizontal list

Markup and CSS for forum archives below.

FWIW, personally I'd reset to text-transform: uppercase; and delete the small-caps call and the px line-height hack for it...

Expand|Select|Wrap|Line Numbers

  
CSS
 
<style>

html, body {

margin : 0;

padding : 0;

}

body {

font : 100% serif;

text-align : center;

}

#nav {

background : #ddd;

margin : 6px 0 0 0;

padding : 5px 0;

line-height: 1.75;

}

#nav ul {

text-align : center;

padding : 5px 0;

margin : 0;

background-color : #ddd;

color : white;

width : 100%;

}

#nav ul li {

display : inline;

padding : 5px 0;

}

#nav ul li a {

padding : 5px 10px;

background : red;

color : #fff;

text-decoration : none;

border : 1px solid #fff;

font-variant : small-caps;

}

#nav ul li a:hover {

background-color : fuchsia;

color : white;

}
 
</style>
 
<!--[if lte IE 7]>

<style>

/* style for IE/6 */

#nav {padding: 0; }

#nav ul {line-height:18px;}

#nav ul li a {zoom: 1;}

</style>

<![endif]-->
 
<!--[if IE 7]>

<style>

/* style for IE/7 */

#nav {padding: 0; }

#nav ul {line-height:18px;}

#nav ul li a {zoom: 1;}

</style>

<![endif]-->
 
HTML

<div id="nav">

<ul id="navlist">

<li><a href="http://www.trance.nu">home</a></li>

<li><a href="http://www.trance.nu">charts</a></li>

<li><a href="http://www.trance.nu">blog</a></li>

<li><a href="http://www.trance.nu">bio</a></li>

<li><a href="http://www.trance.nu">web*design</a></li>

<li><a href="http://www.trance.nu">web*design</a></li>

</ul>

</div>

AJM Project · #11 August 30th, 2008, 01:58 AM

Thanks again David, I appreciate it greatly.

It seems the the small variant was indeed the culprate. The problem is sorted now with the following code..

Expand|Select|Wrap|Line Numbers

 
div.navbar {

    background-color:green;

    padding:5px 0;
 
}
 
 #nav ul {

    list-style-type:none;

    padding:5px 0;

    margin: 0 0 0 15px;

}
 
#nav li {

    display:inline;

}
 
#nav a {

    background-color:red;

    color:white;

    border:1px solid white;

    padding:.5em 2em;

    text-decoration:none;

    text-transform:uppercase;

}

Re the scrollbar prob - my webhost had added extra code and divs to the bottom of my site. I'm trying to consult them about it; I just didn't think this would be the case, hense the question I asked.

Again thank you, hopefully next time I post I will have validation sufficient.

So far my knowledge of HTML and CSS is mainly from reading the book "Sam's Teach Yourself HTML & CSS in 24 Hours", a great book. But obviously it's only beginner level. I have my sites on more advanced books now so hopefully they will help me out with better validation also.

Cheers.

What is Bytes?

Popular Articles