SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange Expanding Box Problem

    Whenever I add this list item to my html,
    Code:
    <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
    Code:
     <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:

    Code:
     <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

    Code:
    #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%;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, just from that snippet alone it is not enough to create a test case. Can you post a link where this is happening?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

    Code HTML4Strict:
    <div>
    <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
    </div

    This might or not take care of it
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by treemike View Post
    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 :-) 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.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's just default margins on elements contributing to the drop . Control the beast
    Code:
    *{margin:0;padding:0;}
    PS-Control the paddings/margins of the dl/dt because right now it's not looking too hawt
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol, i should have picked that up from the code (being lazy to read everything nips me in the butt) ... shame on me!!
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <!--[if IE]>
     <style type="text/css">
      body {word-wrap: break-word;}
     </style>
    <![endif]-->
    to the head but I think I did that after it started working.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    http://meyerweb.com/eric/thoughts/20...eset-reloaded/
    Use whatever elements you need
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by treemike View Post
    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:

    Code:
    <!--[if IE]>
     <style type="text/css">
      body {word-wrap: break-word;}
     </style>
    <![endif]-->
    to the head but I think I did that after it started working.
    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?

    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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, using the universal selector afterwards will do that lol.

    Anyways, glad it's sorted out.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might start a new thread :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by treemike View Post
    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
    Since the topic is basically the same you could indeed ask here (I haven't seen if you have created another thread yet)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's a whole new ball game maybe a separate thread would be more usefull so others could look/learn from it...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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)
    Code:
    #left_nav dl.nav_list{margin-left:-10px;}
    #left_nav dt{padding-left:20px;}
    ul{padding:0;margin-left:16px;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Before I saw your post, I went in a pretty much started from scratch. Someone else had started this for me and I really didn't know why they did a lot of what I did. I don't think I used your suggestion (as I didn't see it until after I had worked on it) but I think everything is working now as far as I can tell but feel free jump in if you think otherwise.

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


    Thanks again

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you don't see anything wrong with it then I won't bother try and looking for something to fix there lol .

    Glad everything is sorted.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •