1 reply [Last post]
crolls
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-7
Joined: 2010-04-13
Posts: 2
Points: 4

So I'm fairly new to CSS and and I've been struggling like none other to get all this *beep* to work. I thought I had it all figured out my page works how I want it to in IE, Safari, Google but for some reason not in Firefox. My navigation bar just completely disappears and I'm assuming because I have that rollover effect on the buttons. I dunno can someone please look at the code for me. I'm losing my mind here... Thank you!

CAITLIN ROLLS

html, body {
margin: 0px;
padding: 0px;
border: 0px;
background-image: url(http://crolls.webs.com/graphics/tilebg.jpg);
}
.homeroll a {
float: left;
display:block;
width: 201;
height: 42;
background: url(http://crolls.webs.com/graphics/homerollover.gif) 0 0 no-repeat;
text-decoration: none;
}
.homeroll a:hover {
background-position: 0 -42px;
}
.aboutroll a {
float: right;
display:block;
width: 199;
height: 42;
background: url(http://crolls.webs.com/graphics/aboutrollover.gif) 0 0 no-repeat;
text-decoration: none;
}
.aboutroll a:hover {
background-position: 0 -42px;
}
.gallroll a {
float: left;
display:block;
width: 199;
height: 42;
background: url(http://crolls.webs.com/graphics/galleryrollover.gif) 0 0 no-repeat;
text-decoration: none;
}
.gallroll a:hover {
background-position: 0 -42px;
}
.conroll a {
float: right;
display:block;
width: 201;
height: 42;
background: url(http://crolls.webs.com/graphics/contactrollover.gif) 0 0 no-repeat;
text-decoration: none;
}
.conroll a:hover {
background-position: 0 -42px;
}
#container {width: 799px;
margin: 0 0 0 100px; /* top right bottom left */
padding: 0;
background-image: url(http://crolls.webs.com/graphics/tilebgsolid.gif);
}
#container h1 {
margin-top: 0px;
margin-bottom: 0px;
padding: 0;
width: 100%;
height: 100%;
float: left;
border: 0px;
}
#container #nav {
width: 800px;
float: left;
margin: 0;
padding: 0;
}
#container #nav1outer {
width: 400px;
float: left;
margin: 0;
padding: 0;
}
#nav #nav1outer #home {
float: left;
display: block;
width: 201px;
height: 42px;
}
#home: hover
{
float: left;
background-position: 0 -42px;
}
#home span
{
display: none;
}
#nav #nav1outer #about
{
float: right;
display: block;
width: 199px;
height: 42px;
}
#about:hover
{
background-position: 0 -42px;
}
#about span
{
display: none;
}
#container #nav2outer {
width: 400px;
float: right;
margin: 0;
padding: 0;
}
#nav #nav2outer #gallery
{
float: left;
display: block;
width: 199px;
height: 42px;
}
#gallery:hover
{
background-position: 0 -42px;
}
#gallery span
{
display: none;
}
#nav #nav2outer #contact
{
float: right;
display: block;
width: 201px;
height: 42px;
}
#contact:hover
{
background-position: 0 -42px;
}
#contact span
{
display: none;
}
#container #col1 {
width: 199px;
float: left;
}
#container #col2outer {
width: 600px;
float: right;
margin: 0;
padding: 0;
background-image: url(http://crolls.webs.com/graphics/tilebgsolid.gif);
}
#col2outer #col2mid {
width: 400px;
float: left;
background-image: url(http://crolls.webs.com/graphics/tilebgsolid.gif);
}
#col2outer #col2side {
width: 200px;
float: right;
}
#container #footer {
float: left;
width: 800px;
height: 30px;
background: url(http://crolls.webs.com/graphics/footer.gif)}
}

You're browser does not support iframes. Oh no!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

For starters, why use images

For starters, why use images at all with this nav? why not color the list items, then on hover change the color with pseudo-classes. Secondly, you may want to validate your code.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcrolls.webs.com%2F