|
CSS - Postion & Transparent Image Issues
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 {
Learning CSS has been fun!! Thank You for any suggestions. Similar TutorialsHi there just wanted to ask a question. I got a table in css and i just want to know what is the command to move an image to the centre of the table. Thank you Ok, I am going to try to describe the best way I can my problem. Hopefully I can be pointed into the right direction. Here is my CSS: div.background { width:850px; height:1100px; background:url(images/Sunrise.png) repeat; border:2px solid black; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 35px; padding-left:15px; padding-right: 6px; /* for IE */ filter:alpha(opacity=45); /* CSS3 standard */ opacity:0.4; } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } I have a div.background box with an image and I want it to have a transparentency or opacity of 45. The text that is in my div.transbox p needs to be just like normal but my problem is is that when I view my page in the browser my text is also has a transparentency of 45. Not sure what is going wrong. Would someone be so kind to point me into the right direction? Thank you, Diana Hi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it. Hi all, Can anybody tell me how I can put a transparent gif in the top right hand corner over an image? I wish I could just do it by making the image a background image and putting the gif over that, but I can't. Cheers. I have divs layering on top of each other, and they have background images (gifs). In Firefox, the transparency looks fine, but in IE the transparent areas are colored in. How can I fix this? thanks. Is it possible to place transparent text on an image? I want to display an image of some text in a fancy typeface, but superimpose text in a plain style, so that it can be copied and pasted; a bit like what you see in some PDF files, where the page image is visiable, the overlying text is not. Or maybe the image can over the text, but the text needs to be copyable? Regards, Ian Tresman Hello I have a background image in my web site which is centered and fixed with no repeat. I would like to make it some what transparent. I know that it can be done by manipulating the image itself, but I need to do it dynamically using CSS. I tried adding the filterpque(alpha=0.5 style=0) attribute to the body but that made all the elements in the body (except for background image) transparent. does anyone know how I can do it? 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. 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 Hey all, so, yet again IE has managed to turn what SHOULD be a simple list into a broken mess. Here's the page. Obviously not a whole lot to it. It forces the li's to the right. According to my calculations, all the math adds up as it should, and it works as it should in other browsers, and validates with a strict doctype. HTML; Code: <body> <div id="wrap"> <!-- OPENS WRAP --> <div id="header"> <!-- OPENS HEADER --> <div id="menu"> <!-- OPENS MENU --> <ul> <li>home</li> <li>profile</li> <li>portfolio</li> <li>resources</li> <li>contact</li> </ul> </div> <!-- CLOSES MENU --> </div> <!-- CLOSES HEADER --> </div> <!-- CLOSES WRAP --> </body> CSS; Code:
html, body {
height:100%;
}
body {
width:100%;
background:white url(images/header_bg.gif) repeat-x;
height:225px;
}
* {
margin:0;
padding:0;
border:0;
font-family:verdana, arial, helvetica, sans-serif;
color:white;
}
* html #wrap {
height:600px;
}
#wrap {
margin:auto;
min-height:600px;
position:relative;
width:700px;
background:white url(images/body_bg.gif) repeat-y;
}
#header {
width:700px;
background:white url(images/header.gif) no-repeat;
height:225px;
}
#menu {
width:650px;
margin:auto;
position:relative;
top:0;
z-index:200;
height:48px;
}
#menu li {
list-style:none;
width:100px;
height:24px;
margin:16px 15px 8px 15px;
float:left;
color:#294768;
font-size:10pt;
text-align:center;
}
any thoughts? thanks I have a Menu thats slides down when a link is clicked. In IE6, when the div slides down, it pushes everything below it, once it's hit the top of that child div. I tried setting my z-index to 9999 for the div that comes down and over the content, and setting the child z-index to 1. But for both of those, it still pushes my #SubPage down. To see what I am talking about, if you can visit: Quidel Univ. use login ID: 2097 Once you get logged in, click on "Events". Once there, hit the "Admin Menu" link on the top-right and you'll see what I'm talking about. This is my menu container code: CSS Code: Original - CSS Code #adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
#adminContainer { width: 261px; float: left; position: relative; z-index: 9999; }
And this is my #SubPage code: CSS Code: Original - CSS Code #SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
#SubPage { float: left; width: 553px; padding: 5px; z-index: 1; }
Been playing with the positioning and z-index, but can't seem to get it to my liking.... and as I typed this, I just thought to myself , I haven't even attempted to edit my iestyles.css sheet. DOH! Going to do that, but I'll leave this up in case someone knows my stupid mistake! TIA! Here is the page the > Enlarge link below the picture doesn't work in FF - but it does in IE. I was wondering if it was because it was an absolute position?? Or is something else going on?? Here is the css: Code:
#productPage .compact a {
text-decoration: underline;
position: absolute;
right: 175px;
top: 200px;
}
Here is the xhtml: Code:
<span class="productImg"><img src="../images/compact.jpg" width="249" height="205" alt="Vitalograph COMPACT spirometer" /></span>
<span class="compact"><a href="../images/compact_large.jpg">>Enlarge</a></span>
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; } Thanks for taking the time to read my question. I have a container that has a background image. My container has rounded corners right top and bottom. This is done by putting subsequent containers above and below the container in question. I want to put text over the background image in the spot that looks like where text would go. My problem I think, has something to do with using <p> to put my text in. It automatically puts a space above and below the <p> area. I don't want this space. What else can I use? I tried <span> but that was no good. I tried setting the height on <span> but it didn't do anything. What I want to get to is my background-image in a container that has rounded corners with text in the "text area" warrenpersowich.com is the site that works right now, but has no background image in the top right container. warrenpersowich.com/IndexNew has the background image in, and I've made the top and bottom containers that have the rounded edges in them red so you can see them. Also note that they seem to function differently in FF and IE.... ya ya I know. If I use height: FF heeds it and IE doesn't. If you check out the css, the container in question is .CBBox4 css I am recoding the site jthensley dot com (The forum wouldn't let me list the site needing assistance) to HTML 5 and CSS. I've redesigned some features, which are basically already in the new layout, at jthensley dot com / 2012alpha The 2 horizontal neon lines and the vertical line are simply repeated outside of the header by the CSS. However, one problem I have is that the vertical line that is repeating becomes unaligned with the header if the browser window is expanded. Is there anyway to have it as a repeating background, set to begin at a certain pixel position, and move to the right to maintain alignment with the header as the page is expanded? Secondly, at the bottom, you have the copyright line, which I plan to use as a repeating background or image, as well, and my picture to the right, standing on top of the copyright line. Idealy, I would like the picture of myself to be in a certain area, and push down as page contents make the page longer, but maintain it's "link" with the footer. Any suggestions on how to achieve that? Thanks for your help! This is quite a refresher/learning experience for me! The CSS I have already written is below. * { margin: 0 auto; padding: 0; } body { font-size: 62.5%; font-family: Helvetica, sans-serif; color: white; background-color: #000000; background-image: url(images/horzneon.png), url(images/horzneon.png), url(images/verneon.png); background-position: 0px 137px, 0px 172px, 250px 0px; background-repeat: repeat-x, repeat-x, repeat-y; } ul#nav { height: 185px; width: 1024px; margin: 0 auto; background: url(images/header.jpg) no-repeat; } height: 185px; width: 1024 px; On my website I have the root folder that contains a folder called images along with others such as a members folder. I created an index.php and a styles.css page inside the members folder. Then I tried to add a background image to the index page via css. The background image never loaded on the web page, however the rest of the css did. Is this an issue with the images being in a different folder? Is there a way to link to the images without copying them into the new folder? Thanks. Well, not exactly an image map, more like links on an image. You'll have to excuse some of my ignorance, I only started with CSS a little over a week ago...so you can imagine. I found this neat little trick and wanted to implement it on my site. I'm undertaking a redesign of our companies old site...which was terrible. I figured it would be a fine time to learn CSS. The idea here is that there are about 50 points on this map that are links to pdf files, we decided that it would be nice to be able to see little thumbnails and some basic info on each point without opening the pdf. The site does this just fine, but unfortunately won't work in anything lower than 1280x1024. I can't just resize the images because then the links will be messed up as they're posisioned by the pixel. I have no idea what to do to get this to work, it may just be a lost cause. If someone tells me to forget it, and it's just not going to work...I can live. It's really just a neat thing I wanted to see work, it's not crucial. Any ideas at all would be great, at the very least I might learn something Oh...here's the site: http://www.sanitaryengineer.co.medina.oh.us/gis/test.html Thanks a million |
|||||||