473,890 Members | 1,330 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 1431
On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@no spam.thanx.inva lid> 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*********@ne ws3.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*********@no spam.thanx.inva lid> 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************ *******@bgtnsc0 5-news.ops.worldn et.att.net>,
Beauregard T. Shagnasty <a.*********@ex ample.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************ *******@bgtnsc0 5-news.ops.worldn et.att.net>,
Beauregard T. Shagnasty <a.*********@ex ample.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*********@no spam.thanx.inva lid> wrote:
| In article <e3*********@ne ws3.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.*********@ex ample.invalid> wrote:
| ph************* *@ipal.net wrote:
|
|> On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@no spam.thanx.inva lid> 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.t hanx.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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2681
by: Raymond H. | last post by:
Hello, I create a vb4 project which can also naviger on Internet via the WebBrowser control which I put on my form. My question is: if this program is installed on a station having already Internet Explorer in it then will it cause an error if version Internet Explorer is the same one as WebBrowser which is in my project? Is it this control which Internet Explorer uses? If that can cause errors of version then, instead, can I install this...
12
19627
by: SunshineGirl | last post by:
I'm trying to receive events from a running instance of Internet Explorer. So far I've only been able to receive events from an instance I launch from code, but I need to receive events from all running instances of Internet Explorer (I mean those that the user launches himself). I know this is possible because I did it three months ago. Unfortunately, I can't find the code. I've already looked at all the Microsoft articles on automating...
0
1251
by: asadhussain | last post by:
I wrote a plugin to internet explorer that requires internet explorer to be shutdown and restarted. I figured out a way to shut down IE using the MSI and to start it back up using VBScript. I was wondering if there was a way to remember what webpage each internet explorer process was on and then open up internet explorer windows that open up to the URLs that the user was visiting previously. Any insights?
7
4081
by: Steve | last post by:
I used System.Diagnostics.Process.Start(str) to launch application. str is based on the registry setting, in registry, it might be str = rundll32.exe "%ProgramFiles%\INTERN~1\hmmapi.dll",OpenInboxHandler str = "C:\PROGRA~1\MICROS~4\OFFICE11\OUTLOOK.EXE" /recycle str = "C:\Program Files\Internet Explorer\iexplore.exe" -nohome System.Diagnostics.Process.Start(str) can't launch with parameter, and there might be any kind of the parameter in...
7
4504
by: husamal_ahmadi | last post by:
Hi everyBody: I have this question which really drive me cruzy, By using VB.Net: How can I let the internet explorer navigate in the same window either by using win32 API or by using Microsoft Internet Control refreance to my project ? some body toled me to use ShellExcute Function in API but I tried it
11
11635
by: Wendy | last post by:
Hello, I have a program that does the following: When a user clicks on a row in a VB.NET datagrid, it will open a web page in Internet Explorer (that corresponds to that item in the selected row in the datagrid). It will automatically print that web page, and then it will close the Internet Explorer window. I have code that works perfectly when a regular web page is opened, however when a pdf web page is opened the printing never...
3
11507
by: laredotornado | last post by:
Hi, This problem only affects PC IE. On a secured page (a page visited via https), there is a link that reads -- "Download HTML File". The link connects to this page <?php require("../../util_fns.php"); session_start();
1
2468
by: -Lost | last post by:
This is more of a post to inform, unless of course I am missing something fundamental, in which case I would appreciate anyone explaining it. Based on Mr. Michaux's camelizeStyle function I wrote: function create_style(style) { var p = document.createElement('p'); var t = document.createTextNode('Just something to fill the P.');
9
1637
by: -Lost | last post by:
http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and- acid2-a-milestone.aspx Oh my! A somewhat standards compliant Internet Explorer? What about JavaScript? Not that it proves much, but it is definitely a huge step in the right direction. Bruce Lawson of The Web Standards Project seems optimistic albeit a
0
1135
by: =?Utf-8?B?Si5MLg==?= | last post by:
I am unable to access the internet when I click on internet explorer. The Internet Properties window appears only. I click on OK and then attempt to access the internet again by clicking on the internet explorer icon which is now a globe rather than the e icon as it was before the update took place. But what is strange is that I have been able to connect to this microsoft help site so the explorer is working but not by clicking on the...
0
9978
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11222
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10811
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
7169
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5846
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6041
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4674
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4270
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3275
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.