Firefox and IE 7 and divs, etc!

Hello Styleists!

I am trying to get a page going similar to this nice tutorial at A
List Apart.

URL: http://www.alistapart.com/d/holygrail/example_1.html

This is sorta what I would like. When I navigate to the page above
using Firefox, all is well -
the left side (a div column) has text and is colored blue, the center
is white, and the right column (a div as well) is red. This is a
three-column sample, which is fairly nice. BUT!!

When I navigate to this page using IE 7! the left side is completely
gone! I discovered this by accident, when I was using the page above
(example_1.htm) as a template for one of my pages, where I have some
roll over image buttons for navigation on the left side, and all was
ok with my page (more or less) with Firefox. Then I check the page
with IE 7, and all my pretty buttons are gone!

Would some one take a look at the url above, using ie 7 and give me a
hint about fixing this?

Thanks,

eholz1

eholz1 wrote:

ok with my page (more or less) with Firefox. Then I check the page
with IE 7, and all my pretty buttons are gone!

Put your test page on the web somewhere and post the URL. Do not post
code here. Before you do this, however, validate both your HTML and CSS
to make sure there aren't any syntax errors causing the problem.

--
Berg

"Bergamot" <bergamot (AT) visi (DOT) com> wrote

eholz1 wrote:

ok with my page (more or less) with Firefox. Then I check the page
with IE 7, and all my pretty buttons are gone!

Put your test page on the web somewhere and post the URL. Do not post
code here. Before you do this, however, validate both your HTML and CSS
to make sure there aren't any syntax errors causing the problem.

Er, he/she did, or more to the point he/she doesn't need to.

It seems the page at alistapart:
http://www.alistapart.com/d/holygrail/example_1.html
is broken when viewed with IE7. Indeed, the left hand column is simply
missing.

I'm not too keen on alistapart examples so I won't bother diagnosing the
problem.

--
Richard.

On Nov 17, 6:54 am, eholz1 <ewh... (AT) gmail (DOT) com> wrote:

Hello Styleists!

I am trying to get a page going similar to this nice tutorial at A
List Apart.

URL:http://www.alistapart.com/d/holygrail/example_1.html

This is sorta what I would like. When I navigate to the page above
using Firefox, all is well -
the left side (a div column) has text and is colored blue, the center
is white, and the right column (a div as well) is red. This is a
three-column sample, which is fairly nice. BUT!!

When I navigate to this page using IE 7! the left side is completely
gone!

http://www.alistapart.com/d/holygrail/example_1.html
From CSS for #left column: margin-left: -100%;

See
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Bug #39

The second thing you never should use is negative margin value unless
you are Ok with part of your content disappearing for 80%-95% of your
visitors (IE users). btw on the demo for bug #39 under IE 6 SP1 we are
having the same peekaboo effect ("X" is not on the page) - despite the
bug is claimed only for IE7.

P.S. The first thing one should never use is div layout - unless it is
a demo page showing the power and benefits of such layout. If it is a
paid commercial solution then always use the standard table layout,
otherwise soon you'll get a reputation of a unreliable producer. No
matter how much UA-specific patches you will apply, the re will be
always a high chance that some amount of visitors will not be able to
see your page at all or a part of it. Only table layout eliminates
this danger.
That is not an order of course :-) - just a friendly advise.

"VK" <schools_ring (AT) yahoo (DOT) com> wrote

On Nov 17, 6:54 am, eholz1 <ewh... (AT) gmail (DOT) com> wrote:
Hello Styleists!

I am trying to get a page going similar to this nice tutorial at A
List Apart.

URL:http://www.alistapart.com/d/holygrail/example_1.html

This is sorta what I would like. When I navigate to the page above
using Firefox, all is well -
the left side (a div column) has text and is colored blue, the center
is white, and the right column (a div as well) is red. This is a
three-column sample, which is fairly nice. BUT!!

When I navigate to this page using IE 7! the left side is completely
gone!

http://www.alistapart.com/d/holygrail/example_1.html
From CSS for #left column: margin-left: -100%;

See
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Bug #39

The second thing you never should use is negative margin value unless
you are Ok with part of your content disappearing for 80%-95% of your
visitors (IE users). btw on the demo for bug #39 under IE 6 SP1 we are
having the same peekaboo effect ("X" is not on the page) - despite the
bug is claimed only for IE7.

P.S. The first thing one should never use is div layout - unless it is
a demo page showing the power and benefits of such layout. If it is a
paid commercial solution then always use the standard table layout,
otherwise soon you'll get a reputation of a unreliable producer. No

Er, what?

matter how much UA-specific patches you will apply, the re will be
always a high chance that some amount of visitors will not be able to
see your page at all or a part of it. Only table layout eliminates
this danger.

Er, what again?

That is not an order of course :-) - just a friendly advise.

And totally incorrect :-)

