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.
Related
When I add a margin to .child in the following code IE8 ignores it. In modern browsers the same code is working as expected. What is causing this?
<html lang=“de“ xml:lang=“de“ xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=“Content-Type“ content=“text/html“; charset=“iso-8859-1“ />
<title></title>
<style>
.parent {
margin: 5px;
border: 10px solid blue;
position: relative;
}
.child {
margin: 10px;
border: 10px solid red;
padding: 4px;
}
</style>
</head>
<body>
<div class="parent">
<p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD!
<span id="textOutput"></span>
</p>
</div>
</body>
</html>
The problem is that you have not supplied a doctype which means that IE8 does not know what rendering mode to use and is therefore defaulting to quirks mode. Quirks mode is essential an old, non-standard layout engine used back when the web was young:
There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.
Quirks Mode and Standards Mode (https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)
Browsers handle a lack of doctype in different ways and you should always ensure that you specify one at the beginning of you HTML to ensure consistent rendering of your page. At time of writing I would recommend the HTML5 doctype as it is short, clear and supported as far back as IE6.
<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.parent {
margin: 5px;
border: 10px solid blue;
position: relative;
}
.child {
margin: 10px;
border: 10px solid red;
padding: 4px;
}
</style>
</head>
<body>
<div class="parent">
<p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD!
<span id="textOutput"></span>
</p>
</div>
</body>
</html>
It should also be noted that you need to use normal quotation marks not curly quotes for your attribute values and need a closing html tag.
Does someone know why there is a margin (about 1px) around the button background-image, only in Internet Explorer ?
Try this code in IE vs Firefox :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type='text/css'>
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
}
</style>
</head>
<body>
<button>LOL</button>
</body>
</html>
Here is how it is displayed on my computer in IE9 (in big size) :
Notice : If I remove the (black) border, the margin disappears.
Thanks.
Differnet browsers have different definitions of the button tag (and other tags). In fact, Chrome have a margin of 2px. You can easily solved it by making margin explicit:
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
margin: 0; /* or ex 1px */
}
Update:
I think it is the font-family (or the rendering of it) which is different, try:
button {
background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
border: 1px solid black;
font-size: 24px;
/* To get it exact */
margin: 0; /* or ex 1px */
padding: 0; /* or ex 1px */
font-family: Consolas;
}
Update:
Without <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> I can reproduce the problem. And in this case IE is running in Quirks mode. Do you include the doctype when you test it?
Anyway, you just have to avoid quirks mode: http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode
Ex avoid ANYTHING before doctype.
I didn't faced such problem with your code, probably this is because you ie version is older one.
Different browsers have different generic style standards for different html elements. To avoid this problem (or defend against it the best you can!) you should really include a reset style sheet in all your sites to try and synchronise the styles of all browsers best you can. One of the greats I have found is Erics Archived thoughts:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
This typically does the trick (with a few little tweaks after a penultimate cross browser test).
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';"
Need a div to partially show the image behind it, is this even possible? Tried:
opacity:.5;
AND
filter:alpha(opacity=50);
Both produce a solid div.
Any help would be much appreciated.
From a wondrous pure guess in a comment, I managed to find a working answer:
Did you try using a semi-transparent
.png?
Yay!
Right you are, thirtydot! You gotta toss a thumbs-up for cfdocument, eh?
I've confirmed this works in CF9. I do wonder whether this example is backward compatible.
Can anyone confirm other ColdFusion versions support this?
<cfdocument format="PDF" pagetype="letter"
margintop="0.5" marginbottom="0.5"
marginleft="0.5" marginright="0.5">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body { background-image: url( "images/use_your_image.jpg" ); }
img { border: 3px solid #990000; }
</style>
</head>
<body>
Does transparent image appear above the background repeated image?
<img src="images/red_transparent_100x100.png">
<!--- Generated this at http://transparent-png-generator.com/ --->
</body>
</html>
</cfdocument>
You can save the code below and try it out.
In firefox,it's full browser grey,but in IE(IE7 to be exact),it's not working.
<!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>
<style text="text/css">
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
}
</style>
</head>
<body style="font-size:62.5%;">
<div class="overlay"></div>
</body>
</html>
IE doesn't recognize the CSS color name grey. Try using a hex color, e.g., #ccc, and it will work. Alternatively, using gray (with an 'a', not an 'e') also works.
Note that this is standards-compliant, because W3C doesn't say anything about supporting alternate spellings of gray, and gray is indeed the color name according to the spec for CSS3.
Try adding this to your style defs:
html, body {
height: 100%;
}
On IE, body doesn't extend the full height of the viewport by default, and your overlay's container is body, so...
Edit Just tried it, and yours worked without the above, must be because body is statically positioned. Anyway, John Feminella figured it out; see his answer.