Sent by Mark Newhouse on 5 August 2002 17:05
Hi Darrel:
> So, the only remaining issues, which are admittedly quite minor (and if
> anyone wants to take a stab at them) are:
>
> 1) (IE5/Mac) the custom image-bullets used for the second list ('external
> links:' are hanging way to the left outside of the parent DIV. This is
> the only browser is does this in, so I'm guessing it's a browser quirk.
Since you've tweaked the default behavior of lists to suit your own means
(which is what CSS is all about :), you've managed to get those bullets to
appear outside the containing DIV [1]. Make your rule for the custom image
bullets look like this:
#secondarynavbox .externallinks {
list-style: url(icon_offsitelink.gif) inside;
}
(I added "inside" to the end) and you should be in good shape.
> 2) (All browsers) I can't get the text in the navigation buttons to align
> to the bottom of the DIVs. This is the only major thing bugging me still.
I think most of us are still working on that one. Outside of a javascript
solution I'm not sure it can be done. And inside of a javascript solution
I'm not sure it can be done reliably across browsers/platforms. Of course as
soon as I say it can't be done, someone will do it - so I win both ways...
That said, you could use transparent GIF images combined with CSS hover
effects to create your rollovers, and make the text in the images align to
the bottom of the DIV [2].
> 3) (Some browsers...NOT IE5/Mac) I can't seem to get the horizontal rule
> in the nav box on the left to pick up styles in some browsers. It seems
> to work perfectly in IE5/Mac.
Some browsers use color for HRs and others use background-color [3]. Define
them both and you cover most everyone. You've also used align: center; which
throws an error in the CSS validator. So get rid of that, and use your
margins to center. Due to the drop-shadow effect on the right, I found that
a left margin of about 7% seemed to push the HR over where it looked
centered. The CSS below seems to work in the major browsers:
#secondarynavbox hr {
height: 1px;
margin: 0 10% 3px 7%;
color: #cc9;
background-color: #cc9;
width: 80%;
}
HTH!
-- Mark Newhouse
http://realworldstyle.com/
css layouts, tips, tricks and techniques
[1] http://www.meyerweb.com/eric/css/list-indent.html is a good explanation
of why lists behave the way they do in different browsers.
[2] http://www.uoguelph.ca/~stuartr/articles/cssrollovers.shtml explains
how to combine images with CSS hover effects to emulate javascript
rollovers.
[3] http://www.sovavsiti.cz/css/hr.html explains more about styling HRs.
