   [web] Valid XHTML 1.1 + CSS 2.0 not displaying correctly...
  (Updated 29/11, IE is better but still broken - Opera is still broken)So I finally got my page to conform to XHTML 1.1 and CSS 2.0. Passes without any errors or even warnings on W3C's validators! *yay for me*But! *here it comes*It only looks like what I expect in FireFox! Opera and Internet Explorer both bork up the page :( See the screenshots and comments below.FireFox v1.0.6 - OKOpera v8.5 - BROKENThe only thing wrong with this is the unexplicable unbreakable line. That line isn't different form the line under it or any other line, but still it displays completely wrong...Internet Explorer v6.0.2 - BROKENThere's no space between tables and the headers of the next table, although I've specified it in my CSS:#main table caption {margin-top: 30px;margin-bottom: 10px;...}Here's the CSS, clickHere's the XHTML, click (view source)Here's the actual page, clickDoes anyone has any ideas on how to fix these errors in Opera and Internet Explorer? =/[Edited by - Seriema on November 29, 2005 10:47:22 PM]
Quote:Original post by SeriemaSo I finally got my page to conform to XHTML 1.1 and CSS 2.0. Passes without any errors or even warnings on W3C's validators! *yay for me*Congrats [smile]Quote:Here's the actual page, clickLooks fine for me (FireFox 1.0.7 on Linux);  You should read Explorer Exposed. It inventories all the quirks of IE. [edit] By mentioning that site, I am not recommending that you write hacks for your site to accomodate IE; it is simply so that you know what to look out for, and so that you can redesign to avoid those problems (if you wish to). [/edit]Speaking of quirks, this is a shot in the dark, but do you have an <?xml declaration at the beginning of your document? If you do, Internet Explorer (at least v6) will go into "quirks" mode (assuming you have an XML Strict DOCTYPE), otherwise it will go into "strict" mode -- look here. Try adding an <?xml declaration if you don't have one, or removing it if you do. It *might* help (example, margin: 0 auto doesn't work in IE quirks mode, but does in strict).jfl.   ;  Sander, thank you for checking. Although I already knew FF was working, it was the others that are broken. I've updated my OP to be clearer :)jflanglois, great! That seems to be what I need for the IE problem! Gonna read it when I get home!   ;  I had a look at your site in different browsers.Maybe you could try wrapping that line ("supported filetypes") in a div? I found this usually helps with certain things.I havent looked hard enough but I think I couldn't find a "align=center" for your main div. Maybe that's why it's not centered in IE?Not sure about the broken image in IE :(;  damn, the above anonymous was me. Just wanted to add your site looks ok in Safari.;  jflanglois, the header I have is:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">removing it didn't help =( And I couldn't find a quirk on that page that was like my problem, found very similar stuff but not the same.basement, I tried the div blocks - didn't help =( although I'm gonna keep them, because then I can move that text around with CSS =P Good to know that it works in Safari though! =DDoes anyone else have any exceptions?   ;HACK TIME!First, we set a center attribute on the body.body {...text-align: center;}Then we create a  block around the whole body and format it.#wholewindow {/* IE hack, to center the main box */width: 758px;text-align: left;/* maintain compability with FireFox */margin: 0px auto;}Now it centers correctly in IE! but I've still got that padding problem. It seems that the 10px padding isn't working, so it get 20px thinner than it should.;  Try removing the comment and extra lines at the top so that the '<' of the DOCTYPE declaration is the first byte in the file. That might be causing IE to revert back into quirks mode.   ;  Here's a different way to do IE specific hacks./* For all browsers */.class {  attrib: value;  attrib2: value;}/* IE specific overrides */* html .class {  attrib: value;  attrib2: value;}Try using that to fix the padding issues for IE. For some ungodly reason there's a ghost element above the html element in IE's DOM. The * html part will therefor only match in IE browsers. Use this kind of CSS hacks sparingly though. You have no idea how those hacks will play out when IE7 comes out.   