Firefox problem

[Dark Knight]

I have decided to make a navigation using images as links style. The problem is in IE shows the photo gallery but in FF it dosen't exist.In Internet Explorer:In FireFox:Here is the css code

div.gallery{	text-align: left;	padding-top:3px;	padding-left: 3px;	padding-bottom: 3px;	padding-right: 3px;	width: 161px;	height: 121px;	float: left;	}a.1,a.2,a.3,a.4,a.5,a.6,a.7,a.8,a.9,a.10,a.11,a.12,{	text-align: left;	width: 161px;	height: 121px;	float: left;}a.1:link{background-image:url('images/gallery/1-1.png');}a.2:link{background-image:url('images/gallery/2-1.png')}a.3:link{background-image:url('images/gallery/3-1.png')}a.4:link{background-image:url('images/gallery/4-1.png');}a.5:link{background-image:url('images/gallery/5-1.png');}a.6:link{background-image:url('images/gallery/6-1.png');}a.7:link{background-image:url('images/gallery/7-1.png');}a.8:link{background-image:url('images/gallery/8-1.png');}a.9:link{background-image:url('images/gallery/9-1.png');}a.10:link{background-image:url('images/gallery/10-1.png');}a.11:link{background-image:url('images/gallery/11-1.png');}a.12:link{background-image:url('images/gallery/12-1.png');}a.1:hover{background-image:url('images/gallery/1-2.png');}a.2:hover{background-image:url('images/gallery/2-2.png');}a.3:hover{background-image:url('images/gallery/3-2.png');}a.4:hover{background-image:url('images/gallery/4-2.png');}a.5:hover{background-image:url('images/gallery/5-2.png');}a.6:hover{background-image:url('images/gallery/6-2.png');}a.7:hover{background-image:url('images/gallery/7-2.png');}a.8:hover{background-image:url('images/gallery/8-2.png');}a.9:hover{background-image:url('images/gallery/9-2.png');}a.10:hover{background-image:url('images/gallery/10-2.png');}a.11:hover{background-image:url('images/gallery/11-2.png');}a.12:hover{background-image:url('images/gallery/12-2.png');}

And here is a example of the gallery:

<div class="gallery"><a href="images/gallery/image.jpg" class="1" title="Image Title"></a></div>

How can I fix this problem ?

[Ingolme]

can numbers really be used as class names? I'm not sure if they can or can't right now, but it might be what's causing it not to work.Hmm, another reason might be that inline elements can't have background images so you should write "display: block" for all the <a> elements you want to make images.

[jeffman]

Ingolme speaks true. classNames may contain numbers but may not begin with numbers, which is the same as saying they may not simply be numbers.

[Synook]

By the way, you can assign multiple classes to the same element, so even if you needed individual classes for the images you could have

<div class="gallery"><a href="images/gallery/image.jpg" class="link1 imagelink" title="Image Title"></a></div>

and in your CSS just have

div.gallery{	text-align: left;	padding-top:3px;	padding-left: 3px;	padding-bottom: 3px;	padding-right: 3px;	width: 161px;	height: 121px;	float: left;	}a.imagelink {	text-align: left;	width: 161px;	height: 121px;	float: left;}a.link1:link{background-image:url('images/gallery/1-1.png');}a.link2:link{background-image:url('images/gallery/2-1.png')}a.link3:link{background-image:url('images/gallery/3-1.png')}a.link4:link{background-image:url('images/gallery/4-1.png');}a.link5:link{background-image:url('images/gallery/5-1.png');}a.link6:link{background-image:url('images/gallery/6-1.png');}a.link7:link{background-image:url('images/gallery/7-1.png');}a.link8:link{background-image:url('images/gallery/8-1.png');}a.link9:link{background-image:url('images/gallery/9-1.png');}a.link10:link{background-image:url('images/gallery/10-1.png');}a.link11:link{background-image:url('images/gallery/11-1.png');}a.link12:link{background-image:url('images/gallery/12-1.png');}a.link1:hover{background-image:url('images/gallery/1-2.png');}a.link2:hover{background-image:url('images/gallery/2-2.png');}a.link3:hover{background-image:url('images/gallery/3-2.png');}a.link4:hover{background-image:url('images/gallery/4-2.png');}a.link5:hover{background-image:url('images/gallery/5-2.png');}a.link6:hover{background-image:url('images/gallery/6-2.png');}a.link7:hover{background-image:url('images/gallery/7-2.png');}a.link8:hover{background-image:url('images/gallery/8-2.png');}a.link9:hover{background-image:url('images/gallery/9-2.png');}a.link10:hover{background-image:url('images/gallery/10-2.png');}a.link11:hover{background-image:url('images/gallery/11-2.png');}a.link12:hover{background-image:url('images/gallery/12-2.png');}

[Dark Knight]

So because of using numbers, made the FF unable to read the page ? if so then why the IE can read the page?

[Ingolme]

So because of using numbers, made the FF unable to read the page ? if so then why the IE can read the page?

For the same reason that it can interpret CSS measure values without a defined unit. It doesn't exactly do things the standard way.

[Synook]

IE likes to break the rules. You can use numbers - just don't start class names with them. By the way, ids can't start with numbers either.

[Dark Knight]

I tried to remove the numers from the classes with normal characters but still not working. and i've tried the "display: block" to the <a> tag with no results. any more ideas?

[newseed]

Do you have a url so we can look at it?

[Dark Knight]

http://www.radugherasim.xhost.ro/gallery.htmlGreat!! Now the hover is not working! X( damn it! i'll modify the site probably i'll use onmouseover style to change the images. however thanks for your help.

[newseed]

I haven't had a chance to look at the code but I see what your problem is in FF. For now, my suggestion would be is to copy just the gallery portion of the codes (including css) and test it on a page by itself and see if it works in all browsers. If not, then you know the problem lies within those codes. If you haven't found the problem yet, post the URL of just the gallery only. I will try to look at it later today if no one else has have given you a solution.

[newseed]

After looking at your html code, you don't have any images declared using <img> tag which what lightbox depends on to display your images (thumbnails). However, from looking at your CSS, it looks like you are trying to display a background image for each one using <a> tags and when hovered over another background appears. The problem here is that the <a> has nothing defined to give it that width and height even though you declared it in the CSS. Go ahead, just type a word or two between one of those open and closed <a> tag you will see part of the background image.Probably the best way to fix this is create a blank.gif file at the same width and height as your css declaration and place it there between the open and close <a> tags.And don't forget to change all those numbers (e.g. a.2:link) over to a letters or else the background image will not show up at all. If you need numbering, just add the letter first (e.g. a.g2:link).