IE7 can't handle CSS

[polorboy]

I am making a site now and I have it validated for xhtml1.0 transitional, xhtml1.0 strict, and even for xhtml1.1 and it loads perfectly fine in IE6 but when I try out IE7 it just stacks everything on top of each other and it looks like crap, it doesn't even recognize my any of my a tags, which don't have anything to do with css. It is rediculous, and microsoft calls this a better browser? I really don't think so, it is like they went back a few years and are re-releasing an old version with a new skin. It even screwed up my install of Firefox2.0 (which handles my page beautifuly) and I also use Avant Browser but that uses IE's engine (it just adds tabs pretty much). Does anyone know how to "fix" a xhtml site that validates according to w3c specs to work in IE7? Like I said, everything just stacks in the top corner and you can't see anything. If anyone has IE7 installed, take a look at: http://www.ecdprint.com/test, even check the validation links on the bottom (if you can see them). If anyone happens to have IE6 and IE7 both installed and usable compare the two and let me know, becuase this is just frustrating. I don't want to have to go back to html clunky coding with tables just to make it work in IE7.

[Znupi]

Everything stacks up on top of each other in Firefox 1.5.0.7, too... Curious...

[ray326]

My gut feel is it's doing exactly what you're asking and IE6 is getting it wrong.

[drhowarddrfine]

Remember the rule: Never, ever design using IE6. Always use Firefox or Opera. Then adjust for IEs quirks and bugs.

[Kravvitz]

It looks messed up in FF1.5, FF2, and IE7 for me.

I expect it has to do with your use of position:fixed;.

Why are you not allowing the page's content to scroll vertically?

[polorboy]

Doh, ok, I am still kind of new to CSS and I wasn't totaly sure what the difference was between fixed and relative. I guess that's it. And, no I wasn't designing specifically for IE, I have tested it in IE and Firefox and I was asking, why on earth is it working in IE6 but not in IE7 or Firefox (as in, it is really stinking backwards...)

[polorboy]

And, that fixed it, I changed all the position:fixed to position:relative, and it works now... it is always the simple things that get you. Thanks.

[polorboy]

Though, I have a gap between the top and bottom of some of my images and I can't get rid of it, anyone want to take a look at it?

[_Aerospace_Eng_]

Add this to your CSS
.indexpics img, .indexpics2 img, .indexpics3 img {
display:block;
}

[polorboy]

It's still there, I've tried everything, there is no padding, no margins, no border even, and I added the display:block and it is still there. This is like working with tables again, lol.


.... I just tried setting vertical align to top and that fixed it. Wierd, but what ever works.

[_Aerospace_Eng_]

Then maybe you should tell us exactly what images you are talking about. line-height:0px; can also fix it but if you aren't detailed enough when saying "images have spaces around them" we can't do much. Exactly WHAT images have spaces around them. We aren't psychic.

[polorboy]

yeah, sorry, the images of the owl. I broke it up into smaller peices and there were spaces between them but I fixed it with setting verticle-align:top. I just updated the version on my webserver, so you guys can see the most recent. It is still at the same link http://www.ecdprint.com/test. I am think I have it figured out, but I do appreciate the help, and how fast people respond.

[polorboy]

Though, I just noticed, the images on the side menu (the top ones that make up the W.I.S.E. emblem with the curve), in firefox don't line up. It is like the div tag that the right half of the image is in is stretching too much but both images are in seperate div tags that are inside another. I had to do that to get the background image behind the text to work right (on the left navagation column).

[_Aerospace_Eng_]

The idea behind coding without tables is NOT to replace every single td cell with a div. It seems like you have a case of divitis (click me) (http://www.csscreator.com/divitis). As for those images not lining up add this to your CSS
#leftnavbg p {
margin:0;
padding:0;
}

[polorboy]

Lol, well I am actually not replacing every table cell with a div tag. I am using as few as I can still have it look the way I want. If you want to see what my stuff used to look like checkout http://www.ecdprint.com/test/creativedesign.html. I am redoing all my pages using css. The codes is about a 1/4 the size of my older stuff. There are just somethings that I could not do without nesting div tags. The repeating background on the left column is a good example. The fewest amount of div tags was two nested inside another larger one to hold them together. Otherwise they would be at opposite ends of the page. But, yeah, I didn't think of removing the padding and margins from the p tags.

[Kravvitz]

I'd like to point out that you may not need any of those "position" declarations.