...

View Full Version : 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
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:


<!--[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
Put this at the beginning of your head section:


<!--[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


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
your img tag has this applied


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:


.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


<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
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
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
Couple things. Changes are in red:


.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


<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:


<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum