...

View Full Version : IE Rendering Issues



teamleaf
04-13-2009, 03:15 PM
Alrighty... I figured out a bunch of stuff this weekend and got my menu all squared away.

Both IE's are rendering differently and are completely ignoring certain aspects of the page that work perfectly in Firefox and Safari.

Any ideas?

http://www.teamleaf.org/FootballTest/index.html

Excavator
04-13-2009, 05:44 PM
Hello teamleaf,
Since you give your .menu a width, try centering it with margin: 0 auto;
Like this -
.menu {
height:44px;
background: url(MenuBkg.gif) repeat-x;
position:relative;
font-family:Verdana, Arial, Helvitica, sans-serif;
font-size:16px;
font-weight:bold;
width:926px;
z-index:2;
/*left: 50%;
margin-left:-463px;*/
margin: 0 auto;
}
I think that's a bit of divitis (http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/) now. Are both .table and .menu really needed?

teamleaf
04-13-2009, 07:43 PM
Im borrowing some code from with the tables stuff. I'm pretty sure that the tables are only for is. how come the content of the page shows up weird though?

Excavator
04-13-2009, 08:57 PM
Did that fix the issue? The online version has not changed yet.


Im borrowing some code from with the tables stuff. I'm pretty sure that the tables are only for is.
There are no tables on your page. There is one div with a class name of table.

Could you be more specific?
What are you seeing wrong with your content? What browser too.

teamleaf
04-14-2009, 12:41 AM
Did that fix the issue? The online version has not changed yet.

Sorry, I couldn't try it till now. I just changed that code to what you suggested and it doesn't appear to alter the appearance in Firefox and Safari. I no longer have access to the multiple IE computer though; I don't have access to any IE computer till tomorrow at the earliest.


Could you be more specific?
What are you seeing wrong with your content? What browser too.

On IE 6 I have some weird white space in the middle (vertically) of the page. Also, that middle part isn't centered. 1 more thing, why does IE 6 change the menu to some font other than verdana? There may be other things but I can't remember now.

In IE 7, I'm seeing some issues in the header section mainly. The gradient background doesn't repeat all the way across the top. There are other things, but I can't remember those now either.

Thanks for the help!

teamleaf
04-17-2009, 02:33 PM
Its still screwed up in IE 6. IE 7 is fine except the bkg at the top still doesnt repeat in IE 7

drhowarddrfine
04-17-2009, 03:00 PM
Hm. Ladue as in Ladue, Missouri?

Internet Explorer is the worst browser on the planet by far. We all struggle with it.

teamleaf
04-17-2009, 03:07 PM
Hm. Ladue as in Ladue, Missouri?

Internet Explorer is the worst browser on the planet. We all struggle with it.

Yes. Ladue as in Ladue in Saint Louis, Missouri.

Any suggestions besides supporting an already lost cause for IE?

The site can now only be found at laduefootball.org

I'm removing the other directory.

drhowarddrfine
04-17-2009, 04:56 PM
Well, I see it is so. I guess I'll have to come down from Weldon Spring and fix this for you. :)

Actually, I don't have Windows available for a while so I'll have to check later if no one else helps you by then.

teamleaf
04-17-2009, 05:36 PM
Hehe. That would be just a little weird.

Anyone else have suggestions?

teamleaf
04-21-2009, 01:04 PM
I'm still having the issues with IE. Im not going to remove the table stuff yet because I was still having the problems before I implemented the current menu.

White space in IE6

Background gradient at top wont repeat horizontally on IE7

Thanks!

abduraooft
04-21-2009, 01:15 PM
http://www.teamleaf.org/FootballTest/index.html is not available!

teamleaf
04-21-2009, 01:58 PM
http://www.teamleaf.org/FootballTest/index.html is not available!

I know, I took that down because I have a domain for it now.

www.laduefootball.org (www.laduefootball.org)

I didn't want to start a new thread just to change that address. Sorry.

The other thing is that in IE 6, the goalposts of the field goal post dont show up.

teamleaf
04-23-2009, 01:57 AM
Come on peoples, you've helped me solve all my other problems thus far. Why is this one taking soo long?

