......
Geek asks and answers

CSS child selector not working on ie9

I have a page like this:

<body>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
</body>

what i need to do is make all these tables 85% wide and center horizontally on the page. it would be easy if the page was a single page, but it should work on more than 100 pages, and the only thing they have is a stylesheet. so i need to do this only with css. I cannot cover tables inside a div or use jquery.

what i tried:

body { text-align:center; }
body > table { text-align: left; margin: 0 auto; width: 85%; }

this works fine on firefox and google chrome, but doesn't seem to work on ie9 (not tested, but I'm sure it won't work with earlier versions)

I tried many methods that they wrote on similar issues, but could not solve this problem.

EDIT:

Dopik Page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

i changed it to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and now it works on ie9!

: doctype?

+3
2

, doctype . IE9, , , , quirks-mode, ( 10 ).

- doctype, :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

reset , , :

body { text-align:center; }
body table { text-align: left; margin: 0 auto; width: 85%; }
body * table { /* Styles for other tables */ }

, , * , doctype - , , .

+4

jsfiddle, , IE9:

http://jsfiddle.net/XFgLf/

+1

More articles:


All Articles