IE (AIIEEEEEEEE!)

got a little problem. as usual, it's name is AIIEEE!!! (IE)

The following url:

http://www.panix.com/~joshua/demo/book/fascism1.htm


validates as 100% compliant html and css at w3c.

However if you look at it in IE7, it has shall we say, a few
problems.

As many would expect, it looks fine in Firefox, Safari, Konquerer,
Omniweb, heck, even LYNX!

I've only just gotten back into web authoring recently, after
several years of application development. Could some kind soul
tell me what I have to do to make IE treat this right?

Thank you so much.

Joshua

Joshua Whalen wrote:

got a little problem. as usual, it's name is AIIEEE!!! (IE)

The following url:

http://www.panix.com/~joshua/demo/book/fascism1.htm


validates as 100% compliant html and css at w3c.

However if you look at it in IE7, it has shall we say, a few
problems.

Probably because of the weird combination of CSS you have.

What happens to margins on floated elements. What happens to position:
relative when the element is floated. Do you know *exactly* what position
relative does? Does right: apply to elements that are positioned relative
*and* floated?

You have a permanent horizontal scrollbar in all browsers, a sure indication
that you have over-specified some width somewhere. Width: 100% on the body
element is suspicious. What about the margins?

Apply the KISS principle and see what happens.

Better yet, have a look at it with IE6. It is totally, and I really mean
totally, broken.

rf, thanks so much for the swift response. I expected the fault might be mine.
As I mentioned, I've only recently gotten back into to doing web development,
and my css is certainly far from perfect. I'm sure your observations a re right
on, but it would be helpful if instead of asking me if I know, you we re to tell
me. Im not getting paid for this, its a favor for a friend. Could you be a
little more helpful and a little less critical, please. I'd really be very
grateful for further input.


In article <Awsll.20496$cu.17536 (AT) news-server (DOT) bigpond.net.au>,
"rf" <rf@z.invalid> wrote:

Probably because of the weird combination of CSS you have.

What happens to margins on floated elements. What happens to position:
relative when the element is floated. Do you know *exactly* what position
relative does? Does right: apply to elements that are positioned relative
*and* floated?
etc...

In article <joshuafwhalen-8F5FBA.00071114022009 (AT) news (DOT) panix.com>,
Joshua Whalen <joshuafwhalen (AT) gmail (DOT) com> wrote:

got a little problem. as usual, it's name is AIIEEE!!! (IE)

The following url:

http://www.panix.com/~joshua/demo/book/fascism1.htm


validates as 100% compliant html and css at w3c.

Validity is just one 'lil ol thing. Still, better than a poke in the eye
with a burnt stick!

First thing that struck me on seeing this page was the scrollbar no
matter how wide the window. That is in indication of some trouble or at
least some inelegancy. I know, a peculiar thing to notice!

Lets take a look at the CSS,

body {
margin:1px;
padding:1px;
border:1px;
height:100%;
width:100%;
....

these margins and paddings look a bit precious. And what is width of
100% doing. The html element is viewport width by default and body is
same of html. Lets piss these off for the moment. border: 1px; is not
right, it needs to have a type like solid or dotted and colour
characteristic. But why bother at all here? Not sure. I will be bold and
delete completely. No point in height either without saying about the
HTML element. And not sure of the reason for the overflow: scroll. You
probably have one.

Now what have we here, a bunch of Hs set in pts? Can't have that! Use em
or %. Lets get rid of the lot anyway and rely on the browser defaults.
But, hello, something unexpected has happened: the headings look awfully
small now and proportions not right... I see: you practically start the
html with h4! Remember, if someone has CSS turned off, he or she gets to
lose some meaning if you do this, and that is not quite the idea. The
idea these days is to have all the meaning in the HTML and use the CSS
to make it prettier. Very roughly! But you are way away from this line
of thinking.

Before I go on, I better say, in case I am upsetting you: it looks very
nice your page! really, I actually like it when I open the browser
window nice and wide. But let me useful to you. I don't want my browser
window so wide always and lookig at your content:there is *no good
reason* why it should not fit in at least 800px. So that is something to
attend to.

there is trouble when one increases my text size. the banner starts to
disappear vertically.

Bit hard to fix because of your

#menu-tabs {
position: absolute;
top: 57px;

and fixed size for the font element and stuff like you have for #hcol.

rf, a subscriber to this ng, said recently to be careful about absolute
positioning, that the browser knows better than you how to lay stuff out
and you need to let it (or something like this) and that you can get
into an awful mess if you don't absolutely need to use absolute
positioning. (He probably was drunk and got lucky while typing, I don't
know, but he put it well! <g>). Anyway, maybe a bit of absolute
positioning where there is some point - maybe your flyout menu is ok to
be taken out of the flow). But I would get rid of most of the rest. The
banner disappearing trick will disappear if you let things ride with
height, use em sizings for fonts.

Try not to use the font element.

Actually I better stop because I sense no one is reading me at this
stage and I better cut my losses and end inconclusively.

You know, your HTML is not that bad! Get rid of the font element or at
least don't 'hard style' it. If you turn all CSS off, the white font
disappears for those of us with white viewports or whatever is behind
them. Attend to the logic of headings and start with H1 and move down

However if you look at it in IE7, it has shall we say, a few
problems.

As many would expect, it looks fine in Firefox, Safari, Konquerer,
Omniweb, heck, even LYNX!

I've only just gotten back into web authoring recently, after
several years of application development. Could some kind soul
tell me what I have to do to make IE treat this right?

Thank you so much.

Joshua

--
dorayme

Joshua Whalen wrote:

In article <Awsll.20496$cu.17536 (AT) news-server (DOT) bigpond.net.au>,
"rf" <rf@z.invalid> wrote:

Probably because of the weird combination of CSS you have.

What happens to margins on floated elements. What happens to
position: relative when the element is floated. Do you know
*exactly* what position relative does? Does right: apply to elements
that are positioned relative *and* floated?
etc...

[top posting fixed]

rf, thanks so much for the swift response. I expected the fault might
be mine. As I mentioned, I've only recently gotten back into to doing
web development, and my css is certainly far from perfect. I'm sure
your observations a re right on, but it would be helpful if instead
of asking me if I know, you we re to tell me. Im not getting paid for
this, its a favor for a friend. Could you be a little more helpful
and a little less critical, please. I'd really be very grateful for
further input.

Remove all the CSS. Then put it back bit by bit, but only those bits you
understand and know that you need.

The bit that is giving you problems is that selecting your text column. This
is a simple two column layout, the most you should need to position the text
column is margin-left. Don't give it a width and it'll expand to fill the
viewers canvas. Remove all the other stuff, expecially the position and
float.

What is bcol there for? Not needed at all?

hcol: The only thing required for your layout is text-align: right. Get rid
of the rest of it, especially line-hieght. Line-height specified in pixels
will cause things to break when your viewer changes their font size.

Most importantly, remove all positioning. Let the browser work it out and do
it for you. The browser has a *much* better idea than you do about what the
viewers environment is.

Don't specify font size in points. Points is for print. Don't specify pixels
either. Both are non-resizable with IE unless the viewer exercises their
accessibility options.

Promote the stuff in .just to .text p. That say it will apply to every p
inside the .just div and you won't have to remember (and type) class=just
for *every* p element.

Don't use <br><br> to produce blank lines. It is not defined to do so.

That's probably enough for a start :-)

doraymeRidThis, thanks ever so much! That's the kind of advice I've been seeking.

Glad you like the page over all. I'll try your suggestions.

And btw, I was reading avidly all the way to the end. Sorry you stopped!


Joshua


In article <-137FEB.18322414022009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Validity is just one 'lil ol thing. Still, better than a poke in the eye
with a burnt stick!

First thing that struck me on seeing this page was the scrollbar no
matter how wide the window. That is in indication of some trouble or at
least some inelegancy. I know, a peculiar thing to notice!

Lets take a look at the CSS,

body {
margin:1px;
padding:1px;
border:1px;
height:100%;
width:100%;
...
etc...

On 2009-02-14, rf <rf@z.invalid> wrote:

Joshua Whalen wrote:
got a little problem. as usual, it's name is AIIEEE!!! (IE)

The following url:

http://www.panix.com/~joshua/demo/book/fascism1.htm


validates as 100% compliant html and css at w3c.

However if you look at it in IE7, it has shall we say, a few
problems.

Probably because of the weird combination of CSS you have.

What happens to margins on floated elements.

They don't collapse. Apart from that they work the same.

What happens to position: relative when the element is floated.

Nothing. It works exactly the same as before.

Do you know *exactly* what position relative does?

Absolutely.

Does right: apply to elements that are positioned relative *and*
floated?

Yes. I don't get it, what's wrong with relatively positioned floats
(any more than with relatively positioned anything)?

On 02/13/09 23:32, dorayme wrote:

[ snip ]

Actually I better stop because I sense no one is reading me at this
stage and I better cut my losses and end inconclusively.

Not true :-)

Hello, again.

Thanks, everyone. Your advice was priceless. The problem was the
"overflow: scroll" directive in the body entity. that and an extra
<div> element to wrap both the floating menu and the text column
fixed it good enough. rf, your suggestion about taking everything
out and then putting it back a piece at a time until it broke was
the kind of brilliant that should be obvious but often isn't.

thanks.


If I may ask one more favor of you all, I only have IE 7 on winXP sp3,
so I can't tell how good or bad it might look in 6. If some who has it
would be so kind, I'd like to know if it's still broken there.

BTW, in response to the comment concerning the wisdom or lack thereof of so many
"H" tags, I'm updating an existing site that was done with tables in Frontpage
originally. There are about 700 pages altogether, 300 from the book, 400
articles. The book is fairly coherent, that is, the same broken code on every
page, where as each article is hideously amateurish (yes, I'M saying that) in
it's own, unique, way. That's why a lot of the choices I made were made.

Thanks again, everyone.


Joshua
In article <b1d5$4996f455$414ebc3d$20877 (AT) EVERESTKC (DOT) NET>,
Mark Hansen <meh (AT) NOSPAMwinfirst (DOT) com> wrote:

On 02/13/09 23:32, dorayme wrote:

[ snip ]

More snip, etc...

Joshua Whalen wrote:

Hello, again.

If I may ask one more favor of you all, I only have IE 7 on winXP sp3,

Google for multiple IEs. Its a simple matter to download and install every
IE back to 4.0.

so I can't tell how good or bad it might look in 6. If some who has it
would be so kind, I'd like to know if it's still broken there.

Very broken.

The black left menu is right down at the bottom of the page. This is because
IE <=6 does not support position: fixed, treating it as position: static.

The logo bar and the top nav bar are fully left justified.

The horizontal scrollbar does not kick in (when narrowing the browser
window) untill some of the text has disappeared outside the window, making
it impossible to scroll right to that text. You will fix this if you stop
using position: relative for that text container (along with all those
margins and left etc stuff) and simply apply a left margin.


You are still not applying the KISS principle. You are still using position:
absolute everywhere. The vast majority of the positioning CSS you are using
is not required and is in fact hindering the browser in its attempt to lay
out the page.

Your top logo starts disappearing (outside its fixed height box) after only
one increment in font size. Increase *your* user font size and see for
yourself.