473,809 Members | 2,826 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE hover,absolute, z-index bug

nouras
15 New Member
I use css to put png image on the page , i need the absolute position ,z-index and hover property .
this is the code ...
Expand|Select|Wrap|Line Numbers
  1. a.play{position:absolute;bottom:-37px!important;bottom:2px;right:10px!important;
  2. right:2px;width:40px; height:40px; margin:0; outline:none; display:none;background:url(play.png) no-repeat; text-indent:-999em; border:none;cursor:pointer; z-index:10000000;}
  3. a:hover.play{background:url(play_h.png) no-repeat;}
  4.  
this code work in firefox but in don't work in IE.
this is an image about the problem to see an example
in Firefox



in IE




the button play is the png image .
i need to change the location of this image in IE to be as it seems in firefox.
therefor i use the absolute position and z-index in css file .
what i can do to make this css work in IE to remove the image??
and i have also hover problem in IE .
please help me.
Apr 20 '10 #1
3 4663
nouras
15 New Member
Help me ...........
please.
Apr 22 '10 #2
drhowarddrfine
7,435 Recognized Expert Expert
We need to see the complete html/css or preferably a link. Also, the version of IE you are having problems with.
Apr 22 '10 #3
nouras
15 New Member
thank you ...
i am using the gallery in this link

http://www.pirolab.it/pirobox/

the file css in the folder ((csspirobox/white/style.css)).
i change this line in the css file
Expand|Select|Wrap|Line Numbers
  1. a.play{position:absolute;bottom:-37px!important;bottom:2px;right:10px!important;right:2px;width:40px; height:40px; margin:0; outline:none; display:block;background:url(play.png) no-repeat; text-indent:-999em; border:none;cursor:pointer; z-index:10000000}
  2. a:hover.play{background:url(play_h.png) no-repeat;}
  3.  
  4. *html a.play{position:absolute;top:280px!important;right:10px!important;right:2px;width:40px; height:40px; margin:0; outline:none; display:block;background:url(play.png) no-repeat; text-indent:-999em; border:none;cursor:pointer; z-index:10000000}
  5. *html a:hover.play{background:url(play_h.png) no-repeat;}
  6.  
  7. a.stop{position:absolute;bottom:-37px!important;bottom:2px;right:10px!important;right:2px;width:40px; height:40px; margin:0; outline:none; display:block;background:url(pause.png) no-repeat;text-indent:-999em; border:none;cursor:pointer; z-index:10000000}
  8. *html a.stop{position:absolute;top:280px!important;bottom:2px;right:10px!important;right:2px;width:40px; height:40px; margin:0; outline:none; display:block;background:url(pause.png) no-repeat;text-indent:-999em; border:none;cursor:pointer; z-index:10000000}
  9. a:hover.stop{background:url(pause_h.png) no-repeat;}
  10.  
it works good in firefox ,but the problim in IE7 ,IE6
in IE : if i change the position to the buttom it seems like this image


the play button will disappears...
Apr 24 '10 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

5
9248
by: toylet | last post by:
Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse pointer hovers over the top-menu, the bottom margin of the top-bar expands downwards. How could I make the hover menu to stack on top of the main-body, not expanding the bottom margin of the top-bar? I believe it has something to do with...
11
35476
by: Piers Lawson | last post by:
Hi Thank you to everyone who contributed to my last post (for those that noticed... I've now removed the XHTML ;-) In the page listed below, a two part horizontal menu is displayed, indented from the left. The first part of the menu is left justified and the second part is right justified. It looks correct in both IE6 and FireFox.... until you move your mouse over one of the left hand links. Then, in IE6, the change in background...
7
77377
by: Matt | last post by:
Is there a way to increase the amount of time a hyperlink title displays or show the desired text using javascript? <a title="This is the title text displayed on hover.">Displayed Text</a> The above HTML will display the title text when the mouse is hovered over the displayed text but it disappears quickly. There may be a better way to display text on hover using javascript but
1
4767
by: DiegoMx | last post by:
I'm having a problem with "a:visited" properties overriding "a:hover" ones - here's the relevant part of my CSS: a.barra { position:absolute; top:30px; font-family:century gothic; padding:10px; font-size:12pt; font-weight:bold; color:#4855A9;
24
5455
by: fehays | last post by:
Hello, I'm having a problem with the css hover effect in IE. I have an <a> tag with the following CSS: a.subNavItem { display:block; color:#464645; padding:2px 7px 4px 6px; font-family:verdana,arial,helvetica,sans-serif;
7
27508
by: fredo | last post by:
I've studied Eric Meyer's pure css popups, version two: http://meyerweb.com/eric/css/edge/popups/demo2.html which pops up an image when I roll over a text link. Now I want to pop up a large image when I roll over a thumbnail. I've tried some things, but can't make it work. See here (Warning: adult matter):
1
2890
by: cwrinn | last post by:
<html> <head> <style type="text/css"> h1.visible {display: block; position: absolute; top: 100px;} h1.invisible {display: none; position: absolute; top: 100px;} a.anchor:hover h1.visible {display: none} a.anchor:hover h1.invisible {display: block}
2
3139
by: andrewtayloruk | last post by:
Hi, i'm pretty new to CSS and html so please go easy on me. I'm trying to make a menu, the idea is that when you hover over the images in the menu they glow. To do this i have set up the following in css ***CSS Document*** a.wallpaper_button {background:url(images/wallpaper_container.gif);} a.wallpaper_button:hover {background:url(images/wallpaper_container_on.gif);} a.screenshot_button...
3
2589
by: noize | last post by:
I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results. I have built a drop-down menu using CSS and a touch of Javascript, by combining a couple tutorials I found online. The bug is when you mouse-over the menu in IE, the sub-menu pops out, but will disappear when you mouse-over it, but it doesn't happen everytime. Sometimes, it works...
8
4519
by: Meri | last post by:
Hello Everybody on the internet seems to think this is a problem with IE but for me it works fine with IE, but the submenus do not appear with Firefox andOpera. The html is a simple list with sublists. The CSS looks like this:
0
10633
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10376
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10114
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7651
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6880
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5686
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4331
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3860
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3011
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.