Re: float:left and float:right

In article <be8nvq$2bqkp$1 (AT) ID-139076 (DOT) news.dfncis.de>, "Dave"
<idonthaveanaddress (AT) hotmail (DOT) com> writes:

* Links want to be real links. A link to "#" with js off is sure to
confuse visitors.

Or change it from # to javascript:;

Even if visitors have javascript turned off, some will look in the statusbar
and think "ooh, its javascript, so it wont work."

I just hope that validates..

Use of the javascript: pseudo-protocol is actually *worse* than the use of a
link that does nothing.

The way I fixed it:

It loads with a blank image. Transparent gif. Then, after the page is loaded,
it swaps them all for the up arrow. Then, if javascript is disabled, then the
non-js user wont see an image to click on.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.

In article <WEWNa.51386$fG.33673@sccrnsc01>, Brian
<brian (AT) wfcr (DOT) org.invalid-remove-this-part> writes:

David Graham wrote:

http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage.html

When the text-alignment is removed, it does indeed let the
next div go to the next line. But, it moves the image with it.

Right align the text, then float the first span left.

I did the above, and the image now site along side the header text (IE6 and
NN7) but directly on its right, not at the far right end of the div header.

Are you the op? Your id has changed. I ask because I see no changes
in the test url above. Please change that file, so I can see what
you've done, and how it works. Trying to imagine it without seeing it
is a bit difficult.

No, he was not the op. Just another person interested in this scenario I guess.

Also, although this works, I don't see why floating the text left doesn't
cause the same problem as floating the image right i.e. it becomes block
level and therefore wants to be displayed below the header div

In my example, you have 2 block level elements: H1 and div. The h1
comes first, then the div. Within the h1, you have text floated left.
That means that it will come first, then the arrow, then the div.
Since the float takes it out of the normal flow, it is in the same
block box as the arrow.

Try this: create brightly colored borders for all 3 elements: the h1,
the div, and the span. Something that you can see through the
background. Then make changes to the float, and you can see what the
browser is doing.

On the test page that I used, <URL:
http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage2.html />

When testing offline, and adding a border, Moz now acts like I want it to.

<URL: http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage3.html />

Why I had to add a 1px border to make Mozilla leave it alone is beyond me
though. To see it, view each page and click the down arrow. The only difference
in the two pages are the swapping of the images, and the addition of the
border.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.

In article <FcONa.17251$I8.10347@rwcrnsc53>, Brian
<brian (AT) wfcr (DOT) org.invalid-remove-this-part> writes:

HikksNotAtHome wrote:

http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage.html

When I take the align:left out, I get the Div 1 Header on
one line, the image on the next. Whether I specify a span
around that text or not, it puts it on a new line.

Yes, of course. My bad. That's because when you float an element, it
becomes block level, and thus its box will be generated below the
div#header.

When the text-alignment is removed, it does indeed let the
next div go to the next line. But, it moves the image with it.

Right align the text, then float the first span left. May not work in
IE. Test that and tell me how things look. While you're at it, fix
some things.

* Consider using <H?> instead of <DIV?Header>.

Will test it and get back to you on the Header versus Div tag.

* Alt is to provide an alternative when image loading is off or not
possible. Move all styles to the style element (or better still to a
separate stylesheet file).

I had gone back and moved the style from the image tags to the head, in the
style section but haven't posted since then. But, it's been moved.

* Links want to be real links. A link to "#" with js off is sure to
confuse visitors.

I knew about that and the solution is forthcoming, but put it on hold until I
actually get it to display the way I want it do display in the test browsers
for it. Once I get it looking the way I want, I will make it work the way I
want (for non-JS browsers and non-Image browsers).

style
h1 { text-align: right }
.leftText { float: left }
div { clear: both }
a img {border: none }
/style

What does the clear: both do?
And, why does a need border:none? I thought the image was the one that carried
the border.

When testing the above style definitions, I get spaces that I don't want there.
I assume its the nature of the h1 but if I am going to have to over-ride most
of the defaults for h1 to make it look the way I want it to look, whats the
advantage of using the h1?

This page:
<URL: http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage2.html >

Actually looks like I want it to. Even in Moz. The only problem with that page
is that when you click the down arrow, and it hides the div below it, Moz moves
my arrows. Other than that, it works perfectly.

This one has me stumped now. When I validate the online version, it
does indeed fail. When I go to that page, simply right click>View
Source, save it locally, and then validate the file at w3c, it
validates. What gives?