teamleaf
04-23-2009, 01:02 PM
I will be around this morning from 7:40ish AM CST to 10:45ish AM CST.

Can we please get this worked out today?

SB65
04-23-2009, 03:20 PM
Can we please get this worked out today?

Let's remember everyone here is volunteering their time to help others...:)

I think the problems are caused by this css.


* html .minwidth {
border-left:1020px solid #fff;
position:relative;
float:left;
z-index:1;
}
.wrap {
position:relative;
min-width:1020px;
_margin-left:-1020px;
/float:left;
/z-index:2;
}

Missing Gradient.png on IE7 (OK for me in IE6) is caused by float:left on .wrap. I'm not sure if the css here is a typo or a hack for IE - but IE is implementing float:left and FF isn't. Take the float left out and the gradient reappears, in IE7 at least.

That sorts IE7, I think, but screws IE6. Take out the border-left:1020px on .minwidth and _margin-left:-1020px on .wrap and IE6 is ok, and your goalposts come back.

teamleaf
04-23-2009, 04:34 PM
Let's remember everyone here is volunteering their time to help others...:)

I think the problems are caused by this css.


* html .minwidth {
border-left:1020px solid #fff;
position:relative;
float:left;
z-index:1;
}
.wrap {
position:relative;
min-width:1020px;
_margin-left:-1020px;
/float:left;
/z-index:2;
}

Missing Gradient.png on IE7 (OK for me in IE6) is caused by float:left on .wrap. I'm not sure if the css here is a typo or a hack for IE - but IE is implementing float:left and FF isn't. Take the float left out and the gradient reappears, in IE7 at least.

That sorts IE7, I think, but screws IE6. Take out the border-left:1020px on .minwidth and _margin-left:-1020px on .wrap and IE6 is ok, and your goalposts come back.


Thanks with the gradient stuff. When I take out that float left hack I get more white space in IE 6 and my menu goes all the way to the very right edge of the page and only Home and Va are visible.

If I take out the min width stuff, wouldnt the page no longer have a min width?

I need that otherwise the goal posts start to overlap the header graphic at smaller resolutions.

Edit: After taking out the suggested lines of code, the page displays properly in IE7 for the most part. There is a bit of an issue with the right post overlapping the header image when resizing the window, but that is probably easy enough to fix. In IE6 though, the page looses its min width but displays properly otherwise.

The menu is not centered in either IE, but I think that is unrelated and has not worked at all thus far.

SB65
04-23-2009, 05:10 PM
Yeah, sorry, didn't recognise this as a min-width workaround for IE6!

teamleaf
04-23-2009, 05:14 PM
Yeah, sorry, didn't recognise this as a min-width workaround for IE6!

I don't know if it was working or not though because it was soo far to the left that the other post wasn't visible.

Right now it looks decent with everything in the right place but it doesn't work with min width for whatever reason.

Any ideas for why the menu centers in firefox but not ie?

SB65
04-23-2009, 05:30 PM
Struggling to help you on the min-width for IE6 because I've never tried that one.

On centering the menu, your css has:


.menu .table {
display:table;
margin:0 auto;
}

IE7 doesn't support display:table :(

The .menu div is centered on the page but the text isn't centered within the div without display:table.

teamleaf
04-23-2009, 05:40 PM
Struggling to help you on the min-width for IE6 because I've never tried that one.

On centering the menu, your css has:


.menu .table {
display:table;
margin:0 auto;
}

IE7 doesn't support display:table :(

The .menu div is centered on the page but the text isn't centered within the div without display:table.

I just played with it for a while.

Now everything appears perfect except for the lack of a min width in IE 6!

!!!!!

SB65
04-23-2009, 05:44 PM
Looks Ok from here - what did you do?

Edit:Ah! text-align:center

teamleaf
04-23-2009, 09:49 PM
Looks Ok from here - what did you do?

Edit:Ah! text-align:center

Yeah... I put my IE only css sheet back into the site and played around with it and the normal css.

Any ideas about the min-width in IE6 anyone?

abduraooft
04-24-2009, 10:21 AM
You could use CSS expressions for IE, see http://www.gunlaug.no/contents/wd_additions_14.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum