IE7 horizontal scrolling problem

Hi - I've managed to get this site working in Firefox and IE6, without
any horizontal scrolling, but for some reason IE7 is insisting on
horizontal scrolling by quite a wide margin.

Does anyone have any pointers on what might be going on here?
Site is at: http://tinyurl.com/36oznb/

Thanks,
Colin.

On 2 déc, 14:55, "seaj... (AT) hotmail (DOT) com" <seaj... (AT) hotmail (DOT) com> wrote:

Hi - I've managed to get this site working in Firefox and IE6, without
any horizontal scrolling, but for some reason IE7 is insisting on
horizontal scrolling by quite a wide margin.

Does anyone have any pointers on what might be going on here?
Site is at:http://tinyurl.com/36oznb/

Thanks,
Colin.

Hello Colin,

I checked your webpage and you have at least 5 unneeded CSS rules.

html>body #header { /* IE ignores this block as it doesn't understand
the selector */
height: auto; /* Reset the height for good browsers */
}
and
html>body ul#navlist { /* IE ignores this block as it doesn't
understand the selector */
height: auto; /* Reset the height for good browsers */
}
won't work in Internet Explorer 7.


You also over-code, over-define and over-declare your CSS code and I
would definitely reduce the DOM tree: there are several empty block-
level elements (just for the sake of clearing or ventilating).

Anyway, what's causing the horizontal scrollbar is the combination of
font-style: italic and float: right. This is a known bug in Internet
Explorer 7.

Regards, Gérard

On Dec 4, 7:08 am, GTalbot <newsgr... (AT) gtalbot (DOT) org> wrote:

On 2 déc, 14:55, "seaj... (AT) hotmail (DOT) com" <seaj... (AT) hotmail (DOT) com> wrote:

Hi - I've managed to get this site working in Firefox and IE6, without
any horizontal scrolling, but for some reason IE7 is insisting on
horizontal scrolling by quite a wide margin.

Does anyone have any pointers on what might be going on here?
Site is at:http://tinyurl.com/36oznb/

Thanks,
Colin.

Hello Colin,

I checked your webpage and you have at least 5 unneeded CSS rules.

html>body #header { /* IE ignores this block as it doesn't understand
the selector */
height: auto; /* Reset the height for good browsers */}

and
html>body ul#navlist { /* IE ignores this block as it doesn't
understand the selector */
height: auto; /* Reset the height for good browsers */}

won't work in Internet Explorer 7.

I think that's intentional - it's really IE6 that needs to ignore it,
IE7 and other 'good' browsers should do it. The problem it fixes was
that without this you have to set a fixed height which then breaks
when you resize the fonts at the browser if the menus go onto more
than one line.

You also over-code, over-define and over-declare your CSS code and I
would definitely reduce the DOM tree: there are several empty block-
level elements (just for the sake of clearing or ventilating).

I know I have a tendency to do this - my CSS is not particularly
strong, and tends to be a mish-mash of things picked up from all over
the place! :-)

When you say "over-code, over-define and over-declare", are they three
different things, or alliteration to emphasise one thing? Would you
mind giving me an example of something you would change to help
streamline it? It'll point me in the right direction!

Anyway, what's causing the horizontal scrollbar is the combination of
font-style: italic and float: right. This is a known bug in Internet
Explorer 7.

Thanks for that - some people seem to suggest "overflow: auto;" as a
workaround?

Cheers,
Colin.

On 4 déc, 05:24, "seaj... (AT) hotmail (DOT) com" <seaj... (AT) hotmail (DOT) com> wrote:

On Dec 4, 7:08 am, GTalbot <newsgr... (AT) gtalbot (DOT) org> wrote:



On 2 déc, 14:55, "seaj... (AT) hotmail (DOT) com" <seaj... (AT) hotmail (DOT) com> wrote:

Hi - I've managed to get this site working in Firefox and IE6, without
any horizontal scrolling, but for some reason IE7 is insisting on
horizontal scrolling by quite a wide margin.

Does anyone have any pointers on what might be going on here?
Site is at:http://tinyurl.com/36oznb/

Thanks,
Colin.

Hello Colin,

I checked your webpage and you have at least 5 unneeded CSS rules.

html>body #header { /* IE ignores this block as it doesn't understand
the selector */
height: auto; /* Reset the height for good browsers */}

and
html>body ul#navlist { /* IE ignores this block as it doesn't
understand the selector */
height: auto; /* Reset the height for good browsers */}

