help please

[Phonedude]

http://larryludwick.com/menu1.php

with larryludwick.com/menu1.css and menu.js

Three questions please.
1. I have specified box widths in px and I am happy with how it works in
FF, but IE6 seems to throw in 2 phantom pixels which makes the float right
box wrap. Adding two pixels to the width of the wrapper box makes it look
correct in IE6, but it causes FF to leave a little gutter between the float
left and float right boxes. Why is that.

2. The javascript for the clock works ok in IE6, but not in FF. Howcome???
(I copied from a website -- I am learning JS, but slowly. PHP is much
easier.)

3. The Dilbert flash app is in a <div> and it works ok. I added another
<div> inside the Dilbertbox to put a link to my email. It works just fine
in IE6, but the email div shows up outside the dilbertbox div when viewed in
Firefox. What gives here?

Thanks for any help you are willing to provide.

Larry

P.S. The Dilbert thingy has grown old already and will go away soon.
Having that thing on my homepage when it's only useful once a day no longer
makes sense to me. It seemed like a good idea at the time, but . . .

 

[Peter J Ross]

In alt.html on Sat, 9 Aug 2008 19:10:12 -0400, Phonedude

http://larryludwick.com/menu1.php

with larryludwick.com/menu1.css and menu.js

Three questions please.
1. I have specified box widths in px

This is a bad idea.

and I am happy with how it works in
FF, but IE6 seems to throw in 2 phantom pixels which makes the float right
box wrap.

This is one of the reasons why specifying dimensions in pixels is a bad idea.

Adding two pixels to the width of the wrapper box makes it look
correct in IE6, but it causes FF to leave a little gutter between the float
left and float right boxes. Why is that.

It's because you're using pixels instead of non-deprecated units.

2. The javascript for the clock works ok in IE6, but not in FF. Howcome???
(I copied from a website -- I am learning JS, but slowly. PHP is much
easier.)

Dunno. What clock? In Konqueror 3.5.9 I see no clock.

3. The Dilbert flash app is in a <div> and it works ok.

Yes it does, even in Konqueror.

I added another
<div> inside the Dilbertbox to put a link to my email. It works just fine
in IE6, but the email div shows up outside the dilbertbox div when viewed in
Firefox. What gives here?

On my screen, the email link overlaps the W3C images.

Thanks for any help you are willing to provide.

I think you should aim to simplify. E.g., do you really need Javascript to
display a clock? Some of your visitors may own clocks of their own.

 

[dorayme]

http://larryludwick.com/menu1.php

with larryludwick.com/menu1.css and menu.js

Three questions please.
1. I have specified box widths in px and I am happy with how it works in
FF, but IE6 seems to throw in 2 phantom pixels which makes the float right
box wrap. Adding two pixels to the width of the wrapper box makes it look
correct in IE6, but it causes FF to leave a little gutter between the float
left and float right boxes. Why is that.

It sounds like you are running into what is often called the 3px float
bug that IE6. Google it up to see all the ways to cope with it.

Here is one way: in your CSS you have

..infobox {
...
margin:0 0 0 5px;
}

But, presumably you want less. Lets suppose for a moment that you want
no margin at all (everything tightly up to everything else). You would
then remove the 3px that IE6 adds by telling IE6 (but no other browser)
to give that right margin minus 3px.

You would be wanting IE6 to see:

..infobox {
...
margin: -3px;
}

