Article width - problems with IE

Monday 11 July 2005 3:55:43 am

Hi,

This page has a critical difference in IE and Firefox:

http://www.jusnytt.no/hm/artikler/avgjoerelse_om_fildeling

In IE the user has to scroll down to the bottom to find the start of the article. In Firefox the article is displayed correctly at the top.

Is this something I can fix in the CSS setup, or is there an even easier fix to this?

Thanks for any input on this one...

Halvor

Monday 11 July 2005 5:50:35 am

Thanks,

Where would I find the relevant CSS file, and do you have any suggestions for what the width should be?

Halvor

Tuesday 12 July 2005 2:09:31 am

lol, I have been playing with this until my head is spinning :-)

I even tried changing the article name to make it shorter... the link is now
http://www.jusnytt.no/hm/artikler/fildeling

The result is that the article is now in height below the left article, instead of the right. This is better, as the article is at least visible for the reader!

I would still like to understand why this article is not showing at the top, like my other articles are (this seems to be a problem only for IE).

I enclose my site.css, and hope someone has a fix...

/* SITE CSS 20040415 */

div#allcontent
{
    width: auto;
    margin: 0 auto 0 auto;
}


/* PAGE HEADER */

div#header
{
    padding-top: 10px;
    padding-left: 10px;
}

div#header-design
{
    margin: 0;
    height: 70px;
    float: left;
}

div#header h1
{
    font-size: 2em;
    margin: 0;
    padding: 0.6em;
}

div#header h1 a
{
    text-decoration: none;
    color: #000000;
}


/* TOOLBARS */

div#toolbar-top
{ 
    padding: 13px 0 0 8px;
    text-align: right;
}

div#toolbar-top
{ 
    text-align: right;
}

div#toolbar-top ul
{
    float: right;
}

div#toolbar-bottom
{ 
    margin-top: 8px;
    text-align: center;
}

div#toolbar-bottom ul
{
    padding: 0.5em 0 0.5em 0;
}

div#toolbar-bottom li.toolbar-item a
{
    font-weight: bold;
}

div#toolbar-top li.toolbar-item, div#toolbar-bottom li.toolbar-item
{
    border-right: 1px solid;
    display: inline;
    margin: 0;
    padding: 0 10px 0 6px;
    white-space: nowrap;
}

div#toolbar-top div.search-line, div#toolbar-bottom div.search-line
{
    display: inline;
    vertical-align: middle;
}

div#toolbar-top div.label, div#toolbar-bottom div.label
{
    display: inline;
    text-align: left;
}

div#toolbar-top div.search-line form, div#toolbar-bottom div.search-line form
{
    display: inline;
}

div#toolbar-top div.search-line div.optionblock input,
div#toolbar-top div.search-line div.optionblock label,
div#toolbar-right div.search-full div.optionblock input,
div#toolbar-right div.search-full div.optionblock label
{ 
    display: inline;
}

div#toolbar-top input.searchinput, div#toolbar-bottom input.searchinput
{
    height: 1.6em;
    width: 7em;
}

div#toolbar-top li.toolbar-item a, div#toolbar-bottom li.toolbar-item a
{ 
    text-decoration: none;
}

div#toolbar-top li.first, div#toolbar-bottom li.first
{
    display: inline;
}

div#toolbar-top li.last, div#toolbar-bottom li.last
{
    border-right: none;
    display: inline;
}


/* TOP MENU */

div#topmenu
{
    margin: 0;
    padding: 0;
    /* border-bottom: 1px solid; */
}

div.topmenu-line
{
    border-bottom: 1px solid; /* This line needs to be set to avoid bug in IE */
}

div#topmenu-design
{
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
}

div#topmenu ul
{
    margin: 0;
    padding: 0;
}

div#topmenu li
{
    margin: 0;
    padding: 0;
    border-right: 1px solid;
    float: left;
    display: block;
}

div#topmenu li div.spacing
{
    padding: 0.2em 12px 0.3em 12px;
}

div#topmenu li a
{
    text-decoration: none;
}

div#topmenu li a:hover
{
    text-decoration: underline;
}


