469,286 Members | 2,521 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,286 developers. It's quick & easy.

Who can't add up, me or Internet Explorer?

I was attempting to improve my understanding of CSS, and created a very
simple page with a header, footer and three columns. This looked just
like I expected in FF and Opera, but (surprise surprise) gave a problem
in IE.

You can see the page at http://www.kidsinaction.org.uk/3cols.html

If you look at the source, you will see that the three divs used to
create the columns are imaginatively named col1, col2 and col3.

In an attempt to get the three columns of equal width, with a little
space between them, I made the three divs have a width of 30% each, with
left and right padding of 1%. Initially, they all had zero left and
right margin. By my schoolboy maths, this makes each div 32% wide. Three
divs at 32% each makes 96%, leaving me 4% for the space I wanted to
leave between col1 and col2, and between col2 and col3.

Thus, I added 2% left and right margin to col2, which adds up neatly to
100% and leaves col2 smack in the middle of the other two.

All of this works fine in FF and Opera, but in IE, the right column
dropped down, presumably because IE thought that the overall width of
the three was more than 100%, so moved col3 downwards. What I would like
to know is why IE thought this? I worked around the problem by giving
col2 a left and right margin of 1.8% instead, but this means that in FF
and Opera, the middle col is slightly further to the left of centre.
Oddly enough (or maybe not), IE puts it right in the middle.

Any explanation? TIA

Disclaimer: I know that semantically speaking, col1, col2 and col3 are
not good names for the divs as they reflect a presentational aspect, not
a semantic one. They were used here as I was experimenting with CSS, so
wanted to ensure that I knew which was which. I promise not to do this
on a real page!!

--
Alan Silver
(anything added below this line is nothing to do with me)
May 10 '06 #1
13 1307
On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@nospam.thanx.invalid> wrote:

| I was attempting to improve my understanding of CSS, and created a very
| simple page with a header, footer and three columns. This looked just
| like I expected in FF and Opera, but (surprise surprise) gave a problem
| in IE.
|
| You can see the page at http://www.kidsinaction.org.uk/3cols.html
|
| If you look at the source, you will see that the three divs used to
| create the columns are imaginatively named col1, col2 and col3.
|
| In an attempt to get the three columns of equal width, with a little
| space between them, I made the three divs have a width of 30% each, with
| left and right padding of 1%. Initially, they all had zero left and
| right margin. By my schoolboy maths, this makes each div 32% wide. Three
| divs at 32% each makes 96%, leaving me 4% for the space I wanted to
| leave between col1 and col2, and between col2 and col3.
|
| Thus, I added 2% left and right margin to col2, which adds up neatly to
| 100% and leaves col2 smack in the middle of the other two.
|
| All of this works fine in FF and Opera, but in IE, the right column
| dropped down, presumably because IE thought that the overall width of
| the three was more than 100%, so moved col3 downwards. What I would like
| to know is why IE thought this? I worked around the problem by giving
| col2 a left and right margin of 1.8% instead, but this means that in FF
| and Opera, the middle col is slightly further to the left of centre.
| Oddly enough (or maybe not), IE puts it right in the middle.
|
| Any explanation? TIA

If you keep shrinking the width of the columns at what point does it work
OK in IE? And check to be sure it works with varying window sizes and
with varying user font sizes.

Also, do it with the total adding up to slightly less than 100% to account
for "slop" (an extra pixel due to rounding up when calculating pixel counts
could end up with the total being 1 or 2 pixels over). 99% should do it.

You _may_ have to end up using tables. And CSS tables are unknown to IE
so you'd have to end up using HTML tables.
| Disclaimer: I know that semantically speaking, col1, col2 and col3 are
| not good names for the divs as they reflect a presentational aspect, not
| a semantic one. They were used here as I was experimenting with CSS, so
| wanted to ensure that I knew which was which. I promise not to do this
| on a real page!!

The names are whatever you mean for them to be. Maybe "left", "center",
and "right" might be better?

There has to be some aspect of presentation in the HTML markup just to mark
what goes where. Meanings change from page to page, and if you want to use
the same CSS to create a layout applicable to many _different_ page meanings,
then you have to use something which ends up having no meaning besides what
goes where in the presentation.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 10 '06 #2
In article <e3*********@news3.newsguy.com>, ph**************@ipal.net
writes
<snip>
| Any explanation? TIA

If you keep shrinking the width of the columns at what point does it work
OK in IE?
1.8% was the point where it started working in IE. I tried 1.9%, but
that didn't work either.
And check to be sure it works with varying window sizes and
with varying user font sizes.
Yup, done that. It seems pretty consistent, at least until you get to
extreme combinations ;-)
Also, do it with the total adding up to slightly less than 100% to account
for "slop" (an extra pixel due to rounding up when calculating pixel counts
could end up with the total being 1 or 2 pixels over). 99% should do it.
That's what I thought, but it's not that simple. I had to reduce my
total width to 99.6% instead of 100%. At 1280x1024 (my screen
resolution), that .4% comes out at just over 5 pixels. That's quite a
lot of rounding errors!!
You _may_ have to end up using tables. And CSS tables are unknown to IE
so you'd have to end up using HTML tables.
Nah, I can live with the few pixels discrepancy between the spaces, I
just wondered if there was some rational explanation, or simple
workaround for the problem.
| Disclaimer: I know that semantically speaking, col1, col2 and col3 are
| not good names for the divs as they reflect a presentational aspect, not
| a semantic one. They were used here as I was experimenting with CSS, so
| wanted to ensure that I knew which was which. I promise not to do this
| on a real page!!

The names are whatever you mean for them to be. Maybe "left", "center",
and "right" might be better?
No, because the HTML shouldn't contain presentational code. What if I
decided to shift the columns around? The names would become meaningless
then.
There has to be some aspect of presentation in the HTML markup just to mark
what goes where.
Why? Surely the HTML should be marked up to make sense of the structure
of the document. The CSS then works with that and adds presentation.
Meanings change from page to page, and if you want to use
the same CSS to create a layout applicable to many _different_ page meanings,
then you have to use something which ends up having no meaning besides what
goes where in the presentation.


On the contrary, you should use names that reflect the nature of the
content. That way, the names have meaning wherever they are used. For
example, a div name like "sitelinks" always means the same. If one CSS
file decides to place the links in this div across the top of the page,
and another CSS file puts them down the left margin, well that's a
presentational issue. The HTML shouldn't reflect that.

Anyway, thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)
May 10 '06 #3
ph**************@ipal.net wrote:
On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@nospam.thanx.invalid> wrote:

| I was attempting to improve my understanding of CSS, and created a very
| simple page with a header, footer and three columns. ...

You _may_ have to end up using tables.
Three-column pages are easy with CSS. See example:
<http://benmeadowcroft.com/webdev/csstemplates/3-column.html>
<http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html>
The names are whatever you mean for them to be. Maybe "left", "center",
and "right" might be better?


Or even better: "navigation", "content", and "sidebar" or similar -
something that really defines the columns. With "left" what happens next
week when you want to move the menu to the right side?

--
-bts
-Warning: I brake for lawn deer
May 10 '06 #4
In article <4C*******************@bgtnsc05-news.ops.worldnet.att.net>,
Beauregard T. Shagnasty <a.*********@example.invalid> writes
Three-column pages are easy with CSS


Yup, but given that I managed to create a layout on my own (for the
learning experience), I would be grateful if anyone could explain why IE
has such a hard time adding up the percentages and not getting it
wrong!!

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)
May 10 '06 #5
Alan Silver wrote:
In article <4C*******************@bgtnsc05-news.ops.worldnet.att.net>,
Beauregard T. Shagnasty <a.*********@example.invalid> writes
Three-column pages are easy with CSS


Yup, but given that I managed to create a layout on my own (for the
learning experience), I would be grateful if anyone could explain why
IE has such a hard time adding up the percentages and not getting it
wrong!!


'Cause it's broke? :-) Dunno, the two samples I posted both work fine
in Internet Exploder. They do not use percentages for column width;
maybe that's a Bad Idea™.

--
-bts
-Warning: I brake for lawn deer
May 10 '06 #6
On Wed, 10 May 2006 16:54:18 +0100 Alan Silver <al*********@nospam.thanx.invalid> wrote:
| In article <e3*********@news3.newsguy.com>, ph**************@ipal.net
| writes
| <snip>
|>| Any explanation? TIA
|>
|>If you keep shrinking the width of the columns at what point does it work
|>OK in IE?
|
| 1.8% was the point where it started working in IE. I tried 1.9%, but
| that didn't work either.

