I’m making a theme that has inline CSS as a first website at
http://flexibilitytheme.tumblr.com/
I’ve tested it in Firefox, Opera, Chrome only to find most CSS doesn’t display correctly in the latest edition of Internet Explorer.
The theme is supposed to responsive (try resizing window to the size of a mobile) so I’ve put values in percentages rather than absolutes as well as a media query.
Am I missing something essential?
In the above screenshot, for example:
- Lists aren’t displaying inline and taking up 100% of the line (display: inline)
- Margin in sidebar is too large (margin-bottom: 10%)
- Background not displaying on text (background: #f2f2f2)
- Text for dates not changing to uppercase (text-transform: uppercase)
- Images don’t resize
All the CSS is inline except for an external style-sheet which is a CSS reset.
You have a comment above the doctype, which is causing IE to use Quirks Mode:
Remove that comment, and all will be well.