1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS "Opacity - Padding - Absolute Positioning"

Discussion in 'CSS' started by gasper000, Jan 26, 2009.

0
  1. #1
    I'm trying to clean & organize my codes in order to make it easier to edit. I started by changing the css from inline to an external file. As it's the first time to use external css, I'm facing some problems. I searched online but still can't solve them. First problem is that I have to use padding in order to be able to display the image. If I remove the padding tags, the image does not show. Second problem occurs only in IE. Well, when I try to use opacity it works fine with Firefox & Opera but it does not have any effect when using IE. Also, the absolute positioning does not work in any browser. I have included the codes below.

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


<html>
<head>

<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>

<div name="imagetest" id="imagetest"></div> 

</body>

</html>
    Code (markup):

    test.css
    body {background-image:
url('image1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;}



#imagetest {

background-image: url(images/image2.gif);
background-repeat: no-repeat;
background-position:center top;
position: relative; 
	top: 50px;
padding-top: 455px;
filter: alpha(opacity=80);
opacity:0.8;
z-index: 9;
}
    Code (markup):
    Note: All these problems occur ONLY WHEN USING EXTERNAL CSS..Everything works smoothly when using inline css.

    Any ideas ?
     
    gasper000, Jan 26, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    'opacity' does not work in IE, only modern browsers.
    There is no such attribute as 'name' for <div>.
    The reason the second image doesn't show unless you add padding is because there is no content.
     
    drhowarddrfine, Jan 26, 2009 IP
  3. gasper000

    gasper000 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Opacity works in IE but inline not in an external css file.
     
    gasper000, Jan 26, 2009 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    'opacity' does NOT work in IE. That's why you are using the proprietary, non-standard 'filter'.
     
    drhowarddrfine, Jan 27, 2009 IP
    gasper000 likes this.
  5. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Opacity does not work in IE. IE's CSS uses filters instead. Also just by looking at your code I can tell that none of it is valid. Use the HTML Validator for your htmland the CSS Validator for your CSS.

    (HTML Validator) http://validator.w3.org
    (CSS Validator) http://jigsaw.w3.org/css-validator/

    If you need more convincing on the IE Opacity issue just visit here, where he says exactly what I said.

    http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/

    ~eric
     
    eric.r, Jan 27, 2009 IP
    gasper000 likes this.
  6. gasper000

    gasper000 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I didn't mean what you got. What I meant is that IE displays the images having the opacity effect after using filter: alpha(opacity=80). I didn't mean opacity works directly in IE. May be I didn't explain it in a good way. Anyway, thank you for your reply. I didn't know "filter" is not standard.
     
    gasper000, Jan 28, 2009 IP
  7. gasper000

    gasper000 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thank you for the links...Very useful.:)
     
    gasper000, Jan 28, 2009 IP
  8. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #8
    Microsoft warned it has dropped 'filter' in IE8. (Microsoft lies: filter will still be present and also with the vendor extension -ms-filter. No one should be using filter for any reason but there you go.)
     
    drhowarddrfine, Jan 28, 2009 IP
  9. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    No one should be using IE at all..

    ~eric
     
    eric.r, Jan 28, 2009 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Doc, is IE8 then going to support CSS opacity?

    <padding> tags? : )

    The div's natural width is 100% because it's a div, and that's what static blocks do. But because you don't have anything IN is, as Doc said, it's collapsing to 0 height (IE should prolly still have a little piece showing anyway because that's IE for you, using font-size on blocks like it shouldn't). It appeared when you added padding because padding is treated by the div kinda like content-- it takes up room inside, anyway.

    Next time you try testing stuff in empty elements like this, give them heights and widths. While it's not something you want to do on real elements with content in them, setting a height is the only practical way to have an empty div show anything like a background.

    Actually, I have an empty div for an opacity trick, and it has a set (min)height for this very reason.
     
    Stomme poes, Jan 30, 2009 IP
  11. darkmessiah

    darkmessiah Peon

    Messages:
    500
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #11
    opacity and the position:fixed are the worse to figure out. It's a shame MS can't fix this crap the right way.
     
    darkmessiah, Jan 30, 2009 IP
  12. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #12
    No it will not.
     
    drhowarddrfine, Jan 30, 2009 IP
  13. gasper000

    gasper000 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thank you everybody for replying. Actually, I was very busy in the last few days with my project...not the css thing but the php side. I will try to fix the css file & try your suggestions until I reach the best results.

    Now I have a different problem which is related to both css & php. I will ask my question here, if nobody replies I will start a new topic. I have designed a template which I think it is good looking & contains some images which are overlapping to give a nice look. The problem is when the user gets to login to his/her account. Whenever he/she logs in, a welcoming message appears saying "Welcome USERNAME". As the site contains many images the welcoming message appears behind those images so it's hardly seen. I thought of trying z-index so I can move the images behind the welcoming text by giving the images negative z-index, but that changes the color of the images which completely destroys the look of the site. I had another idea of giving the welcoming text a positive z-index so it appears in front of the images. That works fine when using html but I don't know how to use it with php. Actually I don't know how to use css with php so I use the following codes to display formatted text with php.

    echo "<div style=\"margin-left: 320px;margin-top: -300px;\"><p><FONT face=Verdana> <font z-index=9> <FONT size=2.5><FONT color=#000000><b>{$_SESSION['USERNAME']}</b></FONT></FONT></FONT></FONT></p></div>"
    Code (markup):
    As you can see, it seems to be very amateur. It doesn't look good & I wanna solve that by learning how to use css with php. By the way, the z-index thing doesn't work. How do you think I may solve this problem. I will appreciate it a lot if you can provide me with links to tutorials that shows & explains how to use css with php. Thank you for your time.
     
    gasper000, Jan 30, 2009 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Hmmm, well, normally you don't have to have css and php ever meet, unless you're using a PHP style switcher.

    Without really seeing the context of what you mean by a welcome image, I can't say much (it rather sounds like a popup like the Javascripted one that appears here when you log out-- Are You Sure You Want To Log Out? in which case, popups are always at the front because they have a stacking context of their own, not connected to the page (as I understand it).

    The <font> tag looks worrying. It is a Bad Thing : ) Another reason why some of us standardistas are against Transitional Doctypes, which allow these sorts of things. If you're not "transitioning" to something, just use Strict and let the validator tell you all the other things you're doing wrong that it's simply not telling you now : )

    An external CSS stylesheet is linked to the HTML document via the <link> tag in the <head>:
    <link rel="stylesheet" type="text/css" href="wherever the file is.css">

    As far as PHP goes, just have your css reference in your head include or whatever (you should have includes not echo-ing everything) and so long as that appears in the <head> all the relevant elements in that HTML document will get styled.
     
    Stomme poes, Jan 30, 2009 IP
  15. gasper000

    gasper000 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Thank you for your fast reply. Actually, you didn't get what I mean. Simply scroll up this page, you will find "Welcome Stomme poes". That's exactly what my site does but here you see "Welcome Stomme poes" clearly..on my site "Welcome Stomme poes" is not clear because it appears behind a picture having opacity of 0.8 which makes "Welcome Stomme poes" hardly seen.
     
    gasper000, Jan 30, 2009 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Since you didn't post any more HTML, I can only assume you've got the opacity (if you're using CSS opacity) on the container itself. Children inherit opacity. The only way (that I know of) to have CSS opacity on a box while the text inside that box is legible is to have the text and the box as siblings, not parent-child. Then the second sibling needs to be pulled up (though that kinda looks like that's what you might be doing since there's a margin-top there).

    The HTML itself is terrible. Whoever taught you to use font tags and wrap divs around p's just because needs to be taken out back for Old Yeller treatment : ) Shame on them.

    Before worrying about PHP, you need to get the HTML correct. Usually one has static HTML first (at least examples of it if the content gets generated like your usernames are), make sure it's valid and pretty and all that, then CSS it, make sure it's valid and pretty again--- and THEN worry about PHP echoing it.
     
    Stomme poes, Feb 3, 2009 IP