Member Avatar for baby jai

Ok this has become EXTREMLY annoying, im trying to work with some css with a several column used to be table, here is the css

.catleft	{
	width: 18px;
	height: 27px;
	float: left;
	background: url({style_images_url}/Cat-Left.png) no-repeat;
}	

.catbody	{
	height: 27px;
	float: left;
	background: url({style_images_url}/Cat-BG.png) repeat-x;
}	

.catright	{
	width: 17px;
	height: 27px;
	float: left;
	background: url({style_images_url}/Cat-Right.png) no-repeat;
}	

.catrightbg	{
	height: 27px;
	background: url({style_images_url}/Cat-RightBG.png) repeat-x;
	}

.catrightend {
	width: 113px;
	height: 27px;
	float: right;
	background: url({style_images_url}/Cat-RightEnd.png) no-repeat;
}

.catborders {
	border: 1px solid #b0b0b0;
	border-bottom: 0px;
	border-top: 0px;
}

.powerboxbg {
	border: 1px solid #b0b0b0;
	border-bottom: 0px;
	border-top: 0px;
	background: #f5f5f5 url({style_images_url}/powerleft.png) no-repeat left;
	height: 34px;
	padding: 0px;
	margin: 0px;
}

.catbottomleft {
	width: 21px;
	height: 27px;
	float: left;
	background: url({style_images_url}/Cat-BottomLeft.png) no-repeat;
}	

.catbottombg {
	height: 27px;
	width: 100%;
	background: url({style_images_url}/Cat-BottomBg.png) repeat-x;
}	

.catbottomright {
	width: 21px;
	height: 27px;
	float: right;
	background: url({style_images_url}/Cat-BottomRight.png) no-repeat;
}	

.special {
	font-size: 10px;
	float: right;
	font-weight: bold;
}

.powerboxtitle {
	float: left;
	color: #878787;
	font-weight: bold;
}

.wrapper {
	width: 100%;
	float: left;
}

now the catrightbg is SUPPOSED to span 100%, if i set it to that 100% it messes up the whole div, what am i uspposed to do

  • 2 Contributors
  • 3 Replies
  • 71 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

reported that the center/background strip spans correctly in Chrome/Firefox but not in IE, and asked for the HTML. That symptom is almost always a layout/markup issue (floats or the containing block collapsing) or an old-IE parsing/layout quirk. A robust, cross‑browser pattern is to make the container positioned, absolutely place the left/right caps, and let the center fill between them with margins equal to the cap widths. Triggering IE's layout on the container avoids many rendering glitches.

Example markup and CSS (adjust cap widths to your images):

<div class="powerbox">
  <span class="cap-left" aria-hidden="true"></span>
  <span class="fill"></span>
  <span class="cap-right" aria-hidden="true"></span>
  <div class="content">Title and content here</div>
</div>

.powerbox { position: relative; height: 34px; zoom: 1; } /* zoom:1 helps older IE */
.cap-left, .cap-right { position: absolute; top: 0; height: 100%; width: 20px; display: block; }
.cap-left { left: 0; background-image: url(left.png); background-repeat: no-repeat; }
.cap-right { right: 0; background-image: url(right.png); background-repeat: no-repeat; }
.fill { margin: 0 20px; height: 100%; background-image: url(center.png); background-repeat: repeat-x; background-position: center top; }
.content { position: relative; z-index: 1; padding: 0 20px; }

Notes: give the container an explicit height (or make it contain children), set the fill margins to match cap widths, and avoid complex shorthand that older IE sometimes misparses — set background-repeat / background-position separately if needed. For background shorthand details see MDN: background property. For why setting layout (eg. zoom:1) helps in IE see .

Recommended Answers

All 3 Replies

Member Avatar for baby jai

ok i got this to span in chrome and in ff, HOWEVER in IE this doesnt show

.catrightbg	{
	height: 27px;
	display: block;
	background: url({style_images_url}/Cat-RightBG.png) repeat-x 50%;
	}
Member Avatar for baby jai

can i please get some assistance on this

Member Avatar for ko ko

What is your HTML?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.