Mouse51180 Posted November 27, 2014 Share Posted November 27, 2014 Im starting to learn CSS and I have the following code that make a in img background, alternated colors in a table and then has a mouseover change of colors.<style type="text/css"> th { background-color: #00F; color:#FFF; font-size: large; font-weight: bolder; font-family: Georgia, "Times New Roman", Times, serif; } tr:nth-child(even) {background-color: #6FF; opacity: .8;} tr:nth-child(odd) {background-color: #FFF; opacity: .8;} tr {text-align: center;} body {background-image: url(DiveFlagBackground.jpg);} tr:hover{background-color:#000; color:#00FF00}; </style> I have started to realize that depending where each line of code is will determine how everything run...for instance if I move my background-image line to the the top of the script...it disappears from the screen...im still working on understanding this, but that is nor here nor there right now.My issue is this...when I test this page in Chrome, everything looks how I want it. The table header section doesnt change any color, on mouseover only the table row with the table data changes color, and you can slightly see the image in the background through the table.When I test this in IE11 the opacity setting looks like it is being ignored and complete covers the whole background image. Also when I do the mouse over everything looks good except when I mouseover the table header section it changes to a slightly darker blue. It there an exclude or an "if row = th" or "if row = 0 color change = NULL" type of statement I need to put in? Not sure what to do about the opacity setting as I thought this code would work for anything past IE8. If you would like to see the issue my page is http://mouse.myds.me/Test1.php Thanks for any advise\help. Quote Link to comment https://forums.phpfreaks.com/topic/292757-hover-and-opacity-question/ Share on other sites More sharing options...
Ch0cu3r Posted November 27, 2014 Share Posted November 27, 2014 You have have not closed the opening table tag. There should be a > after cellspacing="2" Your HTML is not a complete document you have left of the DOCTYPE, <html>, <head></head> tags. Basic HTML structure should look like <!DOCTYPE html> <html> <head> <title>Title</title> ... link to styesheets / javascript / other external resourse here ... </head> <body> ... html for page here ... </body> </html> When I test this in IE11 the opacity setting looks like it is being ignored and complete covers the whole background image Try using filter. IE is not always known for treating CSS properties the same as other browsers. It there an exclude or an "if row = th" or "if row = 0 color change = NULL" type of statement I need to put in? Make your selector be more specific tr:hover will affect any HTML element contained within the table row. However tr:hover td will only affect the <td> tags within the table row. .for instance if I move my background-image line to the the top of the script Moving the body selector to the top should not affect anything. Just make sure you have not placed it within another selector! Or caused syntax error in your css elsewhere. Quote Link to comment https://forums.phpfreaks.com/topic/292757-hover-and-opacity-question/#findComment-1497871 Share on other sites More sharing options...
Mouse51180 Posted November 28, 2014 Author Share Posted November 28, 2014 Thank you for the help...I have gotten some of this working now. Quote It there an exclude or an "if row = th" or "if row = 0 color change = NULL" type of statement I need to put in? Make your selector be more specific tr:hover will affect any HTML element contained within the table row. However tr:hover td will only affect the <td> tags within the table row. The tr:hover td worked to resolve the title changing color...I thought I had tried that once before, but perhaps I fat fingered the code. I have also added the missing <STUFF> from my page. Im using Dreamweaver and it did not add all this by default since I chose to start this as a php page...everything was working fine...so I didnt think it was necessary. Quote When I test this in IE11 the opacity setting looks like it is being ignored and complete covers the whole background image Try using filter. IE is not always known for treating CSS properties the same as other browsers. Im not getting the the opacity to work still. I have tried playing with the filter option, but I cant seem to get it to work. I have replaced the opacity in code mentioned in the initial post tr:nth-child(even) {background-color: #6FF; target: opacity(80%);} I have tried adding it in addition to the current opacity code tr:nth-child(even) {background-color: #6FF; opacity: .8; filter: opacity(80%);} I have tried moving it around the code tr:nth-child(even) {background-color: #6FF; opacity: .8;} tr:nth-child(odd) {background-color: #FFF; opacity: .8;} filter: opacity(80%); tr:nth-child(even) {background-color: #6FF; opacity: .8;} tr:nth-child(odd) {background-color: #FFF; opacity: .8;} tr {filter: opacity(80%);} ...just cant make any headway with it. Here is my current code for the whole page: <!DOCTYPE html> <html> <head> <?php include_once("divelog_connect.php"); $sql = "SELECT * FROM DL_Logbook ORDER BY Number DESC LIMIT 0,20"; $records = mysqli_query($sql_connect,$sql); ?> <style type="text/css"> th { background-color: #00F; color:#FFF; font-size: large; font-weight: bolder; font-family: Georgia, "Times New Roman", Times, serif; } tr:nth-child(even) {background-color: #6FF; opacity: .8;} tr:nth-child(odd) {background-color: #FFF; opacity: .8;} tr:hover td{background-color:#000; color:#00FF00;} body {background-image: url(DiveFlagBackground.jpg);} tr {text-align: center}; </style> </head> <body> <br /> <br /> <br /> <br /> <table align="center" border="5" cellpadding="5" cellspacing="2" <col width="auto"> <tr> <th>#</th> <th>Dive Date</th> <th>Dive Time</th> <th>Max Depth <br /> (Feet/Meters)</th> <th>Dive Site Name</th> <th>Location</th> </tr> <?php //Pull data for table: While($DL_Logbook = mysqli_fetch_assoc($records)){ echo "<tr>"; echo "<td>".$DL_Logbook['Number']."</td>"; echo "<td>".$DL_Logbook['Divedate']."</td>"; echo "<td>".$DL_Logbook['Divetime'].' min'."</td>"; $meters = round($DL_Logbook['Depth'],1); $feet = round(($meters * 3.2808),1); echo "<td>" . $feet . ' ft / ' . $meters. ' m' . "</td>"; echo "<td>".$DL_Logbook['Place']."</td>"; echo "<td>".$DL_Logbook['City']."</td>"; echo "</tr>"; }//end while ?> </table> </body> </html> Where or how should this filter option be added? One other item I just noticed was in Chrome my table has a 3d looking frame...in IE it has a solid black bar frame...im curious if I should probably create the table in the css section instead of the html body section... what is recommended or suggested or is it not going to make a difference either way IE just doesnt want to run the code like the other browsers? Quote Link to comment https://forums.phpfreaks.com/topic/292757-hover-and-opacity-question/#findComment-1497905 Share on other sites More sharing options...
Ch0cu3r Posted November 28, 2014 Share Posted November 28, 2014 Um... weird IE does not like the background color being applied to the table row along with opacity. I experimented by adding td after the tr:nth-child() selector and this seemed to fixed the opacity issue. . CSS body { background-image: url(DiveFlagBackground.jpg); } th { background-color: #00F; color:#FFF; font-size: large; font-weight: bolder; font-family: Georgia, "Times New Roman", Times, serif; } tr:nth-child(even) td {background-color: #6FF; } tr:nth-child(odd) td {background-color: #FFF;} tr {text-align: center; opacity: .8;} tr:hover td {background-color:#000; color:#00FF00}; I have only tested on IE11 (no idea about earlier versions) Quote Link to comment https://forums.phpfreaks.com/topic/292757-hover-and-opacity-question/#findComment-1497930 Share on other sites More sharing options...
Mouse51180 Posted December 1, 2014 Author Share Posted December 1, 2014 Looks to be working now with your td suggestion...thank you for all the help. Quote Link to comment https://forums.phpfreaks.com/topic/292757-hover-and-opacity-question/#findComment-1498148 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.