CSS - Divs - Transparent Gif In A Div Over An Image.

I cannot post the site, since I am a new user, but I will try to explain the situation. I have several pictures which have 50% opacity. On hover, the picture becomes fully opaque. Additionally, every picture has a semi-transparent caption as an overlapping div. Chrome displays the situation correctly, however IE just cuts off the part of the picture underneath the div. So I am left with pictures that are cut off at the bottom.

The fading is done by jQuery.

Everything described above only happens to JPEGs, PNG-s don't have this problem.

Everything works fine in Chrome, but IE doesn't want to cooperate on this one.

I will try to select some of the relevant code:
The image:
Code:

<img width="150" height="150" src="xxx" class="portfolio-image" onmouseover="$('td#pitem_1').css('filter', 'alpha(opacity=60)');$('td#pitem_1').fadeTo(300, 1); $('#ptext_1').fadeTo(300, 0.8);" onmouseout="$('td#pitem_1').fadeTo(500, 0.5);$('#ptext_1').fadeTo(500, 0 );">

First css attribute is to address an IE bug where first fade doesn't happen.

#pitem_1 is the whole td containing the image and the caption div.
#ptext_1 is the caption.

Here's the CSS. Identifiers should be obvious.
Code:

  table.portfolio td{
    opacity: 0.5;
    filter: alpha(opacity = 50);
    -moz-opacity:0.5;
    background: #FFF;
  }
  img.portfolio-image{
  }
  div.portfolio-caption{
    margin-top: -23px;
    height: 10px;
    background: #000000;
    font-family: Verdana;
    font-size: 10px;
    padding: 5px;
    color: #FFF;
    z-index: 999999;
    opacity: 0;
    filter: alpha(opacity = 0);
    -moz-opacity:0;
  }

I'd appreciate all suggestions and tips.

I know that IE reacts to CSS different than FF or Opera etc. I 2 columns (left & right). When the page loads it shifts the columns to the right & down a few pixels. When you roll your mouse over it they go into place. This only happens in IE.

Also, I have an image that is 45% transparent. I saved it as a png and gif. IE will not display it as transparent. In FF & Opera it does. Then in Opera, the background image does not center. It aligns to the top. I know that they are some hack to fix these issues. I used Google, to try an resolve my issues. I my search terms must not have been correct.

Here is what I am using thus far.
CSS Code:
Original - CSS Code body { background-image: url(images/main-bg.jpg); background-repeat: no-repeat; background-color: #495877; background-position: center; } h3, h4 { font-family: Verdana, Arial, Helevetica, sans-serif; font-stretch: wider; color: #000; } #leftcolumn { float:left; margin-top: 22%; margin-left: 20%; width: 120px; height: 250px; border: 1px solid #FAF0E6; background-image: url(images/fade_bg.png); background-color: transparent; padding: 5px; padding-left: 8px; font-family: Poor Richard;/*Verdana, Arial, Helevetica, sans-serif;*/ font-size: small; font-color: #FFF; } * html #leftcolumn { /*IE only style*/ margin-top: 22%; margin-left: 10%; padding: 0px; padding-left: 0px; margin-right: 0px; } #leftcolumn a { padding: 3px 1px; border: 0px solid white; display: block; width: 100%; text-decoration: none; font-weight: bold; color: #000; } #leftcolumn a:hover { background-color: #cca411; } #rightcolumn { float:left; margin-top: 22%; margin-left: 6%; width: 350px; min-height: 300px; border: 1px solid #FAF0E6; background-image: url(images/fade_bg.png); font-family: Verdana, Arial, Helevetica, sans-serif; font-size: smaller; color: #FFF; padding: 5px; padding-bottom: 8px; } * html #rightcolumn { /*IE only style*/ height: 300px; } .navindent { font-family: Scholar; /*Verdana, Arial, Helevetica, sans-serif; */ font-size: 10px; text-indent: 8px; color: #000;

  

 body {


     background-image: url(images/main-bg.jpg);


     background-repeat: no-repeat;


     background-color: #495877;


     background-position: center;


     


 }


  


 h3, h4 {


     font-family: Verdana, Arial, Helevetica, sans-serif;


     font-stretch: wider;


     color: #000;    


 }


     


 #leftcolumn {


     float:left;


     margin-top: 22%;


     margin-left: 20%;  


     width: 120px;


     height: 250px;


     border: 1px solid #FAF0E6;


     background-image: url(images/fade_bg.png);


     background-color: transparent;


     padding: 5px;


     padding-left: 8px; 


     font-family: Poor Richard;/*Verdana, Arial, Helevetica, sans-serif;*/


     font-size: small;


     font-color: #FFF;


 }


  


 * html #leftcolumn { /*IE only style*/


     margin-top: 22%;


     margin-left: 10%;


     padding:  0px;


     padding-left: 0px;


     margin-right: 0px;


     


 }


  


 #leftcolumn a {


     padding: 3px 1px;


     border: 0px solid white;


     display: block;


     width: 100%;


     text-decoration: none;


     font-weight: bold;


     color: #000;


  


 }


  


 #leftcolumn a:hover {


     background-color: #cca411;


 }


  


 #rightcolumn {


     float:left;


     margin-top: 22%;


     margin-left: 6%;


     width: 350px;


     min-height: 300px;


     border: 1px solid #FAF0E6;


     background-image: url(images/fade_bg.png);


     font-family: Verdana, Arial, Helevetica, sans-serif;


     font-size: smaller;


     color: #FFF;


     padding: 5px;


     padding-bottom: 8px;


     


 }


  


 * html #rightcolumn { /*IE only style*/


     height: 300px;


 }


  


 .navindent {


     font-family: Scholar; /*Verdana, Arial, Helevetica, sans-serif; */


     font-size: 10px;


     text-indent: 8px;


     color: #000; 

Learning CSS has been fun!!
Thank You for any suggestions.

Hi everyone.

developing a page where I use CSS style

#content {
width: 760px;
background-image: url(didyouknow1.png);
background-repeat: no-repeat;
background-color: #cccccc;
height: 300px;
}

Page background is #cccccc.
When I add the div tag

<body>
<div id="content">Content for id "content" Goes Here</div>
</body>

and preview in IE 6 there is a lighter color gray AROUND the image . Have not tested in FF.

IMAGE Attached.


Any suggestions how to make the tranparency really work?

Looks fine in Dreamweaver8.

Thanks
Roman

Hey All!

Hope i didnt scare tooo many people off with the title!

Im new to playing around with transparency and am having trouble with getting the affect i want!

What i want:
1. Page background as a large picture (1280 x 1024) non repeating etc. (The picture is of a grassey field)
2. a semi transparent rounded white box that sits in the middle (dimensions 735x 550)
3. on top of the semi transparent box i want my content.


The reason i want it semi transparent is because i want the main background to come through and be visible through the content. and if the page is resized etc that the semi transparent box can move over the background and show the background whereever it is!

Problems:
1. My first attempt i could get 90% of the look i wanted. I got the semi transparent box floating in the middle of the page and showing the background through perfectly. as soon as i add content the content is also transparent.
i tried adjusting the trnasparency for the content but that didnt work.

e.g.
Code:

<div id="semiTransBox">
   <div id="content">blah blah blah</div>
</div>

note i dont have my actual code in front of me so please try and work with this!

The wording "blah blah blah came out as transparent as its parent semiTransBox. Not what i wanted!

I understand this is something to do with the parent child relationship with transparency so i tried something different for my second attempt:

2. i created the semi Transparent box and then added a second fully transparent div below which was positioned using css to move up 500px to fit over the semi transparent box. using top:-500px; position:relative

e.g.
Code:

<div id="semiTransBox"></div>
<div id="transBox">
   <div id="content">blah blah blah</div>
</div>

The content is not transparent now but there is still a problem

The problem is now because i have created the second div below the first it has caused the browser to add scroll bars to the window and shows white are where the main picture doesnt fill.

is there a way to get rid of the space where the second div used to be?


i really hope that essay made sense!


thanks

http://www.senti.ca/~kgf/programs/pickleball/

So here's the question... how do I make this picture, not transparent? Right now it's at 75% transparency on top of that background which makes it look very faded. Any ideas? I have tried:

Code:

	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;

And placing it inside of a div... sadly this doesn't work.

hi, i have a container div, set at 50% opacity.

i want my content to apear in here, but be 100% opacity.

i thought this would work, but it doesn't... any help?

#transContainer {
background-color: #FFF;
margin-left: auto;
margin-right: auto;
width: 982px;
padding: 7px;
height: 100%;
padding-top: 0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;


}

#mainContainer {
background-color: #ccc;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
width: 968px;
height: 94%;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;

}

hey all, sorry if this is a stupid question but not bin doing css long (as you can prob tell by the code!!)

i have two divs (is that what you call em?) anyway i have two and i want to put a image over them both on the left hand side... is this poss? i guess it would be kinda floating it or something i dont really know...

here is the code for the two divs
Code:

#TitleBar {
	position:absolute;
	top: 0px;
	/*margin: 0px 0px 10px 0px;*/
	padding: 0px 0px 0px 0px;
	padding-left:10px;
	width:100%;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:170px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #A4AA54;
	border-top: 1px #A4AA54 solid;
	border-bottom: 1px #A4AA54 solid;
	border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
	
	background-color:#A4AA54;
	background-image:url(../images/logo/gglogo.JPG);
	background-position: 1% 2px;
	background-repeat: repeat-x;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:170px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}

#MenuBar {
	position:absolute;
	top: 172px;
	left:-3px;
	width:100%;
	padding:0px;
	background-color:#667138;
	border:1px solid #667138;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%;}

as you can prob see i currently have the image in the top like this background-image:url(../images/logo/gglogo.JPG);
but will it being a tall image it would be better across them both...

any help would be appreciated.

Thanks

RF

Is it possible to set a background image to a division and align it?

Hi All

Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE:

http://www.flatsinbraunton.co.uk/ce/



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin Essery Carpets</title>

<style type="text/css">

html {
	font-family:Helvetica,Arial,sans-serif;
}
body {
	font-family:Helvetica,Arial,sans-serif;
	text-align: center;
	background-image:url(images/bg-body.jpg);
	background-repeat:repeat-x;
}

#container {
   position: relative;
 	margin-left: auto;
 	margin-right: auto;
 	width: 800px;
 	text-align: left;
   }


#logo {
	position:absolute;
	left:0px;
	top:78px;
	width:327px;
	height:102px;

}
#headstrap {
	position:absolute;
	left:327px;
	top:78px;
	width:473px;
	height:102px;
}

img {
	border-style: none;
}


</style>




</head>

<body>


<div id="container">
	<div id="logo">
    	<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
	</div>
	<div id="headstrap">
    	<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
	</div>
</div><!--END CONTAINER DIV -->

</body>
</html>

Any help welcome

thanks

Rich

I haven't tried this before, so if I'm way off beat, I'll take directions.
What I'm trying to do is take a psd file and make a webpage from it.
So far, I think I've got the images cut correctly.
I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it.
So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables.
Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help.
Both pairs of files validate.
Here are the links for the:
div based layout and it's css file
AND
table based layout and it's css file
Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to.

I'm feeling a little tortured over this one

This is my code essentially:

<div id="bottom">
<div style="float:left">store hours</div>
<img src="map">
<div style="float:right">contact info</div>
</div>

It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please?

I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image.

Can someone help me fix my code to align this properly?

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
     <div id="navigation" class="menu">
     	<ul id="top-nav">
        	<li class="item4"><a href="#" title="Contact">Contact</a></li>
		<li class="item3"><a href="#" title="About">About</a></li>
		<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
                <li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
       </ul>
     </div>
     <div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
     <div class="clear"></div>
<!-- end #header --></div>
  <div id="mainContent"><h1 class="typeface-js">Main Content </h1>
    <div class="typeface-js">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>
    </div>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>na design inc, new york  ::  all right reserved 2010</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS CODE:

Code:

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
}
.oneColFixCtrHdr #container {
	width: 800px;
	background-image: url(images/bg-stripe.png);
	background-repeat: repeat;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left; 
}
.oneColFixCtrHdr #header { 
	padding: 10px 10px 0 10px;
	background: #000000;
}
.oneColFixCtrHdr #header h1 {
	margin: 0;
	padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
	padding: 0 10px;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background: #000000;
	font-family: "Courier New", Courier, monospace;
	font-style: italic;
	font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
.typeface-js {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	color: #FFFFFF;
}
#logo {
	display: inline;
	float: right;
	text-align: left;
}
#logo a{
	background-attachment: initial;
	background-clip: initial;
	background-color: initial;
	background-image: url(images/logo.png);
	background-origin: initial;
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	display: block;
	height: 118px;
	margin-bottom: 10px;
	text-indent: -9000px;
	width: 296px;
}
.msie #blog-title a {
	margin-bottom: -10px;
	position: relative;
}
#navigation {
	background-image: url(images/bg-nav.png);
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	float: right;
	height: 22px;
	width: 474px;
	margin-top: 75px;
}
#navigation ul {
}
#navigation li {
	float: right;
	height: 22px;
	position: relative;
	list-style: none;
}
#navigation li a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li a:hover {
	background-image: url(images/bg-nav-btn.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
#navigation li.item1 a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn1.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li.item1 a:hover {
	background-image: url(images/bg-nav-btn1.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}

Example of problem
If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg

URL

I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out.

I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title>
</head>

<body>

<div id="content">

<div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div>

<div class="left">

<div id="navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="members/index.htm">Members</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

<div id="leftinfo">

<p>We meet for breakfast every Tuesday,<br /> 
7 - 8:30 AM. <br />
at the Neal House at<br /> 1311 East Hardy St.</p>

</div>

</div>

<div class="right">

<p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings.
</p>

</div>

<div id="footer">
<p>Site built by Robert Greenstreet</p>
</div>

</div>

</body>

</html>

CSS:

Code:

html
{
	width:100%;
}

#logo img
{
	margin:10px 0px 0px 20px;
	width:400px;
	height:100px;
}

img
{
	border:0px;
}

a:link
{
	color:#29497f;
}

a:visited{
	color:#5dd0c0;
}

body
{
	width:650px;
	margin-left:auto;
	margin-right:auto;
	background-color:#29497f;
}

#content
{
	/*height:500px;*/
	width:650px;
    background-image:url('../images/bg1.png');
	background-repeat:repeat-y;
	background-attachment:fixed;
	background-position:center;
	margin-top:-10px;

}

.left
{
	position:absolute;
	left:auto;
	top:120px;
	width:15em;
	margin-left:12px;
	padding-left:0px;
}

.left ul
{
	list-style-type:none;
	margin-left:-33px;
	font-family:sans-serif;

}

#leftinfo
{
	margin-left:10px;
	width:9em;
}

.right
{
	position:absolute;
	left:auto;
	top:120px;
	width:27em;
	margin-left:12em;
	font-family:sans-serif;				
}

.right p
{
	color:#000000;
}

#memberlist ul
{
    margin-left:-40px;
}

#memberlist a:visited{
    color:#6a92d4;
    text-decoration:none;
}

#footer
{
	position:absolute;
	top:400px;
	width:650px;
	margin:0 auto;
}

Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though.

Like I said, no rush. This isn't a paid gig

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.