Filter: alpha opacity not working in IE7

Anyone know what I’m doing wrong?

#splashbox Content {
background-color: #d1d1d1;
width: 660px;
height: 120px;
margin-top: 179px;
/* for IE /
filter: alpha(opacity=92);
/
CSS3 standard */
opacity: 0.92;
border-top: 1px solid #727272;
}

it’s working in FF and Opera.

Try putting it after the real opacity rule.

It’s also working in IE6 - 8 as it is.

Do you have a link to the problem page?

Footballexperts.net - All you need to beat the bookies! is the culprit

while we’re at it, dotted borders and rounded corners isn’t working - i’ll try some workarounds, but the weirdest thing of all is that the second <ol> in the left column (Belgium) gets indented in IE7 for some reason… it’s not indented in FF. it’s probably really obvious but i’m very new to css…

that didn’t work.

Contrary to what you say the filter opacity is actually showing in IE7 and 8 with no problem. You are probably viewing with a corrupt standalone or similar. I can see it working with no problem.

re round corners then IE only supports border radius from version 9 just released. All other IE versions don’t implement them.

The borders are missing as you have used grey (with an e) and IE understands gray (width an a) only. Better to use hex to be sure e.g. #ccc

For “belgium” it looks like you didn’t negate the left margin on the ul but you gave it a 100% width and therefore it is much to wide.


    width: 100%;
    margin-top: 3px;
    padding-left: 0px;
    font-weight: bold;
[B]    margin-left:0;[/B]
}

I would lose the global 100% width and then apply it on a case by case basis where needed.

On to more serious issues:

I’m afraid the code is completely broken in many places. There is a problem with the whole “Belgium” section and the html above:


    <ul>
        <img class="flag" src="flag.gif">Belgium
        <li><a href="kuk">EXQI League</li>
        <li>Jupiler Pro League</li>
        </A>
    </ul>

That is an invalid structure and a browser will have no clue how to render it at all. I can’t work out how it should be either especially with a closing anchor in no mans land.

All content in a list must be inside the list tags.

e.g.


    <ul>
        <li><img class="flag" src="flag.gif">Belgium</li>
        <li><a href="kuk">EXQI League</li>
        <li>Jupiler Pro League</li>
    </ul>

You can’t wrap anchors around block elements (except in html5 and even then it usually breaks something).


<a href="kuk">Primera Division
<li><a href="kuk">Bundesliga
<li><a href="kuk">Eredivisie
<li><a href="kuk">Ligue 1</li>
</A>


The list elements would need to be spans to be valid although you can change their display via css to look the same as before. However the anchors cannot be outside the list tags as mentioned before.

There are a lot of other errors in that page and do really need tidying up.:slight_smile:

Wow, thanks a lot for the input.

I was under the impression that you could use the content that was after the <ul> tag but before the <li> tag as a list header. That’s the problem with CSS/HTML being so forgiving I guess, you never get scolded for your mistakes. You are right ofcourse, there is a lot of sloppy code in there. It’s just an example page though, as you can see the links aren’t pointing anywhere or anything. I’ll fix it up immidiately though. Thanks a TON.

Glad it helped :slight_smile:

If you think of ul and li as similar in construct to tr and td you would never do this in a table.

<table>
<tr>
<a href=2#">
<td>content</td>
</a>
</tr>
</table>

All data in a table must be inside the opening td and closing td (or th and closing th). It’s the same with lists and all data must be inside the opening li and the closing li (including nested uls).

Yes the fact that browsers let you get away it some times is more a hindrance than a help because you never know when it might fail. If it was broken at the start you would know and then fix it before you moved on :slight_smile: