Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15

Thread: IE Sucks!!!

  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    IE Sucks!!!

    Hey guys,

    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!!

    -Ryan

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello eberdome,
    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

    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    so basically the li tag HAS to sit within a ul tag?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    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!
    Last edited by eberdome; 12-17-2010 at 07:35 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    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!!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    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!

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    /* Footer Content */
    
    div#footer { 
    height:25px; 
    width: 734px;
    position:absolute; 
    bottom:0; 
    left: 50%;
    margin: 0 0 0 -367px;
    text-align:center; 
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    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:

    http://ryanfait.com/sticky-footer/

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    eberdome (12-18-2010)

  • #15
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    now this is wierd, i used sticky footer and it works great in IE, but not in other browsers, check it out!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •