Howdy. My problem is, my page is viewed perfectly in FireFox but not so in Internet Explorer - why? Because IE is stupid. DataBank Administration Page - Obviously, you won't be able to log in, but I've enabled the header on the log in page so you can see the problem (usually, the header isn't visible on that page untill logged in). As you can see, the white border from the content div 'intercepts' the header, which it doesn't in FireFox and nor do I want it to in IE. Anyone know why? Unrelatedly, please don't comment on the corner images of the header/footer, they work in FireFox but not in IE since they're not websafe colours - I'm fixing it though. Thanks! Edit: Fixed thanks to brunozugay xD
This is a CSS hack, but it will do the trick. Your header style should look like this: div#header { background-color: #B2B4B6; -height:1%; text-align: center; } IE will apply the height, where as Firefox will ignore it because it is preceded by a minus sign. I would seriously consider redoing the page all together.
The height hack will do the trick as said before, so you don't have to make any changes if you don't want to. However quick look at your code and I see duplicate <html> tags, <head> tags, and <title> tags. The <style> tag shouldn't be in the <body> and DOCTYPE should be on the very top. Also, rounded corners could easily be produced without any images, http://www.html.it/articoli/niftycube/index.html for example, which would clear up your code a lot, plus you wouldn't have to worry about transparent PNGs. I hope this helps.
The HTML is all messed up because I included something where it isn't intended to be included (a navigation bar on a log in page). Usually my HTML is strict valid.
I've never seen the '-height' thing before, serving it to IE. I've always used: height:1%; (for IE) he\ight: auto (for compliant browsers)