CSS testing
- Started
- Last post
- 15 Responses
- leftwave
Hello, I've FINALLY made the big switch from tables to CSS design.... better late than never, right?
I just finished my first page and validated it with W3C. It looks great on my PC with Firefox and Explorer, so I went to browsershots.org to check it out on other platforms/browsers.
There are 2 main issues that I'm hoping someone can please help me with:
1. The background textured graphic seems to be repeating itself on many of the screenshots. Is this just because the screenshots tool can't capture:
background-attachment: fixed;
?2. The orange navigation bar seems to jump up and over the logo area only on some browsers. Why is this happening? (i.e. Opera 9.6x on Windows)
I'm so new to CSS so I'm not sure about these 2 items. Any help would be much appreciated. Thanks!!
Screenshots are available for view here:
http://browsershots.org/http://l…
- leftwave0
**make that Opera for the Mac too. WTF!
- airey0
can you link the site?
- canuck0
1. The background textured graphic seems to be repeating itself on many of the screenshots.
You can set background to: no-repeat, repeat-x, repeat-y
eg.
body {
background: url(images/mybackground.jpg) repeat-x;
}Would have to see your code for No.2
- leftwave0
thanks, yes, i set the background as repeat-x (i don't want it to repeat-y like it is doing on the screenshots). i'm trying to figure out if it actually repeats in the y direction on any browser, or if this screenshot program just makes it appear that way??
- leftwave0
okay, i think i just solved my #1 problem. i found this site with a fixed background image:
http://justinhaigh.com/
and it does the same tiling thing on the screenshot:
http://browsershots.org/http://j…
so i think my site is okay with that.now.... who can help me with my #2 problem??? :)
- acescence0
i don't think you need position relative with float left on navigation
- leftwave0
acescence: good point. i removed the position: relative, but the navigation bar is still overlapping! any ideas why?
- acescence0
the li's also have position relative and top/left
- leftwave0
good point again! however, i just removed the position: relative from the LI also and the navigation bar is STILL overlapping. hmmmm????
- Andrew_D0
#navigation
{
width: 960px;
margin-top: 12px;
float: left;
}
#navigation LI
{
list-style: none;
float: left;
}
#navigation UL
{
margin-left: -40px;^ maybe try adjusting your margin's? or add padding instead? I'm kinda half asleep right now.
- Not much help, I'm sorry. Nice looking site, btw. I remember when you were designing it.Andrew_D
- version30
congratulations leftwave, i'm proud of you.
- Andrew_D0
Try this out: http://www.westciv.com/xray/ and click around to see if there's some overlapping in div width's or your margin's are outta wack.
I can have a better look in the morning if it can wait.
- vwsung18t0
i would get rid of the float on #navigation and add clear:both attribute to it
- Andrew_D0
^ Nice! Help on that here: http://www.alistapart.com/articl…
Just read that the other day, myself. (I'm new to semantic CSS as well)
- Yeah, it's old, but it helped me with sorting out my code.Andrew_D
- Good CSS reference guide:
http://www.css3style…ukit
- leftwave0
vwsung18t: YES!! that fixed it. thanks so much. and thanks to everyone else for your great ideas.
clearly, i need to go learn more about this "clear" thing :)