PDA

Click to See Complete Forum and Search --> : IE misses CSS

digitalecartoon
08-10-2008, 03:55 PM
Can someone explain this for me? If I view this page on Firefox the mystyle div gets its green background as it should. When I view it on IE it stayes white??? Strange: when I delete either the inline styles 'position', 'width' or 'text-align', I do get a green background in IE.

<html>
<head>
<title>Untitled Document</title>
<style>
.mystyle{
background-color:green;
}
</style>
</head>
<body>
<div style="position: relative; width: 100%; ">
<div style="text-align: left;">
<div class="mystyle">This is a test
</div>
</div>
</div>
</body>
</html>


I've also tried this:

<html>
<head>
<title>Untitled Document</title>
<style>
.mystyle{
background-color:green;
}
</style>
</head>
<body>
<div style="position: relative; width: 100%; text-align: left;">
<div class="mystyle">This is a test
</div>
</div>
</body>
</html>

combining the 3 inline styles into one, and that gives the green background too.

It lookes like it's this particular format IE has trouble with:
<div style="position: relative; width: 200px; ">
<div style="text-align: left;">

Who can explain why IE does this?
Quidam
08-10-2008, 04:04 PM
try replacing <style> with

<style type="text/css">
digitalecartoon
08-10-2008, 04:07 PM
No that doesn't work either. I've now got this. Works perfectly on Firefox, but unless I turn position: relative to absolute or delete that inline style or the width inline style, it's keeping it's white background on IE.
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.mystyle{
background-color:green;

}
</style>
</head>
<body>
<div style="position: relative; width: 200px; ">
<div>
<div class="mystyle">This is a test
</div>
</div>
</div>
</body>
</html>
digitalecartoon
08-10-2008, 04:10 PM
Even using all inline styles don't work. This still stays white in IE (green background in FF). Why is this happening?
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div style="position: relative; width: 200px; ">
<div>
<div style="background-color:green;">This is a test
</div>
</div>
</div>
</body>
</html>