...

View Full Version : *solved* - IE width not filling container space



bustamelon
04-24-2006, 07:15 PM
solution:


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. :cool:

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:


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

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

harbingerOTV
04-25-2006, 12:11 AM
I removed the widths on alot of stuff and got the same in FF and IE





#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.

bustamelon
04-25-2006, 12:13 AM
Great! thanks.... less is more!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum