Horizonal list/menu problem in IE

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.

Aug 28 '08 #2

397

Expert 256MB

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

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.

Aug 28 '08 #3

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.

Aug 28 '08 #4

Sunny1957

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.

Aug 28 '08 #5

397

Expert 256MB

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

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

Aug 28 '08 #6

Sunny1957

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

Hello AJM-Project,

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

Sunny1957

Aug 29 '08 #7

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.

Aug 29 '08 #8

397

Expert 256MB

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?"

Aug 29 '08 #9

397

Expert 256MB

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>

Aug 29 '08 #10

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.

Aug 30 '08 #11

by: Faz | last post by:

Hi I'm having some real trouble with a header I have created within a container. I have two problems; firstly the menu (a horizontal UL) will not centre within the surrounding header, despite...

How to show dropdown list of menu items just like click on Parent menu by writing code

by: Sakharam Phapale | last post by:

Hi All, How to show dropdown list of menu items just like click on Parent menu. For example, Edit (Parent menu) Cut (child menu) Copy (child menu) Paste (child menu)

C# / C Sharp

Radio Button List Horizonal Scroll bar

by: Octopus0 | last post by:

Dear all, I developed web application VB.net , and i had an Radio Button List. the problem is the Horizonal bar of the Radio button list dosen't work it apperars as disable. i add to the HTML...

ASP.NET

Dropdown list not so crossbrowser

by: Aad vd Naad | last post by:

Hi, I have create a dropdown menu which looks as expected in Safari (Mac). Viewing it in FF (Mac) or IE6 (Windows) it's a bit messed up. It also seems that when the top level links are clicked...

Implementing a "Most Recent Files" list

by: zacks | last post by:

Most applications whose purpose is to work with various types of files implement a "Most Recent Files" list, where the last, say, four files accessed by the application can quickly be re-opened by...

Visual Basic .NET

Centering background-image in list menu

by: stevedude | last post by:

CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of...

How to refresh an ASP list/menu following selection from a preceding list/menu

by: jmartmem | last post by:

Greetings, I am using Dreamweaver CS3 to design an ASP page that contains an Insert Record Form. Within this form are two list/menu form fields that I would like to "synchronize". In other words,...

Javascript

List menu not displaying properly

by: lenzie | last post by:

I am having a very odd problem with a website I run. The menus have recently been changed to use javascript and some people are reporting that when they first use the site, Instead of a nicely...

Problem with horizonal dropdown css menu in IE6...

by: jerry101 | last post by:

Hi, I've been working on a horizontal drop down menu today, and I can get it to display perfectly in everything bar IE6. Basically instead of them lining up horizontally, they line up...