View Full Version : Gap problems in IE 7!

06-07-2007, 03:26 PM
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! :mad:

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. :(

06-07-2007, 03:29 PM
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... :confused:

06-07-2007, 04:13 PM
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 (http://www.ahallicks.co.uk/universal_selector.php) 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;

06-11-2007, 03:33 PM
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?

06-12-2007, 10:32 AM
Ok, there is a clue to this problem...I have used WC3 Validator - See here:


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

06-12-2007, 10:40 AM
The BOM is something your editor put in your page. It seemed to do it to the stylesheet as well. It looks like this

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.

#navmenu li {

The gap on top seems to go away when you get rid of the BOM.

06-12-2007, 10:50 AM
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! :mad:

06-12-2007, 11:05 AM
Try wordpad. You'll probably see it.

06-12-2007, 03:16 PM
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! :rolleyes: