SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question ie 6 url in anchor tag causes extra 10 pixel padding

    Hi everyone,

    I've run into a strange bug in ie6. I am using a combination of the sliding doors rollovers with a dropdown. I had tested it successfully in all browsers but did not include actual urls and used anchors instead (i.e. href="#4"). When I changed the links to actual URLs I assumed it would look the same which it does in all browsers except ie 6 which has an extra 10 pixel padding on the right.

    Has anyone else come across this? I'm not really sure why this would happen.

    Thanks in advance!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It shouldn't make any difference whether the url is there or not unless its some obscure bug.

    It soulds like a margin, whitespace or "haslayout" issue instead. You will have to post some code or a link so that we can look

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, here is an example implementation excuse the markup its meant to be used with our wysiwyg editor / menu manager application.

    Code:
    <div class="Service"  style="z-index:97">
        <img src="/images/ph_image.jpg" alt="placeholder" width="39" height="39" />
        <h3>This is the name of the section</h3>
    		<div class="ServicesMenu">
    			 <ul>
    			 <li><a href="#" class="chooseService">Choose a Service
    			<!--[if IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    				<ul>
    					<li><a href="/dev_applications.asp">Lorem ipsum dolor sit amet</a></li>
    					<li><a href="/dev_applications.asp">Lorem Ipsum</a></li>
    					<li><a href="#4">Lorem Ipsum</a></li>
    					<li><a href="#2">Pellentesque ut leo eu </a></li>
    					<li><a href="dev_applications.asp">Lorem Ipsum</a></li>
    					<li><a href="#2">Lorem Ipsum</a></li>
    				</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		        </li>
    		</ul>
    	</div>
    </div><!-- end service -->

    the CSS

    Code:
    #ServicesWrapper{
    	position:relative; width:322px;
    }
    
    /*individual service*/
    .Service{
    	float:left; width: 284px; background:url(/images/GreyInset.gif) bottom repeat-x; 
    	padding:8px 0 8px 0; margin-left: 20px; display:inline;position:relative;
    }
    
    
    .Service img{float:left;margin: 0 15px 0 0; padding:2px; background:#FFF;
    	border:#B3B3B3 1px solid;
    }
    
    .Service h3{
    	float:right; width:224px; color:#09508E; font-size:11px;   margin-top:0px; padding-top:0px;
    }
    
    .ServicesMenu{
    	margin:0; padding:0; background-color:#FF0000;
    	float:right; width:224px; 
    }
    
    
    
    
    
    
    /* remove all the bullets, borders and padding from the default list styling */
    .ServicesMenu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    width:224px;
    position:relative;
    }
    
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .ServicesMenu li {
    float:left;
    width:224px;
    }
    
    /* style the links for the top level */
    .ServicesMenu a, .ServicesMenu a:visited {
    display:block;
    font-size:11px;
    text-decoration:none; 
    color:#fff; 
    width:214px;
    height:25px; 
    background:url(/images/bg_greyArrowRight.gif); 
    padding-left:10px; 
    line-height:25px;
    }
    
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .ServicesMenu a, * html .ServicesMenu a:visited {
    width:224px;
    w\idth:214px;
    }
    
    .ServicesMenu ul li {
    position:relative;
    }
    
    
    /* hide the sub level and give them a positon absolute so that they take up no room */
    .ServicesMenu ul ul {
    visibility:hidden;
    position:absolute;
    z-index:999;
    height:0;
    top:25px;
    left:0; 
    width:220px;
    }
    
    
    /* another hack for IE5.5 */
    * html .ServicesMenu ul ul {
    top:25px;
    t\op:25px;
    }
    
    
    .ServicesMenu table {position:absolute; top:0; left:0;}
    
    /* style the second level links */
    .ServicesMenu ul ul a, .ServicesMenu ul ul a:visited {
    	border-top:#6599CB 1px solid;
    	background:#09508E; 
    	color:#FFF; 
    	height:auto; 
    	line-height:1em; 
    	padding:10px 10px; 
    	width:204px;
    }
    
    .ServicesMenu ul ul a:hover{
    	color:#F3F3F3; background-color:#0D61AA;
    }
    
    /* hack for IE5.5 */
    * html .ServicesMenu ul ul a{
    width:224px;
    w\idth:214px;
    }
    
    
    .ServicesMenu .chooseService{
    position:absolute;
    }
    
    /* style the top level hover */
    .ServicesMenu a.chooseService:hover , .ServicesMenu ul ul a.chooseService:hover{
    color:#fff; 
    background:#CCCCCC url(/images/bg_greyArrowRight.gif) 0px -25px no-repeat; 
    
    }
    
    /*firefox*/
    .ServicesMenu :hover > a.chooseService, .ServicesMenu ul ul :hover > a.chooseService {
    color:#fff;
    background:#CCCCCC url(/images/bg_greyArrowRight.gif) 0px -25px no-repeat; 
    }
    
    /* make the second level visible when hover on first level list OR link */
    .ServicesMenu ul li:hover ul,
    .ServicesMenu ul a:hover ul{
    visibility:visible; 
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi, You seem to have the wrong width in here. Shouldn't it be 204px and not 214px?
    Code:
     /* hack for IE5.5 */ * html .ServicesMenu ul ul a{ width:224px; w\idth:204px; }

  5. #5
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why yes it would! Thank you so much for your help. I really appreciate you taking the time to check out my issue / lack of competence


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
  •