Confused with my css (all works fine in safari but not in ff)

squizz · November 15, 2007

ok i been working on my website at my college and they only allow safari browser and my site worked in it but in ff. it HAS ot be liquid and must be strict.

when i take it into ff there is no background and when i get to image page the rollover it works fine but the images arnt scaling to be what i defined them.

first the background problem

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Welcome to Hack Productions</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

<div id="header">
<img src= "images/menubars/banner2.jpg" alt= "Hack Production" />

</div>

<ul class="glossymenu">
<li class="current"><a href="index.html"><b>Home</b></a></li>
<li><a href="gallery.html"><b>Gallery</b></a></li>
<li><a href="!"><b>Blog</b></a></li>	
<li><a href="info.html"><b>Info</b></a></li>	
<li><a href="links.html"><b>Links</b></a></li>	
</ul>



<div id="col2"><h2>Content</h2>
	<p class="treetop">some text</p>

</div>



</body>

</html>

and css

<style type="text/css">


h1 {
font-family: geneva, arial, helvetica, san serif;
font-size:16px;
color:#ffffff;
    }

h2 {
font-family: geneva, arial, helvetica, san serif;
font-size:13px;
color:#333333;
   }

h3 {
font-family: geneva, arial, helvetica, san serif;
font-size:12px;
color:#000000;
   }



body {
   background-image: url(images/menubars/banner1.jpg); 
    font-family: verdana, arial, helvetica, sans-serif;
    text-align:center;
    margin:0;
    padding:0;
    min-width: 760px;

    }


p {
font-family: geneva, arial, helvetica, san serif;
font-size:13px;

   }

p.treetops {
font-family: geneva, arial, helvetica, san serif;
font-size: 10%;
text-align:justify;
color:#333333;
   }




#header {   font-size:80%;
float: left;
text-align: left;
width: 100%;
background: url(images/menubars/banner1.jpg) repeat-x bottom left;
   }



#col1 {   font-size:80%;
float: left;
width: 100%;	
margin-left: 2.5px;
margin-right 2.5px;
margin-bottom: 1px;
border:1px;
border-style:solid;
border-color:#000000;
background-color:#CECCAD;
   }
#images {   font-size:80%;
float: left;
width: 14%;	
border:1px;
border-style:solid;
border-color:#000000;
background-color:#CECCAD;
   }

#col2 {   font-size:80%;
margin-left: 15%;
float: left;
width: 70%;
border:1px;
border-style:solid;
border-color:#000000;
background-color:#cccccc;
padding-bottom: 40px

   }


.glossymenu{
float:left;
width:100%;
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(images/menubars/menuo_bg.gif) repeat-x; 
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; 
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;	
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; 
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menubars/menuo_hover_left.gif) no-repeat; 
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menubars/menuo_hover_right.gif) no-repeat right top; 
}


.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; 
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; 
width: 150px; 
}

.cssform input[type="text"]{ 
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}



.threepxfix{
margin-left: 3px;
}




</style>

then why my image gallery, why my images arnt scaling

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css1.css" />
</head>
<body>

<div id="header">
<img src= "images/menubars/banner2.jpg" alt= "Hack Production" />
</div>

<ul class="glossymenu">
<li><a href="index.html"><b>Home</b></a></li>
<li class="current"><a href="gallery.html"><b>Gallery</b></a></li>
<li><a href="!"><b>Blog</b></a></li>	
<li><a href="info.html"><b>Info</b></a></li>	
<li><a href="links.html"><b>Links</b></a></li>	
</ul>

<div id="images">

<ul class="glossymenuside">
<li class="current"><a href="scrap.html"><b>Scrap Artwork</b></a></li>
<li><a href="colour.html"><b>Finished work</b></a></li>
<li><a href="digital.html"><b>Digital work</b></a></li>	
<li><a href="flash.html"><b>Animations</b></a></li>	
</ul>

</div>

<div id="col2"><h2>Scrap images</h2>
			<div class="gallerycontainer">

<a class="thumbnail" href="images/scrap/chibi uchha.jpg"><img src="images/scrap/chibi uchha.jpg" height="10%" alt= "Hack Production"  /><span><img src="images/scrap/chibi uchha.jpg"  /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/comic 1.1.jpg"><img src="images/scrap/comic 1.1.jpg" height="10%"  alt= "Hack Production" /><span><img src="images/scrap/comic 1.1.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/comic 1.2.jpg"><img src="images/scrap/comic 1.2.jpg" height="10%" alt= "Hack Production"  /><span><img src="images/scrap/comic 1.2.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/cyber fairy.jpg"><img src="images/scrap/cyber fairy.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/cyber fairy.jpg" /><br />Just a scrap</span></a>

