Hi Rich,
I'm seeing a problem with your HTML, it's not valid to use something like
<ul>
<div>
<li>
you can only put <li>s inside an <ul> or <ol>.
It also seems you're using a lot of unnecessary markup.
Can you please share the website URL?
Best,
Germán
On Dec 30, 2010, at 12:24 PM, Rich M wrote:
> Hi,
>
> this is my first posting to this list. I'm a software developer unwillingly
> cast into the role of web designer for a web application I've made. I have no
> real training in CSS and have more or less hacked my way through by using
> Firebug in Firefox to copy other sites and debug my own CSS.
>
> So as a result, I have something that looks great in FireFox (and Chrome too
> it seems), but is a little bit of a nightmare in IE (testing with IE 8).
>
> I'll probably have a few more questions regarding CSS stuff for IE, so please
> bear with me.
>
> The issue at hand here is as follows: I have a horizontal navigation menu
> built in the following structure
>
> <div class="mainNav">
> <ul>
> <div class="linkWrap">
> <li>
> <a>
>
> The <a> tag wraps the text for the link. What I have going on is that when
> you hover over the <li> the opacity changes to give a visual cue to the user.
> I wrap it in the <div class="linkWrap"> to give borders (right for standard
> element, left+right for first element) that will cover the whole height of
> the <div class="mainNav">.
>
> The issues I visibly see are that in IE, the opacity does not display
> correctly and the borders do not extend down.
>
> Normally, the hover opacity will look slightly darker grey and you can see
> the background color of the <div class="mainNav">. In IE, you just see pure
> black. As a note, I use the same exact opacity rules for another element on
> my page and it works as expect in IE. There seems to be something specific
> here breaking it?
>
> The padding-bottom doesn't seem to work the way I want it to on the <div
> class="linkWrap">. I use the padding bottom here to extend the borders to
> reach down, but in IE they just cut off like there is no padding-bottom.
>
> Thanks,
> Rich
>
> PS.
>
> Here are the CSS rules related, hopefully not too ugly (the menuBar.jpg is
> just a black/grey gradient):
>
> .mainNav {
> height: 32px;
> background: url(images/customer/menuBar.jpg) repeat-y scroll center top
> #000;
> line-height: normal;
> border-bottom: solid 1px #000;
> border-top: solid 1px #b9b8b9;
> width: 100%;
> }
>
> .mainNav ul {
> list-style: none;
> text-align: center;
> padding: 10px 0px 0px 0px;
> margin: 0;
> }
>
> .mainNav ul li#selected strong {
> padding: 0 0.8em 0 0.7em;
> background: none;
> border: none;
> opacity: 1; /* CSS Standard */
>
> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* Newer IE */
> filter:alpha(opacity=100); /* Older IE */
> -moz-opacity: 1.0; /*older Mozilla*/
> -khtml-opacity: 1.0; /*older Safari*/
> color: #FFF;
> }
>
> .mainNav ul li#selected {
> padding: 10px 0 8px 0;
> background: #000;
> border: none;
> opacity: 0.4; /* CSS Standard */
>
> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* Newer IE */
> filter:alpha(opacity=40); /* Older IE */
> -moz-opacity: .40; /*older Mozilla*/
> -khtml-opacity: 0.4; /*older Safari*/
> }
>
>
> .mainNav ul #first {
> border-left: 1px solid #000;
> }
>
> .mainNav .linkWrap {
> border-right: 1px solid #000;
> display: inline;
> padding-top: 11px;
> padding-bottom: 8px;
> }
>
> .mainNav li {
> display: inline;
> padding: 10px 0 8px 0;
> font-size: 1.2em;
> }
>
> .mainNav li:hover {
> opacity: 0.2; /* CSS Standard */
>
> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20); /* Newer IE */
> filter:alpha(opacity=20); /* Older IE */
> -moz-opacity: .20; /*older Mozilla*/
> -khtml-opacity: 0.2; /*older Safari*/
> background: #000;
> }
>
> .mainNav a:visited, .mainNav a {
> color: #FFF;
> text-decoration: none;
> font-weight: bold;
> padding: 10px 0.8em 8px 0.7em;
> }
>
> .mainNav a:hover {
> opacity: 1; /* CSS Standard */
>
> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* Newer IE */
> filter:alpha(opacity=100); /* Older IE */
> -moz-opacity: 1.0; /*older Mozilla*/
> -khtml-opacity: 1.0; /*older Safari*/
> color: #F1F1F1;
> }
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Germán Martínez, UX Designer
http://martinez.pe
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
