CSS "Float" Problem: works in IE, not Mozilla/Nets

#1

Hi there,

I'm back again I'm afriad with another minor problem with my new site design.

Have a look at the test version of my website here:
http://www.eveythingfree.buildtolearn.net/classifieds/

If you are looking at it in Internet Explorer it should look fine, but if you
try it in Mozilla Firefox or Netscape it looks badly messed up.

The problem is with the 2 boxes near the top of the page, the "latest forum
posts" one and the "search box". The whole page (from bellow the navbar) is
laid out by the php script that generates most of the content of the site. Thus
I am limited in what I can adjust but I can use .css to layout these two boxes.
Here is the css that controls the forum and search boxes:

Code:

.forums {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
padding: 5px 10px 10px;
background-color: #F9F9F9;
position: relative;
width: 453px;
height: 100px;
left: 10px;
top: 10px;
vertical-align: top;
margin-bottom: 10px;
float: left;
}

.searchbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
background-color: #F9F9F9;
width: 230px;
height: 100px;
left: 20px;
vertical-align: top;
margin-bottom: 10px;
padding-top: 15px;
top: 10px;
position: relative;

}

.listings {
position: relative;
top: 10px;
}

Now I'm pretty sure that the problem lies with the "float" property in
..forums. I seem to recall Mozilla and Netscape don't recognise this in the same
way IE does.

Is there a way of making the site look the same in other browsers as it does
in IE? Without the "float" property I have failed to get it to look right, but
there must be some way around this problem.

I'd really appreciate any help, as this one thing has been holding me back for
ages!

Thanks,
Robert

#2

This might get you a bit closer: I've removed and added some attributes
to the 'searchbox' and 'forums' classes plus I have added an id
'clear'css style which needs to be applied to the table beneath the
floated <divs>. The html <body> section of the code is beneath the css
styles. I've make a few changes in that as well. Delete your old <body>
code and paste in the new then add the new css styles to your linked
stylesheet. Delete the old 'searchbox' and 'forum' styles.

..searchbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
border: 1px solid #666666;
background-color: #F9F9F9;
width: 230px;
height: 100px;
vertical-align: top;
margin-bottom: 10px;
padding-top: 15px;
float: right;
}

..forums {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
padding: 5px 10px 10px;
background-color: #F9F9F9;
width: 453px;
height: 100px;
vertical-align: top;
margin-bottom: 10px;
float: left;
}

#clear {
clear: both;
}

<body>

<div align="center">
<table width="750" height="65" border="0" align="center"
cellpadding="0" cellspacing="0" class="greybox">
<tr>
<td class="logotext"><span class="logotextred">e<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php"></a></span><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">verything.ie</a></td>
</tr>
</table>
<table align="center" width="750" height="20" border="0"
cellpadding="0" cellspacing="0" class="button">
<tr>
<td class="left"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/exists.php">why
everything exists</a></td>
<td class="left"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">how
to help </a></td>
<td class="left"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">how
to use everything </a></td>
<td class="left"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">forums</a></td>
<td class="left"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">write
to robert </a></td>
<td class="both"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">employers:
enter here</a></td>
</tr>
</table>
<table align="center" width="750" height="20" border="0" cellpadding="0"
cellspacing="0" class="button">
<tr>
<td class="left2"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">everything.ie
site news </a></td>
<td class="left2"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">robert
recommends </a></td>
<td class="left2"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">what
people are saying </a></td>
<td class="left2"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">
i'm bored </a></td>
<td class="left2"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">links</a></td>
<td class="both2"><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php">terms
of use </a></td>
</tr>
</table>

<table width="750" border="0" align="center" cellpadding="7"
cellspacing="0" class="whitebox">
<tr>
<td width="100%">

