Stylesheets - html/css problem in firefox

Author

html/css problem in firefox

ruby_bestcoder@hotmail.com

2005-12-17, 10:38 pm

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;margin-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;">
 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;">
 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;">
 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';
}
}
}

Jim Moe

2005-12-17, 10:38 pm

ruby_bestcoder@hotmail.com wrote:
>
> 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.
>
You floated everything in sight. It was really quite unnecessary. I
removed all instances of float:left and changed the rest as shown below.

Try this:
<ul class="sortablelist" id="secondlist" style="height: 150px; width: 200px;">
<li class="orange">
<div style="float: right">
<img src="t_files/min.gif" style="cursor: pointer;" alt=""
onclick="minimizeThis('underMusic', 'musicMin')" height="18" width="20">
<img src="t_files/max.gif" alt="" height="18" width="20">
</div>

<div class="handle" style="background-color: rgb(153, 153, 153);
font-family: Verdana; font-weight: bold;">
 Music
</div>

<div id="underMusic" style="padding: 5px; height: 100px;">
text
</div>
</li>
...
</ul>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

ruby_bestcoder@hotmail.com

2005-12-17, 10:39 pm

Oh great, it works :)
Thanks

Arne

2005-12-18, 3:26 am

Once upon a time *ruby_bestcoder@hotmail.com* wrote:

> Oh great, it works :)
> Thanks

What works? Thanks to who?

How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
From Google: http://www.safalra.com/special/googlegroupsreply/

--
/Arne

Tech Support: Your password is the small letter a as in apple,
a capital letter V as in Victor, the number 7.
Customer: Is that 7 in capital letters?

Leonard Blaisdell

2005-12-18, 6:31 am

In article <40kkkdF1b1085U1@individual.net>,
Arne <invalid@domain.invalid> wrote:

> Once upon a time *ruby_bestcoder@hotmail.com* wrote:
>
>
> What works? Thanks to who?
>
> How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
> From Google: http://www.safalra.com/special/googlegroupsreply/

From now on, assume they are all thanking *me*. If they're cursing,
assume they are all cursing you :-)
Seriously, a pretyped boilerplate response to this stuff is really in
order. I have a small one but have only used it once. Here's mine:

<text>
These offered links do not address your question but are of direct
benefit to you. The links below will help you if you wish to be
helped. This posting is not meant to offend you.

<news:news.announce.newusers>
<http://oakroadsystems.com/genl/unice.htm>
<http://www.safalra.com/special/googlegroupsreply/>
<http://blinkynet.net/comp/uip5.html>
</text>

Someone with authority in the group(s) could make a boilerplate link
that everyone can cite. Perhaps in the allmyfaqs domain and give
everyone a link to post to this stuff instead of answering questions.
Of course, the question is original and doesn't show the problem till
later, but a more clever person than me can figure out the proper
response. The problem is usenet-wide as you know.

leo

--
<http://web0.greatbasin.net/~leo/>

ruby_bestcoder@hotmail.com

2005-12-19, 7:06 pm

Sorry all. I wanted to thank Jim Moe. Its solution works great:
Jim Moe wrote:

> You floated everything in sight. It was really quite unnecessary. I
> removed all instances of float:left and changed the rest as shown below.
>
> Try this:
> <ul class="sortablelist" id="secondlist" style="height: 150px; width: 200px;">
> <li class="orange">
> <div style="float: right">
> <img src="t_files/min.gif" style="cursor: pointer;" alt=""
> onclick="minimizeThis('underMusic', 'musicMin')" height="18" width="20">
> <img src="t_files/max.gif" alt="" height="18" width="20">
> </div>
>
> <div class="handle" style="background-color: rgb(153, 153, 153);
> font-family: Verdana; font-weight: bold;">
>  Music
> </div>
>
> <div id="underMusic" style="padding: 5px; height: 100px;">
> text
> </div>
> </li>
> ...
> </ul>

PS: am a little stressed but I promise I will learn to quote before
posting next time :)