There are different ways of telling IE6 to do this. One way is make a
separate external style sheet for IE6 and link it in your head via a
conditional comment (ask if you don't know what this means). In that
sheet, you would have the corrective for IE6.

Another way is to simply put

..infobox {
...
margin:0;
}

in your normal stylesheet and then just after, something that only IE6
can read (it thinks there is an element higher than the root html)

* html .infobox {margin:-3px;}

You might adapt the figures but the principle is simple, you tell IE6 to
take back the 3px it added. In other words: Thanks, but no thanks! <g>

(Although many people think it is a bug, I have been going along with
the theory that we have here an annoying case of MS being deliberately
motivated by a desire to give a bit of padding (in case the author
forgets!). One of the most common uses of floats has been for inserting
pictures into text. A bit of grace is nice. But modern day layouts often
depend on floats and this is a pesky thing to have to cope with MS's
shortsighted but good intentions.)

 

[dorayme]

http://larryludwick.com/menu1.php

3. The Dilbert flash app is in a <div> and it works ok. I added another
<div> inside the Dilbertbox to put a link to my email. It works just fine
in IE6, but the email div shows up outside the dilbertbox div when viewed in
Firefox. What gives here?

Thanks for any help you are willing to provide.

As for this, give your dilbertbox a greater height, 440px would be more
like it than 340px.

(btw, your layout looks a bit crowded in FF, the material under the
three boxes butting up so close to the above boxes. Easy to fix)

 

[Bergamot]

you're using pixels instead of non-deprecated units.

When were px deprecated?

 

[Ari Heino]

<div> inside the Dilbertbox to put a link to my email. It works just fine
in IE6, but the email div shows up outside the dilbertbox div when viewed in
Firefox. What gives here?

It's not a div, it's a paragraph. Delete its height, margin, padding and
width attributes, and it looks better.

I dont' see a clock either, it's an empty div.

Google image is distorted, delete the img properties from the css, at
least the width if you want to keep the height.

 

[Phonedude]

In alt.html on Sat, 9 Aug 2008 19:10:12 -0400, Phonedude


This is a bad idea.


This is one of the reasons why specifying dimensions in pixels is a bad
idea.


It's because you're using pixels instead of non-deprecated units.


Dunno. What clock? In Konqueror 3.5.9 I see no clock.


Yes it does, even in Konqueror.


On my screen, the email link overlaps the W3C images.


I think you should aim to simplify. E.g., do you really need Javascript to
display a clock? Some of your visitors may own clocks of their own.


--
PJR

,http://slrn-doc.sourceforge.net/>
<http://pjr.lasnobberia.net/>

Thanks for the input. I was suprised to see that length is pixels is
deprecated, as this will require me to readdress my entire philosophy for my
website. You see this particular website is simply my personal links page,
which other people use as a matter of convenience. It's primary target
audience is me. When I started my page many years ago it was a simple table
that I created in notepad. Then I got lazy and started using MS Word to
edit it which produced HTML so complex and convoluted that I stopped looking
at it and just used the page. Wanting to become more proficient I decided
to redo my page using CSS and not tables for layout purposes. But: I want
my page to look the way I want it. I want it to be a set width on my screen
and I want the boxs to blend together nicely with no wrapping. Having said
that, I do want to learn how to make it work with different browsers.
Especially Firefox which seems to, along with IE, make up most of the
market. I don't think anyone using Konquerer would be interested in using
my page, but it would be nice if it were at least usable, if not perfect in
presentation.

But, back to pixels. I am an anal type and if I specify my wrapper <div> to
have, say, 880 pixels, then I want to be able to put in 880 pixels of stuff.
Not 798. Make sense? Firefox works perfectly when I do this, but IE seems
to have a bug. At least IE6. I guess I will have to learn how to
distinguish between browsers and use separate style sheets.

The clock seems only to work in IE. It doesn't work in FF and now you tell
me it doesn't work in Konquerer. More study required, I guess. As to the
necessity of a clock on my page, I am rethinking that as well. I use
Windows so it's easy to simply look at the Windows clock at bottom right.
What I really need is a simple calendar on my page so I can see what date
and day it is (I often lose track) because Windows does not always show this
without actually opening the clock app. A calendar I could do in php
because it would only need to work each time the page is opened or
refreshed. Like the quotes do.

Again, thanks for the input.

Larry

 

[Phonedude]

It sounds like you are running into what is often called the 3px float
bug that IE6. Google it up to see all the ways to cope with it.

Here is one way: in your CSS you have

.infobox {
...
margin:0 0 0 5px;
}

But, presumably you want less. Lets suppose for a moment that you want
no margin at all (everything tightly up to everything else). You would
then remove the 3px that IE6 adds by telling IE6 (but no other browser)
to give that right margin minus 3px.

You would be wanting IE6 to see:

.infobox {
...
margin: -3px;
}

There are different ways of telling IE6 to do this. One way is make a
separate external style sheet for IE6 and link it in your head via a
conditional comment (ask if you don't know what this means). In that
sheet, you would have the corrective for IE6.

Another way is to simply put

.infobox {
...
margin:0;
}

in your normal stylesheet and then just after, something that only IE6
can read (it thinks there is an element higher than the root html)

* html .infobox {margin:-3px;}

You might adapt the figures but the principle is simple, you tell IE6 to
take back the 3px it added. In other words: Thanks, but no thanks! <g>

(Although many people think it is a bug, I have been going along with
the theory that we have here an annoying case of MS being deliberately
motivated by a desire to give a bit of padding (in case the author
forgets!). One of the most common uses of floats has been for inserting
pictures into text. A bit of grace is nice. But modern day layouts often
depend on floats and this is a pesky thing to have to cope with MS's
shortsighted but good intentions.)

Dorayme:

As always, you are most helpful and truly nice about it. I guess I will
have to learn about conditional statements and use different ones for FF and
IE6. Your comments about the margin were something I tried, but the results
were unsatisfactory. I do want 5px margin to the left of my infobox and
that 5px was accounted for in my widths, along with any padding or other
margins or borders that add width to an element. The elements add up to 880
which is the width of the wrapper. It works perfectly in FF, but not in
IE6. If I use a negative margin IE6 works fine, but then FF starts wrapping
floating elements because it is two px short of space. I will go Google
conditional expressions in HTML.

By the way, only a truly nice person would believe MS had or has good
intentions about anything. My first thought was that here's another example
of MS trying to make it difficult for people to use multiple browsers --
they do this as a means of keeping their market share. I did disregard this
idea though because I really believe it's simply a matter of imcompetence.
Just more evidence of how nice you are.

Thanks,

Larry

 

[Phonedude]

As for this, give your dilbertbox a greater height, 440px would be more
like it than 340px.

(btw, your layout looks a bit crowded in FF, the material under the
three boxes butting up so close to the above boxes. Easy to fix)

Yes, I will add some padding to seperate those elements. I got caught up in
this two pixel problem first though.

Thanks,

Larry

 

[Phonedude]

It's not a div, it's a paragraph. Delete its height, margin, padding and
width attributes, and it looks better.

I dont' see a clock either, it's an empty div.

Google image is distorted, delete the img properties from the css, at
least the width if you want to keep the height.

I need to go resize that img to the correct size and not use the browser to
do so. I will do this someday, but used the CSS to make it fit for now.

Thanks,

Larry

 

[Bergamot]

I was suprised to see that length is pixels is
deprecated

It's not. What Mr Ross may be implying is that, where text is concerned,
em is generally a better unit than px.

That doesn't mean you have to abandon px. You don't, but you should
reconsider your use of it, then pick the right unit for the particular
context. Sometimes px is better, sometimes em is better, and sometimes %
is better.

 

[Paul]

Having said that, I do want to learn how to make it work with different browsers. Especially Firefox which seems to,
along with IE, make up most of the market.

About the browsers used by visitors of my website (italian section) I have the following:
- IE: 88%
- Mozilla: 10%
- others: 2%

In the english section I have:
- IE: 85%
- Mozilla: 12%
- Others: 3%

Paul

 

[dorayme]

You might adapt the figures but the principle is simple, you tell IE6 to
take back the 3px it added. In other words: Thanks, but no thanks! <g>

... I guess I will
have to learn about conditional statements and use different ones for FF and
IE6. [/QUOTE]

Only for IE. It works like this, IE recognises this in your HTML

<!--[if IE 6]>
<p>You are using Internet Explorer</p>
<![endif]-->

and would insert this paragraph into your document. But no other browser
would because they are trained to ignore commented instructions. IE 6 is
deep this way and can look into the most unlikely spots for meaning. <g>

You can take advantage of this to deliver not only content in the body
of the HTML but to use this conditional to direct IE 6 to a different
stylesheet which has instructions that override the ones that all
browsers see. In the head, you would put:

<link rel="stylesheet" type="text/css" href="main.css">

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="forIE6.css">
<![endif]-->

where forIE6.css would override instructions in main.css. If main said
margin: 5px for a particular element but forIE6.css said 2px, the 2px
would prevail in IE6 browsers.

You can also use it for internal style instructions in the head:

<style type="text/css" media="screen">
h1 span {font-size: 80%; font-weight: normal; font-style: italic;}
</style>

followed by

<!--[if IE 6]>
h1 span {font-size: 70%;}
<![endif]-->

And this would make IE6 use the 70% figure.

By the way, only a truly nice person would believe MS had or has good
intentions about anything.

It is very nice of you to say this but the only thing that is required
is not to be biased against IE. True, this is a remarkable feat if it
can be achieved in a cold manner. And where IE is concerned, my manner
is always cool. Modesty, naturally, prevents me from drawing a certain
conclusion from this. <g>

It is also an old principle of rational debate, to take the things one
is opposed to according to the most charitable interpretation (opposite
to treating "straw men", if you like).

But about nice, I have another principle, I delight in the most terrible
cruelty against ...

no... I better stop, it's Monday morning and there is a pile of work
here...

 

[Phonedude]

You might adapt the figures but the principle is simple, you tell IE6
to
take back the 3px it added. In other words: Thanks, but no thanks! <g>

... I guess I will
have to learn about conditional statements and use different ones for FF
and
IE6.

Only for IE. It works like this, IE recognises this in your HTML

<!--[if IE 6]>
<p>You are using Internet Explorer</p>
<![endif]-->

and would insert this paragraph into your document. But no other browser
would because they are trained to ignore commented instructions. IE 6 is
deep this way and can look into the most unlikely spots for meaning. <g>

You can take advantage of this to deliver not only content in the body
of the HTML but to use this conditional to direct IE 6 to a different
stylesheet which has instructions that override the ones that all
browsers see. In the head, you would put:

<link rel="stylesheet" type="text/css" href="main.css">

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="forIE6.css">
<![endif]-->

where forIE6.css would override instructions in main.css. If main said
margin: 5px for a particular element but forIE6.css said 2px, the 2px
would prevail in IE6 browsers.

You can also use it for internal style instructions in the head:

<style type="text/css" media="screen">
h1 span {font-size: 80%; font-weight: normal; font-style: italic;}
</style>

followed by

<!--[if IE 6]>
h1 span {font-size: 70%;}
<![endif]-->[/QUOTE]

[snip]

This works perfectly and solves the problem neatly. I added a new style
sheet with just the one affected class and the page looks the same on
Firefox and IE6. Perfect. Now I need to find out how IE7 and beyond
handles this situation.

You are most helpful and I am grateful -- thanks very much

Larry

http://larryludwick.com/menu1.php

 

[dorayme]

Now I need to find out how IE7 and beyond
handles this situation.

IE7 has not got that 3px float "addition". It may have happened this way
at the meeting of the IE 7 developers:

MS developer: We have been laughed at and abused for trying to give the
world an extra 3px of grace in IE 6. Does the world appreciate it? Do
they deserve our gift?

Chorus from all the others around the MS table: Nooooooo!

And so they decided to withdraw this feature from IE 7.

(Rudyard Kipling wrote a series of stories known as the Just So Stories.
I used to read them to kids)

 

[Peter J Ross]

In alt.html on Sat, 09 Aug 2008 22:17:16 -0500, Bergamot

When were px deprecated?

When I deprecated them. ;-)

As far as the OP is concerned, pixels were deprecated as soon as his
layout was messed up when the browser window was resized.

 

[Phonedude]

In alt.html on Sat, 09 Aug 2008 22:17:16 -0500, Bergamot


When I deprecated them. ;-)

