Forums

ags

Hi,
I've created an expandable button (will expand dynamically based on content), only
problem in that in IE6 background-position doest work.
I know I could just re-write the css+html and create this button in a diff way but really rather use this way.

HTML


<ul class=\"white-btn-menu\">
            <li><a href=\"#\">Business</a></li>
            <li><a href=\"#\">Divorce</a></li>
            <li><a href=\"#\">Wills &amp; Estates</a></li>
            <li><a href=\"#\">Trademark &amp; Copyright</a></li>
</ul>

CSS


ul.white-btn-menu
{
	list-style-type:none;
}
	ul.white-btn-menu li
	{
		
		background-image:url(/images/btn-white-left.png) no-repeat left;
		height:57px;
		float:left;
		padding:0 0 0 8px;
	
	}
	
		ul.white-btn-menu li a
		{
			background:url(/images/btn-white-right.png) no-repeat right;
			font:bold 16px Arial;
			text-decoration:none;
			display:block;
			height:42px;/*57*/
			color:Black;
			padding:15px 15px 0 7px;
		}

Any suggestions?
THANKS

[attachment=1]good-btn.gif[/attachment]
[attachment=0]ie6-btn.gif[/attachment]

TheDoc

Try adding this into your <head>

Robskiwarrior

if your image is a 32bit PNG that is transparent, and you are using a transparency fix, most fixes wont fix the positioning of the background png.

Make sure your png fix, if you have one, has that feature. Unfortunately the one TheDoc has added, although good, does not have this feature for positioning fixing built in...

Do you have a live example - it would be easier to see... :)

ags

thanks.

Found this code fix http://www.dillerdesign.com/experiment/DD_belatedPNG/ which improved the situation
but still not perfect.
[attachment=1]improved-ie6.gif[/attachment]

ass u can see it strches the 2 images insted of having them together + the two "li"'s are sopposed to be floating side by side
like so:
[attachment=0]good-img.gif[/attachment]

still can't make it live.
thanks very much for you help.
any more suggestions?

apostrophe

This is my favourite, and it supports background position http://www.twinhelix.com/css/iepngfix/. Hit the Test Area for the latest version.

ags

sadly it didn't fix my problem.

still looking for solution before I change my html+ css

AshtonSanders

The problem is that When you float a <li> in IE6, sometimes* it doesn't shrink the width of the <li> to be as thin as possible (allowing the other buttons to align next to it); it remains at 100%. When this happens the only real fix I have been able to find is to manually program the width of each button =/

Do me a favor, and try "float: right" and let me know how that goes.
Also try adding "display:block" to the "li" (repetitive I know).

*I have run into the problem before (with teakwarehouse.com's menu) and had to manually edit the widths of each menu item. But I just did my personal website's menu that way and didn't seem to have any problems... I can't see any major difference in the codes, besides the two I mentioned above and the position absolute for the UL. Here's my code:


ul#navbar  {
	position: absolute; 
	right:0; 
	bottom:0; 
	margin:0; 
	padding:0 2px 0 0; 
	background: url('../images/layout/nav-divider.jpg') bottom right no-repeat;
}

ul#navbar li { 
	display:block; 
	float:right; 
	padding-left:2px;
	background: url('../images/layout/nav-divider.jpg') bottom left no-repeat;
}

ul#navbar li a { 
	display:block; 
	padding:23px 23px;
	text-decoration:none;
	font-size: 20px;
	color: #024558;
	background: url('../images/layout/nav-hover.jpg') repeat-x;
	background-position: 0 -80px;
}

I hope that helps...
Ashton Sanders

ags

thanks.

Sadly what I did was add conditional css for IE6, added a width to every li


/* FOR IE6 */
		ul.white-btn-menu li.link1
		{
			_width:97px;
		}

Thanks to all :)

treehouse : what would you like to learn today?

Forums

IE6 background-position issue