phillystyle123

asked on 2/25/2009

using opacity attribute with text in ie7

Hi,

I'm using opacity with text in ie7 - getting a jagged edge around the text and cannot use a background color/image in h6 because i'm using a random image load in

#introBoxAll{/*random bg image "INTRODUCTION" box container*/
      float:left;
      width:482px;
      min-height:325px;
      background:url(../../images/random-images/bg_green.jpg) repeat-y left bottom;
}

any tricks to get rid of the jagged edge in the text???

http://collectors.cjehost.com/index.php

#introBoxAll{/*random bg image "INTRODUCTION" box container*/
	float:left;
	width:482px;
	min-height:325px;
	background:url(../../images/random-images/bg_green.jpg) repeat-y left bottom;
}
	#introBoxTitle h6{
		float:left;
		width:100%;
		font:36px Arial, Helvetica, sans-serif;
		text-transform:uppercase;
		color:#999;
		margin:0;
		padding:10px 0 0 10px;
		filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
	}

Open in new window

CSS

Last Comment

phillystyle123

8/22/2022 - Mon

SOLUTION

mreuring

2/26/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

phillystyle123

2/26/2009

ASKER

mreuring - that sounds like a great idea - i can't seem to find anything on the net about how to pull this off - can you give me an example or a link to an example of how this would work?

SOLUTION

mreuring

2/26/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

phillystyle123

2/26/2009

ASKER

that is very cool! i'm pretty sure i can test this from here - but, any suggestions for how to implement this with just one specific div?

#introBoxAll{/*random bg image "INTRODUCTION" box container*/
      float:left;
      width:482px;
      min-height:325px;
      background:url(../../images/random-images/bg_green.jpg) repeat-y left bottom;
}

SOLUTION

mreuring

2/26/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

phillystyle123

2/26/2009

ASKER

I'm not getting this to work - must be mssing something obvious - i've attached my page code

here's how i have the styles in the external style sheet i'm calling:

#introBoxAll{/*random bg image "INTRODUCTION" box container*/
float:left;
width:482px;
min-height:325px;
background:url(../../images/random-images/bg_green.jpg) repeat-y left bottom; /*The default*/
}
.bg_2#introBoxAll{/*random bg image "INTRODUCTION" box container*/
background-image:url(../../images/random-images/bg_blue.jpg) repeat-y left bottom; /*An alternate*/
}

<link href="css/collectors_moment/february_2009.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript1.2">
<!--
        (document.body||document.documentElement).className += " bg_" + (Math.round(Math.random() * 2)); //Random number between 0 and 2, rounded. Sloppy but effective for this example...
//-->
</script>
 
<!---<script language="JavaScript" type="text/javascript" src="js/home.js"></script>-->
 
<!---Random image load for "INTRODUCTION" box-->
 
</head>
<body>
 
<div id="wrap">
	<div id="entirePage">
	   <!---BEGIN INTRO BOX-->
	   <div id="introBoxAll">
			<div id="introBoxTitle"><h6>introduction</h6></div>
			<div id="introBoxText">
							<h1>Thin goodness low-cost well newer big, whiter thirsty shine. Surrender compact enjoy inside worthwhile anti appreciate announcing thick. Odor really thank-you better low-cost a far coming by, citrus. Hurry, best, included pure need, odor, touch squeezable, rich snappy can't, tummy, how stimulates. Seeing, silky cool warm genuine real traditional newest. And appreciate invigorate tired fresh convenient reduced, light gigantic brighter thought effective excites. Lifetime spectacular like reduced takes too, double to can't vibrant. Whiter pop-top, squeezable secret more made lather money-back, double wherever, more dazzling best creamy.				</h1>
							Thin goodness low-cost well newer big, whiter thirsty shine. Surrender compact enjoy inside worthwhile anti appreciate announcing thick. Odor really thank-you better low-cost a far coming by, citrus. Hurry, best, included pure need, odor, touch squeezable, rich snappy can't, tummy, how stimulates. Seeing, silky cool warm genuine real traditional newest. And appreciate invigorate tired fresh convenient reduced, light gigantic brighter thought effective excites. Lifetime spectacular like reduced takes too, double to can't vibrant. Whiter pop-top, squeezable secret more made lather money-back, double wherever, more dazzling best creamy.
							<p />Thin goodness low-cost well newer big, whiter thirsty shine. Surrender compact enjoy inside worthwhile anti appreciate announcing thick. Odor really thank-you better low-cost a far coming by, citrus. Hurry, best, included pure need, odor, touch squeezable, rich snappy can't, tummy, how stimulates. Seeing, silky cool warm genuine real traditional newest. And appreciate invigorate tired fresh convenient reduced, light gigantic brighter thought effective excites. Lifetime spectacular like reduced takes too, double to can't vibrant. Whiter pop-top, squeezable secret more made lather money-back, double wherever, more dazzling best creamy.
			</div>
	</div>
		<!---EOF INTRO BOX-->
	</div>
</div>
</body>
</html>

Open in new window

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

SOLUTION

David S.

2/26/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

phillystyle123

2/26/2009

ASKER

I did not know that!

I'm still not getting the random load though:

http://collectors.cjehost.com/test_index.php

could it be someting having to do with document.body in the js?

#introBoxAll{/*random bg image "INTRODUCTION" box container*/
      float:left;
      width:482px;
      min-height:325px;
      background:url(../../images/random-images/bg_green.jpg) repeat-y left bottom; /*The default*/
}
	.bg_2 #introBoxAll{/*random bg image "INTRODUCTION" box container*/
		background-image:url(../../images/random-images/bg_blue.jpg)  repeat-y left bottom; /*An alternate*/
	}

Open in new window

SOLUTION

David S.

2/26/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

phillystyle123

2/26/2009

ASKER

Thanks Kravimir -

progress! I'm now randomly loading bg_blue.jpg and bg_green.jpg - the others i've added don't seem to be working - any clue as to what i need to do here:

#introBoxAll{/*random bg image "INTRODUCTION" box container*/
      float:left;
      width:482px;
      min-height:325px;
      background:url(../../images/random-images/bg_green.jpg) repeat-y left bottom; /*The default*/
}
	.bg_2 #introBoxAll{/*random bg image "INTRODUCTION" box container*/
		background:url(../../images/random-images/bg_blue.jpg)  repeat-y left bottom; /*An alternate*/
	}
	.bg_3 #introBoxAll{/*random bg image "INTRODUCTION" box container*/
		background:url(../../images/random-images/bg_orange.jpg)  repeat-y left bottom; /*An alternate*/
	}
	bg_4 #introBoxAll{/*random bg image "INTRODUCTION" box container*/
		background:url(../../images/random-images/bg_red.jpg)  repeat-y left bottom; /*An alternate*/
	}