IE9 Border Color Bug? - css

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

Related

Textarea field, border 2px on focus, moves other HTML elements

The problem:
I've created a simple test page (below) to demonstrate what the problem is.
When you set CSS on textarea field with border = 2px, the textarea will resize itself
and hence all fields/content below textarea will move down.
This only applies to textarea and select fields while input field doesn't act this way.
I've tested this in IE, Opera and FF and none of them produce the same behavior,
they all work like they should while Chrome moves all elements below them.
Anyone knows a fix that will prevent this with CSS?
The example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style language="text/css">
textarea:focus {
border: 2px solid #000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
}
</style>
</head>
<body>
<form>
<textarea name="test" cols="0" rows="0"></textarea>
<br />
This text and button will move a few pixels down when you click in textarea field.
<br/>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
It is happening because you are giving border on hover. The border should already be there as transparent color and on hover or focus just give border-color.
textarea:focus {
border-color:#000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid transparent;
}
Use css box-sizing: border-box; property in your textarea css. see example :
textarea {
box-sizing: border-box;
}
I checked your code. Actually Chrome adds the border excluding from width and height.
You can check this by using "box-sizing" property.
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Happy Coding!

CSS hover of table affects both table border and td

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';"

How to fix CSS hover bug in IE7 and IE8?

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>

CSS raised border using CSS2

Using current CSS and not CSS3, is there any way of specifying a raised type border style? I would like to somehow emphasize my menu. Basically I am after a border that has has a rounded edge, not rounded corners.
With CSS 2.1 and prior you can use double, ridge, groove, inset, or outset. I've put together a simple demo file for you to play around with and test the various border styles available to you.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Border Styles</title>
<style type="text/css" media="screen">
body { background: #999; }
div { background: #eee; float: left; margin: 10px; padding: 10px; height: 100px; width: 100px; }
.double { border: 4px double #ccc; }
.ridge { border: 4px ridge #ccc; }
.groove { border: 4px groove #ccc; }
.inset { border: 4px inset #ccc; }
.outset { border: 4px outset #ccc; }
</style>
</head>
<body>
<div class="double">double</div>
<div class="ridge">ridge</div>
<div class="groove">groove</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
</body>
</html>
You cannot make a rounded-corner without the CSS3 spec border-radius property. If you want to do this you should use a script like Modernizr to provide alternate support for browsers that cannot support CSS3.
Not without images. And CSS3 could be called current CSS, at least in implemenation with WebKit and to a lesser extent Gecko.
IE is playing slow paced catch up too :)
You could try and make a raised border by having a few child elements, all with a border and with a lighter shade of colour as you reach the outside border.
Also, you can cause 1px notched corners too with negative margins and CSS. It can also be argued you can make rounded borders without border-radius, but the HTML and CSS are quite horrendous (think of all the child elements with negative margins etc)

Why are these styles not visible in IE6

Given the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.apartBox
{
padding:12px;
background: #FFFFFF;
border: solid 1px #6182A3;
}
.browser
{
background: #fff;
border: solid 1px #0055E3;
border-top: solid 12px #0055E3;
border-bottom: solid 4px #7A99C5;
padding:10px 10px 8px 14px;
color: #333;
font: 0.8em/1 arial;
margin: 8px 20px;
}
.callout
{
background: #EEF2F0;
border: solid 1px #9CC7C0;
padding:8px;
}
</style>
</head>
<BODY>
<div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative">
<div id="upSubPop">
<div class="callout" id="subDetails">
<div class="browser">
<span id="txtExample">Me afecta que digan que soy incapaz.</span>
</div>
</div>
</div>
</div>
</BODY></HTML>
The styles from the css .browser and .callout are not visible in IE6 unless I manually remove the position:relative style from subPopout. This div is generated automatically from a modal popup so I unfortunately can't touch this style. It displays fine in FF. If I select the .browser div with my mouse, it displays when I unselect it!
Why are these styles not visible in IE6
To be short, because it's IE6!
Can the box have a fixed height?
If yes, a possible solution would be to set a fixed size to upSubPop element. For example, if you add:
div#upSubPop{background:red;height:500px;}
to your stylesheet, the blue borders are displayed correctly in IE6.
Another workaround would be to set the height of <div class="browser" style="height:1px;" /> to 1 pixel. In this case, IE6 displays the element with appropriate height based on contents (so you will see the whole "Me afecta que digan que soy incapaz." message. The problem is that the real browsers as FF will then display everything incorrectly (to be more precise, the message will overlap the bottom border). So in this case, you can use conditional CSS to ensure that your message block is displayed as required both in real browsers and in IE6.

Resources