Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Transparency Mouse over menus - Opera Problems, HELP!! - Solved(ish)

    Hi, I have a weird problem, I have never come across this before, but here are the main problems

    I have a vertical css switch menu which has transparencies on the mouse overs, the problems are:

    - The Boxes seem to pick their own width even though I have set them to be 196px, they still overflow into my main page,

    and

    - The last letters of the main headings words do not show up! here is my code:


    CSS CODE

    #masterdiv{
    width:196px
    }


    .menutitle {
    color: #000000;
    height: 17px;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:#ffffff;
    opacity:0.5;
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    margin-left:1px;
    margin-right:1px;
    padding-right:10px;
    padding-top:1px;
    padding-bottom: 1px;
    border:1px solid #ffffff;
    display:block;
    text-decoration: none;
    text-align:right;
    cursor: pointer;
    border-bottom:1px solid #000000;
    font-weight:bold;
    }



    .menutitle:hover{
    background-color:#ffffff;
    padding-right:10px;
    padding-top:1px;
    padding-bottom: 1px;
    border-bottom:1px dashed #000000;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 17px;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor: pointer;
    font-weight:bold;
    }

    .submenu{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    padding-left: 0px;
    padding-right:0px;
    margin: 0px;
    text-decoration: none;
    width:100%;
    }



    .submenu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    width:100%;
    }

    .submenu li
    {
    border-bottom: 1px solid #ffffff;
    margin: 0;
    width:100%;
    }

    .submenu li a
    {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #C0C0C0;
    border-right: 10px solid #CDCBCB;
    background-color: #DBDBDB;
    color: #000000;
    text-decoration: none;
    width: 100%;
    }

    .submenu li a:hover
    {
    border-left: 10px solid #808080;
    border-right: 10px solid #808080;
    background-color: #CDCBCB;
    color: #000000;
    opacity:0.5;
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    width:100%;
    }



    HTML CODE
    <div class="menutitle" onclick="SwitchMenu('sub1')">Company</div>
    <span class="submenu" id="sub1">
    <ul>
    <li> <a href="aboutus.php" >About Us</a></li>
    <li> <a href="news.php" >Company News</a></li>
    <li> <a href="people.php" >People</a></li>
    <li> <a href="premises.php" >Location</a></li>
    <!-- <li><a href="testimonials.php" >Testimonials</a></li> -->
    <!-- <li> <a href="publications.php">Publications</a></li> -->
    </ul></span>

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh nd before someone says I have noticed the missing ; after the masteridv width, its not the problem, anybody got any pointers? I am desperate!

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    OK, I Fixed the problem with the width, the weird only some letters showing up thing is still going on, I can only assume it has something to do with Transparency?

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Would be easier if we could see the problem,, u got a link to a url or anything?

    Try putting in a justify value
    Visit http://www.UpsetPC.com for all your computer support needs!

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sure the sites not finished so ill post a cap of it. Ill show you how it looks in FF, and then in Opera, I dont have IE so I dont know how the text looks in it :S


  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have you tried validating the css and html in the w3c validator, that tends to fix a lot of issues :

    http://validator.w3.org/#validate_by_input - html

    and

    http://jigsaw.w3.org/css-validator/#validate-by-input - css
    Visit http://www.UpsetPC.com for all your computer support needs!

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah most of my CSS and all my HTML validates, I got some errors, such as using opasity commands, they are browser dependent and so dont validate Even though they work on all browsers :S Its mentalness this is,

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a browser detect code, or browser only code for opera, in which case make a hacks.css?
    Visit http://www.UpsetPC.com for all your computer support needs!

  • #9
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i am not really sure, im totally bored of this problem now, it seems like its just being awkward to spite me!

  • #10
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    There are two types of conditional hacks that you can use, and because they only apply to I.E you can only have them work only with I.E, or only not with I.E. There aren't any specific to Opera. However, this problem with text missing has been noted before. One of B-Wiz's sites was having the same problem with his headings, whereby a few of the characters had vanished, but everything appeared where it should? I'm currently looking for something that might help you
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #11
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yeah that is exactally what happens, it doesnt matter what font, or what font size i use it is always missing in the same place. It is to do with the transparency, by which i mean removing the transparency removes the problem, but the sub links in my menu are also transparent and do not have the same problem! This is what happens when you try to make things nice and fancy, everything goes wrong!

  • #12
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Hmmm strange. I'd like to point out that when you set the hover state of anything it takes on the not hovered attributes and adds anything that you tell it to so a lot of the code you posted above is redundant, such as:

    Code:
    .menutitle {
    color: #000000;
    height: 17px;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:#ffffff;
    opacity:0.5;
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    margin-left:1px;
    margin-right:1px;
    padding-right:10px;
    padding-top:1px;
    padding-bottom: 1px;
    border:1px solid #ffffff;
    display:block;
    text-decoration: none;
    text-align:right;
    cursor: pointer;
    border-bottom:1px solid #000000;
    font-weight:bold;
    }
    
    
    
    .menutitle:hover{
    background-color:#ffffff;
    padding-right:10px;
    padding-top:1px;
    padding-bottom: 1px;
    border-bottom:1px dashed #000000;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 17px;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor: pointer;
    font-weight:bold;
    }
    Could be:

    Code:
    .menutitle {
    color: #000000;
    height: 17px;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:#ffffff;
    opacity:0.5;
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    margin: 0 1px;
    padding: 1px 10px 1px 0;
    border:1px solid #ffffff;
    display:block;
    text-decoration: none;
    text-align:right;
    cursor: pointer;
    border-bottom:1px solid #000000;
    font-weight:bold;
    }
    
    
    
    .menutitle:hover{
    border-bottom:1px dashed #000000;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #13
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yeah i know, thats my test css, its a complete mess, i was going to change stuff but i forgot and left it in :S

  • #14
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I also have this line too which i forgot to add

    html>body #navcontainer li a { width: auto; }

  • #15
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Try playing with the z-index of the parts where the text is missing. The only thing I've been able to find seems to relate to Opera having display issues with z-indexes and opacity?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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