12-17-2010, 08:07 PM
I'm new here and i am having a problem with IE (who doesnt haha)
If you look at my site http://www.gorillaonemedia.com/home.php in FF, Safari, Chrome ect everything looks great, now in all versions of IE even 9 beta, the whole page is jacked up. Any ideas? im trying to have my site look well in all versions of IE and gecko-based browsers as well. Can anyone help me, it would be much appreciated! the object is for div#inner to sit directly in the middle of the page and div#footer to always stick to the bottom, which is sticking in IE but the inner div sits at the top, i think IE doesn't support vertical-align:middle;
Its weird too because even my input boxes are different sizes, when i look at my site from local (ie harddrive) it looks fine in IE. Why does it look jacked up when its posted to the web? Can someone help? Thanks in advance!!
12-17-2010, 08:14 PM
Check your code in the validator. IE is handling your mis-use of the ul differently than other browers.
Links about validation in my signature line.
HTML ul tag (http://www.w3schools.com/tags/tag_ul.asp)
12-17-2010, 08:17 PM
so basically the li tag HAS to sit within a ul tag?
12-17-2010, 08:20 PM
A ul is an unordered list. Without li items in it, it's not being used as intended. Did you check in with the validator?
Use a div there, when you actually need a container at all. Even adding the missing li does not make it semantic since a list is multiple items.
12-17-2010, 08:31 PM
i cant figure out what the hell is going on. could you or someone please scan through my code and see what the deal is? im stuck, now jQuery aint even working. God, why does microsoft have to be so difficult, sometimes i think they do that **** on purpose to mess with us, you would think they would get it right by now. Both my html and css documents passed validation, everthing is still jacked up!! must be some property's being used that IE doesnt support!
12-17-2010, 08:41 PM
jQuery still working here.
You have some issues with your positioning. You should re-think your need for positioning at all - see the pitfalls of absolute positioning here (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
If you decide to go ahead anyway, make #inner position: relative; then #login and #testimonials should be position: absolute;
Look at what you are telling them to do though:
#login is height: 100px; and placed top: 20px;
Then you have #testimonials with a fluid height and placed top: 30px; overlapping #login by 90px.
12-17-2010, 09:20 PM
sweet that positioning helped out a lot thx!! just a couple more things that i cant figure out. Why are my input boxes different size in IE? why is the font at the footer bigger in IE? and why does the inner div sit at the top in IE, FF and others have it in the middle which is where it should be. if you look in my head section you will see that i have all the if IE tags, are these good as well? thanks again so much, you saved the day!!
12-17-2010, 09:39 PM
why is the font at the footer bigger in IE?
I think font-size: x-small is variable. Give that an actual px size and see if that helps.
and why does the inner div sit at the top in IE, FF and others have it in the middle which is where it should be.
That may not be the best vertical centering method. That is what all that nesting containers and conditional comments are attempting?
Have a look at a better method of vertical center here (http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/page4.html).
12-17-2010, 10:09 PM
i followed the link you gave perfectly but i am apparently missing something, as you can see! also along with the fact that the inner div will sit in the middle, i need the footer div to still sit at the footer, do you know of any examples of this? thanks again for everything!
12-17-2010, 10:36 PM
You followed the CSS but not the markup. Your #inner is still a child of #outer and they should be seperate. Close #outer before #inner starts.
12-17-2010, 11:08 PM
I got it! that was mind-boggling haha. Now, jquery keeps turning on and off for some reason, is my jquery (menu) working in IE for you? also, now that we have the inner div sitting in the middle, i want to add sticky footer to this document! with the div name "footer". how would i do this. thanks so much again, you know your code!!
12-17-2010, 11:25 PM
This might work for you at larger resolutions. It does not work well when the screen is sized smaller than the height of #inner though - /* Footer Content */
margin: 0 0 0 -367px;
12-17-2010, 11:35 PM
this works great although the footer overlaps everything when the screen is adjusted, how can we make it stop (then page scrolls) when it hits the inner div? below link is what im trying to achieve along with vertical centering:
12-18-2010, 12:51 AM
The sticky footer your attempting does not work without the #push. Look at his markup closer.
Here is an easier method of full-height layout (http://nopeople.com/CSS%20tips/full-height-layout/index.html).
12-18-2010, 02:55 AM
now this is wierd, i used sticky footer and it works great in IE, but not in other browsers, check it out!