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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Gap problems in IE 7!

    I have been working with few CSS menu before but this one is something I can't get my head around!

    Have a look at www.handsthattalk.co.uk/index.php

    Compare it between Firefox and IE 7. On IE 7, you will see the gap on top of page plus the gaps in menu!

    I'm not sure if it's the bug in IE 7 because I had tried every way to close the gaps!

    I have tried Holly Hack for menu and it worked but only there is a big gap on top of menu. I don't know if I'm doing something wrong!

    Help me.

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Forgot to mention that it was fine in both browser in html (before making it a template for wordpress) but not so in php wordpress template.

    Weird? I have checked the codes to see if there is anything missing but no...

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Your top gap is probably because of the auto-margins IE applies to the HTML as well as the body. I'd suggest you put the Universal Selector at the top of your style sheet to zero all of those margins and padding. You may need to re-apply some here or there, but it should sort out a few issues in display between browsers.

    * {
    margin: 0;
    padding: 0;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Doesn't make a difference at all. I can't find anything in CSS that caused the problem...could it be to do with doc type?

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, there is a clue to this problem...I have used WC3 Validator - See here:

    http://validator.w3.org/check?uri=ht...doctype=Inline

    It says something about 'Byte-Order Mark found in UTF-8 File.' - what is that?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The BOM is something your editor put in your page. It seemed to do it to the stylesheet as well. It looks like this
    Code:
    
    But you probably won't see it until you open the page using notepad or wordpad.

    Try this for your menu CSS, should fix the gaps in IE7.
    Code:
    #navmenu li {
    float:left;
    width:100%;
    }
    The gap on top seems to go away when you get rid of the BOM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks...I have opened them with notepad, I see nothing...?

    However, I'm using Microsoft's Web Expression which has 60 days trial. Not sure if it has anything to do with it but it looks like I would be better off changing the editor! Wasted my time looking at codes!

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try wordpad. You'll probably see it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Solved!

    Finally, the gap on menu and top are now disappeared after I saved these pages in ANSI! I did not see any with wordpress or notepad but I suspect it might be to do with Microsoft's Expression Web installed on that computer.

    Googling 'expression web bom' has solved my problem but I don't know why Microsoft's Web Expression saved them with the wrong encoding!


  •  

    Posting Permissions

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