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
Related
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
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';"
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)
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.