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 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post

    Internet Explorer No-repeat isn't working in IE

    Hey

    I'm working on a website at the mo, and have a container with a background image set to no-repeat, all is working fine, until I test my website in Internet Explorer...

    Here is the CSS of my container: -
    .howcentral {
    width: 978px;
    height: 400px;
    background: #FFFFFF url('images/howitworks.jpg') no-repeat left bottom;
    border:1px solid #DDD;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
    margin:5px 0 10px 0;
    }
    Here is the HTML inside this DIV: -
    <div class="howcentral">
    <img src="images/qmark.png" id="qmark" alt=""/>
    <h4 class="how">Text here.</h4><div class="clear"></div>
    <h5 class="howdesc">Text here<br/><br/>More text goes here.<br/><br/><b>Extra note.</b></h5>
    </div>
    In IE, the container just displays the background image in the top left and repeats it both x and y, as if nothing was in the CSS stating otherwise. I think I am in version 8 or 9 of IE. Does anyone have any ideas as to why this isn't working?

    Are there any ways around it if something isn't supported?

    I genuinely really appreciate any help!

    Thank you
    Owen Ayres

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Owener94,
    Your code works on my end in IE7,8,9,10 and FF12.
    The code you've supplied us is valid CSS and HTML as well, and all those browsers support the shorthand method you've written the background property in.

    Maybe it's something else you're doing. Have you tried validating? Can we see a link to the testsite?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    Hello Owener94,
    Your code works on my end in IE7,8,9,10 and FF12.
    The code you've supplied us is valid CSS and HTML as well, and all those browsers support the shorthand method you've written the background property in.

    Maybe it's something else you're doing. Have you tried validating? Can we see a link to the testsite?
    I tried validating a page it occurred on, it passed with no errors.

    Okay then, I didn't want to share it yet because some of the code is messy and it's only half done!

    here's a link where it is happening:
    http://www.letsearn.co.uk/howitworks

    It happens on other pages too.
    If you see other errors on older versions of IE (e.g. the nav) just ignore them please, I'll sort other things out and clean the code up when I've finished the content

    Thank you very much!
    Owen Ayres

    PS: It seems to be IE 8 and below with the issues.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Try separating the background properties like this.


    background: url ( )
    background-repeat:no-repeat;
    background-position:left bottom;

    Iv had this problem once before and it had fixed mine.

  • #5
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by aaronhockey_09 View Post
    Try separating the background properties like this.


    background: url ( )
    background-repeat:no-repeat;
    background-position:left bottom;

    Iv had this problem once before and it had fixed mine.
    Thanks for the suggestion. I tried it before with no luck, thought it was worth giving another go just in case I mispelt or something last time... ounce of hope

    However, sadly it didn't fix the error. I appreciate the contribution.

    Anyone else got any idea?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Owener94 View Post
    ../

    here's a link where it is happening:
    http://www.letsearn.co.uk/howitworks

    ../
    PS: It seems to be IE 8 and below with the issues.
    Seems fine on my end, that background image does not repeat in any browser I have.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Owener94 View Post
    Thanks for the suggestion. I tried it before with no luck, thought it was worth giving another go just in case I mispelt or something last time... ounce of hope

    However, sadly it didn't fix the error. I appreciate the contribution.

    Anyone else got any idea?
    only other thing i can think of is having something like.
    background-attachment: fixed;

    On a side not, i really like your contact form. Did you build it, or grab it from somewhere, cause id be interested in where you got it.

  • #8
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    Seems fine on my end, that background image does not repeat in any browser I have.
    Try testing it using this website.
    http://netrenderer.com/index.php
    Do you see the issue now?
    Thanks for continuing to help btw!

    Quote Originally Posted by aaronhockey_09 View Post
    only other thing i can think of is having something like.
    background-attachment: fixed;

    On a side not, i really like your contact form. Did you build it, or grab it from somewhere, cause id be interested in where you got it.
    Thanks for the suggestion, sadly it didn't work.

    With regards to the contact form, yes it is a script I found online. That's from my old site though I need to re-modify it for this site still.

    It can be found here: http://tutorialzine.com/2009/09/fancy-contact-form/

    Cheers!

  • #9
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Owener94 View Post
    Try testing it using this website.
    http://netrenderer.com/index.php
    Do you see the issue now?
    Thanks for continuing to help btw!



    Thanks for the suggestion, sadly it didn't work.

    With regards to the contact form, yes it is a script I found online. That's from my old site though I need to re-modify it for this site still.

    It can be found here: http://tutorialzine.com/2009/09/fancy-contact-form/

    Cheers!
    Well i am at a loss here, and gotta do some home work, so good luck, how you find a solution.

  • #10
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by aaronhockey_09 View Post
    Well i am at a loss here, and gotta do some home work, so good luck, how you find a solution.
    Cheers man. I've got to be doing coursework to, so if anyone replies and my response is delayed: sorry in advance!

    Does anyone have any idea what's going on? Also, Excavator, do you see the error I am talking about now by using netrenderer?

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Owener94 View Post
    Also, Excavator, do you see the error I am talking about now by using netrenderer?
    I see that netrenderer is not rendering your page correctly. I'm not sure that means a Windows machine running IE7 is going to see your background image repeat like that.

    I would suspect the fault lies with netrenderer. To verify, you might want to do some further testing by viewing the site on other computers.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Not sure if it will do anything, but try removing behavior: url(border-radius.htc);. That's specifically for IE and I've had problems using it in the past.

  • #13
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    I see that netrenderer is not rendering your page correctly. I'm not sure that means a Windows machine running IE7 is going to see your background image repeat like that.

    I would suspect the fault lies with netrenderer. To verify, you might want to do some further testing by viewing the site on other computers.
    It renders it the same as my computer does. I see your point and appreciate the advice! However, the post below you shows where the error is occurring. The border.htc file is messing with the background image, which is causing it to repeat this way in Internet Explorer.

    Quote Originally Posted by dan-dan View Post
    Not sure if it will do anything, but try removing behavior: url(border-radius.htc);. That's specifically for IE and I've had problems using it in the past.
    This was the cause of the problem! Thank you very much, I should've tried that before!

    Recap for anyone looking up this post:
    If you have an issue with your background-repeats displaying incorrectly in Internet Explorer, and you have a border.htc file attached, remove the link to the .htc file and the error should no longer exist. Try placing the image inside the DIV as an actual image, rather than a background image (if you want to keep your .htc file connected to the container).

  • #14
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    No worries

    HTC files vary developer-to-developer, and although they seem to bring the older versions of IE up-to-date, they're also pretty strict about how you use them.

    I've had instances of them not working or throwing my contents out of the divs. Need to read the documentation!


  •  

    Posting Permissions

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