Forum Moderators: not2easy
I have a navigation menu with links on the left side of my site, but on IE on Win, it looks like the line-height is changing every 2 links, other words: it has irregular line spacing.
If I use:
display:block; it seems to correct it but it creates a "block" when I click on that link, and that's what i want to avoid and I tried display:list-item, wich fix it but creates numbers on IE Mac! I used line-height but nothing happened.
here is the CSS:
.navActive {
font-size:11.5px;
font-family:arial,helvetica,geneva,sans-serif;
font-weight:bold;
width:60px;
text-decoration:none;
color:#006699;
}
.nav {
font-size:11.5px;
font-family:arial,helvetica,geneva,sans-serif;
width: 60px
text-decoration:none;
color:#006699;
}
Here is the HTML for that layer:
<div id="Layer2" style="position:absolute; left:65px; top:124px; width:60px; height:143px; z-index:2">
<a href="/index.html" class="nav">Home</a>
<a href="/contactform.html" class="navActive">Contact</a> <a href="/gallery.html" class="nav">Gallery</a>
<a href="/cookbook.html" class="nav">Cookbook</a> <a href="/city_tour.html" class="nav">City
Tour</a> <a href="/portfolio.html" class="nav">Portfolio</a> <a href="/resume.html" class="nav">Resume</a></div>
Thanks!
I'm using Dreamweaver on a Mac OS9.2, IE5.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>yo</title>
<style type="text/css">
.list {
width: 60px;
list-style: none;
padding: 0;
margin: 0;
}
.list a {
font: 11.5px arial,helvetica,geneva,sans-serif;
text-decoration: none;
color: #069;
}
.list li.active a {font-weight: bold;}
</style>
</head>
<body>
<div id="Layer2" style="position:absolute; left:65px; top:124px; width:60px; height:143px; z-index:2">
<ul class="list">
<li><a href="/index.html">Home</a></li>
<li class="active"><a href="/contactform.html">Contact</a></li>
<li><a href="/gallery.html">Gallery</a></li>
<li><a href="/cookbook.html">Cookbook</a></li>
<li><a href="/city_tour.html">City Tour</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/resume.html">Resume</a></li>
</ul>
</div>
</body>
</html>
Seems like when I take out the 'block' from Mac, it shows up on Win, and viceversa.
Still testing.... because I want them to look even, and without any 'block' around when i select them.
any idea? thanks in advance!
However, there is a clever javascript that does the trick:
// REMOVES THE LINK BORDER IN IE4+, NS6
// Works: IE4+, NS6+
// Notes: In NS6 the select tags are not blurred
function unblur() {
this.blur();
}
function getLinksToBlur() {
links = document.getElementsByTagName("a");
for(i=0; i<links.length; i++) {
links[i].onfocus = unblur
}
}
Then just add onload="getLinksToBlur();" in your body tag.
Still I wonder one thing:
Why on my home page, without any javascript at all, i don't have any border at all on any link, on a mac of course and on windows too. That's why I thought it was a Css problem, not IE issue.
Thanks for your time!
:)
a {outline: none;}in your css and remove the javascript I posted earlier. Of course, this also lets you style the border in any way you like.
The list property helped to correct the line-height (it was irregular "jumpy" on Windows).
The Javascript helped to "not show" those borders around the links.
Somewhow, if I take out only the Javascript, and insert the outline as replacement, that creates Bullets for the 'list property'.
If I go back to the original code, (no java, no list property), and Add only the outline property, I fix only the borders around links, but shows irregular line-height on Windows.
Well, is working perfect with the first things you said, but I will try with the outline and more combinations. I'll keep you posted.
:) Thanks again!
