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.
- Friends
-
- CommentAuthorljromanoff
- CommentTimeMay 8th 2006 edited
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? -
-
CommentAuthoradjustafresh
- CommentTimeMay 8th 2006
Try specifying height/width? -
-
- CommentAuthorljromanoff
- CommentTimeMay 8th 2006
I'll try that. Thanks. -
-
CommentAuthorDarren Hoyt
- CommentTimeMay 8th 2006
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;
} -
-
- CommentAuthorljromanoff
- CommentTimeMay 8th 2006
For anyone curious, removing "background-attachment: fixed;" resolved the problem in FF. -
-
CommentAuthorthumblewend
- CommentTimeMay 8th 2006
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. -
-
- CommentAuthorljromanoff
- CommentTimeMay 9th 2006
Yes, that's a correct assessment of the situation. -
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 -
calvin
send the link to the site -
try not to put 'background-image' if you're applying more than one rule.
background:url("/images/bgline.gif") repeat-y; -
www.c-styled.com/beta/main.php
IE6 working here
FF 1.5 not working
thnx :) -
could it be the floated content box that fools the wrapper into thinking the divs have no height?
-
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 -
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 -
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. -
hmmm . . guess im stuck heh
-
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.
-
thnx for the tips, I will try and see if i can get a combination so that it works.
thnx -
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;
} -
I wil give it a try, it may sound stupid . . but why length 1900px ?
thnx -
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;
} -
they 1900px length is so the #666666 span across large screens, I think the sencond way is easier and better
-
works like a charm, thank you guys so much for helping !!
thnx ! -
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?
-
I guess I should look more into it then. I really suck with floats and how they react with their surroundings...
-
yeah but that where his image was and it was being hidden by all the div so had to move it to the body
-
floats get real bad when you use alot of padding and margins. they are hard because of the different boxmodel inconsistencies in browers
-
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 =/ -
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;
} -
Thnx for the tip, will tidy up my code again.
thank alot all -
-
CommentAuthorMister Bubbles
- CommentTimeJul 14th 2006
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. -
-
- CommentAuthorthepowerofed
- CommentTimeJul 14th 2006
Have you tried:
#wrapper {
min-width: 850px;
background:url("images/bgline.gif") left top repeat-y;
margin: 0px auto;
padding: 0px;
} -
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 -
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; -
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
1 to 35 of 35