html/css problem in firefox

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > html/css problem in firefox

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

html/css problem in firefox

ruby_bestcoder@hotmail.com

12-18-05 - 03:38 AM

Hi

I already posted this in the javascript group, but seemed to be the
wrong place to ask. The code I will post here works in IE, but not in
ff. Its basically a group of li that contain divs. Clicking on one of
the nested divs, should hide/show other nested divs. In ff, the li
(whose div should hide) moves a line up, messing up things totally.

Is there a good soul that wanna see this and try to understand what the
problem could be?
The page is set up at:
http://www.e-mercatone.com/test/test4.html

This is the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>something</title>
<script language="JavaScript" type="text/javascript"
src="thejs.js"></script>
<link rel="stylesheet" href="thestyle.css" type="text/css">
</head>
<body>
<div
style="height:650px;background-color:gray;width:800px;margin-left:auto;margi
n-right:auto;float:center;">
<div id="content"
style="background-color:gray;width:250px;height:300px;float:left;">
<div style="height:200px;">
<div style="float:left;">
<ul class="sortabledemo" id="secondlist"
style="height:150px;width:200px;">
<li class="orange" id="secondlist_secondlist1">
<div style="width:200px;">
<div class="handle"
style="background-color:#999999;float:left;width:160px;

height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;"
>
&nbsp;Music
</div>
<div style="float:left;width:20px;height:18px;
cursor:pointer;text-align:center;">
<img width="20" height="18" src="min.gif" id="musicMin" alt=""
onclick="minimizeThis('underMusic', 'musicMin')" />
</div>
<div style="height:18px;float:left;width:20px">
<img width="20" height="18" src="max.gif" alt="" />
</div>
<div id="underMusic" style="display:block;padding:5px;">
text
</div>
</div>
</li>
<li class="orange" id="secondlist_secondlist2">
<div style="width:200px;">
<div class="handle"
style="background-color:#999999;float:left;width:160px;

height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;"
>
&nbsp;Sport
</div>
<div style="float:left;width:20px;height:18px;
cursor:pointer;text-align:center;">
<img width="20" height="18" alt="" src="min.gif" id="sportMin"
onclick="minimizeThis('underSport', 'sportMin')" />
</div>
<div style="height:18px;float:left;width:20px">
<img width="20" height="18" alt="" src="max.gif" />
</div>
<div id="underSport" style="display:block;padding:5px;">
text
</div>
</div>
</li>
<li class="orange" id="secondlist_secondlist3">
<div style="width:200px;">
<div class="handle"
style="background-color:#999999;float:left;width:160px;

height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;"
>
&nbsp;Games
</div>
<div style="float:left;width:20px;height:18px;
cursor:pointer;text-align:center;">
<img width="20" height="18" alt="" src="min.gif" id="gamesMin"
onclick="minimizeThis('underGames', 'gamesMin')" />
</div>
<div style="height:18px;float:left;width:20px">
<img width="20" height="18" alt="" src="max.gif" />
</div>
<div id="underGames" style="display:block;padding:5px">
text
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
***************************************************************************
This is the css:

ul.sortablelist {
list-style-image:none;
list-style-type:none;
margin-top:5px;
margin:0px;
padding:0px;
}
ul.sortabledemo li {
padding:0px;
margin:0px;
}
li.green {
background-color: #ECF3E1;
border:1px solid #C5DEA1;
cursor: move;
}
li.orange {
border:1px solid #333333;
background-color: white;
}

***************************************

And this is the js:

function minimizeThis(arg, imgid) {
var d, i;
if (document.getElementById
&& (d = document.getElementById(arg))
&& (i = document.getElementById(imgid))
&& d.style ){
if ('none' == d.style.display){
d.style.display = '';
d.style.height  = '100px';
i.src = 'min.gif';
}
else {
d.style.display = 'none';
d.style.height  = '1px';
i.src = 'max2.gif';
}
}
}

[ Post Follow-Up to this message ]