DIV Class disappearance under Firefox

[vinnier]

Hello,

 

I need some help with my new project that's running on Wordpress. (let me just say that I've tried wp forum but it doesn't look like I will get any help there anytime soon)

 

I never thought I would say that; but I've got a problem with a template under Firefox(!)

 

The theme is family by TopWPThemes.com

 

I have tested it under Opera, Chrome, IE, Safari and it's all fine there but when tested under Firefox some bits of the website are not visible.

 

Those bits are: Releases and Recommended

 

If you go to the website which is http://www.worecords.com you will see which bits I'm talking about.

 

In the theme the files responsible for those bits look like this:

recommended.php

<div class="125ads">
<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/recommended/note1.jpg" alt="Recommended #1" width="125" height="125" /></a>
<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>//recommended/notes.jpg" alt="Recommended #2" width="125" height="125" /></a>
<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/recommended/note1.jpg" alt="Recommended #3" width="125" height="125" /></a>
</div>

 

and

 

releases.php

<div class="125ads">

<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/releases/record.jpg" alt="RELEASE #1" width="125" height="125" /></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/releases/record2.jpg" alt="RELEASE #2" width="125" height="125" /></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/releases/record.jpg" alt="RELEASE #3" width="125" height="125" /></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/releases/record2.jpg" alt="RELEASE #4" width="125" height="125" /></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory');?>/releases/record.jpg" alt="RELEASE #5" width="125" height="125" /></a>

</div>

 

Guess this is the bit in the css that determines those:

.ads{
float: right;
margin-right: 28px;
        margin-top: 8px;
        margin-bottom: 0px;
}

.ads.125ads {
padding:3px 0 0 0;
text-align:left;
}

.ads h2 {
color: #181818;
font: bold 16px Arial, Helvetica, sans-serif;
margin: 0 0 0px 0;
        padding: 2px 0px 3px 0px;
text-align: center;
        text-transform: uppercase;
}

.ads img {
      padding: 4px;
      border: #bebebe 1px solid;
      background: #bebebe;
      }

.ads a:link img  {
      padding: 4px;
      border: #bebebe 1px solid;
      background: #bebebe;
      }

.ads a:hover img  {
      padding: 4px;
      border: #ffc04e 1px solid;
      background: #ffc04e;
      }

 

 

As the items don't appear at all under Firefox I can't examine them with Firebug so I am completely stuck.

 

I would appreciate any help.

[vinpkl]

well i dont know about the ads but your header layout is disturbed in IE7.

 

rest all content which appear is IE7 is seen in firefox 3.5

 

vineet

[vinnier]

Hmmm, I've checked it with IE8, don't have IE7... And it's all fine under IE8 and under Firefox 3.5.5 some things are missing.

+ now something is wrong under IE7 according to you... :/ help

[vinnier]

Just tried the website using IE8 compatibility view and now I see what you mean about the messed up header. How to fix all that?

[vinnier]

Now I'm totally confused. I've saved the page using Safari and then opened the saved file using Firefox and suddenly it all looks as it should under FF.

What in the world is going on? 

 

 

 

EDIT:

 

No help from W3C either, well not on that matter at least... :/ http://validator.w3.org/check?uri=www.worecords.com&charset=%28detect+automatically%29&doctype=Inline&group=0