Strange Expanding Box Problem

Whenever I add this list item to my html,

<li>http://guitarstorage.com/store/buy_pages/buy_pages/buy_pages/buy_pages/session_del_walnut.asp - Links to the Session Deluxe Walnut Guitar Rack</li>

I get an IE6 expanding box problem when checked for browser compatibility. There is no actual link here, it’s just text.There’s no Anchor tag. Here is what it looks like with the rest of the Html

 <div id="content"><!-- InstanceBeginEditable name="content" -->
          <div id="affilate_prog_div">
            <h1>Our Affiliate Program</h1>
            <p>&nbsp;</p>
            <p><span class="center_bold">Earn Money by Buying and Stocking Nothing</span></p>
            <p><span class="center_bold"> Join our Affiliate Program Today!</span></p>
            <p>&nbsp;</p>
            <p> By joining our Affiliate Program today, you can earn as much as <strong>$34 </strong>on each rack sold through your link to our website. This is one of the highest commissions you will find in the Music Industry. We have sold our Racks all across the world and now you can too. Sell a unique product that will set you apart from your competitors. Earn 10% commission on sales made through a link from your website to us at <a href="http://www.guitarstorage.com/">www.guitarstorage.com.</a> It's as easy as filling out a simple form and setting up the link. This can be an excellent source of additional revenue for you and you don't have to buy or stock anything! </p>
  <ul>
                  <li>10% of the purchase price of all confirmed and approved sales of Guitar Case Storage Racks and Pro-File Wall Mount Guitar Display Racks that are generated from your link </li>
                      <li>Instant notification by email of a sale through your account </li>
                      <li>Password protected webpage to check your sales and update account info </li>
                      <li>Create inks to our Guitar Rack Products pages. </li>
                      <li> If a customer orders within 30 days of the first visit to our site, the order is commissioned to you. This means that if one of your customers clicks on your affiliate link, browses but leaves and then returns up to 30 days later and completes a purchase from our site, you still get your commission.&nbsp;</li>
                      <li>Sales commisions are computed on the last day of each month. Commision checks are issued the following business day. </li>
                      <li>You may use our product information on our web site to better explain the product details. Just publish the buttons or text links that promote these products. </li>
                      <li>You may use any of our images (they must be stored on your hosting server). You may modify to scale the size of any of these images but no other modifications are authorized. </li>
            </ul>                      
            <p> PLEASE NOTE: While our primary focus is to sell our fine Guitar Racks (which we design and manufacture), we do belong to an affiliate program through which we advertise some other (non-rack) products. Any non-rack products are listed on pages other than where our unique racks are sold. Because our primary income source is our Racks, our intention is to have your traffic only purchase Racks, for which you will receive a commission. You will only be able to link to pages that directly sell our unique Racks that we manufacture (see the links below). By advertising our Racks on your site, your customer will be driven only to the rack pages, which means our purpose is to drive them to the rack pages only and have them buy a rack. In no way are we attempting to drive traffic to any other site to which we are associated. Our primary source of income is our Racks and you will be able to gain by offering a high-end product with a very high commission that will not be found elsewhere.
                      
            If you have any questions regarding the affiliate program, please email us <a href="mailto:info@guitarstorage.com">here</a>.</p>
              <p> <a href="Store/affiliate_log_in.asp">Join Our Affiliate Program</a></p>
            <p><br />
            <span class="center_bold">Affiliate Instructions &amp; Downloads</span></p>
            <ul>
                        <li> Register to join our Affiliate Program <a href="Store/affiliate_log_in.asp">here</a> </li>
                      
                        <li>To set up your affilliate link, simply create a link to any of our pages with an .asp extension.</li>
                        <li>For example: to create a link to our Band Room Rack Page ( http://www.guitarstorage.com/Store/buy_pages/bandroom.asp)</li>
                     <li><strong>Directly after &quot;.asp&quot; you will insert &quot;?PARTNER=affiliateID&quot; </strong></li>
                     <li>You create your &quot;affiliateID&quot; when you join the program.</li>
                     <li>The finished link will look like: http://www.guitarstorage.com/Store/buy_pages/bandroom.asp?PARTNER=affiliateID</li>
            </ul>
             The pages you can link to are:                  
 <ul>

 <li>http://guitarstorage.com/store/buy_pages/buy_pages/buy_pages/buy_pages/session_del_walnut.asp - Links to the Session Deluxe Walnut Guitar Rack</li>
 </ul>
          </div>
        <!-- InstanceEndEditable -->        </div>
        <!-- end #content div --> 

However, if I replace that Li with just some Lorem that has more characters, it works fine and validates. That looks like this:

 <div id="content"><!-- InstanceBeginEditable name="content" -->
          <div id="affilate_prog_div">
            <h1>Our Affiliate Program</h1>
            <p>&nbsp;</p>
            <p><span class="center_bold">Earn Money by Buying and Stocking Nothing</span></p>
            <p><span class="center_bold"> Join our Affiliate Program Today!</span></p>
            <p>&nbsp;</p>
            <p> By joining our Affiliate Program today, you can earn as much as <strong>$34 </strong>on each rack sold through your link to our website. This is one of the highest commissions you will find in the Music Industry. We have sold our Racks all across the world and now you can too. Sell a unique product that will set you apart from your competitors. Earn 10% commission on sales made through a link from your website to us at <a href="http://www.guitarstorage.com/">www.guitarstorage.com.</a> It's as easy as filling out a simple form and setting up the link. This can be an excellent source of additional revenue for you and you don't have to buy or stock anything! </p>
  <ul>
                  <li>10% of the purchase price of all confirmed and approved sales of Guitar Case Storage Racks and Pro-File Wall Mount Guitar Display Racks that are generated from your link </li>
                      <li>Instant notification by email of a sale through your account </li>
                      <li>Password protected webpage to check your sales and update account info </li>
                      <li>Create inks to our Guitar Rack Products pages. </li>
                      <li> If a customer orders within 30 days of the first visit to our site, the order is commissioned to you. This means that if one of your customers clicks on your affiliate link, browses but leaves and then returns up to 30 days later and completes a purchase from our site, you still get your commission.&nbsp;</li>
                      <li>Sales commisions are computed on the last day of each month. Commision checks are issued the following business day. </li>
                      <li>You may use our product information on our web site to better explain the product details. Just publish the buttons or text links that promote these products. </li>
                      <li>You may use any of our images (they must be stored on your hosting server). You may modify to scale the size of any of these images but no other modifications are authorized. </li>
            </ul>                      
            <p> PLEASE NOTE: While our primary focus is to sell our fine Guitar Racks (which we design and manufacture), we do belong to an affiliate program through which we advertise some other (non-rack) products. Any non-rack products are listed on pages other than where our unique racks are sold. Because our primary income source is our Racks, our intention is to have your traffic only purchase Racks, for which you will receive a commission. You will only be able to link to pages that directly sell our unique Racks that we manufacture (see the links below). By advertising our Racks on your site, your customer will be driven only to the rack pages, which means our purpose is to drive them to the rack pages only and have them buy a rack. In no way are we attempting to drive traffic to any other site to which we are associated. Our primary source of income is our Racks and you will be able to gain by offering a high-end product with a very high commission that will not be found elsewhere.
                      
            If you have any questions regarding the affiliate program, please email us <a href="mailto:info@guitarstorage.com">here</a>.</p>
              <p> <a href="Store/affiliate_log_in.asp">Join Our Affiliate Program</a></p>
            <p><br />
            <span class="center_bold">Affiliate Instructions &amp; Downloads</span></p>
            <ul>
                        <li> Register to join our Affiliate Program <a href="Store/affiliate_log_in.asp">here</a> </li>
                      
                        <li>To set up your affilliate link, simply create a link to any of our pages with an .asp extension.</li>
                        <li>For example: to create a link to our Band Room Rack Page ( http://www.guitarstorage.com/Store/buy_pages/bandroom.asp)</li>
                     <li><strong>Directly after &quot;.asp&quot; you will insert &quot;?PARTNER=affiliateID&quot; </strong></li>
                     <li>You create your &quot;affiliateID&quot; when you join the program.</li>
                     <li>The finished link will look like: http://www.guitarstorage.com/Store/buy_pages/bandroom.asp?PARTNER=affiliateID</li>
            </ul>
             The pages you can link to are:                  
 <ul>
 <li>lllll;l;ll;lVelit esse cillum dolore excepteur sint occaecat consectetur adipisicing elit. Quis nostrud exercitation in reprehenderit in voluptate duis aute irure dolor. Ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit. Lorem ipsum dolor sit amet, excepteur sint occaecat quis nostrud exercitation. Sunt in culpa mollit anim id est laborum.</li>
 </ul>
          </div>
        <!-- InstanceEndEditable -->        </div>
        <!-- end #content div --> 

What’s going on here??

Here’s the relevant css


#content {
	float: left;
	padding: 5px;
	width: 680px;
	min-height: 550px;
	height: auto;
}
#content a:link {
	color: #000000;
}
#content a:visited {
	color: #000000;
}
#content a:hover {
	color: #DA830C;
	text-decoration: none;
}
#affilate_prog_div {
	padding: 8px 8px 8px 12px;
	font-size: 90%;
}