What I meant was to shrink the columns themselves, not the gutter.
But at least this tells you that the rounding errors totaled too high
in your case.
|> And check to be sure it works with varying window sizes and
|>with varying user font sizes.
|
| Yup, done that. It seems pretty consistent, at least until you get to
| extreme combinations ;-)

Well, when the font is so large and the window is so small that you can
only get 1 or 2 letters on a page, it's not likely very many people will
be tolerating that in general.
|>Also, do it with the total adding up to slightly less than 100% to account
|>for "slop" (an extra pixel due to rounding up when calculating pixel counts
|>could end up with the total being 1 or 2 pixels over). 99% should do it.
|
| That's what I thought, but it's not that simple. I had to reduce my
| total width to 99.6% instead of 100%. At 1280x1024 (my screen
| resolution), that .4% comes out at just over 5 pixels. That's quite a
| lot of rounding errors!!

It's possible for it to come out with one pixel more for each object if
you're quite unlucky. And some viewers will end up with that.
|>You _may_ have to end up using tables. And CSS tables are unknown to IE
|>so you'd have to end up using HTML tables.
|
| Nah, I can live with the few pixels discrepancy between the spaces, I
| just wondered if there was some rational explanation, or simple
| workaround for the problem.

This is the best I know of without going to tables.
|>| Disclaimer: I know that semantically speaking, col1, col2 and col3 are
|>| not good names for the divs as they reflect a presentational aspect, not
|>| a semantic one. They were used here as I was experimenting with CSS, so
|>| wanted to ensure that I knew which was which. I promise not to do this
|>| on a real page!!
|>
|>The names are whatever you mean for them to be. Maybe "left", "center",
|>and "right" might be better?
|
| No, because the HTML shouldn't contain presentational code. What if I
| decided to shift the columns around? The names would become meaningless
| then.

So try changing it from 3 columns to 4 columns ... in the CSS.

You can't really remove every last bit of presentation from the HTML.

Of course if what you have are a number of blocks of text, and the column
position doesn't matter, then you could let them float where they will
and the end user viewing it can arrange as desired.

It just depends on whether _your_ content needs to have a certain kind of
presentation or not. If you are concerned about the right block falling
down to the next row, then maybe your content does need a specific
presentation.
|>There has to be some aspect of presentation in the HTML markup just to mark
|>what goes where.
|
| Why? Surely the HTML should be marked up to make sense of the structure
| of the document. The CSS then works with that and adds presentation.

If all you have is a sequence of unclassified DIV elements, how are you
going to arrange that into a layout of 3 columns, or 4 columns, just in
the CSS alone? Of course you can let them float and they will form the
column layout that best fits. And in many cases that's all one needs.
But if you must have 3 columns, you have to structure your content markup
to indicate what is in each column, such as in the form of 2 levels of
DIV elements with 3 children at the 2nd level for each 1st level. Ask
yourself if that column arrangement is what you mean for the content.
|> Meanings change from page to page, and if you want to use
|>the same CSS to create a layout applicable to many _different_ page meanings,
|>then you have to use something which ends up having no meaning besides what
|>goes where in the presentation.
|
| On the contrary, you should use names that reflect the nature of the
| content. That way, the names have meaning wherever they are used. For
| example, a div name like "sitelinks" always means the same. If one CSS
| file decides to place the links in this div across the top of the page,
| and another CSS file puts them down the left margin, well that's a
| presentational issue. The HTML shouldn't reflect that.

You can't do all possible things in the presentation style. It is bound
by the order of things in the content. Try swapping the 1st column with
the 3rd column from your 3 column layout by only changing CSS.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 10 '06 #7
On Wed, 10 May 2006 17:42:24 GMT Beauregard T. Shagnasty <a.*********@example.invalid> wrote:
| ph**************@ipal.net wrote:
|
|> On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@nospam.thanx.invalid> wrote:
|>
|>| I was attempting to improve my understanding of CSS, and created a very
|>| simple page with a header, footer and three columns. ...
|>
|> You _may_ have to end up using tables.
|
| Three-column pages are easy with CSS. See example:
| <http://benmeadowcroft.com/webdev/csstemplates/3-column.html>
| <http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html>
|
|> The names are whatever you mean for them to be. Maybe "left", "center",
|> and "right" might be better?
|
| Or even better: "navigation", "content", and "sidebar" or similar -
| something that really defines the columns. With "left" what happens next
| week when you want to move the menu to the right side?

