SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Try putting it after the real opacity rule.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luegofuego View Post
    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.
    It's also working in IE6 - 8 as it is.

    Do you have a link to the problem page?

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Try putting it after the real opacity rule.
    that didn't work.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luegofuego View Post
    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...
    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.

    Code:
        width: 100%;
        margin-top: 3px;
        padding-left: 0px;
        font-weight: bold;
        margin-left:0;
    }
    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:


    Code:
        <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.
    Code:
        <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).

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

  7. #7
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luegofuego View Post
    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

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •