float problem in Firefox

08-02-2006

The simple HTML & CSS below uses float:left and float:right to display
the three <li>'s on the same line. This works on IE, and it also works
on Firefox if there is no <a href> tag inside the <li>. But Firefox
puts the "should be on the same line" link on the following line. Any
advice on how to get it to stay on the same line?

TIA

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css" media="screen">@import "style.css";</style>
</head>
<body>
<ul class="header">
<li>first</li>
<li>second</li>
<li class="sitelink"><a href="http://www.abc.com/">should be on same
line</a></li>
</ul>
</body>
</html>

style.css:

..header li {
float:left;
}
..header a {
float:left;
display:block;
}
..header .sitelink {
float:right;
}
..header .sitelink a {
float:right;
}

08-02-2006

squareboy wrote:
> The simple HTML & CSS below uses float:left and float:right to display

Here's a link to make it easier to repro:

http://www.maxuk.net/what2.html

Thanks for any advice.

08-02-2006

In article
<. com>,
"squareboy" <> wrote:

> The simple HTML & CSS below uses float:left and float:right to display
> the three <li>'s on the same line. This works on IE, and it also works
> on Firefox if there is no <a href> tag inside the <li>. But Firefox
> puts the "should be on the same line" link on the following line. Any
> advice on how to get it to stay on the same line?
>
> TIA

> style.css:
>
> .header li {
> float:left;
> }
> .header a {
> float:left;
> display:block;
> }
> .header .sitelink {
> float:right;
> }
> .header .sitelink a {
> float:right;
> }

Get rid of all your css on this and replace with

..header li {
display:inline;
}

add margins and padding appropriately. You are getting too fancy.

--
dorayme

08-02-2006

In article
< .com>,
"squareboy" <> wrote:

> squareboy wrote:
> > The simple HTML & CSS below uses float:left and float:right to display
>
> Here's a link to make it easier to repro:
>
> http://www.maxuk.net/what2.html

A nice example of what is wrong with justified text... You need
to find out how to screen snap relevant rectangles and/or crop
pics.

--
dorayme

08-02-2006

dorayme wrote:
> Get rid of all your css on this and replace with
> ...
> add margins and padding appropriately. You are getting too fancy.

It would be too fancy if this was all I was trying to achieve, but the
code I'm giving here is massively simplified to leave just the
underlying problem: that the link appears on the following line in
Firefox.

Interested to see if anyone actually knows how to fix this.

Cheers

08-02-2006

In article
< .com>,
"squareboy" <> wrote:

> dorayme wrote:
> > Get rid of all your css on this and replace with
> > ...
> > add margins and padding appropriately. You are getting too fancy.
>
> It would be too fancy if this was all I was trying to achieve, but the
> code I'm giving here is massively simplified to leave just the
> underlying problem: that the link appears on the following line in
> Firefox.
>
> Interested to see if anyone actually knows how to fix this.
>
> Cheers

Fair enough... you sure that the nav bar cannot be an isolated
bit of code along the lines I suggest, easier to manage than the
float... but good luck...

--
dorayme

08-04-2006

To further the education of mankind, "squareboy" <>
vouchsafed:

> The simple HTML & CSS below uses float:left and float:right to display
> the three <li>'s on the same line. This works on IE, and it also works
> on Firefox if there is no <a href> tag inside the <li>. But Firefox
> puts the "should be on the same line" link on the following line. Any
> advice on how to get it to stay on the same line?
>
> TIA

Delete both css entries for the "a"s.

--
Neredbojias
Infinity has its limits.

08-04-2006

squareboy wrote:

> It would be too fancy if this was all I was trying to achieve, but the
> code I'm giving here is massively simplified to leave just the
> underlying problem:

That's why we don't usually respond to posted code, only to URLs.

You're trying to mix and match display: block and display: inline.
Either make your block eleemnts behave as inline, or else stop trying
to make an <a> behave in a block-like manner (floats, width etc.)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
float to string to float, with first float == second float	Carsten Fuchs	C++	45	10-08-2009 09:47 AM
operator== (float, float)	Jukka Lehtonen	C++	5	08-05-2004 08:28 AM
need code to convert float format to internal java float format which is kept in 4 bytes integer	Andy	Java	7	05-10-2004 09:26 PM
static_cast<float>(a) versus float(a)	Jim West	C++	4	01-16-2004 12:36 PM
Re: float->byte->float is same with original float image. why float->ubyte->float is different???	bd	C Programming	0	07-07-2003 12:09 AM