<div class="forums"><strong>latest forum posts::</strong><br
/><b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=21&action=new"
title="we rise for Peace!!">we rise for Peace!!</a><br>
<b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=20&action=new"
title="Arts project sponsorship">Arts project sponsorship</a><br>
<b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=19&action=new"
title="Anyone had any luck getting a Job through
everything.ie...">Anyone had any luck getting a Job through
everything.ie...</a><br>
<b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=18&action=new"
title="Recommend some good music for me...">Recommend some good music
for me...</a><br>
<b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=17&action=new"
title="How to become more popular???">How to become more popular???</a><br>
<b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=16&action=new"
title="Joke - vasectomy">Joke - vasectomy</a><br>
<b>·</b> <a
href="http://www.everything.ie/forum/viewtopic.php?id=15&action=new"
title="im just testing out this">im just testing out this</a><br>
</div><div align="center" class="searchbox"><form method="GET"
action="/classifieds/index.php"><input type="hidden" name="cf_action"
value="search"><input type="text" name="search_query" value=""><br
/><input type="submit" value="Search"><br><input type="radio"
name="search_mode" value="any">Any word <input type="radio"
name="search_mode" value="all">All words <input type="radio"
name="search_mode"
value="exact">Exact phrase </form></div><table id="clear"
border="0" cellspacing="0" cellpadding="10" width="100%"><tr>
<td align="left" valign="top" width="33.333333333333%">
<h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=01">accommoda tion:</a> (3)</h2><ul
class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0101">apts
/ houses to let</a> (1)</li><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0102">rooms
/ shared to let</a> (1)</li><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0103">sublets
/ temporary</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0104">accommo dation
wanted</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0105">house
swap</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0106">holiday
homes</a></ul><h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=02">for
sale: general</a></h2><ul class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0201">bicycle s</a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0202">books</a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0203">compute rs:
desktops / laptops</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0204">compute rs:
software / others</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0205">dvds
/ videos</a></ul><h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=03">cars
/ motorbikes:</a></h2><ul class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0301">cars:
under ?1000</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0302">cars:
?1,000 - 3,000</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0303">cars:
?3,000 - 5,000</a></ul></td><td align="left" valign="top"
width="33.333333333333%">
<h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=04">jobs:</a> (2)</h2><ul
class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0401">account ing
/ bookkeeping</a> (1)</li><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0402">admin
/ office / secretarial</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0403">adverti sing
/ marketing / pr</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0404">custome r
service / call centre</a> (1)</li><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0405">arts
/ entertainment / media</a></ul><h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=05">jobs:
post your c.v</a></h2><ul class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0501">click
here to post / view c.v.s</a></ul><h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=06">services
offered:</a> (1)</h2><ul class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0601">automot ive</a> (1)</li><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0602">childmi nders
/ cleaners</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0603">compute rs</a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0604">events< /a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0605">financi al</a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0606">legal</a></ul></td><td
align="left" valign="top" width="33.333333333333%">
<h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=07">personals </a> (2)</h2><ul
class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0701">ladies
seeking gentlemen</a> (1)</li><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0702">gentlem en
seeking ladies</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0703">ladies
seeking ladies</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0704">gentlem en
seeking gentlemen</a> (1)</li><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0705">strictl y
platonic</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0706">once
seen / missed connections</a></ul><h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=08">personals
(over 18's):</a></h2><ul class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0801">casual
encounters</a></ul><h2 class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=09">community :</a></h2><ul
class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0901">activit y
partners</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0902">art
/ artists</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0903">childca re</a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0904">classes
/ nightclasses</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0905">events
coming up</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0906">general
announcements</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=0907">groups< /a></ul><h2
class="cfmaincat">
<a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=10">everythin g.ie
news</a></h2><ul class="cfsubcat">
<li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=1001">click
here for updates</a><li><a
href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=1002">testing </a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=1003">testing </a><li><a

href="http://www.eveythingfree.buildtolearn.net/classifieds/index.php?cf_action=list&category_id=1004">testing </a></ul></td></tr></table>
</td>
</tr>
</table>
<p><span class="cfbody">© everything.ie 2004</span></p>
</div>
</body>

#3

Thanks,

I appreciate the help.

Robert

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

CSS "Float" Problem: works in IE, not Mozilla/Nets

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

CSS "Float" Problem: works in IE, not Mozilla/Nets - 07-12-2004 , 11:22 AM

Re: CSS "Float" Problem: works in IE, not Mozilla/Nets - 07-12-2004 , 01:11 PM

Re: CSS "Float" Problem: works in IE, not Mozilla/Nets - 07-12-2004 , 09:31 PM