firefox ignores float on <span> element

[genia]

ignore this,ive changed the code,scroll down.

http://www.kobital.co.il/v6/inside.htm

if you click on the left square you get a list
on ie7 it works ok the span for english floats to the left and the other lang[hebrew] floats to the right.
but on firefox they stick together.

any ideas?
i've tried adding display:block and few more things
the only solution i found was adding a padding-but i cant do it cause the names will be loaded dynamiclly

[Medyman]

What did you put display:block on? You need it on your list items. The float is actually working. The problem is that your list items are only as wide as the the English and Hebrew parts.

So your options are to either use display:block on the <li> elements. That'll work as long as you're not resizing the <ul> at all. If you are or if the above doesn't work, manually set the <li>'s width to the size of the square (minus and padding you want).

Nicely designed site, by the way.

[genia]

thank you for your replay
evntually i solved the problem by using <p> and <span>
as you can see here:
http://www.kobital.co.il/v7/inside.htm
by clicking on "private projects"
but now i have a new problem,now firefox ignores the a:hover rule
inside "private projects".
in IE it works fine but my fav. FF ignores it, i've tried adding hover to the span and <P> too but then it highlights only half row i cant make it highlight both the elements of the link

any ideas on it?

[Snookerman]

I just put it in a table, works fine:

<div id="ppr_c" style="display: block;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="hover"><a href="javascript:;" onmousedown="toggleDiv('mydiv');">
<p id="eng">English</p>
<span id="heb">עברית</span></a></td>
</tr>
<tr>
<td><div id="mydiv" style="display: none;">text text text</div></td>
</tr>
<tr>
<td class="hover"><a href="javascript:;" onmousedown="toggleDiv('genia');">
<p id="eng">English</p>
<span id="heb">עברית</span></a></td>
</tr>
<tr>
<td><div id="genia" style="display: none;">Genia Genia Genia</div></td>
</tr>
</table>
</div>

p {
margin:0;
padding:0;
}
.hover:hover {
background-color:#989D99;
}
#ppr_c #eng {
margin:0;
padding-left:8px;
float:left;
color:#fff;
width:67px;
display:inline;
font-family:arial;
font-size:9pt;
text-decoration: none;
}

[genia]

It does works..thanks
but amm with no offense,maybe someone have a css solution?
it's kind interesting why it ignores the <A>

[jscheuer1]

This works in FF:


li {
color: #fff;
float: left;
width: 100%;
margin-left: -26px;
}

Use it in place of your existing definition. If it messes up IE, use a conditional comment style afterwards (hopefully you know how to do this, if not just ask) to override it for IE.

You may want to express the -26px in ems.

[genia]

thanks but it's irelvant i've changed the code as you can see here:
http://www.kobital.co.il/v7/inside.htm

and iv'e got a little problem with it as you can see above^

[jscheuer1]

<div style="width: 25px; height: 5px; margin-top: -30px; margin-left: 80px;">
<a onmouseover="scrollContent('textslider',-1)" onmouseout="cancelScroll('textslider')"><img src="images/up.gif"></a>
<a onmouseover="scrollContent('textslider',1)" onmouseout="cancelScroll('textslider')" style="display: inline;"><img src="images/down.gif"></a>
</div>

[genia]

dude,thanks but that's not my problem.
the problem is that when you click on "privte projects" and you get the list of the projects, firefox doesnt highlight the line but ie does.
and i want to findout why

[Snookerman]

I thought the table worked?

[genia]

yeah but then i loose the whole idea of table less design,no?

[jscheuer1]

That's not so obvious, or critical. You really shouldn't have a block level element like a p inside of an inline element like an a, even if the a has display set to block. But that's not the problem in FF, though some browsers (like Safari) may have issues just with that. The element that you want to apply a hover to must have height (for example, to be added to your current styles):


#ppr_c a {
height:1em;
}

Otherwise, the mouse never, or very rarely ever passes over it, and even if it does, how would you notice? Now, you could also clear the floats, then the a would have the native height of its content. A float technically adds no height to its container unless cleared by another element after it in that container. One clearing element will clear all floats in its container that precede it. IE usually ignores this and gives the container the height it would have if all floats were cleared.

[genia]

thank you for the solution and the explanation.
now i have annoying problem with JS scroller,but i think i will post it in the JS section:
http://www.dynamicdrive.com/forums/showthread.php?t=38296