Put it on the left in the first half of the hour, and on the right in the
second half of the hour. Then you'll get to see whether you've make it
work the right way or not. The server side will have to change at least
something, hopefully only in CSS, based on the time unless there is a way
to somehow accomplish this in client side scripting.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 10 '06 #8
Alan Silver wrote:

You can see the page at http://www.kidsinaction.org.uk/3cols.html

If you look at the source, you will see that the three divs used to
create the columns are imaginatively named col1, col2 and col3.

In an attempt to get the three columns of equal width, with a little
space between them, I made the three divs have a width of 30% each, with
left and right padding of 1%. Initially, they all had zero left and
right margin. By my schoolboy maths, this makes each div 32% wide. Three
divs at 32% each makes 96%, leaving me 4% for the space I wanted to
leave between col1 and col2, and between col2 and col3.

Thus, I added 2% left and right margin to col2, which adds up neatly to
100% and leaves col2 smack in the middle of the other two.

All of this works fine in FF and Opera, but in IE, the right column
dropped down, presumably because IE thought that the overall width of
the three was more than 100%, so moved col3 downwards. What I would like
to know is why IE thought this? I worked around the problem by giving
col2 a left and right margin of 1.8% instead, but this means that in FF
and Opera, the middle col is slightly further to the left of centre.
Oddly enough (or maybe not), IE puts it right in the middle.

Any explanation? TIA

IE has problems with a width:100%. It appears to be a rounding issue of
some sort. Several odd IE layout problems are solved by setting width:99%
instead. Your test case, I suspect, a variation on this theme.
When the viewport is slowly narrowed in IE, col3 starts to jump around,
sometimes in line, sometimes below. It is much smoother if the margin is
set to 1.5% from 1.8%.
You can maintain equal spacing between the columns by having all the
columns float:left. This leaves a slight gap on the right.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
May 10 '06 #9
To further the education of mankind, Alan Silver <alan-
si****@nospam.thanx.invalid> vouchsafed:
Thus, I added 2% left and right margin to col2, which adds up neatly to
100% and leaves col2 smack in the middle of the other two.

All of this works fine in FF and Opera, but in IE, the right column
dropped down, presumably because IE thought that the overall width of
the three was more than 100%, so moved col3 downwards. What I would like
to know is why IE thought this? I worked around the problem by giving
col2 a left and right margin of 1.8% instead, but this means that in FF
and Opera, the middle col is slightly further to the left of centre.
Oddly enough (or maybe not), IE puts it right in the middle.


I solved something similar to this once by absolute-positioning the 3rd col
at/near the top and right.

--
Neredbojias
Infinity has its limits.
May 11 '06 #10
In article <44*******************@bgtnsc05-news.ops.worldnet.att.net>,
Beauregard T. Shagnasty <a.*********@example.invalid> writes
Alan Silver wrote:
In article <4C*******************@bgtnsc05-news.ops.worldnet.att.net>,
Beauregard T. Shagnasty <a.*********@example.invalid> writes
Three-column pages are easy with CSS
Yup, but given that I managed to create a layout on my own (for the
learning experience), I would be grateful if anyone could explain why
IE has such a hard time adding up the percentages and not getting it
wrong!!


'Cause it's broke? :-)


Yeah well, we all know that!! I was hoping for a more technical
explanation!!
Dunno, the two samples I posted both work fine
in Internet Exploder. They do not use percentages for column width;
maybe that's a Bad Idea™.


I think using IE in the first place is a Bad Idea, but try telling Joe
Public that!!

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)
May 11 '06 #11
> You can't do all possible things in the presentation style. It is bound
by the order of things in the content. Try swapping the 1st column with
the 3rd column from your 3 column layout by only changing CSS.


Hombre, you need this:

http://www.csszengarden.com/

to calm a bit down (your repeating too much what's _not_ working in
CSS instead of maybe realising how _much_ is possible with CSS, it's
quite neurotic, because as long as you believe CSS sucks, CSS _will_
suck for you), and to get at least an understanding of the _basic_
abilities of CSS (ZenGarden is _basic_, easy, simple (and also
artificial) CSS design).

For sure you can move around structured HTML completely _independent_
of the structure. So you make your semantic or OO structure in HTML and
do whatever you want with it in the presentation. If a 'header' is left
or right or down, or in the middle, if it overlaps the sitemap or
underlaps a menu, that you _dont_ define in HTML.

Ciao
Niels

May 12 '06 #12
On 12 May 2006 12:09:05 -0700 ni*************@seies.de wrote:
|> You can't do all possible things in the presentation style. It is bound
|> by the order of things in the content. Try swapping the 1st column with
|> the 3rd column from your 3 column layout by only changing CSS.
|
| Hombre, you need this:
|
| http://www.csszengarden.com/
|
| to calm a bit down (your repeating too much what's _not_ working in
| CSS instead of maybe realising how _much_ is possible with CSS, it's
| quite neurotic, because as long as you believe CSS sucks, CSS _will_
| suck for you), and to get at least an understanding of the _basic_
| abilities of CSS (ZenGarden is _basic_, easy, simple (and also
| artificial) CSS design).

The sample page designs (from links on the right side of the main page)
look nice for things like blogs and simple information sites. For a
lot of other things, including some of what I have coming up, this just
doesn't cut it.

Some of my sites will be high information density, and will use style
and graphics to guide the eye around the page. These blog designs are
not anywhere near that kind of thing.

I'll look around the resource links. But if they are like what I have
seen from others, they are likely to still be narrow in ultimate intent
(such as the majority of designs being for blogs).

Compare this with some of the latest submissions for the Slashdot CSS
redesign contest. Some are quite nice. Some are just awful.

If you want to show me a great design, show me one that would be "the
next level" for something like craigslist.org or other large complex
community sites that.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 12 '06 #13
In article <e4********@news2.newsguy.com>, ph**************@ipal.net
writes
<snip>
| http://www.csszengarden.com/ <snip>The sample page designs (from links on the right side of the main page)
look nice for things like blogs and simple information sites. For a
lot of other things, including some of what I have coming up, this just
doesn't cut it.
I have been grappling with exactly this problem since I started learning
CSS layout recently, and have come to the conclusion that it's a false
problem.

I think the fact that most of the samples you see are for blogs and
simple sites is that the people writing sites describing how to use CSS
want to keep the point clear and simple. Most of them have simple info
sites, most of them have blogs, therefore it makes sense to use those to
show how to do layout with CSS.

This does *not* mean that this is all you can do with CSS. I have just
been working on a couple of sites, one an e-commerce site and one for a
company offering company formation services. Both sites are quite
info-heavy, but can still be styled in CSS.

The point is that CSS is not a restriction on the type or quantity of
info that is on the page. It is simply a way of keeping your
presentation separate from your content. For an info-heavy site, that is
an even bigger advantage than for a blog or simple site.

<snip>If you want to show me a great design, show me one that would be "the
next level" for something like craigslist.org or other large complex
community sites that.


You probably won't find this in any of the CSS showcase sites, simply
because the CSS would be so complex that it would overwhelm anyone
trying to learn CSS from it. Once you have the principles of CSS under
your belt (and no, I don't claim to have that yet, I'm still learning),
you can apply them to a site of any size or complexity.

Hope this helps. It's a difficult point to accept, but when you finally
see it, it is obvious.

Just as an aside, what's so complex about craigslist.org from a layout
point of view? Sure, there's loads of links there (probably too many,
the site is very confusing, but that's a UI issue not a CSS one), but
the layout and style is pretty simple. This is not meant as a criticism,
just a question. I would have thought that you could do that in CSS
without too much problem. You would then have the huge advantage of
search engines liking the site even more when you dropped the tables,
plus you could give the whole site an instant facelift by changing the
stylesheet.

Just my 2c. Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)
May 15 '06 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by asadhussain | last post: by
3 posts views Thread by laredotornado | last post: by
reply views Thread by =?Utf-8?B?Si5MLg==?= | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.