Float Question

[Peter Kennedy]

Hi,

I'm having a spot of bother with floating images. I'm using the DMX2004
trial.

Unfortunately, this would not work in NN7 & NN4.7 :

The styles :

1, The div :

..navboxcontent {
background-color: #F0FFF0;
border-color: #C0C0C0;
border-style: dashed;
border-width: 1px;
color: #008000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
padding: 2px;
width: 350px;
}

2, The style applied to the image (the image is placed in the div with the
text) :
..marginleft{
float: left; */not applied to the NN4.7 stylesheet/*
margin: 0 10px 10px 0;
}

3, example of the html :
<div class="navboxco ntent">
<p><a href="supremecs s.htm"><img class="marginle ft"
src="images/thumbnails/tn_suplaquee_50 .jpg" width="55" height="36"
border="0">Supr eme : largeur 3,20m</a></p>
</div>

Perfect in IE6, acceptable but buggy in NN4.7 (but who uses that browser
anyway) and completely crap in NN7. The latter surprises me - NN7 is usually
okay. I hate to think how it must appear in Opera. I've tried putting the
"marginleft " style in "navboxcontent" , to no avail.

Here's a page where the above is up and running :

http://www.gardenserre.com/elite_isolees_homecss.htm

Any ideas anyone ? Where have I gone wrong ?

Thanks

Peter

[Lauri Raittila]

Re: Float Question

In article Peter Kennedy wrote:[color=blue]
> Hi,
>
> I'm having a spot of bother with floating images. I'm using the DMX2004
> trial.[/color]

[http://www.gardenserre.com/elite_isolees_homecss.htm]

Seems that this is not wrost problem you have. You for example don't have
working navigation, but two unworking. Make those image links on top have
links to sections instead of that dropdown. Also strip extra whitespace
from images and distribute them across browser using html/css. And make
them text links.

Lots of other problems also, including missing alt atributes, unreadable
font, lousy quality of text graphics - they actually look much worse than
text would.

You also fix width whitout reason.
[color=blue]
> Perfect in IE6 and completely crap in NN7. The latter surprises me -
> NN7 is usually okay. I hate to think how it must appear in Opera.[/color]

Yes, NN7 displays usually better than IE. That is hint for you, it mostly
means that IE is rendering something wrongly. And when Opera shows same
as mozilla, IE is wrong (with very few exeptions).

Doesn't work in 7.22(pre) untill I add
..navboxcontent {clear:both;}
Which cures the problem.
[color=blue]
> Where have I gone wrong ?[/color]

I guess you assumed that height of box is higher than image, and then it
isn't. IE has bug that shows up in situations like this, but I'm not sure
if that is the reason, it might also be different settings different
browsers.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Lauri Raittila]

Re: Float Question

In article Lauri Raittila wrote:
[color=blue][color=green]
> > Where have I gone wrong ?[/color]
>
> I guess you assumed that height of box is higher than image[/color]
^^^^^
rather, image and it's 10px bottom margin.
[color=blue]
> , and then it
> isn't. IE has bug that shows up in situations like this, but I'm not sure
> if that is the reason, it might also be different settings different
> browsers.[/color]


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Steve Pugh]

Re: Float Question

"Peter Kennedy" <peterkennedy@n ope.com> wrote:
[color=blue]
>.navboxconte nt {
> background-color: #F0FFF0;
> border-color: #C0C0C0;
> border-style: dashed;
> border-width: 1px;
> color: #008000;
> font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
> font-size: x-small;
> padding: 2px;
> width: 350px;
>}
>
>2, The style applied to the image (the image is placed in the div with the
>text) :
>.marginleft{
> float: left; */not applied to the NN4.7 stylesheet/*[/color]

Hope that comment isn't in the real stylesheet. It's inside out.
[color=blue]
> margin: 0 10px 10px 0;
>}[/color]
[color=blue]
>
>http://www.gardenserre.com/elite_isolees_homecss.htm
>
>Any ideas anyone ? Where have I gone wrong ?[/color]

You've forgotten that (a) floats aren't automatically ended when the
parent element ends, and (b) floats are taken out of the document flow
and thus don't count towards the height of the parent element.

It's not perfect but for starters you can add
min-height: 64px;
clear: left;
to .navboxcontent

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Peter Kennedy]

Re: Float Question

Lauri,

Thanks. However, I must confess that I don't follow you. Which navigation is
not working ? It all works as far as I can see and nobody, ie no clients,
has ever complained before. By "image links", do you mean the 4 images
across the top right hand side of the page ? If so, they are not links, just
decoration. And which white space ? Regarding missing alt tributes, okay,
but I never really seen the point in them anyway. And unreadable font, lousy
text images ? Where ? I have tested the site on at least 5 different PCs -
desktops, laptops, flat screens, CRTs etc. and I have never had the
slightest problem with quality. What are you using to view the site - a Mac
? I don't have access to a Mac so it would be interesting to know.

Thanks

Peter

"Lauri Raittila" <lauri@raittila .cjb.net> a écrit dans le message de news:
MPG.1a148abe872 d8702989d04@new s.cis.dfn.de...[color=blue]
> In article Peter Kennedy wrote:[color=green]
> > Hi,
> >
> > I'm having a spot of bother with floating images. I'm using the DMX2004
> > trial.[/color]
>
> [http://www.gardenserre.com/elite_isolees_homecss.htm]
>
> Seems that this is not wrost problem you have. You for example don't have
> working navigation, but two unworking. Make those image links on top have
> links to sections instead of that dropdown. Also strip extra whitespace
> from images and distribute them across browser using html/css. And make
> them text links.
>
> Lots of other problems also, including missing alt atributes, unreadable
> font, lousy quality of text graphics - they actually look much worse than
> text would.
>
> You also fix width whitout reason.
>[color=green]
> > Perfect in IE6 and completely crap in NN7. The latter surprises me -
> > NN7 is usually okay. I hate to think how it must appear in Opera.[/color]
>
> Yes, NN7 displays usually better than IE. That is hint for you, it mostly
> means that IE is rendering something wrongly. And when Opera shows same
> as mozilla, IE is wrong (with very few exeptions).
>
> Doesn't work in 7.22(pre) untill I add
> .navboxcontent {clear:both;}
> Which cures the problem.
>[color=green]
> > Where have I gone wrong ?[/color]
>
> I guess you assumed that height of box is higher than image, and then it
> isn't. IE has bug that shows up in situations like this, but I'm not sure
> if that is the reason, it might also be different settings different
> browsers.
>
>
> --
> Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
> Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
> tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
>[/color]

[Steve Pugh]

Re: Float Question

Steve Pugh <steve@pugh.net > wrote:
[color=blue]
>It's not perfect but for starters you can add
> min-height: 64px;
> clear: left;
>to .navboxcontent[/color]

Or rather 74px to account for the margin on the image.
Obviously needs to change if the height of your tallest picture
changes.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Peter Kennedy]

Re: Float Question

Thanks. This is the first time I've used the "float" declaration, hence the
problems. What does clear mean ?

Peter

"Steve Pugh" <steve@pugh.net > a écrit dans le message de news:
e3qkqv8n7m13pip cm4nmtga2i3ulq5 md4b@4ax.com...[color=blue]
> Steve Pugh <steve@pugh.net > wrote:
>[color=green]
> >It's not perfect but for starters you can add
> > min-height: 64px;
> > clear: left;
> >to .navboxcontent[/color]
>
> Or rather 74px to account for the margin on the image.
> Obviously needs to change if the height of your tallest picture
> changes.
>
> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>[/color]

[Steve Pugh]

Re: Float Question

"Peter Kennedy" <peterkennedy@n ope.com> wrote:

Top posting fixed, don't do it again if you want to get the full
benefit from this newsgroup.
[color=blue]
>"Steve Pugh" <steve@pugh.net > a écrit dans le message de news:
>e3qkqv8n7m13pi pcm4nmtga2i3ulq 5md4b@4ax.com.. .[color=green]
>> Steve Pugh <steve@pugh.net > wrote:
>>[color=darkred]
>> >It's not perfect but for starters you can add
>> > min-height: 64px;
>> > clear: left;
>> >to .navboxcontent[/color]
>>
>> Or rather 74px to account for the margin on the image.
>> Obviously needs to change if the height of your tallest picture
>> changes.
>>[/color]
>Thanks. This is the first time I've used the "float" declaration, hence the
>problems. What does clear mean ?[/color]

It means position this element so that it is clear of floated elements
on the left | right | both side(s).

Very much like <br clear="left"> in HTML with <image align="left">
[color=blue][color=green]
>> "My theories appal you, my heresies outrage you,
>> I never answer letters and you don't like my tie." - The Doctor
>>
>> Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>[/color]
>[/color]

You liked my sig so much you decided to quote it?

Steve

--
"Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former." - Albert Einstein

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Steve Pugh]

Re: Float Question

"Peter Kennedy" <peterkennedy@n ope.com> wrote:
[color=blue][color=green][color=darkred]
>>> http://www.gardenserre.com/elite_isolees_homecss.htm[/color][/color][/color]
[color=blue]
>Thanks. However, I must confess that I don't follow you. Which navigation is
>not working ?[/color]

Turn off JavaScript and see if the dropdown menu works.
Or the four links Elite, ACD, etc.

They don't do they?
[color=blue]
> Regarding missing alt tributes, okay,
>but I never really seen the point in them anyway.[/color]

Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
point.
[color=blue]
> And unreadable font,[/color]

Your text size is small enough to trigger the minimum text size that
I've set in my browser. From a quick look through your CSS you've set
the font to be either two or three steps smaller than the default, or
you've set it at some small pixel value.

etc.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Peter Kennedy]

Re: Float Question


"Steve Pugh" <steve@pugh.net > a écrit dans le message de news:
ntqkqvgvkh4qfer nh2029tpv1r2fk6 8u7n@4ax.com...[color=blue]
> "Peter Kennedy" <peterkennedy@n ope.com> wrote:
>
> Top posting fixed, don't do it again if you want to get the full
> benefit from this newsgroup.
>[color=green]
> >"Steve Pugh" <steve@pugh.net > a écrit dans le message de news:
> >e3qkqv8n7m13pi pcm4nmtga2i3ulq 5md4b@4ax.com.. .[color=darkred]
> >> Steve Pugh <steve@pugh.net > wrote:
> >>
> >> >It's not perfect but for starters you can add
> >> > min-height: 64px;
> >> > clear: left;
> >> >to .navboxcontent
> >>
> >> Or rather 74px to account for the margin on the image.
> >> Obviously needs to change if the height of your tallest picture
> >> changes.
> >>[/color]
> >Thanks. This is the first time I've used the "float" declaration, hence[/color][/color]
the[color=blue][color=green]
> >problems. What does clear mean ?[/color]
>
> It means position this element so that it is clear of floated elements
> on the left | right | both side(s).
>
> Very much like <br clear="left"> in HTML with <image align="left">
>[color=green][color=darkred]
> >> "My theories appal you, my heresies outrage you,
> >> I never answer letters and you don't like my tie." - The Doctor
> >>
> >> Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>[/color]
> >[/color]
>
> You liked my sig so much you decided to quote it?
>
> Steve
>
> --
> "Only two things are infinite, the universe and human stupidity,
> and I'm not sure about the former." - Albert Einstein
>
> Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>[/color]

I don't see why some people get so upset about top-posting but if its the
norm here not to do it then I apologize. Thanks for the info.

Peter

[Peter Kennedy]

Re: Float Question


"Steve Pugh" <steve@pugh.net > a écrit dans le message de news:
a3rkqv0odb159dr errclb2glo6q3vj rdrg@4ax.com...[color=blue]
> "Peter Kennedy" <peterkennedy@n ope.com> wrote:
>[color=green][color=darkred]
> >>> http://www.gardenserre.com/elite_isolees_homecss.htm[/color][/color]
>[color=green]
> >Thanks. However, I must confess that I don't follow you. Which navigation[/color][/color]
is[color=blue][color=green]
> >not working ?[/color]
>
> Turn off JavaScript and see if the dropdown menu works.
> Or the four links Elite, ACD, etc.
>
> They don't do they?[/color]

So ?
[color=blue]
>[color=green]
> > Regarding missing alt tributes, okay,
> >but I never really seen the point in them anyway.[/color]
>
> Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
> point.[/color]

Charming individual aren't you ?
[color=blue]
>[color=green]
> > And unreadable font,[/color]
>
> Your text size is small enough to trigger the minimum text size that
> I've set in my browser. From a quick look through your CSS you've set
> the font to be either two or three steps smaller than the default, or
> you've set it at some small pixel value.[/color]

x-small
[color=blue]
>
> etc.
>
> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>[/color]

[Steve Pugh]

Re: Float Question

"Peter Kennedy" <peterkennedy@n ope.com> wrote:[color=blue]
>"Steve Pugh" <steve@pugh.net > a écrit dans le message de news:
>a3rkqv0odb159d rerrclb2glo6q3v jrdrg@4ax.com.. .[color=green]
>> "Peter Kennedy" <peterkennedy@n ope.com> wrote:
>>[color=darkred]
>> >>> http://www.gardenserre.com/elite_isolees_homecss.htm[/color]
>>[color=darkred]
>> >Thanks. However, I must confess that I don't follow you. Which navigation[/color][/color]
>is[color=green][color=darkred]
>> >not working ?[/color]
>>
>> Turn off JavaScript and see if the dropdown menu works.
>> Or the four links Elite, ACD, etc.
>>
>> They don't do they?[/color]
>
>So ?[/color]

They don't work when JavaScript is disabled. So how does a visitor
(such as Google) follow those links?
[color=blue][color=green][color=darkred]
>> > Regarding missing alt tributes, okay,
>> >but I never really seen the point in them anyway.[/color]
>>
>> Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
>> point.[/color]
>
>Charming individual aren't you ?[/color]

Charming site. But never mind. Google can't read those alt-less images
or follow those JavaScript links, so the chance of anyone who might
want to buy one of your sheds actually finding the site is slim.
[color=blue][color=green][color=darkred]
>> > And unreadable font,[/color]
>>
>> Your text size is small enough to trigger the minimum text size that
>> I've set in my browser. From a quick look through your CSS you've set
>> the font to be either two or three steps smaller than the default, or
>> you've set it at some small pixel value.[/color]
>
>x-small[/color]

Which is two sizes smaller than the default.

and there's xx-small and 10px in your stylesheet as well.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Christoph Paeper]

Re: Float Question

*Peter Kennedy* <peterkennedy@n ope.com>:[color=blue]
>
> I don't see why some people get so upset about top-posting[/color]

It's much harder to follow the discussion and see the references when people
top-post.
[color=blue]
> but if its the norm here not to do it then I apologize.[/color]

They also get upset about /full/ quoting, so please don't do that neither.
Thank you.
F'up2 poster

--
"Show me a sane man and I will cure him." -- C.G. Jung

[James Bursa]

Re: Float Question

Peter Kennedy wrote:
[color=blue]
> .marginleft{
> float: left; */not applied to the NN4.7 stylesheet/*
> margin: 0 10px 10px 0;
> }[/color]

You must specify a width if you use float (see the spec).

James

[Jim Royal]

Re: Float Question

In article <bods51$qlg$1@n ews-reader1.wanadoo .fr>, Peter Kennedy
<peterkennedy@n ope.com> wrote:
[color=blue][color=green][color=darkred]
> > > Regarding missing alt tributes, okay,
> > >but I never really seen the point in them anyway.[/color]
> >
> > Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
> > point.[/color]
>
> Charming individual aren't you ?[/color]

He means that blind people rely on alt tags for site navigation. This
is why you should use them.

I'll never understand why some people enjoy spending the effort to
answer questions accurately but in the most inhumanly unhelpful manner
possible.

--
Jim Royal
"Understand ing is a three-edged sword"

http://JimRoyal.com