Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts

    IE6 double margin fix wont work!

    I have been trying and trying to get this piece of code to work but it wont. Not sure whats happeneing but it seems to duble the margins even when i place "display:inline" to it. Have a look if you can. I made it easy and created a html page for you to look at. The site is a local intranet so i cant post a link. Thanks for any help guys!


    The problem lies with the list class <div class="colorBox">
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    
    .contentBox{
    display:block;
    height:1px;
    position:relative;
    background-color:#000;
    overflow:hidden;
    padding:0px;
    margin:0px;
    }
            
    .contentBox a {
    color:#000;
            
    }
            
    .content{
    position:relative;              
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    overflow:hidden;
    font-size:12px;
    color:#fff;
    }
    
    .topPiece {
    overflow:hidden;
    border-bottom:1px solid #fff;
    width:100%;
    }
    
    .colorBox {
    float:left;
    clear:left;
    }
    
    .colorBox ul {
    list-style-type:none;
    }
    
    .colorBox li:first-child {
    margin-left:25px;
    _margin-left:8px;
    
    }
    
    .colorBox li {
    float:left;
    border:1px solid #CCCCCC;
    margin-left:55px;
    height:25px;
    width:25px;
    display:inline;
    }
    
    .colorBox li.color1 {
    background-color:#f2f2f2;
    }
    .colorBox li.color2 {
    background-color:#ededda;
    }
    .colorBox li.color3 {
    background-color:#dfdfce;
    }
    .colorBox li.color4 {
    background-color:#d4d4c3;
    }
    .colorBox li.color5 {
    background-color:#CC9966;
    }
    
    .colorDesc {
    clear:left;
    }
    
    .colorDesc ul {
    list-style-type:none;
    }
    
    .colorDesc li {
    display:inline;
    font-family:"Courier New", Courier, monospace;
    font-size:10px;
    color:#CCCCCC;
    margin-left:5px;
    }
    
    .howToo {
    background-color:#333333;
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    }
    
    
    </style>
    </head>
    
    <body>
    <div>
    	
    	<div class="contentBox" id="box1">
    		<div class="content" id="subBox1">
    			<!-- slide down content goes here -->
               
    			<div class="topPiece">
                
                <div class="colorBox"><!-- This is the problem list that gives me double margins-->
               <ul>
                <li class="color1"></li>
                <li class="color2"></li>
                <li class="color3"></li>
                <li class="color4 addPad"></li>
                <li class="color5 addPad"></li>
                </ul>
                </div>
                
                
                
                
                
                
                <div class="colorDesc">
                <ul>
                <li>Photo Line | </li>
                <li>&nbsp;Standard | </li>
                <li>New Listing | </li>
                <li>Open House | </li>
                <li>New and Open | </li>
                </ul>
                </div>
                
                
                
                </div><!--  End of top piece -->
              
              <div class="howToo">
                
                <b>DPM Ad Updater:</b> &nbsp;First choose an Ad date. Then begin to type the numeric property address - a drop down menu will appear showing all matching properties.  Highlight the desired property and click "Apply".  A new box will appear allowing you to choose various attributes including headings, open house times, agent name, phone, etc.  Fill in all desired attributes and click "Apply".  The completed property will appear at the bottom of the screen - you can edit completed ads by clicking the "E" or delete a completed ad by clicking the "X" next to the desired property.
                
                </div><!--  End of how too -->
              
              
    			
    		</div>
    	</div>
    </div>
    
    
    </body>
    </html>

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    It seams to me that the problem is not about the double margin bug but about the :first-child pseudo-class that is not supported by IE6 - .

    Code:
    .colorBox li:first-child {
    margin-left:25px;
    _margin-left:8px;
    
    }
    
    .colorBox li {
    float:left;
    border:1px solid #CCCCCC;
    margin-left:55px;
    height:25px;
    width:25px;
    display:inline;
    }
    In all browsers that support :first-child you have 25px but on IE6 you have 55px. If you remove the display:inline then you'll see the double margin bug with a 110px margin.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    jcdevelopment (07-21-2008)

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    is there a way around the first child? Is there a hack for first child in ie6?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You have two options. Give a class to the first li and style it that way or look into Dean Edward's IE 7 script. Its JS so it relies on JS to be enabled so it may not be the track you want to take.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    jcdevelopment (07-21-2008)

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Ok, i will add another class to it. Thanks for all of the help guys!

  • #6
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    An other option, to avoid the :first-child would be to use a left and right margin on the li instead only the left one.
    Code:
    .colorBox li {
    float:left;
    border:1px solid #CCCCCC;
    margin-left:25px;
    margin-right:30px;
    height:25px;
    width:25px;
    display:inline;
    }
    There you'll have only 25px before the first li and 55px between both of them. The only thing is that you'll then have 30px after the last one. This might be a problem or not depending of what you wanna do.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    jcdevelopment (07-21-2008)

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    good god you are smart. I would never had thought of that, thank you so much. Thanks also _Aerospace_Eng_ it worked, but more code unfortunately. Thank you both for your help.

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Question

    Quote Originally Posted by Candygirl View Post
    An other option, to avoid the :first-child would be to use a left and right margin on the li instead only the left one.
    Code:
    .colorBox li {
    float:left;
    border:1px solid #CCCCCC;
    margin-left:25px;
    margin-right:30px;
    height:25px;
    width:25px;
    display:inline;
    }
    There you'll have only 25px before the first li and 55px between both of them. The only thing is that you'll then have 30px after the last one. This might be a problem or not depending of what you wanna do.
    Question for the rest of us (or maybe only me). If the width is 25 and you have 25 left and 30 right, how does that all work?

    TIA,
    Jerry
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by jerry62704 View Post
    Question for the rest of us (or maybe only me). If the width is 25 and you have 25 left and 30 right, how does that all work?

    TIA,
    Jerry
    Not sure what you are asking. If its 25 and you have a left and right margin of 25 and 30 respectively you get a total of 80px of horizontal space that is taken up by the element.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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