Gotta be aol. :-( That's why no developer who's even half-way
serious uses that service.

That is debatable. Using AOL to store a temporary page on a weekend when I
don't have access to my domain server (Its at work and I don't want remote
access allowed to it), makes good sense, and in NO way implies seriousness or
not. The mere fact that I posted it there in the attempts to try to get it to
display the way I want it to, and ask for others advice on it, implies way more
seriousness than to simply think "It works in IE, to hell with the rest", no?
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.

HikksNotAtHome wrote:

Links want to be real links. A link to "#" with js off is sure
to confuse visitors.

Or change it from # to javascript:;

Use of the javascript: pseudo-protocol is actually *worse* than the
use of a link that does nothing.

Perhaps. But a link that does nothing is still bad practice.

http://www.cs.tut.fi/~jkorpela/www/links.html#js

The way I fixed it:

It loads with a blank image. Transparent gif. Then, after the page
is loaded, it swaps them all for the up arrow. Then, if javascript
is disabled, then the non-js user wont see an image to click on.

I cannot comment on this, since I don't understand what the arrows
will eventually do.

--
best, Brian
follow the directions in my address to email me

HikksNotAtHome wrote:

http://validator.w3.org/checklink?uri=http://www-unix.oit.umass.edu/~btre

mbla/test/test2/jstest.htm

Error: 404 Not Found

the final "l" got lost (and I copied and pasted, too!)

<
http://validator.w3.org/checklink?uri=http://www-unix.oit.umass.edu/~btrembla/test/test2/jstest.html

--
Brian
follow the directions in my address to email me

HikksNotAtHome wrote:

On the test page that I used, <URL:
http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage2.html


When testing offline, and adding a border, Moz now acts like I want

URL:
http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage3.html


Why I had to add a 1px border to make Mozilla leave it alone is
beyond me though. To see it, view each page and click the down
arrow. The only difference in the two pages are the swapping of the
images, and the addition of the border.

I'm not sure you do. Except for the line height of the divs, the two
pages look the same to me. I'm using Moz 1.4/Win 2k. I suggested the
border as a debugging tool, not as a solution. It's helpful to add
yellow or green or orange borders during testing if things aren't
laying out the way you expected. Helps you figure out what's going on.

--
Brian
follow the directions in my address to email me

HikksNotAtHome wrote:

http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage.html

Consider using <H?> instead of <DIV?Header>.

Will test it and get back to you on the Header versus Div tag.

style
h1 { text-align: right }
.leftText { float: left }
div { clear: both }
a img {border: none }
/style

What does the clear: both do?

The element which is cleared of floats is rendered below the floated
elements.

And, why does a need border:none? I thought the image was the one
that carried the border.

Yes. The rule
a img {border:none}
means apply border: none to an image that is a descendent of (i.e.,
inside) an a element.

When testing the above style definitions, I get spaces that I don't
want there. I assume its the nature of the h1

Yes. The default presentation in every browser I've used is to put a
top and bottom margin around it.

but if I am going to have to over-ride most of the defaults for h1
to make it look the way I want it to look,

I don't know the final purpose of your site. If you're disguising
elements to the point that they cannot be recognized, that may be an
indication of other problems. But it may not. Until (if) I see the
final page, I cannot say more.

whats the advantage of using the h1?

html is about describing the parts of a document, not necessarily how
it looks. Using h1 is more descriptive than the generic div element,
which says little about its contents. This would be important for,
say, indexing robots to figure out what your site is about. Or it
might allow a tool to create an outline of your page.

This page: <URL:
http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage2.html


Actually looks like I want it to. Even in Moz. The only problem
with that page is that when you click the down arrow, and it hides
the div below it, Moz moves my arrows. Other than that, it works
perfectly.

glad to hear that you finally got it!

When I validate the online version, it does indeed fail. When I
go to that page, simply right click>View Source, save it
locally, and then validate the file at w3c, it validates. What
gives?

Gotta be aol. :-( That's why no developer who's even half-way
serious uses that service.

That is debatable. Using AOL to store a temporary page on a weekend
when I don't have access to my domain server (Its at work and I
don't want remote access allowed to it), makes good sense, and in
NO way implies seriousness or not.

My comment wasn't a slam directed at you. It was a suggestion that
you would have problems if you were going to use AOL permanently. As
a test, I see nothing wrong with using it, as long as it doesn't
create new problems in the test itself.

--
best, Brian
follow the directions in my address to email me