Compatibility Issues with CSS
Hello,
I'm not sure if this is the correct place to ask this question, but I needed to start somewhere. I recently published my site, mei-vt.net, and one of the CSS effects I have isn't working in Firefox, but is working IE. Firefox is my primary browser and I used it to preview the pages while building the site. The hover effect worked fine in the preview and stopped working only when I published the site to the my web host.
The effect is at the top of the Commercial page (found here http://mei-vt.net/commercial.html). It consists of 6 pictures that enlarge to fill the border when moused over. The original code was written by a freelance web designer and the original copyright information is intact in my external style sheet. The site said the effect was tested and working in Firefox, but it doesn't seem to be working for me.
I will paste the entire style sheet content below that controls the effect and the source code can be viewed from the page. Please tell me what I need to do to make this work in Firefox!
Thank you.
/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/image-manipulation.html Copyright (c) 2005-2010 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery li {width:160px; height:140px; float:left;} .gallery li a {display:block; width:160px; height:140px; position:absolute; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery li a.p1 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/h2.jpg); opacity:0.5; left:0; top:0;} .gallery li a.p2 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/icehaus.jpg); opacity:0.5; left:160px; top:0;} .gallery li a.p3 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/h1.jpg) ; opacity:0.5; right:0; top:0;} .gallery li a.p4 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/park.jpg); opacity:0.5; left:0; bottom:0;} .gallery li a.p5 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/Club.jpg); opacity:0.5; left:160px; bottom:0;} .gallery li a.p6 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/frame.jpg); opacity:0.5; right:0; bottom:0;} .gallery li a:hover {position:absolute; width:480px; height:280px; z-index:100; opacity:1;} .gallery li a.p1:hover {left:0; top:0;} .gallery li a.p2:hover {left:0; top:0;} .gallery li a.p3:hover {right:0; top:0;} .gallery li a.p4:hover {left:0; bottom:0;} .gallery li a.p5:hover {left:0; bottom:0;} .gallery li a.p6:hover {right:0; bottom:0;} .gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery2 li {width:240px; height:140px; float:left;} .gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;} .gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;} a.p7 { display:inline-block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; float:left; margin-top: 20px; margin-right: 0; margin-bottom: 0; margin-left: 20px; } a.p7 img { display:block; border:0; } a.p7:hover { text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500; text-align: left; } a.p7 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0; -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: opacity 0.6s ease-in-out; } a.p7:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0; } #info {z-index:100; height:22em;}
Modified by cor-el
Chosen solution
Your site works for me with the changes that you made.
You can reload those web page(s) and bypass the cache.
- Press and hold Shift and left-click the Reload button.
- Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
- Press "Cmd + Shift + R" (MAC)
All Replies (9)
Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
http://forums.mozillazine.org/viewforum.php?f=25
You'll need to register and login to be able to post in that forum.
Thank you!
Currently those images link to files on your local computer (file:///C|/Users/Krista/).
You need to upload the images and make sure that the images link to a folder on the web server.
.gallery li a.p1 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/h2.jpg); opacity:0.5; left:0; top:0;}
I have all of the images loaded into the remote server's folder, but I'm unsure of how to change the tags to link to those images... Unfortunately, I'm pretty new to web design and this is the first site I have to had to publish personally. How do I make sure they are directed correctly?
If you used a text editor to create the code then change the links to relative links and place the images in the images folder relative to the position of the HTML file (/images/h2.jpg from the above example). If you used a specific HTML editor to create the web pages then you need to check the authoring settings in that editor and make sure that local inks get updated.
I changed the links to relative, but it still doesn't seem to be fixing the problem... I am using Dreamweaver CS5 to build the site and edit the code.
I had all of the images in a image folder within my local_sites folder. The images are linked to the html pages from the images folder, and everything was uploaded to the remote server as it appears in my local.
I was told by a friend of mine that the effect was working for him and he believed it was a browser compatibility issue. I also found that on a coworker's IE it wasn't working either. The border is still there, but the images don't appear. Here is the new code. Please let me know if I didn't change it correctly. I changed the links through the Dreamweaver menu prompts.
/* ================================================================ This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/image-manipulation.html Copyright (c) 2005-2010 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery li {width:160px; height:140px; float:left;} .gallery li a {display:block; width:160px; height:140px; position:absolute; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery li a.p1 {background:url(../images/h2.jpg)); opacity:0.5; left:0; top:0;} .gallery li a.p2 {background:url(../images/icehaus.jpg); opacity:0.5; left:160px; top:0;} .gallery li a.p3 {background:url(../images/h1.jpg); opacity:0.5; right:0; top:0;} .gallery li a.p4 {background:url(../images/park.jpg); opacity:0.5; left:0; bottom:0;} .gallery li a.p5 {background:url(../images/Club.jpg); opacity:0.5; left:160px; bottom:0;} .gallery li a.p6 {background:url(../images/frame.jpg); opacity:0.5; right:0; bottom:0;}
.gallery li a:hover {position:absolute; width:480px; height:280px; z-index:100; opacity:1;}
.gallery li a.p1:hover {left:0; top:0;} .gallery li a.p2:hover {left:0; top:0;} .gallery li a.p3:hover {right:0; top:0;} .gallery li a.p4:hover {left:0; bottom:0;} .gallery li a.p5:hover {left:0; bottom:0;} .gallery li a.p6:hover {right:0; bottom:0;}
.gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;}
.gallery2 li {width:240px; height:140px; float:left;}
.gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;}
.gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
.gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;}
Chosen Solution
Your site works for me with the changes that you made.
You can reload those web page(s) and bypass the cache.
- Press and hold Shift and left-click the Reload button.
- Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
- Press "Cmd + Shift + R" (MAC)
That seemed to do the trick!! Thank you so much!
You're welcome.