PDA

View Full Version : Hover Pulldown Menu & Transparent PNG



dzinr4001
03 Oct 2010, 10:55 AM
Hi Everyone
I'm new here and I was just browsing around the forum for someone who may have had the same problem as I have. Unfortunately I couldn't find it.

My FIRST problem is that I have a pull down menu where the hover effect disappears on the Safari browser. The pulldown menu is fine on Fire Fox and IE.

My SECOND problem is that in IE7, the back ground color of my PNG in the slide show appears white and not transparent. On other browsers (Safari, Firefox and IE8), they show up fine.


I hope someone can help me out with these 2 issues.

The URL is www . theclubti . com

Thanks in advance :-)

just incase if u need to see my css, you can grab it from either the source code in the url above and i'm also pasting it below here::: thanks again

====================================
@charset "UTF-8";
/* CSS Document */

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(images/jpg/wallpaper_color.jpg);
background-repeat:repeat;
}

h2 {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:18px;
color:#69C;
text-transform:uppercase;
font-weight:lighter;
letter-spacing:1px;
}

p {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
line-height:18px;
font-weight:lighter;
color:#9CF;
}

.copyright {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:18px;
color:#69C;
}


.list {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
line-height:18px;
color:#9CF;
}

td {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
line-height:18px;
color:#9CF;
}

a {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#FFF;
text-decoration:none;
}

a:hover {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#0CF;
}


.container {
background-image:url(images/jpg/wallpaper.jpg);
background-position:center;
background-position:top;
background-repeat:no-repeat;
/*background-attachment:fixed;*/
min-height:400px;
}

.main {
width:900px;
margin:auto;
}

.header {
width:900px;
height:116px;
position:relative;
}

.logo {
width:283px;
height:116px;
background-image:url(images/header/logo.png);
}

.collage {
width:900px;
height:480px;
position:relative;
}

.left_column {
width:681px;
float:left;
}

.right_column {
width:219px;
float:right;
}

.welcome {
width:681px;
height:48px;
background-image:url(images/header/welcome.png);
background-repeat:no-repeat;
}

.copy {
width:628px;
margin-left:18px;
}

.footer {
width:900px;
min-height:133px;
background-image:url(images/footer/footer_bg.jpg);
position:relative;
margin-top:30px;
margin-bottom:30px;
}

.footer_logo {
width:226px;
height:76px;
background-image:url(images/footer/the_club_logo.png);
position:absolute;
top:20px;
}

.footer_center {
width:340px;
min-height:50px;
position:absolute;
top:20px;
left:250px;
}

.email_subscribe_form_area {
width:270px;
min-height:50px;
position:absolute;
top: 20px;
left:600px;
}

.email_field {
color:#666;
background-image:url(images/footer/field_grad.jpg);
background-repeat:repeat;
border:none;
padding:5px 4px 4px 4px;
margin-top:3px;
margin-right:-1px;
}










































/* ------------------ Navigation --------------------------- */

ul.dropdown li:hover {
background-color: #eee;
color: #000;
}

.top_nav_bar {
height:30px;
text-transform:uppercase;
letter-spacing:0px;
position:absolute;
z-index:1000;
}

.membership_topnav {
display:block;
width: 145px;
height: 30px;
padding-top:6px;
background-image:url(images/navigation/membership.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
text-decoration:none;
float:left;
}

.membership_topnav:hover {
background-image:url(images/navigation/membership_on.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
}

.membership_topnav span {
display:inline;
}


.dining_topnav {
display: block;
width: 130px;
height: 30px;
padding-top:6px;
background-image:url(images/navigation/dining.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
text-decoration:none;
float:left;
}

.dining_topnav:hover {
background-image:url(images/navigation/dining_on.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
}

.dining_topnav span {
display:inline;
}


.activities_topnav {
display: block;
width: 133px;
height: 30px;
padding-top:6px;
background-image:url(images/navigation/activities.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
text-decoration:none;
float:left;
}

.activities_topnav:hover {
background-image:url(images/navigation/activities_on.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
}

.activities_topnav span {
display:inline;
}

.entertainment_topnav {
display: block;
width: 169px;
height: 30px;
padding-top:6px;
background-image:url(images/navigation/entertainment.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
text-decoration:none;
float:left;
}

.entertainment_topnav:hover {
background-image:url(images/navigation/entertainment_on.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
}

.entertainment_topnav span {
display:inline;
}

.event_planning_topnav {
display: block;
width: 156px;
height: 30px;
padding-top:6px;
background-image:url(images/navigation/event_planning.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
text-decoration:none;
float:left;
}

.event_planning_topnav:hover {
background-image:url(images/navigation/event_planning_on.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
}

.event_planning_topnav span {
display:inline;
}

.contact_topnav {
display: block;
width: 167px;
height: 30px;
padding-top:6px;
background-image:url(images/navigation/contact.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
text-decoration:none;
float:left;
}

.contact_topnav:hover {
background-image:url(images/navigation/contact_on.png);
background-repeat:repeat;
font-family:Gill Sans, Verdana, Geneva, sans-serif;
font-size:14px;
line-height:17px;
color:#FFF;
}

.contact_topnav span {
display:inline;
}

/* ------------------ END Navigation --------------------------- */











/* ------------------ Right Column Navigation --------------------------- */


ul#right-nav {
width:210px;
text-transform:uppercase;
font-weight:lighter;
letter-spacing:3px;
font:12px Verdana, Helvetica, sans-serif;
list-style-type: none;
white-space:nowrap;
color:#009999;
text-decoration:none;
margin-left:-28px;
}

ul#right-nav li {
display:block;/*display:inline for horizontal design*/
margin-top:20px;
border-bottom: 1px solid #069;
color:#009999
/*padding-left:9px;
padding-right:2px;
border-left: 1px solid #fff;*/ /*for horizontal design style*/
}

ul#right-nav li.first {
display:block;/*display:inline for horizontal design*/
/*padding-left:5px;
padding-right:5px;
border-left: 0px solid #000;*/
}

ul#right-nav li a {
color:#009999;
text-decoration:none;
display:block; /*display:inline for horizontal design*/
}

ul#right-nav li a:hover {
color:#CCC;
}

/* ------------------ END Right Column Navigation --------------------------- */


/* ------------------ Member Login --------------------------- */
ul#member_login {
width:210px;
position:absolute;
top:-5px;
left:670px;
text-transform:uppercase;
font-weight:lighter;
letter-spacing:3px;
font:10px Verdana, Helvetica, sans-serif;
list-style-type: none;
white-space:nowrap;
color:#9CF;
text-decoration:none;
margin-left:-28px;
z-index:1000;
}

ul#member_login li {
display:block;/*display:inline for horizontal design*/
margin-top:20px;
border-bottom: 1px solid #6CC;
color:#9CF;
/*padding-left:9px;
padding-right:2px;
border-left: 1px solid #fff;*/ /*for horizontal design style*/
}

ul#member_login li.first {
display:block;/*display:inline for horizontal design*/
/*padding-left:5px;
padding-right:5px;
border-left: 0px solid #000;*/
}

ul#member_login li a {
color:#009999;
text-decoration:none;
display:block; /*display:inline for horizontal design*/
}

ul#member_login li a:hover {
color:#CCC;
}