<br />

<a class="thumbnail" href="images/scrap/skech7.jpg"><img src="images/scrap/skech7.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/skech7.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/goth.jpg"><img src="images/scrap/goth.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/goth.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/goth-line-art.jpg"><img src="images/scrap/goth-line-art.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/goth-line-art.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/img006.jpg"><img src="images/scrap/img006.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/img006.jpg" /><br />Just a scrap</span></a>

<br />

<a class="thumbnail" href="images/scrap/img009.jpg"><img src="images/scrap/img009.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/img009.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/img010.jpg"><img src="images/scrap/img010.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/img010.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/maho rail.jpg"><img src="images/scrap/maho rail.jpg" height="10%" alt= "Hack Production" /><span><img src="images/scrap/maho rail.jpg" /><br />Just a scrap</span></a>

<a class="thumbnail" href="images/scrap/sasuka.jpg"><img src="images/scrap/sasuka.jpg" height="10%"" alt= "Hack Production" /><span><img src="images/scrap/sasuka.jpg" /><br />Just a scrap</span></a>

</div>
</div>




</body>
</html>

this ones css

<style type="text/css">


h1 {
font-family: geneva, arial, helvetica, san serif;
font-size:16px;
color:#ffffff;
    }

h2 {
font-family: geneva, arial, helvetica, san serif;
font-size:13px;
color:#333333;
   }

h3 {
font-family: geneva, arial, helvetica, san serif;
font-size:12px;
color:#000000;
   }



body {
    background: url(images/menubars/banner1.jpg);
    font-family: verdana, arial, helvetica, sans-serif;
    text-align:center;
    margin:0;
    padding:0;
    min-width: 760px;
    }


p {
font-family: geneva, arial, helvetica, san serif;
font-size:13px;
color:#000000;
   }

p.treetops {
font-family: geneva, arial, helvetica, san serif;
font-size: 10%;
text-align:justify;
color:#333333;
   }





.glossymenu{
float:left;
width:100%;
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(images/menubars/menuo_bg.gif) repeat-x; 
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; 
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;	
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; 
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menubars/menuo_hover_left.gif) no-repeat; 
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menubars/menuo_hover_right.gif) no-repeat right top; 
}



#header {   font-size:80%;
float: left;
text-align: left;
width: 100%;
background: url(images/menubars/banner1.jpg) repeat-x bottom left;
   }


#col1 {   font-size:80%;
float: left;
width: 100%;	
margin-left: 2.5px;
margin-right 2.5px;
margin-bottom: 1px;
border:1px;
border-style:solid;
border-color:#000000;
background-color:#CECCAD;
   }
#images {   font-size:80%;

float: left;
width: 15%;	


border-color:#000000;

   }

#col2 {  font-size:80%;

float: left;
width: 70%;
border:1px;
border-style:solid;
border-color:#000000;
background-color:#cccccc;


   }




.glossymenuside{
list-style-type: none;
margin:  0;
padding: 0;
width: 100%;

}

.glossymenuside li a{
background: url(images/menubars/glossyback3.gif) no-repeat;
background-color: #d3dadf;
color: black;
display: block;
width: auto;


text-decoration: none;

}


.glossymenuside li a{ 
width: 100%;
}

.glossymenuside li a:visited, .glossymenu li a:active{
color: black;
}

.glossymenuside li a:hover{
background-image: url(images/menubars/glossyback1.gif);
color: white;
background-color: #e46323;
}

.glossymenuside li.current a, .glossymenuside li a:hover{
background-color: #e46323;
color: white;

}








.gallerycontainer{
position: relative;
padding: 0 55% 0 0;
padding-bottom: 400px;


}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;

}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ 

position: absolute;
background-color: lightyellow;
padding: 5px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 2px;
width: 98%;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 45%; 
z-index: 50;
}









</style>

thank if you can help

michaellunsford · November 16, 2007

rather than pouring over the code, do you have a link we can see? If we can compare side to side, I'm sure someone can figure out what's missing.

Sign In

Confused with my css (all works fine in safari but not in ff)

Recommended Posts

squizz

Link to comment

Share on other sites

michaellunsford

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information