Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorljromanoff
    • CommentTimeMay 8th 2006 edited
     permalink
    I have a class that is styled like this :


    .error {
    background-image: url(../images/error.gif);
    background-attachment: fixed;
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 20px;
    }


    This works correctly in IE 6, but in Firefox the background image does not appear. Am I doing positioning wrong or something?
  1.  permalink
    Try specifying height/width?
  2.  permalink
    I'll try that. Thanks.
  3.  permalink
    Yeah, it won't likely show up in FF without dimensions.

    Also, you could shorten your specifications with something like....

    .error {
    background: url(../images/error.gif) top left no-repeat;
    padding-left: 20px;
    }
  4.  permalink
    For anyone curious, removing "background-attachment: fixed;" resolved the problem in FF.
  5.  permalink
    That means that your original code was working correctly in FF, but not IE. IE doesn't do Fixed positioning and was reverting to the default which is Scroll, which is what you actually wanted by the sounds of things.
  6.  permalink
    Yes, that's a correct assessment of the situation.
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    I am currently having the same problem, i dont have the: background-attachment, but still not working, my code is declared like :

    #wrapper{
    width:850px;
    margin:0 auto;
    padding:0;
    text-align:left;
    position:relative;
    background-image:url("/images/bgline.gif") repeat-y;
    }

    am i forgetting something? IE shows the bg whatever I do, i can put the repeat-y in another line and it still work, firefox doesnt show me the background
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006
     permalink
    calvin

    send the link to the site
    •  
      CommentAuthorfake
    • CommentTimeJul 13th 2006 edited
     permalink
    try not to put 'background-image' if you're applying more than one rule.

    background:url("/images/bgline.gif") repeat-y;
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    www.c-styled.com/beta/main.php

    IE6 working here
    FF 1.5 not working

    thnx :)
    •  
      CommentAuthorfake
    • CommentTimeJul 13th 2006
     permalink
    could it be the floated content box that fools the wrapper into thinking the divs have no height?
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    changed to:

    #wrapper{
    width:850px;
    margin:0 auto;
    padding:0;
    text-align:left;
    position:relative;
    background:url("images/bgline.gif") repeat-y;
    background-position:left top;
    }

    still not working
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006 edited
     permalink
    removed the floating of maincontent div container, now it is showing the background

    anyway i can fix this and still use the float =/ ??

    cuz removing the floating of the container div causes my whole layout to mess up :S
    •  
      CommentAuthorfake
    • CommentTimeJul 13th 2006 edited
     permalink
    Add a <br clear="all" /> after your posts and forever be stuck an error away from perfect xhtml 1.1 validation ;)

    I'm not good enough with floats to figure it out by just playing with the code, but try adding clear:both to one of the containers, I guess it could work.
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006 edited
     permalink
    hmmm . . guess im stuck heh
    •  
      CommentAuthorfake
    • CommentTimeJul 13th 2006
     permalink
    I don't want to spam this tread with suggestions that don't work when someone can pop-up anytime with the solution... but try stopping floating the maincontent box as well as all its <div> children and continue constrainting its width. Then, float the side navigation bar to the right instead.
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    thnx for the tips, I will try and see if i can get a combination so that it works.

    thnx
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006
     permalink
    I think the problem is there is no height declared in the #wrapper. I believe your trying to set a background image behind all the div right?? You can create an rectangle image that is 1900px in length with #666666 background, center the 850px image so the #66666 of the background is on each side of the image. export

    body{
    text-align: center;
    background:url("yourimage");
    background-position:center;
    margin:0;
    padding:0;
    }
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    I wil give it a try, it may sound stupid . . but why length 1900px ?

    thnx
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006 edited
     permalink
    or you can take your current image and do this

    body{
    text-align: center;
    background:url(yourimage) center repeat-y #666666;
    margin:0;
    padding:0;
    }
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006
     permalink
    they 1900px length is so the #666666 span across large screens, I think the sencond way is easier and better
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    works like a charm, thank you guys so much for helping !!

    thnx !
    •  
      CommentAuthorfake
    • CommentTimeJul 13th 2006
     permalink
    but won't he have to put an insane height number to make sure the height of the #wrapper be high enough on all the possible pages?
    •  
      CommentAuthorfake
    • CommentTimeJul 13th 2006
     permalink
    I guess I should look more into it then. I really suck with floats and how they react with their surroundings...
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006
     permalink
    yeah but that where his image was and it was being hidden by all the div so had to move it to the body
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006
     permalink
    floats get real bad when you use alot of padding and margins. they are hard because of the different boxmodel inconsistencies in browers
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    It's actaully moving the background code from the wrapper to the body.

    It's actaully straight forward, so stupid that i didn't came up with this. If i wanted it as repeating background behind all divs, it's more logic to put it in the body then having problems in floats and divs. IE is doing it wrong again I think ? because it's true the wrapper has no height declared, so it is logical that it is not beeing repeated, that is what FF did.

    I als need to look more into floats . . . I think positioning in CSS is most difficult part =/
    • CommentAuthorkmg
    • CommentTimeJul 13th 2006
     permalink
    calvin

    I noticed too you set margin:0; padding:0; to most of your elements. You can use the unversial selctor * to do that, then when you need padding or margin you can just add them to that particular element

    *{
    margin:0;
    padding:0;
    }
    • CommentAuthorcalvinc
    • CommentTimeJul 13th 2006
     permalink
    Thnx for the tip, will tidy up my code again.

    thank alot all
  7.  permalink
    Hey, it's supposed to be:

    #wrapper{
    width:850px;
    margin:0 auto;
    padding:0;
    text-align:left;
    position:relative;
    background:url("images/bgline.gif") top left repeat-y;
    }

    if you are just going to put one backgruond statement, it has to have everything in it that you want.
  8.  permalink
    Have you tried:

    #wrapper {
    min-width: 850px;
    background:url("images/bgline.gif") left top repeat-y;
    margin: 0px auto;
    padding: 0px;
    }
    • CommentAuthorcalvinc
    • CommentTimeJul 14th 2006 edited
     permalink
    thnx for the tips everyone :)

    I will try both the method to see if they are working.

    edit:tried out, the min-width will mess my layout, probably because of the use of floats
    • CommentAuthormista3
    • CommentTimeJul 14th 2006 edited
     permalink
    Strictly speaking you shouldn't put quote marks round the image either.... (in times of yore this would make ie/mac be unhappy)

    background:url(images/bgline.gif) left top repeat-y;
    • CommentAuthorcalvinc
    • CommentTimeJul 14th 2006
     permalink
    ahh . . . I usually dont use the quote marks, but when i was surfing the web to find a solution i saw ppl using quote marks, thought that would make it "safer".

    thnx for the tips, getting closer making a perfect validation :p
Add your comments
    Username Password
  • Format comments as (Help)