gasper000 Posted January 26, 2009 Share Posted January 26, 2009 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> 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; } Note: All these problems occur ONLY WHEN USING EXTERNAL CSS..Everything works smoothly when using inline css. Any ideas ? Quote Link to comment Share on other sites More sharing options...
phparray Posted January 29, 2009 Share Posted January 29, 2009 You have not specified a height or width in the css file for #imagetest. Define the height and width to match that of your image. Once you add this it should fix a few of your problems. Now something to think about. Only do this if your image really should be a background image. Background images are typically used for the design of your site. You should not use the background image css property to just display an image that is part of your site's content. Design and content are two different things. If your image should be considered part of the content use the img tag so that you have the benefits of the img alt attribute. Alt contents get indexed by search bots. If your image is part of the design use the css background image method. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 29, 2009 Share Posted January 29, 2009 First, your css file should have NOTHING in it but css elements. Second, to help "clean" or "organize" your css, start learning shorthand for background, margin, padding - and only use "background-image", "padding-top" or "margin-left" when changing the shorthand default. And remember shorthand positions for margins and paddings are:top, right, bottom, left aka (TRiBaL) , eg: margin:5px 0 5px 0; = margin-top:5px and margin-bottom:5px (0px right and 0px left) eg: margin:5px 0; same as above. Image positioning is vertical, then horizontal (by default top left, or 0% 0%) body {background:#FFF url('image1.jpg') no-repeat fixed} Always assume you messed up, first. One typo can seriously ruin your css file. Why are you bothering with position:relative? Do you plan to contain position:absolute elements? ... if so ... don't. Position:absolute should be avoided except by those who know EXACTLY what they are doing and how it SHOULD be used. It is not an efficient or effective layout tool at all in any browser. Learn and use floats for layout. That said, try this: #imagetest { background: url(images/image2.gif) no-repeat 0 50%; margin:0; padding: 455px 0 0 0; opacity:0.8; filter: alpha(opacity=80); } It is possible (probable) that the position:relative top and z-index were throwing the element off. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.