HighDots Forums  

opacity and IE

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss opacity and IE in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Amer Neely
 
Posts: n/a

Default opacity and IE - 08-26-2007 , 06:28 PM






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?

--
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 With Quote
  #2  
Old   
Nik Coughlin
 
Posts: n/a

Default Re: opacity and IE - 08-26-2007 , 08:29 PM






Amer Neely wrote:
Quote:
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?
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 With Quote
  #3  
Old   
Amer Neely
 
Posts: n/a

Default Re: opacity and IE - 08-26-2007 , 09:08 PM



Nik Coughlin wrote:
Quote:
Amer Neely wrote:
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?

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;
}


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>


--
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 With Quote
  #4  
Old   
Nik Coughlin
 
Posts: n/a

Default Re: opacity and IE - 08-26-2007 , 10:38 PM



Amer Neely wrote:
Quote:
Nik Coughlin wrote:
Amer Neely wrote:
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?

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;
}



Presumptuous of you to assume I hadn't.
My apologies then.

Quote:
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
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>
<!--[if lte IE 7]>
<style type="text/css">
..nav_current
{
filter: alpha(opacity=50);
height: 1%;
}
</style>
<![endif]-->
<p class="nav_current">Home</p>




Reply With Quote
  #5  
Old   
Jukka K. Korpela
 
Posts: n/a

Default Re: opacity and IE - 08-27-2007 , 12:53 AM



Scripsit Nik Coughlin:

Quote:
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;
}


Presumptuous of you to assume I hadn't.

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.

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

Seems to be some variant of the HasLayout bug.
Probably.

Quote:
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.

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



Reply With Quote
  #6  
Old   
Amer Neely
 
Posts: n/a

Default Re: opacity and IE - 08-27-2007 , 05:59 AM



Jukka K. Korpela wrote:
Quote:
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
do: .nav_current
{
filter: alpha(opacity=50);
opacity:.5;
}


Presumptuous of you to assume I hadn't.

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.

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.

--
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 With Quote
  #7  
Old   
Amer Neely
 
Posts: n/a

Default Re: opacity and IE - 08-27-2007 , 06:55 AM



Amer Neely wrote:
Quote:
Jukka K. Korpela wrote:
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
do: .nav_current
{
filter: alpha(opacity=50);
opacity:.5;
}


Presumptuous of you to assume I hadn't.

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.


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.

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

--
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 With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.