Looks perfect in firefox, as always. Damn I hate IE. Anyway.. Just started a shop on Spreadshirt, have put together a very quick page using an iframe @ www.urbanbreakdown.co.uk. The content's not all there yet - just wanted to get it online. So.. As you can see, it looks as I'd like in FF, but in IE the header is slightly too big (WHY?! The height is 100px!) and the tabs don't meet the border at the right place. Take a look to see what I mean. www.urbanbreakdown.co.uk Any ideas as to why this happens? I've played with loads of spacing variables and what not but just end up scratching my head like a balding monkey. Appreciate any help people, much obliged. aj
Well, let's see... No valid doctype so IE is in quirks mode, no HTML tag, an iFrame that doesn't compensate for the fact the wrapped page gets larger on large font machines, spacer.gif's, images for headers not marked as headers... You've got a good amount wrong there. Though I would assume the problem is quirks-mode either doubling a margin somewhere.
Fair play, thanks for pointing those out dude. I don't profess to be a meticulous coder, however. What do you mean about the iframe? How would I compensate? How do I mark an image header as a header?! I don't get what you mean? Have changed the doctype and added an HTML type, but no changes there; what is IE quirks mode?! Appreciate the help. aj
You still have it wrong - the doctype should be the FIRST thing on the page, followed by <HTML> followed immediately by <HEAD>. If ANYTHING is before the < in the doctype, even a space or linefeed, IE goes into 'quirks mode' In quirks mode, IE (even version 7) renders pages like IE 5.x did, which includes a bunch of issues like double margins and declared heights and widths putting their borders and margins INSIDE the box (which is NOT what the HTML specification says) Putting a valid doctype as the first thing in the document with NOTHING before it puts IE into 'standards mode' where it behaves a LOT more like RoW. (Rest of World - aka Firefox, Opera, Safari and company) In the process of adding HTML and Doctype, you also deleted <HEAD>... The top of your document right up to the first meta should read: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>urban.breakdown tees!</title> <META http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> Code (markup): That MIGHT get rid of the problem. Out of curiousity what are you working in to design the page?
Thank you, that helps clear a lot of things up. Ummm, I use Textpad. I was pretty hot on html & tables back in the day, but didn't really code while at uni and consequently missed out on the whole CSS wave. I've changed the header like you say, but no change. Are there any other things I should look at? ty, aj
That's probably because you have an HTML element before your doctype. Anything but whitespace AFAIK throws IE6 into quirks mode and if you coded your page to a more standards supported browser like FF then it'll fvck up in IE6 because IE6 in quirks mode behaves like some 7 year old POS browser. Nothing (except maybe whitespace) should go above your DOCTYPE. I would also use at least HTML 4 STRICT instead of TRANSITIONAL.
Quick idea, toss overflow:hidden; onto your #head CSS. That should automatically chop off any 'excess' content at the 100px mark.
Thanks for the help guys. deathshadow: the excess pixels have been fixed by IE no longer being in 'quirks' mode, so thanks for that. Plus I'm a bit more clued up now too. Just need to play with the tabs now - shift them down ten pixels or so. Any ideas? aj