PDA

Click to See Complete Forum and Search --> : Menu problem Win/IE

nasu
08-21-2004, 10:59 AM
It's that darn IE/Win that's bothering me again. This time navigation menu doesn't have enough space in the upper part of it. Here is a screenshot, how the navigation should look. It renders fine in Firefox and Safari. http://www.kolumbus.fi/knuutila/menu.gif

Does anyone have a solution how to get the menu look the same in Win/IE ?

CSS and code for the menu:

#header ul {
display:block;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: small;
position: relative;
top: 70px;
left: 305px;
}
*html #header ul {
margin-top: 74px;
margin-left: 305px;
}
#header ul li {
display:block;
display: inline;
float: left;
border-top: 1px solid #fff;
border-right: none;
border-bottom: 1px solid #4E626B;
border-left: 1px solid #fff;
}
#header ul li a {
text-decoration: none;
height: 500px;
padding: 5px 10px;
color: #fff;
background-color: #4E626B;
}
#header ul li a:hover {
background-color: #BC5C03;
}

<div id="header">
<ul>
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
</ul>
</div>
PhillMc
08-21-2004, 01:39 PM
I'm sorry, but what you are asking is a bit unclear. Could you provide the URI to your site and a more detailed description of the problem. Thanks. :)
nasu
08-22-2004, 10:12 AM
Sorry, I was was being a bit unclear. Hopefully this second screenshot clears the subject a bit.

It should look like this:

http://www.kolumbus.fi/knuutila/safarifirefoxmenu.gif

(renders OK in Safari and Firefox)

but instead in IE for Windows it renders like this:

http://www.kolumbus.fi/knuutila/iemenu.gif

And I was wondering if there is a way to make the menu look the same in IE as it looks in Safari/Firefox. CSS and XHTML for the menu can be found from the first post.

Thanks in advance!
Stephen Philbin
08-22-2004, 11:21 AM
Try putting some padding on the li's and removing all margins from any elements inside the li's, such as links etc.

IE tends to handle text a little different from other browsers, so telling all the browsers specificaly to hadle them in the same way and placing the pading on a non text element (such as the <li>) should hopefully solve your problem.
nasu
08-22-2004, 01:50 PM
Removing the margin from UL LI A didn't do the trick. I also tried to add some padding, but it didn't have any effect on IE. Gosh it's hard to do debugging when you don't have a Windows based machine with IE right next to you.

Any other suggestions ?
davidbrent
08-22-2004, 07:17 PM
gosh this is messy code. i am rewriting it as we speak. a whole clear up job to say straight. i will find your problem and deal with it!

Best Wishes,
David
davidbrent
08-22-2004, 07:38 PM
Well here you are. Not really 100% tested though. I am in a rush!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css" media="all">

body {
margin: 20px;
padding: 0;
}
#header {
font:12px Verdana, Arial, serif;
}
#header ul {
margin: 0;
padding: 0;
}
#header li {
margin: 0;
padding: 0;
display: block;
float:left;
list-style-type: none;
border-right:1px solid #fff;
}
#header ul li a {
margin: 0;
padding: 4px 9px;
height: 20px;
}
#header li a:link, #header li a:visited {
background: #4E626B;
color: #fff;
text-decoration: none;
}
#header li a:hover {
background: #BC5C03;
color: #fff;
text-decoration: none;
}

</style>
</head>

<body>

<div id="header">
<ul>
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
</ul>
</div>
</body>
</html>


That should be ok!
Best Wishes,
David
David Harrison
08-22-2004, 08:00 PM
Personally I'd go even simpler, and also use a non-fixed font size.

Although if you were to post your current code, maybe it would be possible to provide a fix rather than a re-write.
davidbrent
08-23-2004, 08:26 AM
Originally posted by lavalamp
Personally I'd go even simpler, and also use a non-fixed font size.

Excellent point! The main reason i was to use this as the solution was to describe in basic readble css what is happening. Nasu may not know of or us variable font sizes and i wouldn't want to throw him to easily.

I rewrote the code because even though i spotted the problem in his css, i thought the code was a bit sloppy and decided to have a clean rewrite just to point out another method.

Best Wishes,
David
nasu
08-30-2004, 02:32 PM
Thanks David, your example truly works in IE too. But for some strange reason I can't get it to work with my own navigation. http://www.kolumbus.fi/knuutila/audor/index.html I've used the code as you suggested, but the navigation still fails to render correctly in IE. And honestly I don't have a clue why it doesn't render properly. Things are looking quite hopeless at the moment, any suggestions?

An one more thing? My header is a DIV with a background image. Is there a way to make the header DIV to a link? I'd like to have a link that goes to the main page when ever you click the header. Thanks a million again you guys/gals!
David Harrison
08-30-2004, 03:25 PM
I fixed mine to work in IE, I forgot that it didn't apply padding to inline elements (the links).

I would help with the header div/link thing but unless I se some code I can't.
nasu
09-01-2004, 09:32 AM
Thanks a million lavalamp, I got it to work! And thank you to everyone else who contributed into this thread.