firefox ignores float on <span> element

**genia** · 10-31-2008, 12:30 PM

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** · 10-31-2008, 06:48 PM

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** · 11-02-2008, 12:10 PM

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** · 11-02-2008, 01:22 PM

I just put it in a table, works fine:

Code:

<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>

Code:

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** · 11-02-2008, 02:19 PM

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** · 11-02-2008, 03:54 PM

This works in FF:

Code:

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** · 11-02-2008, 04:11 PM

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** · 11-02-2008, 04:31 PM

Code:

<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** · 11-02-2008, 05:03 PM

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