Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I have boxes with some content but not all text is displayed. On click I toggle all the text but the problem is I don't want the bottom element to move, instead I want the toggled div to be on top of the bottom element. Would anyone help with ideas how to do this? Thank you.
Ps. Also, for some reason the transition/animation doesn't work.
Here is a link to codepen: https://codepen.io/christmastrex/pen/gOwGvap and here is my code:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
------------------------------------------------------------
.card {
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74,74,74,.3);
&__toggle {
overflow: hidden;
max-height: 55px;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after{
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all .3s ease-in-out;
}
}
&.active {
.card__toggle {
max-height: 700px;
transition: all .3s ease-in-out;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
-----------------------------------------------------
$(document).ready(function() {
$(".js-toggle").on("click", function () {
$(".card__header.active").not($(this)).removeClass("active").next(".js-card-toggle").slideUp("slow");
$(this).toggleClass("active").next(".js-card-toggle").slideToggle("slow");
$(this).closest(".card").toggleClass("active").siblings().removeClass("active");
});
});```
I think you are trying to achieve this, copy it and see if it works.
HTML:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
<p>
Doing resistance training and cardio combined and I have not lost one
single ounce on the scale….I was feeling horribly frustrated being it has
been a month so I decided to do a progress sequence and wth look at me
now!! It’s not about weight, it’s about how your body changes when you eat
right and exercise! Yay!!”
</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
Doing resistance training and cardio combined and I have not lost one single
ounce on the scale….I was feeling horribly frustrated being it has been a
month so I decided to do a progress sequence and wth look at me now!! It’s
not about weight, it’s about how your body changes when you eat right and
exercise! Yay!!”
</div>
</div>
SCSS:
.
card {
max-height: 125px;
overflow: hidden;
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
height: 150px;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
transition: 0.4s ease;
&.active {
max-height: 210px;
}
&__toggle {
background-color: white;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
.card__toggle {
transition: all 0.3s ease-in-out;
width: 100%;
z-index: 1;
background-color: white;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
jQuery:
$(".js-toggle").click(function () {
console.log($(this).parents(".card"));
$(this).parents(".card").toggleClass("active");
});
I managed to do find a solution after all.. I made changes to the css only
background-color: #fff;
max-width: 490px;
padding: 20px;
margin: 0 auto 70px auto;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
&::after {
content: "";
position: absolute;
height: 20px;
background-color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
bottom: -40px;
left: 0;
z-index: 10;
width: 100%;
box-shadow: 0 10px 20px -7px rgba(74, 74, 74, 0.3);
transition: all 0.3s ease-in-out;
transition-delay: 0.5s;
}
&__toggle {
overflow: hidden;
max-height: 45px;
position: absolute;
z-index: 1;
background-color: #fff;
margin-left: -20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 5px;
box-shadow: 0 10px 15px -12px rgba(74, 74, 74, 0.3);
transition: all 1s ease-in-out;
p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.3;
}
&-s {
max-height: 18px;
}
}
&--s {
max-width: 350px;
}
&__img {
border: 5px solid #d54f80;
border-radius: 5px;
padding: 5px 5px 1px 5px;
margin-bottom: 20px;
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
&.card::after {
background-color: transparent;
transition: all 0s ease-in-out;
}
.card__toggle {
max-height: 700px;
}
.card__header {
&::after {
background-color: #fff;
color: pink;
transform: rotate(180deg);
}
}
}
}
I am trying to implement button I took from codepen on my existing "box-list" div.
But in my form the button gets fathers background and I cant perform my original button blue background as it should be.
On the bottom of the page you can see the button outside the "box-list" how it should look.
<link rel="stylesheet" type="text/css" href="style.css">
<div class="box-list">
<!-- FREE TEXT BOX -->
<div class="box" >
<div class="box__inner">
<h1>Free Text</h1>
Get you free text processed and analyzed, and get opinion summery about.
<button class="analyzeBtn mybtn1" >hover</button>
</div>
</div>
<!-- TWITTER BOX -->
<div class="box" >
<div class="box__inner">
<h1>Twitter Search</h1>
Get Twitter post and comments about any subject you choose and analyze the dat
</div>
</div>
<div class="box" >
<div class="box__inner">
<h1>URL</h1>
Get your URL article analyzed
</div>
</div>
</div>
<button class="analyzeBtn mybtn1" >hover</button>
.box-list {
background: #119bc9;
overflow: hidden;
display: flex;
}
.box {
min-height: 300px;
color: #fff;
transition: all 0.5s;
max-height: 300px;
background-image: url('http://lorempixel.com/400/300/sports');
background-size: cover;
width: 33.33%;
}
.box__inner {
padding: 20px;
min-height: 300px;
background-color: rgba(17, 155, 201, 0.7);
}
.box:hover {
width: 150%!important;
font-size: 18px;
}
.box:nth-child(odd) {
background-image: url('/images/text.jpg');
}
.box:nth-child(odd) .box__inner{
background: rgba(71, 83, 157, 0.8);
}
.analyzeBtn {
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
margin: 10px;
transition: 0.8s;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
}
.mybtn1 {
color: #fff;
}
.mybtn1:hover {
color: #3498db;
transform: translateY(-7px);
transition: 0.4s;
}
.analyzeBtn::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.6s;
}
.mybtn1::before {
top:0;
border-radius: 0 0 50% 50%;
height: 180%;
}
.mybtn1:hover::before {
height: 0%;
}
JSfiddle example
You need to add z-index: 1; to the button so that it is displayed on top of the backgrounds:
.analyzeBtn {
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
margin: 10px;
transition: 0.8s;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
z-index: 1;
}
I don't have much experience with HTML and CSS. I've got some problems with aligning my div content. The text (Oculus Rift, Next-generation Virtual Reality) has to be in line with de mouse scroll button, in the bottom right. But the text overlaps the div above (my sticky header). I just can't get it to work. I've hosted the site over here. I want it to look like this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<meta name = "keywords" content = "InGadget | Dé site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is dé site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">
<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector(".navbar");
if (distanceY > shrinkOn) {
classie.add(header,"scroll");
} else {
if (classie.has(header,"scroll")) {
classie.remove(header,"scroll");
}
}
});
}
window.onload = init();
</script>
<script>
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
</script>
</head>
<body>
<div class="navbar">
<div class="container clearfix">
<a id="logo" href="index.html"></a>
<div class="nav">
Home
Nieuws
Forum
Things I ❤
Contact
</div>
</div>
</div>
<div class="header">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
<div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="section1">
Placeholder
</div>
</body>
</html>
CSS:
/* BASICS */
#font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
#font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
/* NAVBAR */
.navbar {
width: 100%;
height: 150px;
position: fixed;
z-index: 999;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-ms-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo.png) no-repeat;
background-size: contain;
float: left;
}
.scroll #logo {
background-image: url(images/logo2.png);
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.nav a:hover {
text-decoration: underline;
}
/* STICKY NAVBAR */
.navbar.scroll {
background-color: #ffffff;
height: 75px;
}
.navbar.scroll#logo {
width: 140px;
height: 140px;
background: transparent url(images/logo2.png) left top no-repeat;
}
.navbar.scroll .nav a {
color: #000000;
line-height: 75px; }
/* SECTIONS */
.header {
background:
linear-gradient(to top right,
rgba(255, 65, 54, 0.5),
rgba(24, 0, 255, 0.5)
),
url(nieuws/VR/images/oculusrift.jpg) fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
}
.section1 {
margin-top: 20px;
background-color: #f2f2f2;
height: 500px;
}
/* MOUSE ICON */
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
}
.mouse-icon .wheel {
-webkit-animation-name: scrolling;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-name: scrolling;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}
.mouse-icon .wheel {
border-radius: 10px;
background: #ffffff;
width: 6px;
height: 10px;
top: 4px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#-webkit-keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
#keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
Put the 'header-content' div inside another div with class 'header-content-container' and add this CSS:
.header-content-container {
position: absolute;
bottom: 0;
width: 100%;
}
.header-content h1{
position: absolute;
right: 20px;
bottom: 20px;
}
.mouse-icon {
position: absolute;
left: 20px;
bottom; 20px;
}
You need to position the h1 and mouseicon absolute to the bottom
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
position: absolute;
left: 10px;
bottom; 10px;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
position: absolute;
right: 10px;
bottom; 10px;
}
.header {
position:relative;
}
.header-content {
position: absolute;
bottom: 0;
right: 45px;
}
Use these styles along with your other css styles. Please Let me know if you have any other requirement.
Something like that: https://jsfiddle.net/qs1qyL9c/
.header-content {
width: 80%;
margin: auto;
position:absolute;
bottom:0;
}
I have a CSS menu for a website I'm working on. I've tweaked it to the point where it does exactly what I want it to do on Firefox, Chrome, and an old version of Safari. However, in the newest version of Safari (6.0.2 on Lion), something weird happens. If I let the page load completely and then hover over the menu, the menu functionality does not work. However, if I hover over the menu while the page is loading, it works just fine! This was driving me crazy until I figured out the pattern. Well, it's still driving me crazy I suppose. This errant behavior seems to affect only the newest Safari and I cannot figure out how to fix it. I've tried commenting out other CSS files that I've thought might be conflicting with it. The problem probably relates to the fact that I'm using iWeb to generate the initial HTML and then I'm editing the HTML to add the menu and editing the CSS to add the menu functions & styling.
I'm actively working on the code, so this page will likely change, but here is the page I'm having problems with (with my edits). Note, many of the menu items don't have pages made for them yet:
http://rhythmshuffle.com/dev/2013/robversion1/RS2013/About.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
<meta name="viewport" content="width=960" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Generator" content="iWeb 3.0.4" />
<meta name="iWeb-Build" content="local-build-20130209" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=960" />
<title>About</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="About_files/About.css" />
<!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='About_files/AboutIE.css'/><![endif]-->
<!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
<style type="text/css">
/*<![CDATA[*/
#import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"> </script>
<script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="About_files/About.js"></script>
</head>
<body style="background: rgb(125, 133, 135); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: rgb(165, 183, 156); text-align: left; width: 960px; " id="body_content">
<div style="float: left; margin-left: 0px; position: relative; width: 960px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 960px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 960px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 11px; width: 648px; height: 0px; left: 272px; position: absolute; top: 81px; width: 648px; z-index: 1; " class="tinyText shadow_0">
<div style="position: relative; width: 648px; ">
<img src="About_files/shapeimage_1.jpg" alt="" style="height: 11px; left: 0px; margin-top: -5px; position: absolute; top: 0px; width: 648px; " />
</div>
</div>
<div style="height: 245px; width: 199px; height: 245px; left: 41px; position: absolute; top: 639px; width: 199px; z-index: 1; " class="tinyText style_SkipStroke stroke_0" id="id1">
<img src="About_files/spiralonly.png" alt="" style="border: none; height: 245px; width: 200px; " />
</div>
<div style="height: 437px; width: 356px; height: 437px; left: 582px; position: absolute; top: 77px; width: 356px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 356px; ">
<img src="About_files/shapeimage_2.png" alt="" style="height: 437px; left: 0px; position: absolute; top: 0px; width: 356px; " />
</div>
</div>
<div style="height: 50px; width: 462px; height: 50px; left: 504px; position: absolute; top: 922px; width: 462px; z-index: 1; " class="tinyText style_SkipStrokeSkipFillSkipOpacity shadow_1">
<div style="position: relative; width: 462px; "></div>
</div>
<div id="id2" style="height: 371px; left: 0px; position: absolute; top: 898px; width: 960px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_shape_layout_style_default_External_960_371" style="padding: 0px; ">
<div class="graphic_shape_layout_style_default"></div>
</div>
</div>
<div class="tinyText" style="height: 75px; left: 589px; position: absolute; top: 901px; width: 364px; z-index: 1; ">
<img usemap="#map1" id="shapeimage_3" src="About_files/shapeimage_3.png" style="border: none; height: 82px; left: -6px; position: absolute; top: -4px; width: 374px; z-index: 1; " alt="brought to you by SwingBuffalo.com
winner of Buffalo Spree’s 2011
“Best Dance Lessons”" title="" /><map name="map1" id="map1"><area href="http://SwingBuffalo.com/" title="http://SwingBuffalo.com/" onmouseover="IMmouseover('shapeimage_3', '0');" alt="http://SwingBuffalo.com/" onmouseout="IMmouseout('shapeimage_3', '0');" shape="rect" coords="252, 8, 366, 28" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" /></map><img style="height: 20px; left: 246px; position: absolute; top: 4px; width: 114px; " id="shapeimage_3_link_0" alt="shapeimage_3_link_0" src="About_files/shapeimage_3_link_0.png" />
</div>
<div style="height: 164px; width: 164px; height: 164px; left: 57px; position: absolute; top: 4px; width: 164px; z-index: 1; " class="tinyText style_SkipStroke_2 stroke_0">
<img src="About_files/RS_Logo_small.png" alt="" style="border: none; height: 164px; width: 164px; " />
</div>
<div style="height: 7px; width: 969px; height: 0px; left: -4px; position: absolute; top: 880px; width: 969px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 969px; ">
<img src="About_files/shapeimage_4.jpg" alt="" style="height: 7px; left: 0px; margin-top: -3px; position: absolute; top: 0px; width: 969px; " />
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 344px; left: 15px; opacity: 1.00; position: absolute; top: 906px; width: 607px; z-index: 1; ">
<script type="text/javascript"><!--//--><![CDATA[//><!--
var widget0_htmlMarkupURL = ".//About_files/widget0_markup.html";//--><!]]></script>
<div id="widget0-htmlRegion" class="html_region_widget"></div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});//--><!]]></script>
<div id="id3" style="height: 649px; left: 63px; position: absolute; top: 195px; width: 835px; z-index: 1; " class="style_SkipStroke_3 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_835_649" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style">Rhythm Shuffle 2013 is <a class="class1" title="http://SwingBuffalo.com/" href="http://SwingBuffalo.com/">Swing Buffalo’s</a> sixth annual swing dance workshop. Our goal is to spread the pure fun and enjoyment of historical forms of swing dance known as <a onclick="window.open(this.href); return false;" title="http://www.lindycircle.com/history/lindy_hop/" href="http://www.lindycircle.com/history/lindy_hop/" onkeypress="window.open(this.href); return false;">Lindy Hop</a> and <a onclick="window.open(this.href); return false;" title="http://www.lindycircle.com/history/balboa/" href="http://www.lindycircle.com/history/balboa/" onkeypress="window.open(this.href); return false;">Balboa</a>, dances straight from the swing era. Each year, we bring in some of the world’s top swing dance <a title="Instructors.html" href="Instructors.html">instructors</a> and hire some of the greatest swing bands to attract locals and out of town visitors alike to learn and dance with one another.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">By signing up, you will enjoy a weekend of thoughtful learning from helpful, non-threatening, and down to earth <a title="Instructors.html" href="Instructors.html">instructors</a>; dances like they had in the old days that are full of energy, improvisation, and playfulness; bands that will take you back to the 20’s, <span class="style">30</span>’s, and 40’s; blues parties; and DJ’s that’ll make you get up on your feet and onto the dance floor.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">We will also have a vintage vendors on hand for you to shop for the perfect swing attire so you can go to get your <a title="http://LindyFix.com/" href="http://LindyFix.com/">Lindy Fix</a> in style. Sit down to a Sunday lunch with a historical roundtable discussion on a swing-era topic. This year's topic is the Crystal Ballroom and the ships, the Americana and Canadiana (with dance floors) which brought dancers there.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">Each year, our workshop gets bigger and better. Swing Buffalo, as a community organization, works hard to provide the best experience possible at the cheapest price possible. As a community, we work hard all year round to make this event something we can be proud of. In doing so, we hope to inspire and excite you and show you how much better the world could be if we all just learned to swing out.<br /></p>
<p class="paragraph_style"><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style">- The Rhythm Shuffle Team</p>
</div>
</div>
</div>
<div style="height: 65px; width: 232px; height: 65px; left: 668px; position: absolute; top: 125px; width: 232px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 232px; ">
<img src="About_files/shapeimage_5.png" alt="About" style="height: 33px; left: 0px; margin-left: 118px; margin-top: 17px; position: absolute; top: 0px; width: 109px; " />
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 186px; left: 228px; opacity: 1.00; position: absolute; top: 1px; width: 731px; z-index: 1; ">
<blockquote><div id='cssmenu'>
<ul>
<li class='has-sub'>About</span>
<ul>
<li>About Rhythm Shuffle</span></li>
<li>About Balboa</span></li>
<li>About Lindy Hop</span></li>
<li>Competitions</span></li>
<li>Directions</span></li>
<li>Music</span></li>
<li class='has-sub'>Previous Years</span>
<ul>
<li>2012</span></li>
<li>2011</span></li>
<li>2010</span></li>
<li>2009</span></li>
<li class='last'>2008</span></li>
</ul>
</li>
<li>Pricing</span></li>
<li>Schedule</span></li>
<li>Vendors</span></li>
<li class='last'>Venues</span></li>
</ul>
</li>
<li class='has-sub'>Classes</span>
<ul>
<li>Dance Classes</span></li>
<li>Panel Discussion</span></li>
<li>Instructors</span></li>
<li>Schedule</span></li>
<li class='last'>Directions</span></li>
</ul>
</li>
<li class='has-sub'>Dances</span>
<ul>
<li>Social Dances</span></li>
<li><a href='Competitions.html'><span style="font-family: 'Oswald'; font-size:18px";>Competitions</span></a></li>
<li>Schedule</span></li>
<li class='last'>Directions</span></li>
</ul>
</li>
<li class='has-sub'>Register</span>
<ul>
<li>Register</span></li>
<li>Housing</span></li>
<li>Pricing</span></li>
<li class='last'>Discounts</span></li>
</ul>
</li>
<li class='last'>Contact</span></li>
</ul>
</div>
</blockquote>
</div>
<div style="height: 1270px; line-height: 1270px; " class="spacer"> </div>
</div>
<div style="height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 960px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>
and here's the CSS with my edits:
http://rhythmshuffle.com/dev/2013/robversion1/RS2013/About_files/About.css
.style_SkipStroke_2 {
background: transparent;
opacity: 1.00;
}
.paragraph_style {
color: rgb(242, 234, 196);
font-family: 'TrebuchetMS', 'Trebuchet MS', sans-serif;
font-size: 18px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 25px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: justify;
text-decoration: none;
text-indent: 0px;
text-transform: none;
}
.style {
color: rgb(247, 239, 202);
line-height: 25px;
opacity: 1.00;
}
.style_SkipStroke_3 {
background: transparent;
opacity: 1.00;
}
.style_SkipStrokeSkipFillSkipOpacity {
}
.style_SkipStroke {
background: transparent;
opacity: 0.25;
}
.style_SkipStroke_1 {
background: transparent url(backgroundimage_1.jpg) no-repeat scroll center center;
opacity: 1.00;
}
.Body {
color: rgb(88, 77, 77);
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 15px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
text-transform: none;
}
.graphic_image_style_default_SkipStroke {
background: transparent;
opacity: 1.00;
}
.graphic_shape_layout_style_default_External_960_371 {
position: relative;
}
.graphic_shape_layout_style_default {
padding: 4px;
}
.graphic_shape_style_default_SkipStroke {
background: rgb(255, 255, 255);
opacity: 1.00;
}
.graphic_textbox_layout_style_default_External_835_649 {
position: relative;
}
.graphic_textbox_layout_style_default {
padding: 4px;
}
.graphic_textbox_style_default_SkipStroke {
background: transparent;
opacity: 1.00;
}
.graphic_textbox_style_default_SkipStrokeSkipFillSkipOpacity {
}
a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
a.class1 {
color: rgb(255, 234, 173);
}
a.class1:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
a.class1:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
#widget1 a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
#widget0 a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
#widget1 a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
z-index: 1;
}
#widget0 a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
#widget0 a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
#widget1 a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
.spacer {
font-size: 1px;
line-height: 1px;
}
.bumper {
font-size: 1px;
line-height: 1px;
}
body {
-webkit-text-size-adjust: none;
}
div {
overflow: visible;
}
img {
border: none;
}
.InlineBlock {
display: inline;
}
.InlineBlock {
display: inline-block;
}
.inline-block {
display: inline-block;
vertical-align: baseline;
margin-bottom:0.3em;
}
.inline-block.shape-with-text {
vertical-align: bottom;
}
.vertical-align-middle-middlebox {
display: table;
}
.vertical-align-middle-innerbox {
display: table-cell;
vertical-align: middle;
}
div.paragraph {
position: relative;
}
li.full-width {
width: 100;
}
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu a:visited { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu a:visited {text-decoration: none;}
#cssmenu {height: 70px; background-color: transparent; /*box-shadow: 0px 2px 3px rgba(0,0,0,.4);*/}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: rgb(242,234,200);
font-family: 'Oswald';
font-size: 24px;
text-decoration: none;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:visited {
color: rgb(242,234,200);
font-family: 'Oswald';
font-size: 24px;
text-decoration: none;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: rgb(255,255,221); text-decoration: none;}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(242,234,200);
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(242,234,200) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a {
color: rgb(50,50,50);
text-decoration: none;
font-family: 'Oswald';
font-size: 24px;
background-color: rgb(242,234,200);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:visited {
color: rgb(50,50,50);
text-decoration: none;
font-family: 'Oswald';
font-size: 24px;
background-color: rgb(242,234,200);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: rgb(255,255,221);}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: rgb(242,234,200);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
text-decoration: none;
background-color: rgb(0,34,60);
color: rgb(242,234,200);
}
If anyone is using Safari 6 on Lion, let me know if you're having the behavior I describe. Even though I'm emptying my caches, I have a hard time believing what I'm seeing…
Thanks,
Rob
UPDATE: Vish thought it might be one of the javascripts, so I tried commenting out the link in the header which linked to it and the menus started working in the newest version of Safari! The questions are: Why? (and) What else might I be breaking by just permanently removing the link to the script? Here's the script which appears to be the culprit:
// Created by iWeb 3.0.4 local-build-20130210
setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({stroke_0:new IWEmptyStroke(),shadow_0:new IWShadow({blurRadius:0,offset:new IWPoint(-2.1213,2.1213),color:'#000000',opacity:0.350000}),shadow_1:new IWShadow({blurRadius:0,offset:new IWPoint(-2.1213,2.1213),color:'#000000',opacity:0.350000})});registry.applyEffects();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('About_files/AboutMoz.css')
adjustLineHeightIfTooBig('id2');adjustFontSizeIfTooBig('id2');detectBrowser();adjustLineHeightIfTooBig('id3');adjustFontSizeIfTooBig('id3');fixAllIEPNGs('Media/transparent.gif');fixupIECSS3Opacity('id1');fixupAllIEPNGBGs();IMpreload('About_files','shapeimage_3','0');Widget.onload();applyEffects()}
function onPageUnload()
{Widget.onunload();}
Alright, I figured out that it's specifically the "applyEffects()" function call. Does anyone know what this is supposed to govern so I know what I'm doing when I take it out?
I am not sure what behavior you are exactly referring too in Safari 6. I opened the above html file in Safari and after the page loaded, I saw a delay on mouse hover. I only see this delay in Safari. After closely examining your html and your css, I found the issue had to do with the following lines of code.
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
When using opacity and visibility both you have to be careful as opacity renders the element with a lag, for the opacity to reach from 0 to 100% it may take a few ms delay. And on the other hand visibility of the drop-down menu changes instantly, its like show On/OFF switch. I would recommend that you disable one or look at the script file to add a timeout to offset the visibility delay.