won't work in Internet Explorer 7.

I think that's intentional - it's really IE6 that needs to ignore it,
IE7 and other 'good' browsers should do it. The problem it fixes was
that without this you have to set a fixed height which then breaks
when you resize the fonts at the browser if the menus go onto more
than one line.



You also over-code, over-define and over-declare your CSS code and I
would definitely reduce the DOM tree: there are several empty block-
level elements (just for the sake of clearing or ventilating).

I know I have a tendency to do this - my CSS is not particularly
strong, and tends to be a mish-mash of things picked up from all over
the place! :-)

This picking up things here and there can create side effects, trigger
bugs in specific browsers, will make debugging a lot harder, longer,
even with debugging softwares, will make reviewing by others (or even
yourself a few months later) who may not be familiar with your code a
lot more harder, longer etc..

When you say "over-code, over-define and over-declare", are they three
different things, or alliteration to emphasise one thing?

Good question. They are 2 different things. Over-define and over-
declare are synonyms for emphasizing but over-code is more than over-
defining. Over-code can mean for instance that you over-use <div>s as
containers which increase the DOM tree (depth) and over-coding can
also make the DOM tree wider: in both cases, it can trigger bugs in
specific browsers. Best is to always simplify, clarify, reduce CSS
code. The nr 1 advantage of CSS code over traditional tag soup markup
is that it should reduce the overall file size of a webpage, not
increase it.

Would you
mind giving me an example of something you would change to help
streamline it? It'll point me in the right direction!

E.g.:

body {background-color: white; color: black;}
#container {background-color: white; color: black;}
#FirstParg {background-color: white; color: black;}

<div id="container"><p id="FirstParg">Hello World</p></div>

Here, since background-color and color are inherited (because
inheritable), then there is no need to redeclare these for #container
and #FirstParg. The redeclarations are over-declarations or
unnecessary declarations.

On the other hand, the purpose of the div (another block-level element
wrapping a block-level element <p>) is not clear and does not seem to
be needed at all. So this is over-coding, sometimes called bloated
markup code.

The above could be recoded as:

body {background-color: white; color: black;}

<p id="FirstParg">Hello World</p>

or even

body {background-color: white; color: black;}

<p>Hello World</p>

---------------

- Use and rely on CSS inheritance. Many CSS properties are inherited
and are inheritable.

- Use and rely on browser default values. Sometimes browser default
values are not the same from one browser to another but often those
differences are minor and should not cause layout problems. (Browser
manufacturers - Microsoft, Opera, Mozilla, WebKit, etc - are more and
more agreeing with each other on the CSS properties which do not have
predefined initial/default values as provided by CSS specifications.)
Sometimes amateurs over-excessively exaggerate the impact of such
differences and wrongly assume they are responsible of other CSS
features that they do not understand. A good example of this is
collapsing of adjoining vertical margins and of non-adjoining vertical
margins.

- Do not over-create <div> containers. Often amateurs duplicate the
function of other containers because they are trying so hard to
control the layout and they don't know how to control the layout
without adding more <div> containers... but in adding more <div>
containers, they are in fact over-populating the DOM tree and they are
creating a more insiduous problem without ever fixing the original
problems they had.

Often, web author amateurs try to have a rigid, unflexible, non-
scalable pixel-perfect design and that quickly lead them to over-
declare and over-code ... in an attempt to over-control the layout.

Anyway, what's causing the horizontal scrollbar is the combination of
font-style: italic and float: right. This is a known bug in Internet
Explorer 7.

Thanks for that - some people seem to suggest "overflow: auto;" as a
workaround?

Cheers,
Colin.

It really is nothing more than a true, genuine, well documented and
entirely reproducible Internet Explorer 7 bug.

IE7 using unnecessary horizontal scrollbar caused by italics by Bruno
Fassino
http://brunildo.org/test/ie7_ithscroll.html

IE7 absolutely positioned italics by Stuart Colville
http://muffinresearch.co.uk/archives...ioned-italics/

You can use overflow: auto as suggested by Bruno Fassino... but
eventually, the true solution for everyone everywhere and for the
future is to get Microsoft to fix that bug and many others so that we
never have to memorize, to add all kinds and many kinds of coding
patches, workarounds, coding fixes, conditional codes, etc.. to our
websites.

Regards, Gérard
--
Internet Explorer 7 bugs: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/