Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site looks great in other browsers except IE

    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
    Last edited by lokey; 02-01-2012 at 08:27 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Your IE version?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Your IE version?
    The version that it's not looking good on is IE7

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    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

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,805
    Thanks
    41
    Thanked 199 Times in 198 Posts
    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
    Last edited by alykins; 02-01-2012 at 06:39 PM. Reason: incomplete sentence that made no sense

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    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

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    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
    Last edited by sean3838; 02-01-2012 at 07:30 PM.

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,805
    Thanks
    41
    Thanked 199 Times in 198 Posts
    Quote Originally Posted by lokey View Post
    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?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    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

  • #11
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    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

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    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
    Last edited by sean3838; 02-01-2012 at 08:48 PM.

  • #13
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,805
    Thanks
    41
    Thanked 199 Times in 198 Posts
    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
    Attached Thumbnails Attached Thumbnails Site looks great in other browsers except IE-one.jpg   Site looks great in other browsers except IE-two.jpg  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •