View Full Version : Problems with image rollovers
I am wondering if someone can help me out with my menu image rollovers. For some reason Shopwindow doesn't allow my rollovers to appear at the front. I have played around with the Z Index and transparency but to noavail. See for yourself: (http://dev.happychristmas.com/Shopping/productlist.php)
The menu dropdowns work fine on the main site (http://dev.happychristmas.com) but for some reason not on ShopWindow.
Anyone got any ideas??
Thanks
Have a wee look at that:
http://www.echoecho.com/csslayers.htm
It may be able to help you fix your problem.
I've had this kind of thing happen loads of times, normally with expanding banner ads and the likes, some are a lot easier to fix than others.
Thanks, i have tired layers but this makes no difference. The menu bar is z-index: 2; and the overlapping layers are defined to z-index: 1; but this appears to make no difference.
This is a real puzzle as the exact same code works on the main home page of the site but not in Shopwindow. Could this be a smarty problem!?
:confused:
Could this be a smarty problem!?
No, Smarty wouldn't be responsible for how the layers work, i'd be 100% positivie that Smarty is innocent with this...
I'm afraid this one is human error. You just need to fiddle around with it until you figure out how to get the menu-bar drop-downs to always show on top.
Is your drop down menu java script or pure css driven?
I have to admit like, this sort of thing is why I prefer working with < td > and < tr > the old fashioned stuff and pretty much don't use < div > and < span > unless I absolutely need to.
The dropdowns are completely coded in CSS.
I have been playing around with this and still can't work it out. I think this must be a smarty issue or something really blindingly obvious!!
There is no logical reason why my dropdown appears behind the content boxes ... see my code below:
(Content container of which the menu bar falls behind:)
#breadcrumb-box {
position: relative;
background: transparent url("../images/breadcrumb_box.gif") no-repeat top left;
width: 898px;
height: 73px;
margin: 0 auto 0 auto;
padding: 0 0 5px 0;
z-index: 1;
}
(dropdown menu which needs to go on top:)
#dropdown-navigation {
position: absolute;
background: transparent url("../images/bgd/dropdown.gif") no-repeat;
list-style: none;
width: 388px;
height: 26px;
top: 9px;
left: 20px;
padding-left: 22px;
z-index: 2;
}
#dropdown-navigation li {
float: left;
background-position: 0 -26px;
}
#dropdown-navigation li ul {
position: absolute;
background: transparent url("../images/bgd/dropdown_top.png") no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#dropdown-navigation a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#dropdown-navigation li a {
background-position: 0 0;
}
#dropdown-navigation li#nav-1 {
background: transparent url("../images/btns/christmasshopping.gif") no-repeat;
margin-right: 22px;
}
#dropdown-navigation li#nav-1:hover,
#dropdown-navigation li#nav-1.sfhover {
background-position: 0 -26px;
}
#dropdown-navigation li#nav-1 a {
width: 140px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#dropdown-navigation li#nav-1 ul li {
background: transparent url("../images/bgd/dropdown_regular.png") no-repeat;
height: 21px;
}
#dropdown-navigation li#nav-1 ul li.bottom {
background: transparent url("../images/bgd/dropdown_bottom.png") no-repeat;
height: 14px;
width: 159px;
}
#dropdown-navigation li#nav-1 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 140px;
padding: 1px 3px 2px 19px;
}
#dropdown-navigation li#nav-1 ul li a:hover {
background: transparent url("../images/bgd/dropdown_over.png") no-repeat 0 0;
}
#dropdown-navigation li:hover ul,
#dropdown-navigation li.sfhover ul {
left: auto;
}
Anyone fancy this challenge?!?
:confused:
IntroSites
21-10-08, 11:46
its about your div structure / positioning i think.
have a tidy up of your css, its very cluttered and unordered it makes it hard to work anything out.
if i get time later ill have a look
CaptainFalcon
21-10-08, 13:09
errrr..... why not just remove the z-index of the offending elements from the CSS? :D
I dont think itll make any difference as things are not really stacked ontop of each other....
I have tried this and unfortunately it makes no difference. It is almost as if the smarty template is defaulted to be at the front regardless of what I change :(
CaptainFalcon
21-10-08, 15:17
:p
Where you have
#container {
position: relative;
margin: 0 auto;
width: 100%;
text-align: center;
z-index: 0;
}
In your CSS. Remove the z-index so that it looks like:
#container {
position: relative;
margin: 0 auto;
width: 100%;
text-align: center;
}
Im pretty sure that will fix it :D
Ahhhhh, we may be getting somewhere, I have just checked the site in Safari and Firefox and the dropdowns work fine. :p
But when viewing in Explorer I still get the same problem :confused:
Just a thought, could this be a problem associated with .PNG graphics? I have had problems with explorer .PNGs and ShopWindow!?
Has anyone heard of this before?
:rolleyes:
It's got absolutely 100% guaranteed nothing to do with the format of an image used. .png images might not display the way they are intended in IE all the time, they get stupid purple edges and the likes on older browsers, but they don't change the layout of a page they are being used on. It's also got 110% guarenteed nothing to do with Smarty either, i'd put money on it.
It's almost certainly about the div's and the CSS you've used for them. IntroSites has already told you the best way to make it a damn sight easier to sort.
The fact that your saying it displays the way you intend it to in Firefox and not fine in IE says it all really, your code hasn't been done cross browser compatible and that i'd put pretty much down to the drop down code if anything, not the shop client, as that's very very clean coded, so i'd say you should take a good look at the CSS parts of the drop down code in it's original format and see what you've changed.
Right, I went back to basics and went over all the code and sure enough, there was a problem, not with the CSS but an additional, rogue, div tag in the page header. ;)
So, the menus now appear but i get this strange .PNG conflict in IE7. The dropdown works but the links do not appear clickable. Have tesed with .gif graphics and the links work but i lose the transparency and it detracts from the look and feel i want to achieve.
Has anyone come across this problem before. :D
Millions before you, it's a well documented issue... ;)
http://www.google.co.uk/search?hl=en&safe=off&q=how+to+fix+a+.png+image+conflict+in+Internet+exp lorer+7&meta=
There's a few I looked through on there that provide solutions to your issue.
I gotta say though, EI7 typically doesn't have the same .png problems that earlier IE browser versions have, so not sure why it's giving you grief.
I have found the source of the problem...
<script src="{$templatePath}bgsleight.js" language="javascript"></script>
by removing the above script the site now works fine in IE7 with all rollovers and .PNG links activated. Can anyone tell me what this script is actually for and whether it is a big deal removing it?
I have found the source of the problem...
<script src="{$templatePath}bgsleight.js" language="javascript"></script>
by removing the above script the site now works fine in IE7 with all rollovers and .PNG links activated. Can anyone tell me what this script is actually for and whether it is a big deal removing it?
This script is only included with the Collage template. Its there to fix the transparency of .PNG images in IE. I imagine you should be able to remove it without any problems.
Brilliant - Problem Solved!
This script is only included with the Collage template. Its there to fix the transparency of .PNG images in IE. I imagine you should be able to remove it without any problems.
That'll be why I couldn't find it then, i've not even bothered looking at those templates.
No probs Amoochi
One last problem...
Can I just pick your brains on something else. What code do i need to include to use the searchbar on other pages throughout my site?
I have tried using this on the home page, but nothing seems to appear
<?
require_once 'Shopping/constants.inc.php';
include_once 'Shopping/elements'.DIRECTORY_SEPARATOR.'search_box.php';
?>
any ideas?
Firstly, I don't know if you realise, but in IE7, clicking on any of the links on the drop down bit of your drop down menu, leads me absolutely nowhere, it's recognising that there is some kind of link there, but it's not doing anything at all with them.
Personally I have not put any of the shopwindow stuff on non-shopwindow pages, shopwindow is a portal in itself, it's easier to use that as the main and bolt other bits onto it. If I was too though, i'd probably do it via an iframe, that's my minds thinking of the easiest method for me. I don't know how it would work including stuff directly into other non related pages, as it's all Smarty driven, so i'd imagine it would require a bit more than just including those two includes to get it all working.
Yep, it works but the links aren't active yet. #. :p
Do you know of other Shop Windows where it has been done?
I thought it would be fairly straight forward to just insert the right links and PHP code to draw the search function into another page. Simple, right??
If not what would be a suitable way around this?