Re: float:left and float:right

In article <6JLNa.16812$Ix2.8489@rwcrnsc54>, Brian
<brian (AT) wfcr (DOT) org.invalid-remove-this-part> writes:

HikksNotAtHome wrote:

When I try to move the Up/Down Arrow over to the right, as in this page:
http://members.aol.com/hikksnotathome/hideAndShowDivs/testPage.html

IE6 and Opera7 display it as I want it.

Mozilla 1.4, NS7, and Firebird give me something that totally
baffles me where the arrows stagger across the screen.

In your style, you have

.leftText{
float:left;
}
.rightText{
float:right;
}

Floated elements are taken out of the normal document flow. Since
both span elements in the div?header are floated, the parent div
element takes no vertical space. The div? below it then takes its
place, if you see what I mean. AFAICS, Mozilla gets it right.

Yes, makes good sense to me. 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. Not the desired looks :-(

The default text-alignment is left, so there is no need to float the
text left. Try removing that, keep the arrow floated right, and it
should come out ok in Moz.

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. Again, not the desired results :-(

After thinking about the block level having no height, I went back and added a
&nbsp; to the div tags (outside the span tags) and all works as I wanted now.
:-)
But, if its placed between the spans, IE adds a line break. Adding it right
before the closing </div> tag allows (?) IE to display it as I want it.

But, when one of the divs is set to display:none, it goes back to staggering
them :-(

Is that a valid way to make it do what I wanted though? Or, is there another
way?

BTW, you also have

#div1{display: block;background: #0000ff;width: 20em;color: #ffffff;}
#div2{display: block;background: #0000ff;width: 20em;color: #ffffff;}
#div3{display: block;background: #0000ff;width: 20em;color: #ffffff;}
...

1. the default display for div is block, so there is no need to
explicitly put display: block in the stylesheet

Fixed and removed :-)

2. instead of repeating each div in a separate rule, you could have

#div1, #div2, #div3 /* etc. */
{display: block;background: #0000ff;width: 20em;color: #ffffff;}

Yeah, knew about that and forgot to do it. Fixed now.

The testPage.html validates for both HTML4.01 Strict and CSS2 at w3c's
validator.

I'll take your word for it. But the w3c validator says it doesn't
understand the character encoding specified. Something amiss with
AOL, I'd guess.

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?
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.

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>.
* 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).
* Links want to be real links. A link to "#" with js off is sure to
confuse visitors.

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

<h1 id="header1">
<span class="leftText">Div 1 Header</span>
<a href="#" onclick="changeVisibility('1');return
false"><img src="up.gif" name="image1" alt="up"></a>
</h1>

<div id="div1">This is div 1</div>

The testPage.html validates for both HTML4.01 Strict and CSS2
at w3c's validator.

I'll take your word for it. But the w3c validator says it doesn't
understand the character encoding specified. Something amiss with
AOL, I'd guess.

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.

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

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


Dave

"Brian" <brian (AT) wfcr (DOT) org.invalid-remove-this-part> wrote

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.

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

thanks if you can help with my confusion
David

"David Graham" <david.graham16 (AT) ntlworld (DOT) com> wrote

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

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

Try setting the height of your div to be higher than the height of your
arrow graphic. Everything seemed to line up when I used a smaller image.

Jonathan

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.

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.

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

David Graham wrote:

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

Right align the text, then float the first span left. May not work
in IE. Test that and tell me how things look.

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.

wfm

< http://www-unix.oit.umass.edu/~btrembla/test/test2/graham.html >

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

Dave wrote:

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

Those who understand such matters, perhaps. But those who don't will
think something is broken when a link leads nowhere.

I just hope that validates..

"validates." Yes, it conforms to html 4.01. But that doesn't solve
the problem I mentioned: you've made a link that does nothing in
browsers without js enabled. If you want to see an error (complete
with fire engine-red background on color monitors) here you go:

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

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

Dave wrote:

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

Those who understand such matters, perhaps. But those who don't will
think something is broken when a link leads nowhere.

I just hope that validates..

"validates." Yes, it conforms to html 4.01. But that doesn't solve
the problem I mentioned: a link that does nothing in browsers without
js enabled. If you want to see an error (complete
with fire engine-red background on color monitors) here you go:

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

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

In article <LfXNa.118096$R73.13552@sccrnsc04>, Brian
<brian (AT) wfcr (DOT) org.invalid-remove-this-part> writes:

http://validator.w3.org/checklink?uri=http://www-unix.oit.umass.edu/~btre
mbla/test/test2/jstest.htm

Error: 404 Not Found

But, the problem of links doing nothing when they should is almost fixed. Still
working on that part.
--
Randy
All code posted is dependent upon the viewing browser
supporting the methods called, and Javascript being enabled.