As far as the OP is concerned, pixels were deprecated as soon as his
layout was messed up when the browser window was resized.


--
PJR

,http://slrn-doc.sourceforge.net/>
<http://pjr.lasnobberia.net/>

As the OP, I must say that they layout does not change when either IE or FF
is resized. No matter how small or large. And that's the way I want it. I
think you've lost track of the subject.

Larry

 

[Chris F.A. Johnson]

As the OP, I must say that they layout does not change when either
IE or FF is resized.

But it should. It should change to fit the window.

No matter how small or large. And that's the
way I want it.

Why do you want to make it hard for your viewers to read the page?

 

[Phonedude]

But it should. It should change to fit the window.


Why do you want to make it hard for your viewers to read the page?

False assumptions. First, I do not want to make the page hard to read for
anyone -- and, second, it's not. If you use a window smaller than the page
you can scroll to see it. It's not hard at all. You're going to end up
scrolling in any case because if the size wasn't fixed it would wrap and,
you guessed it, you'd have to scroll to see wrapped content anyway. Six of
one or half a dozen of the other -- and the page looks the way I want it to.
So use a large enough window or scroll. Unless, of course you want to see
microscopic text shrunk down to fit your 30x40 pixel window.

Larry

 

[Blinky the Shark]

False assumptions. First, I do not want to make the page hard to read for
anyone -- and, second, it's not. If you use a window smaller than the page
you can scroll to see it. It's not hard at all. You're going to end up
scrolling in any case because if the size wasn't fixed it would wrap and,
you guessed it, you'd have to scroll to see wrapped content anyway.

People don't mind scrolling down. People mind having to scroll back and
forth horizontally.