By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

Float Question

P: n/a
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="navboxcontent">
<p><a href="supremecss.htm"><img class="marginleft"
src="images/thumbnails/tn_suplaquee_50.jpg" width="55" height="36"
border="0">Supreme : 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
Jul 20 '05 #1
Share this Question
Share on Google+
20 Replies


P: n/a
In article Peter Kennedy wrote:
Hi,

I'm having a spot of bother with floating images. I'm using the DMX2004
trial.
[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.
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.
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.
Where have I gone wrong ?


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.

Jul 20 '05 #2

P: n/a
In article Lauri Raittila wrote:
Where have I gone wrong ?
I guess you assumed that height of box is higher than image

^^^^^
rather, image and it's 10px bottom margin.
, 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.

Jul 20 '05 #3

P: n/a
"Peter Kennedy" <pe**********@nope.com> wrote:
.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/*
Hope that comment isn't in the real stylesheet. It's inside out.
margin: 0 10px 10px 0;
}
http://www.gardenserre.com/elite_isolees_homecss.htm

Any ideas anyone ? Where have I gone wrong ?


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4

P: n/a
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" <la***@raittila.cjb.net> a écrit dans le message de news:
MP************************@news.cis.dfn.de...
In article Peter Kennedy wrote:
Hi,

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


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


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.
Where have I gone wrong ?


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.

Jul 20 '05 #5

P: n/a
Steve Pugh <st***@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.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #6

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

Peter

"Steve Pugh" <st***@pugh.net> a écrit dans le message de news:
e3********************************@4ax.com...
Steve Pugh <st***@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.

Steve

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

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

Jul 20 '05 #7

P: n/a
"Peter Kennedy" <pe**********@nope.com> wrote:

Top posting fixed, don't do it again if you want to get the full
benefit from this newsgroup.
"Steve Pugh" <st***@pugh.net> a écrit dans le message de news:
e3********************************@4ax.com...
Steve Pugh <st***@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.

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


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">
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

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


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #8

P: n/a
"Peter Kennedy" <pe**********@nope.com> wrote:
http://www.gardenserre.com/elite_isolees_homecss.htm
Thanks. However, I must confess that I don't follow you. Which navigation is
not working ?
Turn off JavaScript and see if the dropdown menu works.
Or the four links Elite, ACD, etc.

They don't do they?
Regarding missing alt tributes, okay,
but I never really seen the point in them anyway.
Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
point.
And unreadable font,


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #9

P: n/a

"Steve Pugh" <st***@pugh.net> a écrit dans le message de news:
nt********************************@4ax.com...
"Peter Kennedy" <pe**********@nope.com> wrote:

Top posting fixed, don't do it again if you want to get the full
benefit from this newsgroup.
"Steve Pugh" <st***@pugh.net> a écrit dans le message de news:
e3********************************@4ax.com...
Steve Pugh <st***@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.

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


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">
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

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


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 <st***@pugh.net> <http://steve.pugh.net/>


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
Jul 20 '05 #10

P: n/a

"Steve Pugh" <st***@pugh.net> a écrit dans le message de news:
a3********************************@4ax.com...
"Peter Kennedy" <pe**********@nope.com> wrote:
http://www.gardenserre.com/elite_isolees_homecss.htm
Thanks. However, I must confess that I don't follow you. Which navigation
isnot working ?


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

They don't do they?


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


Charming individual aren't you ?
And unreadable font,
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.


x-small

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 <st***@pugh.net> <http://steve.pugh.net/>

Jul 20 '05 #11

P: n/a
"Peter Kennedy" <pe**********@nope.com> wrote:
"Steve Pugh" <st***@pugh.net> a écrit dans le message de news:
a3********************************@4ax.com...
"Peter Kennedy" <pe**********@nope.com> wrote:
>>> http://www.gardenserre.com/elite_isolees_homecss.htm

>Thanks. However, I must confess that I don't follow you. Which navigationis >not working ?


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

They don't do they?


So ?


They don't work when JavaScript is disabled. So how does a visitor
(such as Google) follow those links?
> Regarding missing alt tributes, okay,
>but I never really seen the point in them anyway.


Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
point.


Charming individual aren't you ?


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.
> And unreadable font,


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.


x-small


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #12

P: n/a
*Peter Kennedy* <pe**********@nope.com>:

I don't see why some people get so upset about top-posting
It's much harder to follow the discussion and see the references when people
top-post.
but if its the norm here not to do it then I apologize.


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
Jul 20 '05 #13

P: n/a
Peter Kennedy wrote:
.marginleft{
float: left; */not applied to the NN4.7 stylesheet/*
margin: 0 10px 10px 0;
}


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

James

Jul 20 '05 #14

P: n/a
In article <bo**********@news-reader1.wanadoo.fr>, Peter Kennedy
<pe**********@nope.com> wrote:
Regarding missing alt tributes, okay,
but I never really seen the point in them anyway.


Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
point.


Charming individual aren't you ?


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
"Understanding is a three-edged sword"
http://JimRoyal.com
Jul 20 '05 #15

P: n/a
In article Peter Kennedy wrote:
Lauri,

Thanks.
I hope this means my fix worked.
However, I must confess that I don't follow you. Which navigation is
not working ?
Well, it is sometimes. But it would be much better, if you replaced
href=javascript:; with urls from the dropdown, if they are same. Would
make much more sence. If they aren't same, I was unable to notice. And
having two different navigation systems for same hierarchy of links is
very strange and unintuitive.
It all works as far as I can see and nobody, ie no clients,
has ever complained before.
Well, clients don't complain in Internet when site is obviously wrong.
They either try to fix it in their end, or go away. And when fixing
problem in client side page by page may be impossible for 80% of people,
or even more. (of course, it might work good enaugh in first place, but
why take risk, when none is needed)
By "image links", do you mean the 4 images
across the top right hand side of the page ?
No, I mean those images that have those dropdown menues, on right on
dropdown field. They have that stupid javascript:... links instead of
real.
And which white space ?
Some white space that is there whitout reason and makes my window scroll
horizontally.
Regarding missing alt tributes, okay,
but I never really seen the point in them anyway.
If you happen to have no-good connection, it is usefull to only load
necessary images. And of course bunch of other reasons others allredy
mentioned.
And unreadable font,
xx-small would be, unless I had minimum font size. (spotted from your
CSS) People that buy sheds are often older folk, without good vision, let
alone skill to make font bigger. If you think normal font size is too
big, change your browser setting.
lousy text images ?
About all images with text exept heading. (heading was nice)
Where ? I have tested the site on at least 5 different PCs -
desktops, laptops, flat screens, CRTs etc.
Did you try it on low end screen, with 72dpi? You have nearly no anti
aliasing. Of course they are so small that you can't see difference in
high end stuff. That is other problem, there is no way to zoom images
that are too smal to read. (or, to be correct, they will look ugly when
zoomed)

As better anti-aliasing is about only reason to have text in images, I
think you shoudl use text instead.
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.
Opera 7.22(pre-release) on WinME.
"Lauri Raittila" <la***@raittila.cjb.net> a écrit dans le message de news:
[snip]


It's unnecessary and bad habit to add full reply under reply.

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

Jul 20 '05 #16

P: n/a
In article James Bursa wrote:
Peter Kennedy wrote:
.marginleft{
float: left; */not applied to the NN4.7 stylesheet/*
margin: 0 10px 10px 0;
}


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


He's floating image, so he don't need to. Image is replaced element. See
CSS2 spec for more information (don't look 2.1WD, as IIRC, it doesn't
require width anymore)

http://www.w3.org/TR/CSS2/visuren.html#floats

Hint: don't say what spec say unless you checked spec again. (and then
you can just as easily post url to spec, as you have already found it)

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

Jul 20 '05 #17

P: n/a
On Thu, 6 Nov 2003, Lauri Raittila wrote:
Well, it is sometimes. But it would be much better, if you replaced
href=javascript:; with urls from the dropdown,
Since this seems to be a javascript-related question, maybe the hon
Usenaut would find it useful to be directed to a Javascript FAQ on the
topic? Namely, http://jibbering.com/faq/#FAQ4_24
It all works as far as I can see and nobody, ie no clients,
has ever complained before.


That sounds an awfully familiar refrain.
Well, clients don't complain in Internet when site is obviously wrong.
They either try to fix it in their end, or go away.


To which one might add that it's the responsiblity of the web
specialist to call the client's attention to (potential) problems.

This idea that if the client (who presumably doesn't know too much
about the properties of the web etc., though they might know a lot
about visual design) doesn't express dissatisfaction with some aspect
of the design, then one can assume it's fit for purpose (irrespective
of the final users!), seems to be a bit askew. After all, you'd
expect your architect and builder to ask your views on certain aspects
of your new house, but you wouldn't expect them to rely on you, the
client, for satisfying the requirements of building codes, planning
regulations etc., the selection of suitable building materials etc.

Jul 20 '05 #18

P: n/a
Bo


"Steve Pugh" <st***@pugh.net> wrote in message
news:a3********************************@4ax.com...
"Peter Kennedy" <pe**********@nope.com> wrote:
http://www.gardenserre.com/elite_isolees_homecss.htm
Thanks. However, I must confess that I don't follow you. Which navigation

isnot working ?


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

They don't do they?
Regarding missing alt tributes, okay,
but I never really seen the point in them anyway.


Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
point.

What a putz. Why don't you try to help the poster? It's people like you who
give CSS and standards a bad name.

Peter, stop by one of our newsgroups and we'll help you make your page
valid, accessible, and have it working correctly in Mozilla.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Extensions - DesignPacks - Tutorials - Books
---------------------------------------------------------------------
The PVII Newsgroup | news://forums.projectseven.com/pviiwebdev
The CSS Newsgroup | news://forums.projectseven.com/css
---------------------------------------------------------------------
Jul 20 '05 #19

P: n/a

"Bo" <as******@adelphia.net> a écrit dans le message de news:
R1******************@news2.news.adelphia.net...


"Steve Pugh" <st***@pugh.net> wrote in message
news:a3********************************@4ax.com...
"Peter Kennedy" <pe**********@nope.com> wrote:
>> http://www.gardenserre.com/elite_isolees_homecss.htm
Thanks. However, I must confess that I don't follow you. Which
navigation isnot working ?
Turn off JavaScript and see if the dropdown menu works.
Or the four links Elite, ACD, etc.

They don't do they?
Regarding missing alt tributes, okay,
but I never really seen the point in them anyway.


Take a sharp pencil. Stab it in your eyes. Maybe then you'll get the
point.

What a putz. Why don't you try to help the poster? It's people like you

who give CSS and standards a bad name.

Peter, stop by one of our newsgroups and we'll help you make your page
valid, accessible, and have it working correctly in Mozilla.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Extensions - DesignPacks - Tutorials - Books
---------------------------------------------------------------------
The PVII Newsgroup | news://forums.projectseven.com/pviiwebdev
The CSS Newsgroup | news://forums.projectseven.com/css
---------------------------------------------------------------------


Thanks Al. I'm now subscribed !

Peter
Jul 20 '05 #20

P: n/a
Bo wrote:
"Steve Pugh" <st***@pugh.net> wrote in message
news:a3********************************@4ax.com...
"Peter Kennedy" <pe**********@nope.com> wrote:
Regarding missing alt tributes, okay, but I never really seen
the point in them anyway.
Take a sharp pencil. Stab it in your eyes. Maybe then you'll get
the point.


What a putz.


<sarcasm>Yeah. Insults will help the situation.</sarcasm>
Why don't you try to help the poster?
He did. Alt text is necessary for blind users (among others).
Peter, stop by one of our newsgroups and we'll help you make your
page valid, accessible, and have it working correctly in Mozilla.


Why don't you help him right here?

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

Jul 20 '05 #21

This discussion thread is closed

Replies have been disabled for this discussion.