Float And Display with Firefox

[e1seix]

Head-wrecking conundrum here. I have some sort of float or display error in Firefox browser. Easiest thing to do is just print the code and allow you all to see.

 

.box {
background-color: #000000;
border-bottom: 5px #000000 solid;
border-top: 5px #000000 solid;
margin: 0 auto;
overflow: hidden;
width: 500px; }

.row {
float: left;
height: 350px;
margin-left: 5px;
width: 94px; }

.row a {
background-color: #333333;
border: 2px #333333 solid;
color: #000000;
display: block;
text-decoration: none; }

.row a:hover {
background-color: #c11b17;
border: 2px #c11b17 solid;
color: #ffffff; }

.img {
height: 90px;
margin: 0 auto;
width: 90px; }

.text {
height: 140px;
margin: 0 auto;
width: 90px; }

.brand {
margin: 0 auto;
overflow: hidden;
width: 85px; }

.name {
font-size: 10px;
font-weight: bold;
margin: 0 auto;
overflow: hidden;
width: 85px; }

.type {
font-size: 10px;
font-weight: normal;
margin: 0 auto;
overflow: hidden;
width: 85px; }

 

And the html:

 

        <div class="box" style="border-top: 0px;">

          // Row 1
          <div class="row"><a href="/">
            <div class="img"><img alt="Play Deodorant Stick 75ml" src="/imgs/x.gif" style="background: transparent url('/imgs/90/90_00003.jpg') center center repeat-x;height: 90px;width: 90px;" /></div>
            <div class="text">
              <div class="brand">Givenchy</div>
              <div class="name">Play</div>
              <div class="type">Deodorant Stick 75ml</div>
            </div>
          </a></div>

          // Row 2
          <div class="row"><a href="/">
            <div class="img"><img alt="Play Deodorant Stick 75ml" src="/imgs/x.gif" style="background: transparent url('/imgs/90/90_00003.jpg') center center repeat-x;height: 90px;width: 90px;" /></div>
            <div class="text">
              <div class="brand">Givenchy</div>
              <div class="name">Play</div>
              <div class="type">Deodorant Stick 75ml</div>
            </div>
          </a></div>

          // Row 3
          <div class="row"><a href="/">
            <div class="img"><img alt="Play Deodorant Stick 75ml" src="/imgs/x.gif" style="background: transparent url('/imgs/90/90_00003.jpg') center center repeat-x;height: 90px;width: 90px;" /></div>
            <div class="text">
              <div class="brand">Givenchy</div>
              <div class="name">Play</div>
              <div class="type">Deodorant Stick 75ml</div>
            </div>
          </a></div>

          // Row 4
          <div class="row"><a href="/">
            <div class="img"><img alt="Play Deodorant Stick 75ml" src="/imgs/x.gif" style="background: transparent url('/imgs/90/90_00003.jpg') center center repeat-x;height: 90px;width: 90px;" /></div>
            <div class="text">
              <div class="brand">Givenchy</div>
              <div class="name">Play</div>
              <div class="type">Deodorant Stick 75ml</div>
            </div>
          </a></div>

          // Row 5
          <div class="row"><a href="/">
            <div class="img"><img alt="Play Deodorant Stick 75ml" src="/imgs/x.gif" style="background: transparent url('/imgs/90/90_00003.jpg') center center repeat-x;height: 90px;width: 90px;" /></div>
            <div class="text">
              <div class="brand">Givenchy</div>
              <div class="name">Play</div>
              <div class="type">Deodorant Stick 75ml</div>
            </div>
          </a></div>

        </div>

 

Pretty much it works perfectly, except for some odd reason the code gets corrupted on the third row BUT repairs itself for the fourth and fifth row. What on earth am I missing?

 

All help greatly appreciated!

 

Cheers,

[vinpkl]

hi

 

the problem is you are using wrong comment tags for html.

 

replace

// Row 1

 

with

 

<!-- Row 1 -->

 

and do it with all row coments tags. it will work fine in all browsers.

 

vineet

[e1seix]

hi

 

the problem is you are using wrong comment tags for html.

 

replace

// Row 1

 

with

 

<!-- Row 1 -->

 

and do it with all row coments tags. it will work fine in all browsers.

 

vineet

 

Sorry, I added those comments to help you understand what I was getting at and be able to show where the cvurruption takes place. They're not the issue as they don't appear in my code normally.

 

Please, any ideas?

 

It's as if the css is altogether skipped for the third row and then it's OK again for the last two rows.

[haku]

Pretty much it works perfectly, except for some odd reason the code gets corrupted on the third row BUT repairs itself for the fourth and fifth row.

 

'the code gets corrupted' isn't very descriptive of your problem.