CSS - Hover Does Not Support For Ie Brower ?
HI;
Does the hover not support for the IE browser ? I am using a hover for buttons in IE browser, it does not has any reaction when the cursor is held over the buttons, but it does work in the Firefox, Netscape, and Opera browser. Could any one tell me why ? Thanks. My code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css" > body { font: 80% arial, helvetica, sans-serif; background: white; margin:0; } #container{ position: relative; width: 780px; w\idth: 780px; border: solid #036; border-width: 0 3px; margin: auto; } table { position: absolute; width: 700px; margin: auto; } table td { background: url(mybutton1.jpg); background-repeat: no-repeat; background-position: center; width: 150px; height: 50px; text-align: center; font-size: 20px; color: white; } table td:hover { background: url(mybutton2.jpg); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="container"> <table> <tr> <td> Home </td> <td> About Us </td> <td> Contact Us </td> <td> Help </td> </tr> </table> </div> </body> </html> Similar TutorialsI am trying to teach myself doing a tableless website using css and I am starting with header then working my way down I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE .. Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background .. Here the html and css <body> <div id="logoheader"> <img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" /> <img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" /> </div> </body> </html> ------------------------ the css ------------------------ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color : #FFFFFF ; } #logoheader { background: url(../images/stlaware_03.png) repeat; height: 90px; width: 100%; } How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width? Thanks .. Bill I have created a simple css and I notice that when the html page is opened by IE and NN my text-decoration: none seems to have no effect on the links. When I use Opera it works well. Is it my code or do you have to do something else as the text I'm working from says > and + support is not uniform? div.navbar { font-family: Arial, Helvetica, sans-serif; white-space: nowrap; } div.navbar > span.self { font-weight: bold; color: #c80; padding: 3px; } div.navbar > a:link { padding: 3px; color: #300; text-decoration: none; } div.navbar > a:hover { background-color: #eb0; color: #200; padding: 3px; text-decoration: none } Just a small ramble... About 2 or 3 weeks ago I finally installed IE 7 Beta 2 to give it a test drive to see how MS was coming along in their CSS support... Before I go any further, let it be known: I ALWAYS develop in Firefox and correct for IE ... Anywhoo, I was in the middle of this large project for my client and much to my surprise, MS has come a very loooong way in supporting CSS; so much so I couldn't tell ANY difference between Firefox 1.5 and IE7...seriously. I know MS still hasn't given into standards 100% with IE7 and IE7 is still along way off of having the marketshare IE6 has right now, but I was soooo thrilled I just wanted to drop everyone a line here and share my joy! IE7 Beta 2 Download Link I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code: <ul> <li>About Us</li> <ul> <li><a href="#">Locations</a></li> etc..etc..etc.. Here is the css: Code: /*Begin Content of drop down menu*/ a { outline:none; } * html div#dropdownmenu ul { float: left; } * { margin: 0; padding: 0; } div#dropdownmenu { float: left; background-color: #C8C6C6; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; } div#dropdownmenu ul li { list-style-type: none; float: left; background-color: #000000; position: relative; } div#dropdownmenu ul li:hover { list-style-type: none; background-color: #000000; } /*Hides drop downs when not overed over and reveals them when they are hovered over.*/ body div#dropdownmenu ul li ul { display: none; } body div#dropdownmenu ul li:hover ul { display: block; } div#dropdownmenu ul li ul { margin: 0; width: 13em; position: absolute; left: -1px; } div#dropdownmenu ul li ul li { width: 100%; background-color:#bdb35e; color: #660000; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; padding: 3px; } div#dropdownmenu ul li ul li:first-child { border-top: 1px solid #000; } div#dropdownmenu ul li ul li:hover { color: #FFFFFF; background-color: #000000; } div#dropdownmenu ul li ul li a { color: #660000; text-decoration:none; outline: none; } div#dropdownmenu ul li ul li a:hover { color: #FFFFFF; background-color: #000000; text-decoration:none; outline: none; } div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover { display: block; } Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically. Code: <div id='leftcolumnmenusouter'><!-- left column menus --> <div id='leftcolumnmenus'> <?php include "columnmenus.php"; ?> </div> </div> <div id='maincontentcolumnouter'><!-- middle column --> <div id='maincontentcolumn'> <?php if (is("home")) { include "home.php"; } else if (is("register")) { include "register.php"; } else if (is("login")) { include "login.php"; } else if (is("comment")) { include "comment.php"; } else if (is("profile")) { include "profile.php"; } else if (is("category")) { include "category.php"; } else if (is("game")) { include "game.php"; } else if (is("links")) { include "links.php"; } else if (is("rules")) { include "rules.php"; } else if (is("faq")) { include "faq.php"; } else if (is("pp")) { include "pp.php"; } else if (is("links")) { include "links.php"; } else if (is("page")) { include "page.php"; } else if (is("news")) { include "news.php"; } else if (is("users")) { include "users.php"; } else if (is("search")) { include "search.php"; } else if (is("taf")) { include "taf.php"; } /*else if (is("submit")) { include "submit.php"; } */else if (is("pm")) { include "pm.php"; } else if (is("play")) { include "play.php"; } else if (is("request")) { include "request.php"; } else if (is("contact")) { include "contact.php"; } else { include "error.php"; } ?> </div> </div> CSS: Code: #maincontentcolumnouter { width:75%; margin:0px; float:left; } #maincontentcolumn { margin-top:8px; margin-bottom:0px; margin-left:4px; margin-right:8px; } #maincontentcolumn .ocontentsection { margin-bottom:8px; } #maincontentcolumn h2 { text-indent:1em; } #leftcolumnmenusouter { width:25%; margin:0px; float:left; } #leftcolumnmenusouter #leftcolumnmenus { margin-top:8px; margin-bottom:0px; margin-left:8px; margin-right:4px; } #leftcolumnmenus .ocontentsection{ margin-bottom:8px; } #leftcolumnmenus h2{ text-align:center; } #footer { margin:0px; padding:0px; clear:both; } Just curious if anyone has any resources that explain what type of overflow attributes Opera supports. I'm working on a site right now and see that in Opera "overflow: auto" is not supported. Is there a known work around? I am using Opera 9.25 Thanks! I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ? Please look at this URL http://www.finance.samif.com/Koelkast When I select any check box on left column then one pop up is display on screen. This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox. Vertically and Horizontal But when I used IE and select check box on bottom left menu then I can't see pop up image. Because this is not display vertically middle or it is not fixed. Please give me idea or suggestion how I can fix it. Thanks I am working on a header for a site and am having trouble with cross-browser support for one element. I have kept all of the CSS in the html page for testing purposes. The problem I'm having is that in FF and IE6, I am having difficulty getting the #menuBar, .filmstripTop, #menuChoices, and .filmstripBottom elements to align on top of each other, despite margins, padding, etc. set to 0. (I have set the background of #menuBar to yellow so you can see what I think is the offending element.) In FF and IE6, I see the yellow running across the screen but in different places. In IE running under Windows Vista, everything appears aligned as intended. (The menu text is just a placeholder for the navbar I will do once the other formatting is fixed.) I'm sure this must be an easy fix and something I've overlooked, but I have been at this for hours and can't seem to figure out how to make this work. Suggestions? Thanks! url: http://www.bonvoyageimagery.com Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> body { border: 0 0 0 0; margin: 0 0 0 0; background: #000; color: #FFF; } #header { background: url(images/LogoBackgroundGradient.jpg) repeat-x; text-align: center; margin: 10px 0 0 0; padding: 0 0 0 0; } .imgBorderHeader { border: 2px solid #888; } #menuBar { clear: both; border: 0 0 0 0; padding: 0 0 0 0; margin: -4px 0 0 0; background: yellow; } .filmstripTop { border: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; height: 12px; width: 100%; clear: both; background: url(images/FilmstripTop-8x12.jpg) repeat-x; } .filmstripBottom { border: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; height: 12px; width: 100%; clear: both; background: url(images/FilmstripBottom-8x12.jpg) repeat-x; } #menuChoices { width: 100%; clear: both; border: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; text-align: center; background: #362217; color: white; } #menuChoices p { font-size: .75em; font-family: Arial; vertical-align: middle; } </style> </head> <body> <div id="header"> <img border="0" src="images/Logo2.jpg" style="padding-right: 70px;" width="280" height="125"> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035223&Size=Th" width="100" height="100" hspace="10" align="top" style="margin-top: 10px; margin-bottom: 10px" /> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035171&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" /> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035174&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" /> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=2645154&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" /> </div> <div id="menuBar"> <div class="filmstripTop"></div> <div id="menuChoices"> <p>Home Destinations Themes Specialty Calendars Browsing and Ordering Customer Care</p> </div> <div class="filmstripBottom"></div> </div> </body> </html> I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px. I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length. I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround. However, if there are other browsers that don't support max- and min-width, I'll run into some problems. If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it. I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties. Thanks in advance for any comments! This is frusteratung me so much... yet again I'm back because IE does not respond properly. Here is the page: tri-m.com/index_jan_newFproduct.html Please don't tell me I should validate first because I know validating is not the problem here and I will be validating after I fix this. The problem is in the Join the Mailing List section. The image behind the form field moves when you restore down from being maximized and you resize the page up and down. In IE the image moves but in FF the image is static. The solution is probally quite simple but I'm so flustered right now that I'm not able to come up with the solution. If someone could help me that would be wonderful and greatly apperciated. - Jacenta Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html I've got the layout I want working in IE. I'd like to know how to make it work in all browsers. Mozilla seems to ignore the overflow setting for the docBody class. I'll happily ditch the table if someone can tell me a better way to achieve the result I want. Here's the code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> body { margin: 0; padding: 0; background: yellow; overflow: hidden; } div { margin: 0; padding: 0; } .pageContainer { width: 100%; height: 100%; border-collapse: collapse; margin: 0; padding: 0; } .header { height: 100px; background: orange; } .docBody { height: 100%; width: 100%; overflow: auto; background: black; } .docBodyColumns { margin: 0; padding: 0; width: 100%; border-collapse: collapse; } .col1 { width: 33%; background: green; padding: 10px; } .col2 { width: 34%; background: red; padding: 10px; } .col3 { width: 33%; background: blue; padding: 10px; } .footer { height: 60px; background: aqua; } </style> </HEAD> <BODY> <table class='pageContainer'> <tr> <td class='header' valign='top'>Header</td> </tr> <tr> <td> <div class='docBody'> <table class='docBodyColumns'> <tr> <td class='col1' valign='top'> Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 </td> <td class='col2' valign='top'> Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 </td> <td class='col3' valign='top'> Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 </td> </tr> </table> </div> </td> </tr> <tr> <td class='footer' valign='top'>Footer</td> </tr> </table> </BODY> </HTML> Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S I don't know is it done before or not but i made it ,, i got rid of the onmouseover:crab tags but i think if you announce it as harmless I have use it again because I'll to write three times more code to get what i want with that hover thing. both functional in ie and ff css Code: .ortadiv:link {background-color:#EFEFEF;} * html .ortadiv {background-color:#EFEFEF;} /*hack*/ .ortadiv:hover {background-color:white; cursor:default} html -(my code looks like that) Code: <a class="ortadiv" href="#"><span><h5></h5></span></a> (it doesn't validates !) my main concern is about my headers , because when i use my css-hack-hover they becomes links with "#" . Is it affects search-engine things ? edit: I decided to not to use it because of my validating concerns http://www.knowledge2work.com/testing/test.htm is a link to a menu that I have created. Essentially what I want to happen is that the mouseover on the submenu changes the background color and the text color as well. I have done this using td:hover and ids and it works just fine in Firefox but not at all in IE. Why is this? Hi guys, Was wondering if you could tell me where I'm going wrong with this. Basically I have used the class "WhiteBoldLinks" on some text BUT when the mouse goes over the link I cant get the underline and text colour to work which is assigned to the class "#WhiteBoldLinks a:hover" . How do I use this? Or have I coded it wrong? PHP Code: .WhiteBoldLinks { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #FFFFFF; text-decoration: none; } #WhiteBoldLinks a:hover { text-decoration: underline; color: #FF0000; } Thanks for taking the time to read my question. This works in FF but not IE6. What do I need to change to make it work I have borders around my images which are links and I want the border color to change on hover HTML Code: <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> CSS for container Code: img.ImgNav { border: 1px solid #999999; padding: 0px; margin: 0px 10px 0px 10px; width: 52px; } CSS for hover Code: <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> <a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a> <a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a> <a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a> Thanks, Brad Hi, I have found a nice feature on this website; click here When you mouse over grey - orange images another div comes out. What this is called? Is there any example code that I can work on? Thanks. |