BTW VK did you not notice that the page the OP cited is not his own but from
alistapart?

--
Richard.

Only table layout eliminates this danger.

Er, what again?

Again (as it's very important for commercial developers): only table
layout guarantees that the page can be viewed in all its parts by all
visitors using graphics UAs. If one wants to be stable paid for his
solutions, table layout is the only option.
Earlier this year I explained that div layouts still remain what they
were 10 years ago: a sophisticated hack of the existing model; and as
any hack, especially so sophisticated and relaying on most fine and
dark aspects of the model, this hack will never be something to
expected working everywhere.
CSS model was made by W3C as a tool to make *HTML equivalents of PDF*.
"Now you can make each element of your page pixel-exact!" - that was
the slogan of the first CSS specs (conveniently forgotten now by W3C).
The Holy Grail of the model are position:absolute and pixel value for
all positions and sizes.
"float" property was only and exclusively introduced as a replacement
for <img align="left/right", "clear" was only and exclusively
introduced as a replacement for <br clear="left,right,all",
position:relative was only and exclusively introduced as a replacement
for NN's <ilayer>. Alas the model has been made greedy so one could
apply new attributes to all other elements including external
containers: something what was completely missed while making the
model. The current CSS simply doesn't have a right positioning
mechanics to reliable substitute the table layout. For that it needs a
new attribute for allocation by joiner points, something like
/* bogus non-possible style rule! */
#center {
position: joiner(top-left, #left, top-right, 1em, right);
}
so no matter what and why but the top-left corner of #center block
will be always 1em to the right from the top-right corner of #left.

On IE it is rather easy to make such reliable div layouts because
since IE5.5 Microsoft has compensated the limitations of CSS via
behaviors (and now bindings on Gecko) but it doesn't help too much for
an universal run. And I wouldn't expect the inclusion of such feature
right into CSS model because if widely used then it will most probably
kill the rest of the aggressive rendering. The aggressive rendering is
already "one leg in the tomb" on div layouts and such new feature as I
described will do the rest. Don't take my words for true, check it
yourself: load a complex page with the standard table layout and the
same page made on div layouts over a slow connection. Check out when
will you see anything in your browser in either case.

BTW VK did you not notice that the page the OP cited is not his own but from
alistapart?

Yes, and I also noticed that this page is called "Holy Grail layout"
or something and positioned as a perfect substitution of the three
columns table layout - that is the reason why OP is trying to get it
working for his own site. That is also the reason why I dared to write
all these personal advises.

"VK" <schools_ring (AT) yahoo (DOT) com> wrote

Only table layout eliminates this danger.

Er, what again?

<snip drivel>

No further comment required.

--
Richard.

On Nov 17, 3:04 pm, "rf" <r... (AT) invalid (DOT) com> wrote:

Only table layout eliminates this danger.

No further comment required.

Oh? So what is _your_ professional advise will be to OP? "IE users
will not see one third of your page and hell on them, who cares"? Or
do you have another "really working" three columns div layout to
suggest? If the first, then no comments of course, if the last then
I'm anxious to see one.

VK wrote:

On Nov 17, 3:04 pm, "rf" <r... (AT) invalid (DOT) com> wrote:
Only table layout eliminates this danger.

No further comment required.

Oh? So what is _your_ professional advise will be to OP? "IE users

Can't speak for Richard, but MY advise would be to learn how to do CSS
layouts properly.

will not see one third of your page and hell on them, who cares"? Or
do you have another "really working" three columns div layout to
suggest? If the first, then no comments of course, if the last then
I'm anxious to see one.

How about a couple of layouts that mix from 1 to 4 columns?

http://beta.ksscholl.com/nbuy/rx/template.html
http://www.singlebarrelsoftball.com/index.php

It's not THAT difficult, certainly not so difficult as to depend on
table structures when they are not necessary. Not to mention your
documents will be far more semantically correct.

--

Kevin Scholl
http://www.ksscholl.com/

On Nov 17, 7:48 pm, Kevin Scholl <ksch... (AT) comcast (DOT) DELETE.net> wrote:

How about a couple of layouts that mix from 1 to 4 columns?

http://beta.ksscholl.com/nbuy/rx/template.html
http://www.singlebarrelsoftball.com/index.php

Nice design on both sites, but irrelevant to the subject. We are
talking about the three columns (not rows) layout with any kind of
content in left, center and -possibly- right column which is indeed is
the Holy Grail of layouts.
The linked samples are horizontal divs with content staying for a
fixed value from left and right border in each container. That is
indeed a trivia.

A note to possible readers: please do not start on "we can have a
harrow palmtop/cellphone screen so the three column layout shouldn't
be never blah-blah-blah in the Internet". Don't make another funny
illustration for the immortal "The Fox and the Grapes" of Aesop ;-)

It's not THAT difficult

I am ready to believe. So where is that commonly approved div layout
template for the most used page structure?