View Full Version : Forum CSS+DIVs (fine in IE, Opera - a mess in NS) -- indepth explanation


DEfusion
06-26-2003, 12:03 AM
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 just awful, and I have NO idea why, or where to start.

Check these screenshots:
forum_ie (http://www.primaryevasion.com/forum_ie.gif)
forum_ns (http://www.primaryevasion.com/forum_ns.gif)

Heres the CSS controlling the forum:

.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):


<!-- forum links - forum info -->
<div class="f-link"><a href="index.php">new topic</a></div>
<div class="f-info"><?php print "Topics : $t_topic &nbsp; Posts : $t_post"; ?></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>

<!-- forum body -->
<div class="f-body">

<!-- topics list -->

<!-- start the row type -->
<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>
&nbsp;&nbsp;&nbsp;<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="f-pagenav">$navlinks</div>

<!-- close forum body -->
</div>


It may be useful to see the page (only the page number links currently work):
http://www.primaryevasion.com/forum.php

You'll see the code (of the Iframe that the forum is in) is very neat (especially for dynamically generated content) for viewing and I can't see any problems with that.

Although the site uses a different CSS file for NS that IE (Opera uses the same one as NS) nothing is different - with regards to the forums css anyway - at the moment in the NS CSS as I have no idea whats wrong.

The stylesheets are at:

http://www.primaryevasion.com/_ie.css
http://www.primaryevasion.com/_ns.css

Any ideas would greatly help me.

-D

DEfusion
06-26-2003, 12:24 AM
Ok I've sorted out that mess now (nearly) see this screenshot (http://www.primaryevasion.com/forum_ns2.gif) for where I currently am in NS.

How I achieved this was adding empty divs like this:

<div class="spacer"></div>

with the class simply being:

clear: both;

These were inserted after the first two divs (f-link & f-info), after the f-title div, before every new row and finally before the f-pagenav div.

This has got me to where you now see the site, but its not perfect (granted 1000 times better though) in NS.

Any ideas where to go from here?

-D