opacity and IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Amer Neely - 26 Aug 2007 23:28 GMT

I have a p tag defined as
.nav_current
{
opacity:.5;
}

which works fine in Mozilla, but IE doesn't act on it. Any way to get it
to work?

Signature

Amer Neely
w: www.webmechanic.softouch.on.ca/
Perl | MySQL programming for all data entry forms.
"Others make web sites. We make web sites work!"

Reply to this Message

Nik Coughlin - 27 Aug 2007 01:29 GMT

> I have a p tag defined as
> .nav_current
[quoted text clipped - 4 lines]
> which works fine in Mozilla, but IE doesn't act on it. Any way to get
> it to work?

If you had bothered to try doing a Google search for the terms "ie" and
"opacity" the first result would have told you that you need to do:

.nav_current
{
filter: alpha(opacity=50);
opacity:.5;
}

Reply to this Message

Amer Neely - 27 Aug 2007 02:08 GMT

>> I have a p tag defined as
>> .nav_current
[quoted text clipped - 13 lines]
> opacity:.5;
> }

Presumptuous of you to assume I hadn't.

I have the old Mandarin Design code as well, and it still doesn't want
to work. I've tried inline CSS as well as an external file.

.nav_current
{
    color:black;
    background-color:#9CCFC8;
    filter:alpha(opacity=50);
    opacity:.5;
    -moz-opacity:.50;
}

<p class="nav_current">Home </p>

Signature

Amer Neely
w: www.webmechanic.softouch.on.ca/
Perl | MySQL programming for all data entry forms.
"Others make web sites. We make web sites work!"

Reply to this Message

Nik Coughlin - 27 Aug 2007 03:38 GMT

>>> I have a p tag defined as
>>> .nav_current
[quoted text clipped - 14 lines]
>
> Presumptuous of you to assume I hadn't.

My apologies then.

> I have the old Mandarin Design code as well, and it still doesn't want
> to work. I've tried inline CSS as well as an external file.
[quoted text clipped - 9 lines]
>
> <p class="nav_current">Home </p>

Seems to be some variant of the HasLayout bug.

Can be fixed with Holly hack:

<style type="text/css">
.nav_current
{
color: black;
background-color: #9CCFC8;
opacity: 0.5;
}
</style>

<p class="nav_current">Home</p>

Reply to this Message

Jukka K. Korpela - 27 Aug 2007 05:53 GMT

Scripsit Nik Coughlin:

>>> If you had bothered to try doing a Google search for the terms "ie"
>>> and "opacity" the first result would have told you that you need to
[quoted text clipped - 7 lines]
>
> My apologies then.

There was no need for your apology, since the OP explicitly specified CSS
code that does not contain the IE-specific code, so it was quite logical to
assume ignorance.

>> <p class="nav_current">Home </p>
>
> Seems to be some variant of the HasLayout bug.

Probably.

> Can be fixed with Holly hack:

...

> height: 1%;

With the given information, there's no need to use the tricky version that
illogically sets the height to 1% and relies on the browser implementing it
against the CSS specifications. To give an element "layout" in the odd IE
sense, you can also set its width, and here you could set just width: 100%.
This has the same effect as the default width of auto, in the absence of
other styling, and no other styling was referred to.

It looks odd to call the string "Home " a paragraph, as the OP's markup
does, and maybe it's not the real markup. But the real markup, and the real
CSS code, was not revealed.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Amer Neely - 27 Aug 2007 10:59 GMT

> Scripsit Nik Coughlin:
>
[quoted text clipped - 35 lines]
> does, and maybe it's not the real markup. But the real markup, and the
> real CSS code, was not revealed.

The markup is real, but you may have something. I should have included
more context. This is contained in a div...

<div class="column-left">
<p class="nav_current">Home </p>

.column-left
{
    font-family:verdana,helvetica,arial;
    color: #000;
    float:left;
    width:25%;
    background-color:#9CCFC8;
    height:100%;
    padding:15px 0px 15px 15px;
    border: 3px solid #000;
}

which is contained in ...
body
{
    border: 0px;
    color:#000;
    font-family:verdana,helvetica,arial;
    font-size:14px;
    margin-top:0px;
    background-color: #D6ECFA;
}

My understanding is that inline code has top priority, and I've tried
inline code for this without success.

Signature

Amer Neely
w: www.webmechanic.softouch.on.ca/
Perl | MySQL programming for all data entry forms.
"Others make web sites. We make web sites work!"

Reply to this Message

Amer Neely - 27 Aug 2007 11:55 GMT

>> Scripsit Nik Coughlin:
>>
[quoted text clipped - 67 lines]
> My understanding is that inline code has top priority, and I've tried
> inline code for this without success.

I've changed my approach. I'm just going to use
.nav_current
{
color: #5C5C5C;
}

Signature

Amer Neely
w: www.webmechanic.softouch.on.ca/
Perl | MySQL programming for all data entry forms.
"Others make web sites. We make web sites work!"

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007

opacity and IE