Background URL image truncated on smaller menu titles

12 Posts

joel4is Reply #1, 17 years, 11 months ago

I have a menu which is working fine except that I cannot figure out where in my CSS to set a width value so that my tabs image is not cut off on smaller tab labels. If I get a width to take, all it does is push the next tab further out to the right and the image file is still truncated.

I need the whole image to show irregardless of the Label length.

Please help,

thanks,

JF

/*-------------- TAB MENU ON HOME PAGE -------------------*/
#tabmenu {
	position:relative;
        float:left;
        clear:left;
        width:874px;
        }

#tabmenu ul {
	margin:0px; padding:0px;
	position:relative;
	font-family: Verdana, Arial, sans-serif;
        list-style:none;
        
        }

#tabmenu ul li {
	margin:0px; padding:0px;
	display:inline;
	position:relative;
	list-style:none;
	font-size:15px;
	text-transform:uppercase;
        float:left;
                
}
#tabmenu1 ul li a {
	margin-left:0px;
        padding:0px 16px 0px 20px;
	display:inline;
	background: url(/assets/images/site/nav/home_htab.png) no-repeat 0px 0px;
        color:#FFFFFF;
        font-size:15px;
	text-transform:uppercase;
	text-decoration:none;
        width:135px;
        z-index:100;

        
}

#tabmenu ul li a {
	margin-left:0px;
        padding:0px 16px 0px 20px;
	display:inline;
	background: url(/assets/images/site/nav/home_htab.png) no-repeat 0px 0px;
        color:#FFFFFF;
        font-size:15px;
	text-transform:uppercase;
	text-decoration:none;
        width:135px;
        z-index:100;
}

#tabmenu ul li a:hover {
	background: transparent url(/assets/images/site/nav/home_tab_active.png) no-repeat 0px 0px;
        height: 24px;
        width 135px;
        color:#000000;
        font-size:15px;
	text-transform:uppercase;
	text-decoration:none;
}

#tabmenu ul li ul {
	/*display:none;*/
	position:absolute;
	top:0px;
	left:130px;
	
}
#tabmenu ul li ul li {

}
#tabmenu ul li ul li a {
	padding-left:10px;
	padding-right:10px;
	/*border:1px solid #ddd;*/
	background: url(/assets/images/site/nav/orange-rtab-blank.png) no-repeat 0px 0px;
        width:110px;
}
#tabmenu ul li ul li a:hover {
	background: url(/assets/images/site/nav/blank_rtab_on.png) no-repeat 0px 0px;
        width:110px;
}

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 17 years, 11 months ago

You need to set a width for the element that actually has the background image. That could be the <a> tag itself, or something like a <span> or even a <div>.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

241 Posts

bob1000 Reply #3, 17 years, 11 months ago

It’s because you’re using display: inline; for the <a> element and so the width is dictated by the text length. If you use display: block; instead, your widths will take. display: block may cause other problems with your menu though.

BTW, you don’t need to duplicate all the properties in the "a:hover" rule unless you are changing each property, they will be inherited from the "a" rule. Less text = smaller file, quicker download, less editing.

12 Posts

joel4is Reply #4, 17 years, 11 months ago

Thanks so much. I’ve been pulling my hair out over this one. The display:block was the setting I needed.

JF