...

View Full Version : CSS Transparency Mouse over menus - Opera Problems, HELP!! - Solved(ish)



littlemiss
08-07-2007, 02:31 PM
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>

littlemiss
08-07-2007, 03:31 PM
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!

littlemiss
08-07-2007, 03:48 PM
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?

AndyArmstrong
08-07-2007, 03:52 PM
Would be easier if we could see the problem,, u got a link to a url or anything?

Try putting in a justify value

littlemiss
08-07-2007, 03:59 PM
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

http://img167.imageshack.us/img167/2640/menalmenurf8.jpg

AndyArmstrong
08-07-2007, 04:03 PM
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

littlemiss
08-07-2007, 04:09 PM
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,

AndyArmstrong
08-07-2007, 04:13 PM
Is there a browser detect code, or browser only code for opera, in which case make a hacks.css?

littlemiss
08-07-2007, 04:39 PM
i am not really sure, im totally bored of this problem now, it seems like its just being awkward to spite me!

ahallicks
08-07-2007, 04:52 PM
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

littlemiss
08-07-2007, 04:54 PM
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!

ahallicks
08-07-2007, 04:59 PM
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:



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



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

littlemiss
08-07-2007, 05:01 PM
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

littlemiss
08-07-2007, 05:01 PM
I also have this line too which i forgot to add

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

ahallicks
08-07-2007, 05:09 PM
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?

littlemiss
08-07-2007, 05:18 PM
thanks I will try that, this is totally crazy this whole thing :S

littlemiss
08-07-2007, 05:24 PM
ok i have changed the z-indexes and tried different things, and still no change. any other ideas?

ahallicks
08-07-2007, 05:40 PM
I'm stumped??

*waits for someone clever to come along*

littlemiss
08-07-2007, 05:40 PM
lol i thought u were someone clever! lol, thanks for all your help, this is just one freaky problem!

ahallicks
08-07-2007, 05:46 PM
I think you may well find that, at the moment it is simply an Opera Bug that hasn't been fixed yet, and won't be until the next version is out. I've looked for a bug fix for a while now and haven't come across anything. I know that Opera has a problem with ThickBox where, on closing the window, colour is left at the top and bottom of the screen. But that is fixed simply with a width of 101% to create a scroll bar. I don't think that would work in your case unfortunately



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum