asked on

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

SOLUTION

mreuring

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

phillystyle123

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

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

phillystyle123

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

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

phillystyle123

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

SOLUTION

David S.

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

phillystyle123

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.

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

phillystyle123

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*/
	}

Open in new window

SOLUTION

David S.

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

mreuring

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.