/* SUB MENU */

div#submenu
{
    /* margin-top: -1px; */
    padding: 0;
    border-bottom: 1px solid; /* This line needs to be set to avoid bug in IE */
}

div#submenu-design
{
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    position: relative;
}

div#submenu ul
{
    padding: 0;
    margin: 0;
}

div#submenu li
{
    margin: 0;
    float: left;
    display: block;
}

div#submenu li div.spacing
{
    padding: 0.2em 12px 0.3em 12px;
}

div#submenu li a
{
    text-decoration: none;
}

div#submenu li a:hover
{
    text-decoration: underline;
}


/* PATH */

div#path-design
{
    margin: 0.2em 12px 0.2em 12px;
}

div#path p
{
    margin: 0;
}

div#path p a
{
    text-decoration: none;
}


/* COLUMNS */

div#columns
{
    height: 100%; /* Needs to be set to avoid bug in IE 5.5 */
}


/* MENUES */

div#leftmenu ul, div#rightmenu ul
{
    margin-left: 6px;
}

div#leftmenu
{
    float: left;
    width: 13em;
}

div#leftmenu-design li.menu-level-0
{ 
    text-decoration: none;
    border-top: 1px solid;
    padding: 4px 0 2px 10px;
    list-style-type: none;
}

div#leftmenu-design li.menu-level-0 a
{ 
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

div#leftmenu-design li.menu-level-1
{ 
    text-decoration: none;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    list-style-type: none;
}

div#leftmenu-design li.menu-level-1 a
{ 
    text-align: center;
    text-decoration: none;
}

div#rightmenu 
{
    float: right;
    width: 15em;
}

div#rightmenu-design
{
    padding-right: 10px;
}

div#maincontent
{
}

div.maincontent-bothmenus
{ 
    margin-left: 8em;
    margin-right: 16em;
    height: 1%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div.maincontent-noleftmenu
{ 
    margin-left: 10px;
    margin-right: 16em;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div.maincontent-norightmenu
{ 
    margin-left: 14em;
    margin-right: 10px;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div.maincontent-nomenus
{ 
    margin-left: 10px;
    margin-right: 10px;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div#fix /* This style breaks the unwanted connection between the content of the maincontent box and the menues on the left and right in some browsers */
{
    float: left;
    width: 100%;
}


/* NAVIGATORS */

div.content-navigator
{
    display: block;
    clear: both;
}

div.content-navigator div
{
    display: inline;
    text-align: center;
}

div.content-navigator div.content-navigator-separator, div.content-navigator div.content-navigator-separator-disabled
{
    padding-left: 4px;
    padding-right: 4px;
}

div.content-navigator div.content-navigator-arrow
{
    font-size: 150%;
}


/* TOOLBOXES */

div.toolbox
{ 
    width: 100%;
    margin-bottom: 8px;
    margin-top: 8px;
}

div.toolbox-design
{ 
    padding: 0px;
}

div.toolbox-design h2
{ 
    font-size: 1em;
    margin-top: 0px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

div.toolbox-design div.toolbox-content
{ 
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 10px;
}

div.toolbox-design input.searchtext, div.toolbox-design input.textinput
{
    height: 18px;
    width: 120px;
    border: 1px solid;
}

div.toolbox-design label
{
    font-weight: normal;
    margin-bottom: 0;
    padding: 6px 0 0 0;
}

div.toolbox-design form
{
    vertical-align: bottom;
}

div.toolbox-design div.info-text p
{ 
    font-weight: normal;
}

div.toolbox-design div.attribute-link p
{ 
    font-weight: normal;
    padding: 0 0 0 6px;
    vertical-align: middle;
}

div.toolbox-design div.attribute-link-disabled p
{ 
    font-weight: normal;
    padding: 0 0 0 6px;
    vertical-align: middle;
}


/* TOOL LISTS */

div.toollist
{ 
    width: 100%;
    margin: 8px 0 8px 0;
}

div.toollist-design
{ 
    padding: 0px;
    border: 1px solid;
}

div.toollist-design h2
{ 
    font-size: 1em;
    margin-top: 0px;
    padding: 2px 0 3px 10px;
}

div.toollist-design div.content-view-children
{ 
    padding: 3px 10px 10px 10px;
}

div.toollist-design h3
{ 
    margin: 0;
    text-decoration: underline;
}

div.toollist-design div.class-article div.attribute-short p
{ 
    margin: 0;
}

div.toollist-design div.class-article div.attribute-link p
{ 
    margin-top: 0 0 10px 0;
}

div.toollist-design div.class-article div.attribute-link-disabled p
{ 
    font-weight: normal;
    padding-top: 0 0 0 6px;
    vertical-align: middle;
}


/* FOOTER */

div#footer
{ 
    clear: both;
}

div#footer-design 
{
    padding-top: 10px 0 10px 0;
    text-align: center;
}

div#footer-design address
{
    font-style: normal;
}

div#footer-design a
{
    text-decoration: none;
}


/* GENERAL ELEMENTS */

div#maincontent h1
{ 
    font-size: 1.8em;
    font-weight: bold;
    margin-top: 0.2em;
}

div#maincontent h2
{ 
    font-size: 1.4em;
    font-weight: bold;
}

div#maincontent h3
{ 
    font-size: 1.1em;
    font-weight: bold;
}

div#maincontent h4
{ 
    font-size: 1em;
    font-weight: bold;
}

div#maincontent-design h5
{ 
    font-size: 1em;
    font-weight: bold;
}


/* GENERAL TABLE */

table th
{ 
    background-color: #d9e5f2;
}

/* SUBMIT BUTTONS */

input.defaultbutton
{
    font-weight: bold;
    border: 1px solid;
    margin: 0.5em 0.5em 0 0;
}

input.button
{
    border: 1px solid;
    margin: 0.5em 0.5em 0 0;
}

input.searchbutton
{
    border: 1px solid;
}

input.shopbutton
{
    border: 1px solid;
}

input.searchimage
{
    width: 18px;
    height: 18px;
    background-image: url(../images/button.gif);
    background-repeat: no-repeat;
}

Wednesday 21 September 2005 8:28:19 am

I still have not found a fix to this. What boggles me is that my articles show perfectly in Mozilla/Opera browsers, but not in Internet Explorer...

What to do?

Friday 07 October 2005 3:15:00 am

This is a known rendering problem in Internet Explorer. I've looked at your content and see that you use a lot of paragraphs set in an italic font style, and that can trigger such a situation. Concerning your statement about the problem disappearing when deleting some content I guess you deleted some or all of those paragrahs in the article you tested.

Your mentioned solution do get you around the problem, but also introduces a larger space between the main content and the right side boxes. The best solution is instead to do something like this in the head of pagelayout.tpl:

<!--[if lte IE 6]>
<style type="text/css">
div#fix
{
overflow: hidden;
}
</style>
<![endif]-->

This will also stop other kinds of IE main area 'drop down' which can happen because of wide content. The reason for feeding just to IE is that other browsers don't need it, and performs better without it.

Saturday 07 January 2006 11:12:25 am

That's a good question, anyway:
In ez's pagelayout files (also at ez.no), is see HTML snippets like:

<!-- IE conditional comments; for bug fixes for different IE versions -->
<!--[if IE 5]>     <style type="text/css"> @import url(/extension/ezno2005/design/ezno2005/stylesheets/ie5.css);    </style> <![endif]-->
<!--[if lte IE 6]> <style type="text/css"> @import url(/extension/ezno2005/design/ezno2005/stylesheets/ie6lte.css); </style> <![endif]-->
<!--[if IE 6]>     <style type="text/css"> @import url(/extension/ezno2005/design/ezno2005/stylesheets/ie6.css);    </style> <![endif]-->

For me, these seem to be "just HTML comments". Is there some "special feature" in IE, that understands this [if IE 6]-syntax in HTML comments?

Marco
http://www.hyperroad-design.com

Monday 09 January 2006 2:02:45 pm

I ended up putting the suggested text for pagelayout inside /literal tags.
That seems to have done the trick...

Halvor