Forum Moderators: open
The offending code was like this:
------------
<div style=" margin-left:35%; margin-right:35%; margin-top:200px; width:30%; height:300px; background-color:#0000FF; z-index:100; position:fixed; text-align:center; vertical-align:middle; border-color:#000000; border-style:solid; border-width:thick; color:#FFFFFF;>
<form>
<table>
<tr>
<td>Text</td>
</tr>
</table>
</form>
</div>
-------------
Which has worked on every browser just fine up until now. IE8 however was displaying an empty box. By experimentation I figured out that it would work if there was something between the <div> and the <form>. <br> works. works. Text works. <container> doesn't, but anything visible does.
So I want to know what flipping rule I was violating? Why were the MS deities not pleased unless I put unnecessary characters in there? And more importantly, does anyone have a good source I could read through to figure out what other "broken" code is sitting out there while working just fine for the good Firefox, Opera, and Chrome users?
So I want to know what flipping rule I was violating?
I wish I knew. Every IE 8 display problem I've stumbled over so far has the exact same nature - valid code, works in compatibility view and in every other browser I can test. But IE 8 does something quirky with it.
So in this case I'm sorry, but IE8 isn't to blame for anything. Faulty code is.
So in this case I'm sorry, but IE8 isn't to blame for anything. Faulty code is.
It's definitely IE8.
<!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>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style=" margin-left:35%; margin-right:35%; margin-top:200px;
width:30%; height:300px; background-color:#0000FF; z-index:100; position:fixed;
text-align:center; vertical-align:middle; border-color:#000000;
border-style:solid; border-width:thick; color:#FFFFFF;">
<form action="#">
<table>
<tr>
<td>Text</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Works just fine in IE8 and looks exactly the same as it does in FF3.5, safari 4.02 and opera 9.64 .
There are a few slightly odd things about your CSS though:
- your div becomes too wide for its parent:
35% margin + think border + 30% width + think border + 35 % margin is always going to be more than the width of the parent. If it were not position:fixed this might be a problem and it would be simpler to use auto margins.
- text-align:center is not going to have an effect as the table inside that has text will collapse around the text and keep it left aligned
- vertical-align:middle isn't going to do what I think you might be seeking.
- You do know what position:fixed does ? (esp that there is no escape from it by scrolling)
But as said -for the sample provided- IE8 acts the same as other standards compliant browsers.
I had cleaned it up for the sake of example, keeping what I felt was relevant since the actual has embedded PHP and such. But clearly the cause was something I'd cut. When I get a chance I'll experiment until I figure out what the actual cause is, then I can research the specification.
Thanks for the reply.
p.s. Board question: what tag did you put your code in? I used [code] in the initial post and you can see that it didn't preserve my indents at all.
What I use:
[quote][pre][code]
code goes here
[/code][/pre][/quote]
And:
I start out with 4 spaces per level indentation, go back after every preview, leaving 2 spaces per level so a mod could do one edit without destroying the indentation)
I keep a copy in a paste buffer should I need to re-edit myself.
