internet explorer 6.0 (ie6) wihtespace unknown bug

8 Posts

numberblack Reply #1, 18 years, 10 months ago

hi,
i have searched the forums, and modx documentation, but i cant find anything about a strange error which is on my website:
There is a whitespace just under the menu, left to sidebar DIV, on two pages of my whole mini-portal:

You can see it only in internet explorer 6.0. in IE 7.0, firefox and other browsers, everything works fine.
here: http://telmer.pl/
and here: http://telmer.pl/informacje/telme-woip2.html

If you dont have internet explorer 6.0 you may see what i mean on the pictures bellow:

The content is lovered, but there is no DIV or <P> or anything in the code. The whitespace on top is on the pages were youtube, or swf is embeded. But not on every pages... Just these two.

I know that IE6 sux, and everything is better, but almoust 50% of people still use it.
I tried to solve this problem for several hours, i checked the code, css, divs, everything. But i didnt find any clue.

Respect for the person who will solve this extremely hard riddle.

modx is amazing and brilliant. So is modx community!

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 18 years, 10 months ago

Set the width on your main content and/or your sidebar to be smaller. I don’t know the order of your content, but I’d suspect that the sidebar column is first in your source, and the "main" content is second (floated left/right). What’s happening is the width of one or the other is too wide and so the main column goes to the first spot it can fit: below the sidebar. It could also be the result of too wide of margins on either/both of those. (Just a guess)

An easy, in-css validating workaround for this:

width: 1000px !important; /*for good browsers*/
width: 997px; /*for ie*/

The reason this works is because IE6 ignores what I call "double rules" and use whatever is last. Standards compliant browsers pay attention to the !important override and use the first one. IE6 is probably exhibiting either its take on the box model or the double margin bug. Or both. You can use the same trick for min-height as well, or any other property for that matter:

height: auto !important;
height: 400px; /* "minimum height" for IE6 */
min-height: 400px; /* IE6 ignores min-height */

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

8 Posts

numberblack Reply #3, 18 years, 10 months ago

Wow, i would never thought to change the width, to repair the height. Well it may be the answer, but i dont know which width should i change. I reduced the "right" and "right-inner" widths about 6px each, but it didnt change anything at all.

Maybe you can see which div is the div-one wink

Here is the template code from manager:

<body id="top">
<div id="wrapper">
  <div id="minHeight"></div>
  <div id="outer">
    <div id="inner">
      <div id="right">
        <div id="right-inner">
          <h1 style="text-indent:-5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
          <div id="sidebar">
            <h2>Newsy:</h2>
            [[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]]
            <div id="recentdocsctnr">
              <h2>Najnowsze:</h2>
              <a name="recentdocs"></a>[[ListIndexer?LIn_root=0]] </div>
            <h2>Licznik odwiedzin:</h2>
            <div>[!counter!]   unikalnych wizyt<BR>od 03.12.2007</div>
            <h2>Partnerzy:</h2>
            <p><a href="http://darmowytelefon.pl" title="Telefonia internetowa">I-PHONE <abbr title="voip">Polska</abbr></a></p>
            <p><a href="http://beup.pl" title="Wypożyczalnia Smartów" rel="external">Car<abbr title="Reklama na samochodach">Ad</abbr></a></p>
            <p><a href="http://www.volkswagen-poznan.pl/" title="Volkswagen Swarzędz">Volkswagen</a></p>
            <p><a href="http://radioidea.pl/" title="Radio Internetowe">Radio Idea</a></p>
          </div>
          <!-- close #sidebar -->
        </div>
        <!-- end right inner-->
      </div>
      <!-- end right -->
      <div id="left">
        <div id="left-inner">
          <div id="content">
            <div class="post">
              <h2>[*longtitle*]</h2>
              [*#content*] </div>
            <!-- close .post (main column content) -->
          </div>
          <!-- close #content -->
        </div>
        <!-- end left-inner -->
      </div>
      <!-- end left -->
    </div>
    <!-- end inner -->
    <div id="clearfooter"></div>
    <div id="header">
      <h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1>
      <div id="search"><!--search_terms--><span id="search-txt">Szukaj</span><a name="searchbox"></a>[!AjaxSearch? ajaxSearch=`1` &AS_landing=`8` &moreResultsPage=`8` &showMoreResults=`1` &addJscript=`0` &extract=`0` &AS_showResults=`0`!]</div>
      <div id="ajaxmenu"> [[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
      <!-- end topmenu -->
    </div>
    <!-- end header -->
    <br style="clear:both;height:0;font-size: 1px" />
    <div id="footer">
      <p> <a href="http://modxcms.com" title="Ajax CMS and PHP Application Framework">Silnik MODx</a>  <a href="http://www.modxhost.com/" title="Template Designed by modXhost.com">Template © 2006
          modXhost.com</a><br />
        MySQL: [^qt^], [^q^] zapytań, PHP: [^p^], łącznie: [^t^], document retrieved
        from [^s^]. </p>
    </div>
    <!-- end footer -->
  </div>
  <!-- end outer div -->
</div>
<!-- end wrapper -->
</body>

For me it is magic, everything looks fine. Changing width to repair top-margin sounds like repairing the bicycle by removing cetchup from the fridge.

I was very suprised for such a fast response. Thank you!

modx is amazing and brilliant. So is modx community!

MODX Staff
12,272 Posts

Ryan Thrash Reply #4, 18 years, 10 months ago

Go grab Firefox and the Firebug extension and start running it on your site using the inspector to figure out which DIV contains the width. Good luck!

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

8 Posts

numberblack Reply #5, 18 years, 10 months ago

It works! I had to reduce the
<div id="right-inner">
width by a half (firstly i tried only several pixels)!
And now everything works fine in IE6.0

)

I used the !important tags as you suggested for firefox and other browsers!

Thank you very much!

and..

RESPECT cool

modx is amazing and brilliant. So is modx community!

MODX Staff
12,272 Posts

Ryan Thrash Reply #6, 18 years, 10 months ago

Glad you were able to quickly sort it out ... congrats.

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me