Hi, just from that snippet alone it is not enough to create a test case. Can you post a link where this is happening? :slight_smile:

Thanks,

Here’s the link http://www.shirtsaboutnothing.com/affiliate_prog2.html

Keep in mind that this does not occur until I put that last li in the code. Also, I have probably 15 other pages on the site where this problem does not arise using the same overall template.

I’m unable to test now but one way to cure the expanding box prob in IE6 is giving the parent element an overflow:hidden and the child position:relative.


* html div {
overflow:hidden;
}
* html p {
position:relative;
}



<div>
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</div

This might or not take care of it

I’ll give those a try but I’m still very curious as to what is going on here.

If I try that, in this case what would I apply the relative position to? I know the containing div.

First of: it’s the containing element, not necessarily a div :slight_smile: You apply it to the elemnt inside the parent. Just like in my answer: the p inside the div

What’s going on is that, if it’s the expanding box problem, IE6 will not honor the dimensions of a box if what’s inside the box exceeds its own dimensions.
The specs says a rigidly sized block box should allow oversize content to protrude or overflow beyond the edges of the sized box. IE6 will simply expand the box to fit whatever is inside.
One common cause of box expansion in IE6 is when you have oversized content such as a long “unbreakable” URL, with no spaces where word wrapping may take place.
IE6 will expand the width of the box to accommodate the unbreakable URL string. Result: float drops et such.

