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. <!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/menu.gif">http://www.kolumbus.fi/knuutila/menu.gif</a><!-- m -->
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=http://www.webdeveloper.com/forum/archive/index.php/"#">Test1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test5</a></li>
</ul>
</div>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.
Sorry, I was was being a bit unclear. Hopefully this second screenshot clears the subject a bit.
It should look like this:
<!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/safarifirefoxmenu.gif">http://www.kolumbus.fi/knuutila/safarifirefoxmenu.gif</a><!-- m -->
(renders OK in Safari and Firefox)
but instead in IE for Windows it renders like this:
<!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/iemenu.gif">http://www.kolumbus.fi/knuutila/iemenu.gif</a><!-- m -->
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!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.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 ?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,
DavidWell 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=http://www.webdeveloper.com/forum/archive/index.php/"#">Test1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test5</a></li>
</ul>
</div>
</body>
</html>
That should be ok!
Best Wishes,
DavidPersonally 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.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,
DavidThanks David, your example truly works in IE too. But for some strange reason I can't get it to work with my own navigation. <!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/audor/index.html">http://www.kolumbus.fi/knuutila/audor/index.html</a><!-- m --> 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!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.Thanks a million lavalamp, I got it to work! And thank you to everyone else who contributed into this thread.
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=http://www.webdeveloper.com/forum/archive/index.php/"#">Test1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test5</a></li>
</ul>
</div>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.
Sorry, I was was being a bit unclear. Hopefully this second screenshot clears the subject a bit. It should look like this:
<!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/safarifirefoxmenu.gif">http://www.kolumbus.fi/knuutila/safarifirefoxmenu.gif</a><!-- m -->
(renders OK in Safari and Firefox)
but instead in IE for Windows it renders like this:
<!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/iemenu.gif">http://www.kolumbus.fi/knuutila/iemenu.gif</a><!-- m -->
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!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.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 ?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,
DavidWell 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=http://www.webdeveloper.com/forum/archive/index.php/"#">Test1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test5</a></li>
</ul>
</div>
</body>
</html>
That should be ok!
Best Wishes,
DavidPersonally 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.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,
DavidThanks David, your example truly works in IE too. But for some strange reason I can't get it to work with my own navigation. <!-- m --><a class="postlink" href="http://www.kolumbus.fi/knuutila/audor/index.html">http://www.kolumbus.fi/knuutila/audor/index.html</a><!-- m --> 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!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.Thanks a million lavalamp, I got it to work! And thank you to everyone else who contributed into this thread.