| | |
|
|
|
FireFox <li> <a> background-color border bug? |
|---|
| message from Osgood on 16 Jul 2004 |
Anyone run into this before. Just trying to help someone else out at
another forum.
(See code below)
The background-color, when placed on the '#leftsidenav ul li a' or any
other combination, just 'li a' or just 'a', messes with the
border-bottom in Fire Fox.
Increase and decrease the text via the zoom tool. The boredr appaers and
disappears.
Take the bg color away and it plays ball. The solution is to put the bg
color on the actual <div> which contains the navigation links. Just
wanted to know if anyones knows if its a known bug in FireFox or is the
'ul li a' set up incorrcetly.?
It works in all other browser tested.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
body {
font: 11px arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
#leftsidenav {
width: 200px;
}
#leftsidenav ul li a {
display: block;
color: #9F0B00;
padding: .4em 0 .4em 1.5em;
letter-spacing: .1em;
border-bottom: 1px solid black;
background-color: #EDEFA8;
}
</style>
</head>
<body>
<div id="leftsidenav">
<ul>
<li id="active"><a href="#" id="current">Residential</a></li>
<li><a href="#">Commercial</a></li>
<li><a href="#">Government</a></li>
<li><a href="#">Service Area</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Our Story</a></li>
</ul>
</div>
</body>
</html>
|
| jojo replied to Osgood on 16 Jul 2004 |
Hi
It will likely be caused by rounding errors on the relative padding
settings.
#leftsidenav ul li a {
padding: 3px 2px 5px 2px;
letter-spacing: 3px;
}
Try changing the rule to include the above, this should be ok once you
have done this.
|
| Osgood replied to jojo on 16 Jul 2004 |
Ah good, good, that works. No wonder I stear clear of ems and %. I didnt
think to change them.
|
| jojo replied to Osgood on 16 Jul 2004 |
A gazillion things to remember huh!
I tend to use % for text these days, padding and margins I always do
with pixels.
|
| Osgood replied to jojo on 16 Jul 2004 |
Yup lots to remember. My brain goes to pieces when I see ems or
percentages. It just cant deal with them :(
I stick to pixels for everything. The main reason I dont use percent/ems
for text is because its difficult to serve up a webpage where someone
doesnt have to enlarge the text via their zoom tool.
On Mac ems and percentages, when the initial page loads are way too
small in Mozilla and Safari, which quite frankly bugs me.
If you compensate for the small text in those browser it then looks far
too big in IE5x.
My take on this is that most people will be able to read 11px text
reasonably comfortably. Those that cant can use their zoom tools.
I know theres the argument about PCIE doesnt make it easy to enlarge the
text for those that are visually challenged. But hey youve got to stand
on one side of the line or the other. I happen to think neither are
absolutely ideal.
Geez its a never ending nightmare.
|
| jojo replied to Osgood on 16 Jul 2004 |
Hi
Not having a mac..
If you set a default % on the body element of 100% and then scale to
that, for instance all p elements set at 80% do you still see a problem?
body{
font-size: 100%;
}
p{
font-size: 80%;
}
For instance, does the above display correctly in the browsers you say
have a problem with %'s?
|
| Osgood replied to jojo on 16 Jul 2004 |
That reads ok in both IE and Safari. The text is rendered the same size,
about 10px I would say. In Mozilla it dies badly. I would say its about 8px.
|
| jojo replied to Osgood on 16 Jul 2004 |
Cool
So a p value of 85% would be fine'ish.
|
| Osgood replied to jojo on 16 Jul 2004 |
I guess it depends on how much text there is. In IE5.2 and Safari you
could read it without having to enlarge it but not really in Mozilla,
without having to enlarge it.
|
| jojo replied to Osgood on 16 Jul 2004 |
Cheers
|
|
Archived message: FireFox <li> <a> background-color border bug? (Macromedia Dreamweaver Web Design)
