Site looks great in other browsers except IE

lokey · 02-01-2012, 05:07 AM

Hi, I'm making a website for my friend and well I'm having problems with it looking ok on IE, while it looks great in other browsers.
The Version I'm having problem with is IE7

this is the site:
http://chongilicious.com/

As you can see, there is a big white space after "After seeing a St. Jude Children's Research Hospital commercial," and all the text is pushed down... can someone please help me out. thanks

abduraooft · 02-01-2012, 10:09 AM

Your IE version?

lokey · 02-01-2012, 03:56 PM

Quote:

Originally Posted by abduraooft

Your IE version?

The version that it's not looking good on is IE7

sean3838 · 02-01-2012, 05:43 PM

Put this at the beginning of your head section:

Code:

    <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1%28beta4%29/ie7-squish.js"></script>
    <![endif]-->

Let me know if it helps or not.

lokey · 02-01-2012, 06:17 PM

Quote:

Originally Posted by sean3838

Put this at the beginning of your head section:

Code:

    <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1%28beta4%29/ie7-squish.js"></script>
    <![endif]-->

Let me know if it helps or not.

nope, nothing changed

alykins · 02-01-2012, 06:38 PM

your img tag has this applied

Code:

vertical-align:top;

remove it- I didn't look through your CSS to find where it was set or inherited from. The vertical-align:top does not relate to where the image is going to be- it relates to the text inline with the image will be. Fate was being kind in other browsers and auto-correcting that for you; IE7 simply was not. The text that fell inline with the image followed the vertical-align rule you set. To demo the effects of this in more detail change that setting to vertical-align:middle; or vertical-align:bottom; and watch the effects.

good luck

lokey · 02-01-2012, 07:18 PM

Quote:

Originally Posted by alykins

your img tag has this applied

Code:

vertical-align:top;

remove it- I didn't look through your CSS to find where it was set or inherited from. The vertical-align:top does not relate to where the image is going to be- it relates to the text inline with the image will be. Fate was being kind in other browsers and auto-correcting that for you; IE7 simply was not. The text that fell inline with the image followed the vertical-align rule you set. To demo the effects of this in more detail change that setting to vertical-align:middle; or vertical-align:bottom; and watch the effects.

good luck

thanks, that wasn't it... oh well... thanks

sean3838 · 02-01-2012, 07:22 PM

Couple things. Changes are in red:

Code:

.cont-bot {
	background:url(../images/cont-bot.jpg) no-repeat left top;
	width:368px;
	height:199px;
	position:absolute; //Delete this
	left:0; //Delete this
	top:-199px; //Delete this
        float: left; //Add this
}

In your HTML delete what's in red

Code:

      <p><img src="images/cont-bot.jpg" width="100" height="99" align="left" style="padding-right:10px; padding-bottom:10px; padding-left:0px; padding-top:0px">After seeing a <a href="http://www.stjude.org" target="_new">St. Jude Children's Research Hospital</a> commercial, my 3 year old daughter turned to me with a sad face and said &quot;I wanna make them happy&quot;. I knew at that moment I needed to give back. Won't you help me make a difference?</p>

Once you've done all this you may need to set your margin-top, margin-left properties

alykins · 02-01-2012, 07:39 PM

Quote:

Originally Posted by lokey

thanks, that wasn't it... oh well... thanks

I made the changes in IE using developer tools and that is it- I do not know where it is getting it from but removal of that CSS property made it look exactly like IE9 and chrome. Did you refresh your cache after you made the CSS changes?

lokey · 02-01-2012, 08:05 PM

Quote:

Originally Posted by alykins

I made the changes in IE using developer tools and that is it- I do not know where it is getting it from but removal of that CSS property made it look exactly like IE9 and chrome. Did you refresh your cache after you made the CSS changes?

I deleted it... but still isn't working on IE 7

here is the test file i made
http://www.chongilicious.com/index_test3.html

Also I did empty cache and refreshed the browser

lokey · 02-01-2012, 08:11 PM

Quote:

Originally Posted by sean3838

Couple things. Changes are in red:

Code:

.cont-bot {
	background:url(../images/cont-bot.jpg) no-repeat left top;
	width:368px;
	height:199px;
	position:absolute; //Delete this
	left:0; //Delete this
	top:-199px; //Delete this
        float: left; //Add this
}

In your HTML delete what's in red

Code:

      <p><img src="images/cont-bot.jpg" width="100" height="99" align="left" style="padding-right:10px; padding-bottom:10px; padding-left:0px; padding-top:0px">After seeing a <a href="http://www.stjude.org" target="_new">St. Jude Children's Research Hospital</a> commercial, my 3 year old daughter turned to me with a sad face and said &quot;I wanna make them happy&quot;. I knew at that moment I needed to give back. Won't you help me make a difference?</p>

Once you've done all this you may need to set your margin-top, margin-left properties

thanks again... still no go... i made a test html file of the advice you gave

http://www.chongilicious.com/index_test.html

CSS:
http://www.chongilicious.com/css/style_test.css

sean3838 · 02-01-2012, 08:45 PM

Keep the test one the same then add:

Code:

<div style="margin-left:110px;margin-top:??">my 3 year old daughter turned to me with a sad face and said &quot;I wanna make them happy&quot;. I knew at that moment I needed to give back. Won't you help me make a difference?</div>

You might need to adjust the margin-top, margin-left to make it line up exactly I just guessed on the pixel numbers

alykins · 02-01-2012, 09:01 PM

one is the window showing the problem
two is fixing it
Note: you cannot see it in SS "one" (bc I didn't know it was there) but vertical-align:top is set in two places... you can see them both removed in SS "two"

that is the problem bottom line- evidence is there... now where it is getting all that from I have no clue (I have not looked through your CSS) but it is getting set in multiple places

Edit: Also that was looking at your test site link- earlier when I first told you problem I did not have to check multiple boxes (or at least I don't recall doing so) I have no clue what changes have been made btw the two