How do I get the td to get shaded dark green when the mouse hovers over any part of the table?
IE 6 please.
Please don't complain about cellspacing, the gmail login box uses it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>yo</title>
<style type="text/css">
.square-mosaic-green {
border: 5px solid #a6e3a6;
background-color: #ffffff;
height:75px;
width: 75px;
}
.square-mosaic-green td {
background-color:#a6e3a6;
}
.square-mosaic-green:hover {
border-color: #00ae00;
}
.square-mosaic-green td:hover {
background-color: #00ae00;
}
</style>
</head>
<body>
<table class="square-mosaic-green" cellspacing="10">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
Under IE6, you can't use :hover on anything but links. If you want to achieve such an effect, you need either to resort to JavaScript, or to place an <a> in the cell and make it as big as the cell.
.square-mosaic-green:hover td {
background-color: #00ae00;
}
jsFiddle Demo
This won't work under IE6, just like your code. :hover is only supported on certain elements in IE6.
Here's how to do it with jQuery
$('.square-mosaic-green').hover(function(){
$(this).css('backgroundColor','#00ae00');
$(this).css('borderColor','#00ae00');
},
function(){
$(this).css('backgroundColor','#fff');
$(this).css('borderColor','#a6e3a6');
}
);
http://jsfiddle.net/jasongennaro/CqqvP/
I tested it and it works in IE6.
JS is the only way you are going to be able to do this in that version of IE.
onmouseover="style.backgroundColor='#000';"
Related
I have a simple HTML page as follows :-
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="div1">
<form>
<table>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
</form>
</div>
</body>
</html>
The CSS is :-
div#div1 table,td {
border: 1px solid black;
}
div#div2 table,td {
border: none;
}
As you can see, div2 is not even used in my HTML, but that is the one that takes effect in drawing the table's borders, when I open the HTML file in browser. Shouldn't it be using the border attribute from div1? Even more strange - If I move the div#div2 above div#div1 in the CSS file, it works fine. Also, it works if I completely remove the div#div2 from the CSS. Am I being silly and missing something pretty basic here?
Thanks !!
div#div2 table,td
This is two selectors, div#div2 table as well as td. Get rid of the comma.
div#div2 table td
Or, if you want to style both the <table> and <td>s, you'll need to repeat the whole selector.
div#div2 table, div#div2 td
Try this
div#div1 table td {
border: 1px solid black;
}
div#div2 table td {
border: none;
}
You don't need the comma's
I created a beautiful faux legend for a box that surrounds some text: jsfiddle. However, my solution uses :before and :after pseudo classes, which won't work in IE 7 and IE 8. Bummer.
So I decided I would set out to try to define my own spans to use in the place of the :before and :after pseudo classes. Unfortunately, my solution seems to work for the :before replacement, but not the :after replacement: jsfiddle. Also, the contents of the box have been shifted upwards for some inexplicable reason.
Is it possible to accomplish what I am doing through CSS and HTML alone? I don't want to bring any Javascript or jQuery into the mix.
Thanks!
http://www.webdevout.net/test?01&raw:
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
background: #ff3366;
font: 16px serif;
}
fieldset {
border: 3px solid #ffc2d1;
}
legend {
background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%;
padding: 0 0 0 13px;
}
html > /**/ body
legend { /* if the way it looks in IE8 really bothers you: */
position: relative;
right: -13px;
}
</style>
</head>
<body>
<form action="foo">
<fieldset>
<legend>Model Forecast Guidance</legend>
Fieldset
</fieldset>
</form>
</body>
</html>
Can someone else take a look at this code and either confirm that this is an IE9 bug or tell me what I am doing wrong? With the following HTML code. The bottom border of the button will render the same color as the text even though a border color of red is defined. IE8 and every other browser on the planet renders this OK. Make sure that IE9 is rendering in standards mode.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button.button {
color: blue;
border: 0px;
border-bottom: #FF0000 2px solid;
}
</style>
</head>
<body>
<button type="button" class="button">Update</button>
</body>
</html>
So far the only fix I've found for this is to redeclare a border color for all sides at the bottom of the style.
border-color: #FF0000;
dont know it if helps checked it out its fine for me
use this
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
border:0;
}
.update {
color: blue;
border-bottom: 2px #FF0000 solid;
display: block;
outline:none;
}
</style>
</head>
<body>
<button type="button" class="update">Update</button>
</body>
</html>
and if you accept my opinion, dont use tag names as class name
I want to implement a hover effect with CSS for a html input button. (Changing border color on mouse over).
Actually technically no problem - and it is working - however I have issues with Internet Explorer 7 as well as IE8, because the effect is only working like 80% of the times there.
I also change the mousecursor on hover - which is working without problems - but changing the border (or the background-color) is working only most of the times. Sometimes I enter the button with the mouse and nothing happens.
Is thtere anyway to circumvent this behaviour - without using javascript or code-blowing wrapper elements?
See the following example code for details:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html id="document:html" lang="de">
<head><meta content="0" http-equiv="expires" /><meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<style type="text/css">
input.linebutton {
border: 1px solid #BBB;
margin: 0 2px;
background-color: #EEE;
text-align: left;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 1px 3px 1px 23px;
width: 0; /* for IE only */
overflow: visible;
cursor:pointer;
height:22px;
}
input.linebutton:hover {
border: 1px solid #FF8C00;
background-color: #EEE;
outline: none;
}
input.linebutton:active, .linebutton:focus {
border: 1px solid #000000;
background-color: #EEE;
outline: none;
}
.linebutton[class] { /* IE ignores [class] */
width: auto;
}
</style>
</head>
<body >
<input class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test" />
</body>
</html>
Thanks in advance!
Digging graves up, but I had the same issue with IE7 and input:hover. When I changed the doctype to strict it was then support in IE7. No js needed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE7 support for hover
Not quite so elegant but maybe some jQuery?
jQuery("input.linebutton").hover(function() {
jQuery(this).addClass("HoverClassName");
}, function() {
jQuery(this).removeClass("HoverClassName");
});
Just replace your input[type=submit] by a button and you should be fine.
Your example modified would like like this:
<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>
In this case, internet explorer doesn't seem to give the right amount of margin. It looks like it measures the margin from the top of the box and ignores the padding. Why is this? Is there a good workaround? Here's an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.messagebox
{
border: solid 2px black;
background: blue;
color: white;
padding: 10px; /* Problem only when padding set */
}
h1, h2, h3, h4
{
margin-top: 12px;
}
</style>
</head>
<body>
<div class="messagebox" style="width: 300px">
<h4 style="text-align: center">In IE, this text is 10px higher than in FF.</h4>
</div>
</body>
</html>
I'm working in IE7 and FF3. Thanks.
Welcome to the IE box model bug
You may try
body{
zoom:1;
}
I'm not sure if this will help, but it could be a quick fix if it does!
I don't have a specific answer but I have struggled with the differences between IE and FF as it relates to margins and padding.
You may need to explicitly put in the doc type tag. Especially strict mode. That should get them force them into the same layout model. From there on you are dealing with an art rather than a science.
Good luck.