There are a few solutions, one is the solution i posted. Another is giving IE6 word-wrap: break-word. This will not validate so you have use a conditional comment to feed it to IE6. You can then give that rule to the body element and it will give a page wide protection. But only in the cases where the bug is triggered by text. Not if the content is an image.

But as i said: i’m unable to do a text case for the moment, so it’s just a hunch.

thanks

When you get a chance, I’d appreciate.

As I mentioned, it doesn’t appear that any of these things come into play. I’m only adding a short li that has text referencing a hyper link. If I eliminate the text that includes the link reference and replace it with an li that has much longer text (I’ve tested it with 10 paragraphs or more) , its fine. So it should have nothing to do with extensive content that’s extending the box.

I’ll try later but in the mean time: if you read my reply, it could be because of an unbreakable url: text you pit there instead has spaces and will wrap as the url will if it’s to long for IE6. Try to shorten the url and see what happens

Hi, it’s just default margins on elements contributing to the drop :). Control the beast


*{margin:0;padding:0;}

PS-Control the paddings/margins of the dl/dt because right now it’s not looking too hawt :slight_smile:

lol, i should have picked that up from the code (being lazy to read everything nips me in the butt) … shame on me!!

isn’t that reset being debated now as to whether or not its a good idea?

I’ll be honest with you, I don’t know what fixed it. It’s here now:

http://www.shirtsaboutnothing.com/affiliate_prog.html

I did add:

<!--[if IE]>
 <style type="text/css">
  body {word-wrap: break-word;}[U][/U]
 </style>
<![endif]-->

to the head but I think I did that after it started working.

The speed difference between this and other elements is debatable. You won’t notice a big diffference.

The padding:0; isn’t all that great with form elements. You could minimalize Eric Meyers version of a reset

Use whatever elements you need :slight_smile:

Having a reset for padding and margin is always a good idea because otherwise it could create undesired problems. You don’t need a full reset for instance resetting margins and paddings on H elements because you’ll be giving those your proper values anyway down the road…

So the word-wrap did the trick huh? :smiley:

You know that your conditional comment feeds this to all versions of IE? For IE6, change it to this:

<!–[if lte IE 6]>
bla bla
<![endif]–>

That will feed it to IE6 or below

If you’re not sure if it did the trick, just remove it and see what happens lol

Thanks for the tip in the conditional statement. However, I tested it by removing it and it still works so I think I’ll just leave it anyway and forget about it. Maybe it was just dumb luck.

I did choose to reset the margins to “0”. I think I’ll leave the padding. Naturally now that I did that a lot of the margins are screwed up, particularly in the left nav list. I’ll just have to go in there individually and tweak them I think.

Yeah, using the universal selector afterwards will do that lol.

Anyways, glad it’s sorted out.

Now that I’ve had to re-work the left nav, I have some questions regarding what’s going on here. Should I post here or start a new thread?

Thanks

You might start a new thread :slight_smile:

Since the topic is basically the same you could indeed ask here (I haven’t seen if you have created another thread yet)

If it’s a whole new ball game maybe a separate thread would be more usefull so others could look/learn from it…

Hi, along with the sidebar your <ul> is screwed up because you only have *{margin:0;} which means if the browser doesn’t impliment margins to space out the <ul> bullets then it won’t have any. While browsers that use padding will :).

Updating the dt/dl values and setting a margin on the <ul> will fix all issues in IE6 (from what I c an see)

#left_nav dl.nav_list{margin-left:-10px;}
#left_nav dt{padding-left:20px;}
ul{padding:0;margin-left:16px;}