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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts

    *solved* - IE width not filling container space

    solution:

    Code:
    a.navbutton, a.navbutton:link, a.navbutton:visited {
    	...
    	width: 100% auto;
    	height: 1%;
    	...
    	}
    =====================

    This may look familiar to some. This site looks as it should in FF. But in IE6, the <a> tags in the #nav box are not filling out properly. I made the #sidebar background a nice charming yellow so you can see what I'm talking about. In addition, the #nav and #news boxes are not filling the #sidebar box properly. It looks at first glance like the infamous IE 3 pixel jog, but I've added 'display: inline' to counter that. I'm including only the relevant code in the hope that it's an obvious problem, but if you think it may help to see more than ask and you shall receive.

    Quick summary:
    div#sidebar 150px w/ no border
    div#nav 148px w/ 1px border
    ul w/ no margin or padding
    li w/ no margin or padding
    a.navbuttons, 141px wide w/ 4px left border and 3px left padding = 148px ?
    div#news 148px w/ 1px border


    Site: http://www.bustamelon.com/

    CSS:
    Code:
    #sidebar { 
    	float: right;
    	display: inline;
    	width: 150px;
    	margin: -22px 10px 10px 5px;
    	padding: 0;
    	border: 0; 
    	color: #576C7F;
    	background: yellow;
    	}
    
    #nav, #news {
    	width: 148px;
    	margin: 0;
    	padding: 0;
    	color: #F4F2E9;
    	background: #576C7F;
    	}
    #nav {
    	border: 1px solid #F4F2E9;
    	}
    #nav ul, #nav li {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 148px;
    	}
    
    #news {
    	width: 148px;
    	margin: 12px 0;
    	padding: 0;
    	color: #666;
    	background: #F4F2E9;
    	border: 1px solid #576C7F;
    	}
    #news p {
    	margin: 10px 6px;
    	}
    
    
    a.navbutton, a.navbutton:link, a.navbutton:visited {
    	display: block;
    	width: 141px;
    	margin: 0; 
    	padding: 0;
    	padding-left: 3px;
    	border: 0;
    	border-left: 4px solid #576C7F;
    	color: #CCC5B9;
    	background: #576C7F; 
    	font-size: 1.1em; 
    	font-weight: bold; 
    	text-transform: capitalize;
    	}
    
    a.navbutton:hover {
    	color: #576C7F;
    	background: #F4F2E9;
    	text-decoration: none;
    	border: 0;
    	border-left: 4px solid #CCC5B9;
    	}
    
    a.navbutton#currentbutton {
    	color: #576C7F;
    	background: #CCC5B9;
    	text-decoration: none;
    	border: 0;
    	border-left: 4px solid #F4F2E9;
    	}
    HTML:
    Code:
    	<div id="sidebar">
    		<div id="nav">
    			<ul>
    				<li><a name="Home" title="Home" id="currentbutton" class="navbutton">Home</a></li>
    				<li><a href="/portfolio/" title="Portfolio"  class="navbutton">Portfolio</a></li>
    				<li><a href="/services/" title="Services"  class="navbutton">Services</a></li>
    				<li><a href="/case-studies/" title="Case Studies"  class="navbutton">Case Studies</a></li>
    				<li><a href="/about/" title="About"  class="navbutton">About</a></li>
    				<li><a href="/contact/" title="Contact"  class="navbutton">Contact</a></li>
    			</ul>
    		</div>
    		<div id="news">
    			<h4 class="menuheader">News Flash</h4>
    				<p><strong>March 30, 2006</strong><br/>
    				Bustamelon Industries redesign to launch soon.</p>
    				<p><strong>March 24, 2006</strong><br/>
    				Mergatroid annouces the upcoming launch of 
    				<a href="http://www.elementsinnature.com/">ElementsInNature.com</a>! </p>
    				<p><strong>March 21, 2006</strong><br/>
    				IE7 Beta 2 Released! Web site owners can now begin testing their sites using Internet Explorer 7.</p>
    		</div>
    	</div>
    Last edited by bustamelon; 04-25-2006 at 12:56 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I removed the widths on alot of stuff and got the same in FF and IE

    Code:
    
    #nav, #news {
    	margin: 0;
    	padding: 0;
    	color: #F4F2E9;
    	background: #576C7F;
    	border: 1px solid #F4F2E9;
    	}
    
    #news {
    	margin: 12px 0;
    	padding: 0;
    	color: #666;
    	background: #F4F2E9;
    	border: 1px solid #576C7F;
    	}
    
    
    a.navbutton, a.navbutton:link, a.navbutton:visited {
    	display: block;
    	height: 1%;
    	margin: 0; 
    	padding: 0;
    	padding-left: 3px;
    	border: 0;
    	border-left: 4px solid #576C7F;
    	color: #CCC5B9;
    	background: #576C7F; 
    	font-size: 1.1em; 
    	font-weight: bold; 
    	text-transform: capitalize;
    	}
    
    a.navbutton:hover {
    	color: #576C7F;
    	background: #F4F2E9;
    	text-decoration: none;
    	border-left: 4px solid #CCC5B9;
    	}
    
    a.navbutton#currentbutton {
    	border: 0;
    	padding-left: 3px;
    	color: #576C7F;
    	background: #CCC5B9;
    	text-decoration: none;
    	border-left: 4px solid #F4F2E9;
    	}
    by removing the width lines it fixed itsself up.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great! thanks.... less is more!


  •  

    Posting Permissions

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