Member Avatar for gambit_1607

hi

i'm using ie6 and this is my site's code

<div id="content-area"> 
 
            
            <div class="panel-display panel-1col clear-block" id="welcome"> 
  <div class="panel-panel panel-col"> 
    <div><div class="panel-pane pane-custom pane-1" > 
  
  
  
  <div class="pane-content"> 
    <div class="welcome_message"><br /> 
    <h3><img src="sites/all/themes/yghhzen/css/images/helpingpeoplehelpthemselves.png" alt="Helping people help themselves."/></h3><br /> 
    <ul><div class="spacer"></div> 
        <li><a href="/dailynews/all"><strong>Learn</strong> more</a>. <a href="/supports/"><strong>Get</strong> support</a>.</li> 
        <li><a href="/support_group/add"><strong>Create</strong> a group</a>. <a href="/friendsblock/"><strong>Find</strong> friends</a>.</li> 
        <li class="last"><a href="/blogs/date/all"><strong>Share</strong> ideas</a>. <a href="/start"><strong>Make</strong> a difference</a>.<strong style="font-size:21px;">©</strong></li> 
    </ul><br /> 
</div><br /><div class="grid"><div class="grid-m1"></div><a href="/start"><div class="grid-c1"> 
 <div id="front_page_button1"> 
    <br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/getting_started.png" /><br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/register_here.png" /><br /> 
 </div> 
 </div> 
</a> 
<div class="grid-m2"></div> 
<a href="/dailynews/all""> 
 <div class="grid-c2"> 
 <div id="front_page_button1"> 
    <br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/read_news.png" /><br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/find_events.png" /><br /> 
 </div> 
</div> 
</a> 
<div class="grid-m3"></div> 
<a href="/blogs/date/all""> 
 <div class="grid-c3"> 
 <div id="front_page_button1"> 
    <br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_stories.png" /><br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/start_blog.png" /><br /> 
 </div> 
 </div> 
</a> 
<div class="grid-m4"></div> 
<a href=/user/register> 
<div class="grid-c4"> 
 <div id="front_page_button1"> 
    <br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_join.png" /><br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/find_support.png" /><br /> 
 </div> 
 </div> 
</a> 
<div class="grid-m5"></div> 
<a href=/user/register> 
<div class="grid-c5"> 
 <div id="front_page_button1"> 
    <br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_start.png" /><br /> 
    <img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/help_others.png" /><br /> 
 </div> 
 </div> 
</a> 
</div>  </div> 
 
  
  </div> 
</div> 
  </div> 
</div> 
 
        </div>

and the related CSS code

.grid {
    width: 92%;
    margin: -15px auto;
}

.grid-m1 {
  float: left;
  height: 1px;
}

.grid-c1 {
  float: left;
  width: 20%;
  /*border-bottom-style: dotted;
  border-bottom-color: #666;
  border-bottom-width: 1px;*/
  /*padding: 10px;*/
}

.grid-m2 {
  float: left;
  height: 1px;
}

.grid-c2 {
  float: left;
  width: 20%;
  /*border-bottom-style: dotted;
  border-bottom-color: #666;
  border-bottom-width: 1px;*/
  /*padding: 10px;*/
}

.grid-m3 {
  float: left;
  /*width: 2%;*/
  height: 1px;
}

.grid-c3 {
  float: left;
  width: 20%;
  /*padding: 10px;*/
}


.grid-m4 {
  float: left;
  /*width: 2%;*/
  height: 1px;
}

.grid-c4 {
  float: left;
  width: 20%;
  /*padding: 10px;*/
}

.grid-m5 {
  float: left;
  /*width: 2%;*/
  height: 1px;
}

.grid-c5 {
  float: left;
  width: 20%;
  /*padding: 10px;*/
}

when i resize the screen to a smaller width the last div - grid-c5 falls down. and everything else (grid-c1 - grid-c4) stay together in a straight alignment. i want the last div to not fall down and stay in a straight alignment like the rest of the divs

  • 2 Contributors
  • 1 Reply
  • 181 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

is right to check widths and spacing — the symptom (four columns stay, the fifth drops) usually points to either a tiny overflow from rounding/margins or malformed HTML that makes IE6 reflow unpredictably. For the fastest, high‑value checks are: validate the markup (look for stray quotes, unclosed tags and block elements wrapped by anchors), ensure IDs are unique (don’t reuse the same id for repeated buttons), and confirm the document is served in standards mode (correct DOCTYPE). Those problems alone will often make one float wrap to the next line in old IE.

If the markup is valid, apply a couple of defensive CSS fixes that target IE6’s quirks (hasLayout and rounding). A minimal set that preserves your layout is:

.grid {
  margin: 0 auto;        /* remove negative margin that can create overflow */
  overflow: hidden;      /* keeps floated children contained */
  zoom: 1;               /* triggers hasLayout in IE6/7 */
}

.grid-c1, .grid-c2, .grid-c3, .grid-c4, .grid-c5 {
  float: left;
  width: 19.8%;          /* slightly less than 20% to avoid percentage rounding drops */
}

.grid a { display: block; } /* if anchors wrap block elements, make them block-level */

Quick debugging tips: give each column a faint background or 1px border to see actual widths at narrow sizes; temporarily remove images and padding to find what’s pushing the layout; test after fixing any malformed href attributes (extra or missing quotes). If supporting IE6 isn’t mandatory, drop or progressively enhance for modern browsers — it removes a lot of fragile hacks.

Member Avatar for Arkinder

Make sure that the combined widths aren't exceeding their container, then check the margin and padding.

Regards
Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.