CSS + DIV - slight NS (6?) problem

Dev Shed Forums Sponsor:

June 26th, 2003, 05:18 AM

DEfusion

Contributing User

Join Date: Jan 2003

Posts: 288

Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 11

CSS + DIV - slight NS (6?) problem

Ok I have a very simple forum listing the forum topics at the moment.

Which works fantastically in IE 6 and Opera 7.11 but in Netscape 6 its a little off, still learning CSS so any help/advice would be greatly appreciated.

Check these screenshots:
fourm_ie
fourm_ns

Heres the CSS controlling the forum:

Code:

div.spacer { clear: both; }

.f-link  { width: 49%; float: left; text-align: left; padding-left: 10px; padding-bottom: 10px; }

.f-info  { width: 49%; float: right; text-align: right; padding-right: 10px; padding-bottom: 10px; }

.f-title { width: 98%; text-align: left; padding: 2px; }

.f-body {
  width: 98%;
border: thin dashed #CCCCCC;
text-align: left;
font-size: 11px;
padding-left: 2px; 
padding-right: 2px; 
}

.f-row-type1 { 
width: 100%; 
padding-top: 4px; padding-bottom: 4px; 
border-bottom: thin dashed #CCCCCC; 
background-color: #FCFCFC; 
}

.f-row-type2 { 
width: 100%; 
padding-top: 4px; padding-bottom: 4px; 
border-bottom: thin dashed #CCCCCC; 
background-color: #F5F5F5; 
}

.f-valign-mid { vertical-align: middle; }

.f-posted { width: 130px; float: left; }

.f-poster { font-weight: bold; }

.f-topic { width: 355px; float: left; font-size: 12px; }

.f-views { width: 40px; float: left; text-align: center; }

.f-replies { width: 52px; float: left; text-align: center; }

.f-lastreply { width: 130px; float: left; }

.f-pagenav { width: 98%; text-align: left; padding: 2px; font-weight: bold; }

And heres the html for the topic display page (with only one row for example):

Code:

<!-- forum links - forum info -->
<div class="f-link"><a href="index.php">new topic</a></div>
<div class="f-info">Topics : $t_topic   Posts : $t_post</div>
<div class="spacer"></div>
<!-- forum title bar -->
<div class="f-title">
  <div class="f-posted">Posted</div>
  <div class="f-topic">Topic</div>
  <div class="f-views">Views</div>
  <div class="f-replies">Replies</div>
  <div class="f-lastreply">Last Reply</div>
</div>
<div class="spacer"></div>
<!-- forum body -->
<div class="f-body">
<!-- topics list -->
<!-- start the row type -->
  <div class="spacer"></div>
  <div class="f-row-type1">
<!-- start the topic data -->
    <div class="f-posted">$t_time<br>
      by <span class="f-poster">$t_poster</span>
      <br><a href="mailto:$origemail">email</a>
         <a href="$origurl">website</a>;
    </div>
      <div class="f-valign-mid">
        <div class="f-topic">
  <a href="forum.php?inc=disptopic.php&id=$t_id">$t_title</a>
        </div>
        <div class="f-views">$t_views</div>
        <div class="f-replies">$t_replies</div>
      </div>
    <div class="f-lastreply">$lasttime<br>
by <span class="f-poster">$lastposter</span>
    </div>
<!-- end of topic data -->
<!-- end row type -->
  </div>

<!-- page navigation links -->
  <div class="spacer"></div>
  <div class="f-pagenav">$navlinks</div>
<!-- close forum body -->
</div>

Now as you see in the NS version all the rows (especially their backgrounds) are off. Just compare the IE and NS screenshots, the IE screenshot is perfect (just like Opera) but in NS (testing with 6.01) it's not quite perfect.

All CSS and outputting (from PHP) HTML has been validated using W3C validators as being 100%.

Thanks in advance.

-D

CSS + DIV - slight NS (6?) problem

Developer Shed Advertisers and Affiliates