I have a site with strange layout (by my client) and I have developed it fine.
The problem is Chrome (version 22) doesn't work, but in Firefox (version 16) and IE 9 it works.
The problem is in the colRight, there are two divs that don't respect the radius, the content overflows and goes over the colCenter.
How can I fix that?
JSFIDDLE
FIREFOX:
CHROME
HTML:
<div class="colCenter" id="two"></div>
<div class="colRight" id="three">
<div class="first_menu"></div>
<div class="dati_societari"></div>
</div>
CSS:
.colCenter{
position:absolute;
top:0;
left:18%;
height: 100%;
width: 72%;
background: #ccc;
border-left: 0px solid #333;
border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
/*border-radius: 0.2px 0px 0px 0.2px;*/
z-index:100;
overflow:hidden !important;
box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
}
.colRight{
position:absolute;
top:0;
right:0;
background:#fff;
height:100%;
width:18%;
z-index:1000;
border-left: 0px solid #333;
/*border-radius: 70px 0px 0px 70px / 250px 0px 0px 250px;*/
border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
overflow:hidden !important;
}
.first_menu{
height:10%;
width:100%;
background:#714d8f;
position:absolute;
top:0;
left:0;
z-index:2;
}
.dati_societari{
height:8%;
width:100%;
background:#9a9a9a;
position:absolute;
bottom:50px;
left:0;
z-index:2;
text-align:center;
}
.social{
position:absolute;
width:100%;
bottom:5%;
left:20%;
}
.img_social{
opacity:0.7;
transition-property: opacity; /*standard*/
transition-duration: 0.4s;
-webkit-transition-property: opacity; /*Safari e Chrome */
-webkit-transition-duration: 0.4s;
-o-transition-property: opacity; /*Opera*/
-o-transition-duration: 0.4s;
-moz-transition-property: opacity; /*Firefox*/
-moz-transition-duration: 0.4s;
}
This appears to be a Webkit bug...
CSS Border radius not trimming image on Webkit
Bug Reports...
https://bugs.webkit.org/show_bug.cgi?id=30475
http://code.google.com/p/chromium/issues/detail?id=82417
Related
Roughly a week ago all my divs were properly aligned on the same line.
I'm not sure what I did to cause them to stack. "fbox" is set to inline-block but its acting as a block.
I really didn't want to ask a question about it, but I am losing time by getting frustrated about this.
<div class="fbox" id="breast">
<span class="title">Breast Procedures</span>
<ul>
<li>Breast Augmentation</li>
<li>Breast Lift</li>
<li>Breast Reduction</li>
<li>Gynecomastia Surgery</li>
<li>Breast Implant</li>
<li>Nipple Surgery</li>
<li>Breast Asymmetry</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
<span class="title">Facial Procedures</span>
<ul>
<li>Brow Lift</li>
<li>Face Lift</li>
<li>Eyelid Lift</li>
<li>Nose Surgery</li>
<li>Facial Implant</li>
<li>Neck Lift</li>
<li>Earlobe Repair</li>
<li>Ear Reshaping</li>
<li>Chin Implant</li>
<li>Chin Augmentation</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="padding">
<div class="fbox" id="body">
<span class="title">Body Procedures</span>
<ul>
<li>Tummy Tuck</li>
<li>Liposuction</li>
<li>Mommy Makeover</li>
<li>Butt Lift</li>
<li>Body Contouring</li>
<li>Labiaplasty</li>
<li>Brachioplasty</li>
<li>Thigh Lift</li>
<li>Upper Body Lift</li>
</ul>
<span class="read">View Descriptions</span>
</div>
</div>
<div class="fbox" id="surgery">
<span class="title">Non-Surgical Procedures</span>
<ul>
<li>Fat Injection</li>
<li>Latisse</li>
<li>Botox</li>
<li>Dermabrasion</li>
<li>Chemical Peels</li>
</ul>
<span class="read">View Descriptions</span>
</div>
CSS: (Main code at bottom. .fbox, .read, .title)
.controls{
display:none;
}
.col span_6 {
text-color:black;
color:black;
}
.subheader{
text-color:black;
color:black;
}
.callbox{
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
display:block;
text-align:center;
height:75px;
width:1116.95px;
line-height:75px;
font-size:22px;
font-weight:bold;
}
.toggle h3 a{
color:black;
}
body .toggle > div {
padding: 10px 14px;
border-top: 0px;
border:1px solid #D2691E;
display: none;
background-color: #fff!important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/** .receptionist{
border:1px solid #D2691E;
display:block;
padding:5px;
border-radius:5px;
}
**/
.menu-item{
font-weight:600;
}
.hr{
display: block;
height: 1px;
border: 1px solid #8CAAD2;
margin: 1em 0;
padding: 0;
}
.settingsFront{
height:10px;
}
.settingsMessage{
height:150px;
}
.settingsMessageMain{
height:200px;
}
/** Start here ! **/
.title{
font-size:16px;
margin:0 auto;
text-align:center;
font-weight:600;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color:white;
background:white;
font-family:Futura;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
}
.main-content ul li{
list-style-type:none;
}
.main-content ul{
margin:0 auto;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;
}
.read{
width: 100%;
left: 0;
bottom: 0;
background-color:white;
background:white;
font-size:22px;
height:40px;
line-height:40px;
font-family:Futura;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
}
.read a{
color:#7e99bd;
}
.wpcf7-form-control-wrap{
background:white;
background-color:white;
}
#media (max-width:767px){
.fbox{
width: 200px;
height: 250px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
font-size:12px;
}
}
Fiddle
Your third div.fbox is wrapped in a parent div with class .padding which is causing a break in the display: inline-box rule. Remove the div.padding element around the third div.fbox element and your div tags will line up again.
#Travis the fbox is working as inline-block if you want to know more information go through this.
If you want all three boxes inline-block, you will need all three in the same div
Fiddle: https://jsfiddle.net/pj489c50/
HTML:
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
How can I modify my CSS, so
The box shadow goes all the way to the end at the top
Move the arrow to the bottom and to add a gray arrow left of the blue arrow.
This should get you close. As a tip, I would separate your :before and :after selector properties so its more clear which rules are being applied to each.
html{
height:100%;
}
body{
height:100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20px;
background: #FFF;
}
[class^="folded-corner-"]{
color: #444;
position:relative;
width:350px;
background:#E4E4E4;
margin-bottom:10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
[class^="folded-corner-"],
[class^="folded-corner-"]:before{
min-height:100px;
right: 20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
[class^="folded-corner-"]:before,
[class^="folded-corner-"]:after{
position:absolute;
content:"";
display:block;
position:absolute;
bottom:0;
margin-right: 20px;
width:0px;
height:0px;
box-sizing: border-box;
border-style:solid;
}
[class^="folded-corner-"] p{
padding:20px;
color:#444;
font-size:12px;
}
.folded-corner-topright:before{
border-width:0px 0px 20px 20px;
border-color:transparent transparent #d7d7d7 transparent;
right: 0px;
}
.folded-corner-topright:after{
right:-20px;
border-width:20px 20px 0px 0px;
border-color:#0099E7 #fff transparent transparent;
box-shadow:3px 3px 2px 2px #FFF;
}
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
Anyone know why not work me a link when I hover on the picture?
I added a hover effect and link stopped working :/
Anyone know how I can fix this problem?
/*** effect inner-shadow ***/
.image-home-effect {
position: relative;
}
.image-home-effect:before {
content:'';
float:left;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:20;
cursor: pointer;
margin-top: -12px;
height: 222px;
}
.image-home-effect:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
.image-home-effect:hover:before {
box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="content-box">
<h2>Meble biurowe</h2>
<div class="image-home-effect">
<img src="images/meble-biurowe.jpg">
</div>
</div>
</div>
Try putting your anchor tag on the outside of the div with class image-home-effect.
like this:
<a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
<div class="image-home-effect">
<img src="images/meble-biurowe.jpg">
</div>
</a>
i am not sure but may be this help you
http://jsfiddle.net/5z4paLgr/4/
HTML
<img src="images/meble-biurowe.jpg">
CSS
.image-home-effect {
position: relative;
}
.image-home-effect:before {
content:'';
float:left;
position:absolute;
top:0;
left:0;
width:500px;
height:500px;
z-index:20;
cursor: pointer;
margin-top: -12px;
height: 222px;
}
.image-home-effect:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
.image-home-effect:hover:before {
box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}
Wrap the anchor around your div
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="content-box">
<h2>Meble biurowe</h2>
<a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
<div class="image-home-effect">
<img src="images/meble-biurowe.jpg">
</div></a>
</div>
</div>
I set images so when you click them they each reveal a different div underneath them.
I found the original code here: http://www.dynamicdrive.com/forums/showthread.php?74782-Changing-content-in-Div-upon-Link-Click
Here is my code:
#workSamples {
width:960px;
margin:auto;
}
#button1 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 20px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
.b1 {
width:300px;
height:236px;
overflow:hidden;
}
.b1 img {
height:auto;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.b1 img:hover {
margin-top: -236px;
}
#button2 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button3 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button1:focus~#content #def,
#button2:focus~#content #def,
#button3:focus~#content #def,
#button4:focus~#content #def {display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}
#content {
width:940px;
height:307px;
color:black;
font-size:10px;
text-align:center;
margin:20px auto;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
overflow:hidden;
background:red;
}
.caption {
background:blue;
width:200px;
margin:auto;
height:60px;
background:#694264;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
transition:all .3s ease-out;
left:0;
font-size:14px;
padding:10px;
}
#content:hover .caption {
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
#faq,#her,#and,#enj {display:none;}
#faq:hover{
background:red;
}
<section class="top" data-type="background" data-speed="10" class="pages">
<section id="w">
<div class="title">My Work</div>
<div id="workSamples">
<a id="button1" href="#" tabindex="1"><div class="b1"><img src="Images/work/sample01.jpg" alt=""></div></a>
<a id="button2" href="#" tabindex="2"><div class="b1"><img src="Images/work/sample02.jpg"></div></a>
<a id="button3" href="#" tabindex="3"><div class="b1"><img src="Images/work/sample03.jpg"></div></a>
<div id="content">
<div id="def">This is where I put the default information. No clicks needed </div>
<div id="faq"><img src="Images/absolutebeauty.jpg">
<div class="caption">
<a href="http://www.absolutebeauty.ie">
<h4>Absolute Beauty</h4><br>Visit the site</a>
</div>
</div>
<div id="her"><img src="Images/bestacoustic.jpg"></div>
<div id="and"><img src="Images/engagement.jpg"></div>
</div>
</div>
</section>
</section>
The code works well on it's own but when I added it to my site it now returns me to the top of the page when I click on the first image link.
Here is my site: http://www.liddily.com
Click work and click on any of the images, you will see what I mean.
I don't know why this is happening. Can someone please help me out?
Thanks for reading!
You have your links set up to go to an anchor that isn't there so it returns the page itself. Return
make these link to an actual location and the "refresh" effect will stop.
Notice in the example on that site it shows the following code with locations after the hash # :
<div id="button1"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></div>
<div id="button2"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></div>
<div id="button3"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></div>
<div id="button4"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></div>
<div id="content"> This is where I put the default information. No clicks needed </div
<a name="FAQ">
<div style="border: 1px dashed black;width: 300px;height:500px;position:fixed;left:750px;top:150px;}
FAQ content will go here.
And then the example shows a named location for the link to travel to. you need to implement this format for it to work.
The full source can be viewed at:
www.anthonysusedcars.com
Chrome Status: Works!
Safari Status: Broken!
Firefox Status: Untested
Question:
What is causing this webpage to break within Safari, while Chrome renders it fine? Can anyone figure out a quick fix?
Note: there is a bug in Chrome, where if you hover over the left-most, non selected, nav tab, the whole page is thrown into disarray. Ignore this for now.
Supporting Details [Extra]
Google Chrome shows this page with an interesting effect that I stumble upon by accident with basic CSS3. The navigation tab pulls down while pulling the upper header and lower content downward with it, but the rest of the navigation tabs stay in place.
It threw me off when I looked at the site in Safari, expecting seamless webkit compatibility, to find a very broken page. I then read about Chrome's recent change to Blink. So, scrap the chanced-upon feature and go with something easier to replicate cross-browser, right?
Well... My boss likes the feature the way that it's seen in Chrome, and wants me to fix it up to work cross-browser. And that's that. I've failed to fix the issue thus far, so i'm turning to the experts!
I'm focusing here on simply Webkit - Blink compatibility. The solution to this problem needs to solve both the broken position, and keep the movement functionality.
HTML Markup [Simplified]
<!DOCTYPE html>
<html>
<head>
... Content ...
</head>
<body>
<div class="wrapper"><!-- begin wrapper -->
<div class="frame_anchor"><!-- begin frame anchor -->
<div class="header_frame"><!-- begin header frame -->
<div class="nav_bar"><!-- begin header nav bar -->
<a id="selected" href="index.php">
Home
</a>
<a href="car1.php">
Dodge Avenger
</a>
<a href="car2.php">
Jeep Grand Cherokee
</a>
<a href="car3.php">
Chevy Suburban
</a>
<a href="contact.php">
Contact Us
</a>
</div><!-- end head nav bar -->
</div><!-- end header frame -->
</div><!-- end frame anchor -->
<div class="body_center"><!-- begin body center -->
<div class="header"><!-- begin header -->
<div class="header_image"><!-- begin header image -->
<div class="header_title_strip"><!-- begin header title strip -->
<p class="title">
ANTHONY'S AUTO
</p>
<p class="subtitle">
USED CARS AT GREAT PRICES
</p>
<p class="contact_title">
Cell: (318) 332 2031
</p>
</div><!-- end header title strip -->
</div><!-- end header image -->
</div><!-- end header -->
<div class="body"><!-- begin body -->
<div class="body_head_spacer"><!-- begin spacer -->
</div><!-- end spacer -->
<div class="module_title">
<p>
ABOUT US
</p>
</div>
<div class="body_desc"><!-- begin body description -->
<p>
We sell nice, clean cars in good condition, ready for the highway.
</p>
</div><!-- end body description -->
... Content ...
<div class="footer"><!-- begin footer -->
... Content ...
</div><!-- end footer -->
</div><!-- end body center -->
</div><!-- end wrapper -->
</body>
</html>
CSS: [Gradients Removed]
#import url(http://fonts.googleapis.com/css?family=Orbitron:400,700);
body
{
font-family:Arial;
... cross-browser gradient bg ...
}
a:link, a:visited, a:active, a:hover
{
}
p
{
}
div
{
}
.wrapper
{
margin:0px;
padding:0px;
width:100%;
min-height:800px;
}
.body_center
{
overflow:hidden;
transition:min-height 1s;
... cross-browser gradient bg ...
width:800px;
min-height:800px;
margin-left:auto;
margin-right:auto;
-webkit-box-shadow: 7px 7px 5px #000;
-moz-box-shadow: 7px 7px 5px #000;
box-shadow: 0px 0px 80px 7px #000;
padding:0px 0px 0px 0px;
}
.header_image
{
-moz-transition:min-height 1s, background-size 1s;
transition:min-height 1s, background-size 1s;
z-index:2;
background-position:65% 0%;
background-size:100% 160%;
background-repeat:no-repeat;
background-image:url('images/head.png');
position:absolute;
max-height:300px;
min-height:300px;
width:800px;
margin-top:-250px;
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
}
.header_title_strip
{
z-index:2;
opacity:1;
position:absolute;
padding:0px;
width:100%;
height:100px;
... cross-browser gradient bg ...
transition:opacity 2s, height 2s;
-moz-transition:opacity 2s, height 2s;
}
.contact_title
{
float:right;
color:#ffbb28;
margin-right:20px;
font-family: 'Orbitron', sans-serif;
}
.header_title_strip:hover
{
opacity:1;
height:120px;
}
.title span
{
float:left;
display:block;
width:30px;
/* -webkit-transform:rotate(0deg); */
transition:/*-webkit-transform 0.1s,*/ color 0.5s, text-shadow 0.3s;
text-shadow: 4px 4px 4px #000;
}
.title span:hover
{
/* -webkit-transform:rotateY(180deg);
color:#2580be;
*/
text-shadow: 5px 5px 7px #000;
}
.space
{
float:left;
width:20px;
overflow:hidden;
opacity:0;
}
.title
{
position:absolute;
word-spacing:-8px;
top:-15px;
padding:0px 0px 0px 10px;
font-size:35px;
color:white;
font-family: 'Orbitron', sans-serif;
}
.subtitle
{
position:absolute;
margin:55px 0px 0px 10px;
font-size:18px;
color:#ffb400;
font-family: 'Orbitron', sans-serif;
}
.frame_anchor
{
width:800px;
height:20px;
margin-left:auto;
margin-right:auto;
}
.header_frame
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
transition:height 1s;
position:relative;
margin-left:-20px;
top:90px;
z-index:0;
padding:0px 20px 0px 20px;
width:800px;
height:250px;
... cross-browser gradient bg ...
opacity:.77;
}
.nav_bar
{
transition:margin 1s;
padding:210px 0px 0px 0px;
width:100%;
height:70px;
position:relative;
z-index:2;
}
.nav_bar a:link, .nav_bar a:active, .nav_bar a:visited
{
margin-top:0px;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
float:left;
text-decoration:none;
color:black;
display:block;
height:30px;
font-weight:bold;
font-size:12px;
margin:0px 0px 0px 20px;
padding:15px 10px 0px 10px;
text-align:center;
... cross-browser gradient bg ...
border-style: inset;
border-width:0px;
opacity:1;
-moz-transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
border-radius:0px 0px 5px 5px;
}
#selected
{
... cross-browser gradient bg ...
}
#selected:hover
{
padding-top:15px;
}
.nav_bar a:hover
{
padding-top:20px;
opacity:1;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px -5px 20px #000;
}
.body_head_spacer
{
transition:min-height 1s;
min-height:105px;
}
.body_desc
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
top:0px;
z-index:0;
padding:5px;
width:790px;
min-height:250px;
... cross-browser gradient bg ...
opacity:.77;
margin-top:0px;
}
.body_desc p
{
padding:5px;
margin:0px;
background-color:white;
min-height:20px;
text-align:center;
}
.body_module
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
margin-top:0px;
top:0px;
z-index:0;
padding:5px 5px 5px 5px;
width:790px;
min-height:180px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
-moz-transition:min-height 1s;
transition:min-height 1s;
margin-top:30px;
top:0px;
z-index:0;
width:800px;
min-height:70px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer p
{
padding:25px 10px 10px 10px;
min-height:20px;
text-align:center;
color:white;
}
.module_title p
{
margin:0px;
padding:10px 5px 5px 0px;
min-height:20px;
}
.module_title
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
font-family: 'Orbitron', sans-serif;
font-weight:bold;
color:#2454e5;
transition:height 1s;
position:relative;
z-index:0;
text-align:center;
margin-top:20px;
padding:5px 5px 5px 5px;
width:25%;
min-height:35px;
... cross-browser gradient bg ...
opacity:.77;
border-radius:0px 170px 0px 0px;
}
Ok, as Venom said above, I ended up being forced to removed the hover movement effect. THere seemed to be no other solution. Thanks!