So I am trying to make my website compatible across a multiple of web browsers and I am stuck trying to get my site work in IE. Here is my site http://www.fragmentedmemories.net/
If you have, say, Firefox and IE, on Firefox it looks like this: http://img541.imageshack.us/img541/1410/picture2acs.png
But in IE it looks like this: http://img844.imageshack.us/img844/5476/eduph.png (I fixed the center problem, but my problem is the navigation on top)
How do I fix this? here is my CSS for the navigation. In IE it streches the page where in firefox, chrome, opera it doesn't
css:
Is the problem that the menu is too far to the right?
FYI I use K-Meleon, a gecko browser that is a couple of gecko versions behind FF. In that browser the big image animation is down in the black area.
The whole layout is at 1000px but the top navigation breaks that. I noticed in IE if I dont give the div header a width the navigation is side by side with the image logo. In Chrome/Firefox/Safari/Opera the navigation DIV overlaps the image logo. So I think that is my problem right there.
Do you have a solution to fix the problem with the slideshow being on the black part of layout on your browser?
Your broken doctype declaration throws browsers into quirks mode:
http://hsivonen.iki.fi/doctype/
The doctype should be the first thing in the document. The <html> tag should come after that.
When you fix that, the markup errors reported by our online validator will be more meaningful. Right now, they contain a lot of noise that is triggered by the doctype problem:
http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.fragmentedmemories.net%2F&warnings=yes
The W3C CSS Validation Service reports CSS errors:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.fragmentedmemories.net%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en
The first thing I notice is the large blank space at the top of the page, because your Flash animation doesn't display until I whitelist your site.
Ok I added <!DOCTYPE html> before the <html> tag and this should help?
What is whitelist? The slideshow uses Javascript so I don't know if that makes a difference or now.
BTW, here is the link to the W3C's validation report:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fragmentedmemories.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
(Our online validator doesn't understand HTML 5 yet.)
Thanks I made changes too the site as much as I could becasue a lot of the errors are Wordpress errors and I am not completely sure how to edit those.
Is the slideshow still on the back part of the site on K-Meleon? I use mac and that browser isn't compatible with iOS.
Yup. There's nothing on the gray background. It looks like everything has been pushed down. The logo and top menu are still where they should. Could be a float drop.
K-Mel uses the same rendering engine as FF, so a little older FF should show the same problem. It's just that I like K-Mel's chrome and features better. HTML-wise there is no difference between it and FF if they use the same gecko version.
I downloaded an old version of firefox and I see it now. I don't understand why it is like that. The <aside> code doesn't have a float property in it so I am really lost and confused right now.
Maybe gecko didn't grok ASIDE until recently. When I replace it with a DIV things seem to work.
I put borders on ASIDE and #fadeshow1, and #fadeshow1 clearly shows up below ASIDE. I tried to make ASIDE explicitly block, but that didn't help.
so would replacing my <aside> with a div be better? Because I've noticed all the blog directories I've submitted when it takes a screenshot the slideshow is pushed down into the black part of the layout.
HTML 5 is still pretty new. It's still just a working draft. The latest browser versions are starting to support the new markup in HTML 5, but not everyone upgrades to the latest browser versions immediately.
Yeah your right. I replaced the <aside> and <footer> with <div>
I have script that was suppose to degrade the html5/css2 script for older browser but I guess it didn't work for some.
Seems like the right thing to do. I'm not too well read up neither on HTML5 or browser support for it, but as with everything new, if there is no special reason you need it, the old and save stuff may be a better choice. After all HTML5 is still a working draft, not a spec, and apart from older browsesr there are also special applications to consider, like screen readers, search engines and the blog directory gizmos you mentioned. Seems a bother to keep track of what everything supports or not at this stage.
I guess we need to ease it in a little at the time as we did with CSS and start with the safe or at least not harmful stuff.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)