ansaurus

Question

Website works great in everything but IE7,

Answer 1

+2 A:

I can't identify the problem, but if you've got a problem with Internet Explorer (and who doesn't?), then Conditional Comments are your friend!

They let you add code that only active in IE, or a specific IE version. Sample:

<!--[if IE]>
alternate style or stylepage for broken IE implemention of CSS
<![endif]-->


<!--[if IE 7]>
Fix for something broken only in IE7, not any other version.
<![endif]-->

Both of these will do nothing in any other browser -- they become just another harmless comment. If you're feeling hate towards those pesky IE6 users, you can target them for a nag to upgrade (either to another browser, or a more recent version).

EDIT: found it Before IE8, IE had issues with floats and layout. I think this will work, since I used something similar under similar circumstances.

You need to add a conditional comment containing a blcok-levelelement to FORCE the #content DIV below the header DIV. This should be empty, and force everything below it.
Try adding the following between the end of the header div, and the declaration (line 79). If you see too much space between the header and content, you can tinker with it.

<!--[if IE 7]>
<div style="clear: both; width: 100%; padding:0; margin:0; height:1px;">&nbsp;</div> 
<!-- Fix for IE box model issues with content div -->
</div>
<![endif]-->

BobMcGee 2009-09-15 02:24:27

Would that be a browser redirect script?

GuruAbyss 2009-09-15 02:56:25

Uh, it could be if you wanted it to be. Modifications to styles, additional stylesheets, or some additional javascript are more common. That line of text: anything you want can go there, as many lines as you want. It'll be uncommented if the browser matches the if-condition. ------The beautiful irony: the conditional comments feature was supposed to be a extra bonus feature for IE, to encourage its use. Instead it is used to quickly hack in IE support for something that won't work with it because IE has crappy CSS support.

BobMcGee 2009-09-15 04:42:04

Hahaha love it. I think its come down to something is wrong in my CSS. What that might be I have no idea. I did some cleaning using W3C but its still coming out messed up. http://rburtonart.com/browers.jpg

GuruAbyss 2009-09-15 04:58:58

That looks *just* like a problem with the CSS box model, one infamous class of the infamous bugs present in IE. I've seen this sort of thing before, and it's tricky to debug. IE8 will handle it OK in standards mode, so that's why it rendered fine there, just as with non-IE browsers. IE6 probably is so broken it ignores chunks of styles altogether, including the parts responsible. I'll go diving in the styles tomorrow when I've got time; just remember it's good etiquette here to reward good answers with up-votes and accept the best one eventually (this gives you reputation too).

BobMcGee 2009-09-15 05:40:19

Ah thank you Bob didn't know. I'm new to the site so I'm trying to feel out how everything works. Also think you for taking the time out to help. If we can come to a conclusion I'm be more then gladly to check this.

GuruAbyss 2009-09-15 07:40:32

Bob that fix worked excepted it pushed the content all the way down (huge gap). I tried to say height:0px just to see what it would do and it didn't change the height of the gap.

GuruAbyss 2009-09-15 19:55:49

Something told me to check this in Safari 4. Its doing the same thing that IE7 is doing with the gap. If you don't have IE 7 installed and want to see this gap check it in Safari 4

GuruAbyss 2009-09-15 19:59:11

chrome 2 does it as well but IE 8 and FF 3.5.3 are fine with it.

GuruAbyss 2009-09-15 20:00:36

Something in styles is altering the height or margins/borders/etc of that block level element -- uncomment it, and use the Firefox Web Developer plugin to identify which styles apply to it. It's also possible the non-breaking space somehow has a HUGE font size.

BobMcGee 2009-09-16 04:53:01

I took the comment out "" and that fixed the spacing issue with Chrome and Safari but IE 7 still has that huge gap. I agree it has to do with something with the CSS but I'm still trying to figure out what is causing it.

GuruAbyss 2009-09-17 00:43:51

Bob I've tried to tinker with the code you gave me some more, if I make the height lets say 2000px for testing that works and effects the page. Now if I say 0px it looks like there is a 500px gap no matter what. What could be causing this gap?

GuruAbyss 2009-09-19 19:16:16

It might be another style that you wouldn't have expected -- or padding/border/margin on another item?

BobMcGee 2009-09-21 04:05:58

Answer 2

+1 A:

You don't say what's broken and I don't have IE7 handy, but for starters your site doesn't validate, either as XHTML Strict (your nominated doctype) or for the CSS. I would be fixing the validation errors before doing anything else.

da5id 2009-09-15 02:24:40

What did you use to see those errors?

GuruAbyss 2009-09-15 02:55:46

Web Developer extension for Firefox (get it along with Firebug if you haven't already) which in turn uses the W3C standard validators.

da5id 2009-09-15 03:31:07

Thank you da5id =)

GuruAbyss 2009-09-15 03:38:31

da5id, what could be the problem with IE 7 that it can't render <ul id="menu"> correct like the other browers?http://rburtonart.com/browers.jpg

GuruAbyss 2009-09-15 04:25:11

Answer 3

+1 A:

your menu en footer li needs

float: left;

your center piece bugs on the height of the flash....

i guess you need to take a closer look at that.

IE now comes with a handy developer tool in which you can change the css on the fly.

Kennethvr 2009-09-15 06:24:17

Here is the top menu CSS code#menu { padding: 0; margin: 0; list-style: none; height: 27px; position: relative; z-index: 500; } #menu li { margin-right: 0; text-align: center; } #menu li a { display: block; float: left; height: 27px; line-height: 20px; color: #fff; text-decoration: none; outline: none; font-family: Verdana,Geneva,Kalimati,sans-serif; word-spacing: 0.15em; font-size: .8em; padding: 0 0 0 0; }In the #menu li a { you can see the "float: left;" if I put it in #menu { it messes the whole menu up (options start staking ontop of each other)

GuruAbyss 2009-09-15 08:30:48

Also the flash movie is is 880 X 405 and its the same with the css#flashholder { width: 880px; height: 405px; background: #121212; margin: 10px 0px 0px 10px; float: left; }

GuruAbyss 2009-09-15 08:31:29

I think Kennethvr is right, #menu li needs float:left; added to it#menu li { margin-right: 0; text-align: center; float:left; }

ckarbass 2009-09-15 17:29:43

You are correct ckarbass, Kennethvr is right. I tried it on my end and it fixed the top and footer menu in IE7. Now the only issues that remain are why the flash area (div "flashholder") and the content area (div "main") are overlapping each other. The answer from this would not only fix this issue but also fix the over lapping issue on the current work link and other artwork link. Also THANK YOU BOTH, this is so close of being fixed and I couldn't do it without everyone who has replied!

GuruAbyss 2009-09-15 19:56:23

Answer 4

A:

give your body

background-color: #353535

change the min-height of the wrap to for example

min-height: 650px

and change the #main bottom padding to for example

padding-bottom: 20px

this should solve your problem! it does in my browsers!

Kennethvr 2009-09-16 12:05:03

Heres the issue, I'm using a sticky footer (http://www.cssstickyfooter.com/using-sticky-footer-code.html) so the styleC.css that has html, body, #wrap {height: 100%;}body > #wrap { height: auto; min-height: 100%; background: #353535; }that min-height has to stay 100% if not it moves the footer up and leaves a gap at the bottom.

GuruAbyss 2009-09-17 00:48:13

I believe this is not a superb way to set a footer that sticks to the bottom.why don't you set a footer:position: fixedbottom: 0;take a look at a website like this:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-pagesticky footer displays the issues on the homepage, that's not a good way to start, is it?

Kennethvr 2009-09-17 07:11:22

Thank you for replying Kennethvr, I'll give this a shot tomorrow and see what I can come up with. This method looks like it will work =) Thank you for looking out!

GuruAbyss 2009-09-17 23:37:47

Ok after looking at Matthews example and going back to mine, the footer stays at the bottom in IE7. The only issue is the LARGE gap between the top content and the bottom as you can see on the homepage. Once this issue is out of the way this can be applied to the rest of the site.

GuruAbyss 2009-09-19 19:11:40

ansaurus

tags:

views:

answers:

Website works great in everything but IE7,

related questions