Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Frame-like image

    Hello

    I want an absolutely positioned element (div with an image in it) to act as if it were a frame, and stay on that coordinate of the window, not the page

    page in question here: http://freewebs.com/djfrenzi/

    and dont worry guys, I already validated both XHTML and CSS ;D

    thanks alot guys;

    - mrdantownsend

    ------------------------------------------------------------------------

    XHTML here:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>{PwN}deamon's Homepage</title>
    	<style type="text/css">
    		@import url('css/layout.css');
    		@import url('css/text.css');
    	</style>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <!--
    
    			mrdantownsend reserves all rights to the code
    			(xhtml and css) and all format-related images.
    
    -->
    
    <!--[if lt IE 7.]>
    <link rel="stylesheet" href="css/ie.css" />
    <![endif]-->
    
    </head>
    <body>
    <div id="phono">
    </div>
    <div id="wrapper">
    	<div id="head">
    	</div>
    	<div id="nav">
    	</div>
    	<div id="body">
    
    <!-- 
    
    			deamon, all posts and paragraphs must be enveloped 
    			by the appropraite divs, the "top", "mid", and "bot"
    			divs.  These divs create the round shape that each
    			post is in.  Always put the content inside of the 
    			"mid" div.  Always use <p> and <h1> tags to create
    			posts, and never style outside of css!
    
    -->
    
    		<div class="top"></div><div class="mid">
    
    <!-- content goes here -->
    <h1>From the Man Himself</h1>
    <p>This is where you would put an intro paragraph, maybe a little tidbit about yourself, what you do, etc.  Just think of something to introduce yourself, because I can't.</p>
    <!-- end content -->
    
    		</div><div class="bot"></div>
    
    		<div class="top"></div><div class="mid">
    
    <!-- content goes here -->
    <h1>Je suis le DJ</h1>
    <p>This is where you could link to music clips and things such as that.  Maybe even showcase your musical taste by linking to yuor last.fm account.</p>
    <!-- end content -->
    
    		</div><div class="bot"></div>
    
    		<div class="top"></div><div class="mid">
    
    <!-- content goes here -->
    <h1>Halo Madness</h1>
    <p>Link or embed photos/videos of you playing halo, maybe link to your xfire account, etc., etc., etc.</p>
    <!-- end content -->
    
    		</div><div class="bot"></div>
    
    <p class="tiny">Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
    <p class="tiny">Designed by <a href="http://www.mrdantownsend.com/">mrdantownsend</a></p>
    
    	</div>
    	<div id="footer">
    	</div>
    
    </div>
    </body>
    </html>
    CSS here:

    Code:
    * {
    	padding:0px;
    	margin:0px;
    }
    
    body {
    	background-color:#524d22;
    	background-image:url(../images/bg.png);
    	background-repeat:repeat-x;
    	background-attachment:fixed;
    }
    
    #wrapper {
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    	width:500px;
    }
    
    #head {
    	margin-top:30px;
    	width:500px;
    	height:230px;
    	background-image:url(../images/head.png);
    }
    
    #nav {
    	width:500px;
    	height:30px;
    	background-image:url(../images/nav.png);
    }
    
    #body {
    	width:500px;
    	height:auto;
    	background-image:url(../images/body.png);
    }
    
    #footer {
    	width:500px;
    	height:30px;
    	margin-bottom:30px;
    	background-image:url(../images/footer.png);
    }
    
    div.top {
    	width:500px;
    	height:23px;
    	background-image:url(../images/top.png);
    	background-repeat:no-repeat;
    	background-position:center;
    }
    
    div.mid {
    	width:500px;
    	height:auto;
    	background-image:url(../images/mid.png);
    	background-repeat:repeat-y;
    	background-position:center;
    }
    
    div.bot {
    	width:500px;
    	height:23px;
    	background-image:url(../images/bot.png);
    	background-repeat:no-repeat;
    	background-position:center;
    } 
    
    h1, h2, p, blockquote {
    	font-family:verdana;
    }
    
    h1 {
    	font-size:25px;
    	margin-left:70px;
    	margin-right:70px;
    	text-align:center;
    	padding-bottom:7px;
    	color:#fff;
    }
    
    p {
    	font-size:14px;
    	margin-left:70px;
    	margin-right:70px;
    	text-align:justify;
    	text-indent:25px;
    	line-height:1.4;
    	color:#efebc8;
    }
    
    .center {
    	text-indent:0px;
    	text-align:center;
    }
    
    .tiny {
    	text-align:center;
    	text-indent:0px;
    	margin-left:0px;
    	margin-right:0px;
    	font-size:11px;
    }
    
    #phono {
    	position: absolute;
    	top:200px;
    	right:0px;
    	display: block;
    	height: 260px;
    	width: 235px;
    	background-image: url(../images/phono.png);
    	background-repeat:no-repeat;
    }
    
    a {
    	color:#ffef6a;
    }
    
    a:hover {
    	color:#fff;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by mrdantownsend View Post
    and dont worry guys, I already validated both XHTML and CSS ;D
    Well, unfortunately valid code doesn’t mean that it’s also good code. Youcould have a thousand nested tables, and the validator would say it’s valid but still, it would be very bad code. There ain’t no semantics validator yet so I have to go over that with my keen eyes.

    Have you looked at your page without styles yet? It’s lacking a descriptive title. And those empty elements I see in the source code… I understand that rounded corners aren’t the easiest thing in these days but try to keep purely presentational, non-semantic code an exception and use elements that you have anyway.

    OK, now to the actual question: Usually the position: fixed; rule is doing the trick. Only our all favorite browser ain’t playin’ with us… again. And a workaround is kinda laborous as you would have to position the element absolutely and pretend a fixed display by making the container scroll, not the body. Google brings some results: http://www.google.com/search?ie=UTF-...ition+fixed+IE

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts

  • #4
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks for the position:fixed thing, surprised I didnt realize that

    and thanks for the IE6 fixer page garydarling

    just a few questions:

    as for the no title, do you suggest that I put an <h1> in the #head but make it display:none; so it doesn't display for people who can view the style but will display for people who cant?

    however, i don't understand what you were saying about the nested tables, there are no tables in my code at all

    and as for your suggestions about empty containers, Does it really matter? Perhaps you could support with reasons why not to do that.

    thanks so much!

    - mrdantownsend

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by mrdantownsend View Post
    as for the no title, do you suggest that I put an <h1> in the #head but make it display:none; so it doesn't display for people who can view the style but will display for people who cant?
    Something like that. I’d suggest you either position it directly outside the viewport or apply text-indent: -999em; because display: none; makes text disappear for some screen readers as well which would be counterproductive.

    Quote Originally Posted by mrdantownsend View Post
    however, i don't understand what you were saying about the nested tables, there are no tables in my code at all
    That was just an example to explain that valid code != good code. I didn’t say that you have tables, just said that they are valid, too, but at the same time not good for that matter.

    Quote Originally Posted by mrdantownsend View Post
    and as for your suggestions about empty containers, Does it really matter? Perhaps you could support with reasons why not to do that.
    Of course I will.
    The most basic and main purpose of a website is to present information. The information presented usually consists of text and images and is supposed to bring some kind of message across. Now, websites are made of HTML and HTML is an abbreviation of HyperText Markup Language which means that the text you put on a website has to be marked up to give it some meaning. For example the browser doesn’t distinguish between a headline and a regular paragraph of text unless you put <hn> or <p> around it. You have to tell the browser what is what.

    This is the first part about semantic HTML. Then the current practice goes towards separating structure/content (hard information) from style/visual appearance (soft information) which basically means that we avoid to mix things that are solely for presentational purposes with the basic message we wanna bring across (remember, the basic message is text and images that relate to that text/content; everything that’s not the basic message is presentational and needs to be separate).

    That was the second part about separation. Now what you are doing is:
    1. You add empty elements that don’t mark up any content (i.e. don’t give anything a specific meaning) and
    2. You add empty elements whose only purpose is to support the alleged visual appearance (i.e. you (indirectly) mix content and presentation)

    OK, one could argue that divs by themselves are semantically neutral but yet, they have a meaning - dividing the content into (logical) sections, that is (or serve as block-level elements where paragraphs or the like don’t apply). So empty divs have two drawbacks: they have no content to divide, and they don’t divide anything logically.

    In a nutshell: Empty elements have no meaning (remember: basic message comes before presentation) and are therefore semantically useless. Compare it to… uhm… say, you get a beautifully wrapped birthday present and then there’s nothing in it. No meaning. Beautiful but useless. Waste of time, space, and natural resources. Same goes for empty, useless elements: waste of time (writing), space (server) and natural resources (bandwidth).

    I hope I could make my point clear now.

    I should make an article out of that and put it on my website.

    I do see the misery with all those rounded corners and stuff, and I must admit that it took some time to figure out the cleanest way to get those on my portfolio (the link you better not click down there!), and I couldn’t always keep it as clean as I wanted. But in my opinion it’s at least better to nest additional elements instead of just putting empty elements on the page.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by VIPStephan View Post
    Something like that. I’d suggest you either position it directly outside the viewport or apply text-indent: -999em; because display: none; makes text disappear for some screen readers as well which would be counterproductive.
    Personally, I would avoid this method since it fails for visual users when the image is not displayed but CSS is otherwise applied. Using an img element with an alt attribute for the fallback content would seem to be a better solution. Thus, you would have code similar to the following.

    Code:
    <h1><img alt="djfrenzi" width="500" height="230" src="images/head.png"></h1>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Arbitrator View Post
    Personally, I would avoid this method since it fails for visual users when the image is not displayed but CSS is otherwise applied. Using an img element with an alt attribute for the fallback content would seem to be a better solution. Thus, you would have code similar to the following.

    Code:
    <h1><img alt="djfrenzi" width="500" height="230" src="images/head.png"></h1>
    Yeah, I think that we need to acknowledge that images do have their place in the content layer. We should probably not try to move images over in the style sheet (except for presentational images such as shadows, corners etc.). Browsers have their own built-in control for replacing images with their alt attributes. In combination with the browsers built-in control for disabling styles then this gives the user a high degree of control how the page should be presented.

    In your example with the <img> tag the image will of course show up on the unstyled page. If one insists on that the image must not show on the unstyled page, but only the text, then I cannot come up with any good solution. The method using text-indent: -999em was probably an attempt to get just this appearance, but as you say the method fails totally if the background-image doesn't load.

    Here is an attempt using an empty span element which is not too good either. The background image goes within the span element which is absolutely positioned on top of the textual heading. This means that if the background image fails to load one will still see the textual heading.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>CF120855</title>
    		<style type="text/css">
    		h1 {
    			width: 315px;
    			height: 64px;
    			postion: relative;
    		}
    		span {
    			position: absolute;
    			top: 0;
    			left: 0;
    			width: 315px;
    			height: 64px;
    			background: url(http://www.codingforums.com/img/logo.gif);
    		}
    		</style>
    	</head>
    	<body>
    		<h1><span></span>Codingfourms</h1>
    	</body>
    </html>

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Yes, we all probably know that there are numerous CSS image replacement techniques that have been tested and reviewed extensively, and all of them have their avantages and drawbacks. It depends on what kind of audience we wanna address and what we wanna achieve.

  • #9
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Something like that. I’d suggest you either position it directly outside the viewport or apply text-indent: -999em; because display: none; makes text disappear for some screen readers as well which would be counterproductive.
    I think I'll do the display:none thing

    Quote Originally Posted by VIPStephan View Post
    That was just an example to explain that valid code != good code.
    Ha, sorry, I didn't realize!

    Quote Originally Posted by VIPStephan View Post
    Of course I will.
    ..
    Thanks so much, a bit of a long read, but informative.

    I heard of that before, and I try to put it into practice, but I can never figure out how to do rounded corners without divs for top and bottom.

    Thanks so much for your time, I think you should make an article about that

    - mrdantownsend

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by koyama View Post
    If one insists on that the image must not show on the unstyled page, but only the text, then I cannot come up with any good solution.
    You do have a point. However, I think that this would only apply as a necessity if the text is likely to become unreadable when CSS is disabled; a PNG image composed of text with a transparent background might be such a case.

    Quote Originally Posted by koyama View Post
    Here is an attempt using an empty span element which is not too good either. The background image goes within the span element which is absolutely positioned on top of the textual heading. This means that if the background image fails to load one will still see the textual heading.
    I find this interesting. It does prevent the image from displaying when CSS is disabled. However, unlike my example, it now requires that the text have a solid background (otherwise, the text will show through); this may be a disadvantage with regard to flexibility and file size.

    It’s also pretty ugly since it requires an empty element in there. That can be fixed with a little CSS2.1, although Internet Explorer won’t play due to lack of before and after pseudo‐element support. Firefox also won’t play since it uses the CSS2 interpretation of those pseudo‐elements, where use of the position property is not supported.

    Code:
    h1, h1::before { width: 500px; height: 100px; }
    h1 { position: relative; }
    h1::before { content: url("logo_jsgp.png"); position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
    Code that is less optimal allows Firefox to degrade gracefully.

    Code:
    h1, h1::before { width: 500px; height: 100px; }
    h1 { position: relative; }
    h1::before { content: ""; position: absolute; background: url("logo_jsgp.png") no-repeat; }
    I guess that showing a purely CSS method is mostly pointless in light of Internet Explorer’s inadequacy though.

    Quote Originally Posted by VIPStephan View Post
    It depends on what kind of audience we wanna address and what we wanna achieve.
    I agree with the latter part.

    With regard to the former part, if you want to put visual users first, you wouldn’t use that technique. The only reason that I can see to use it is if you want to use both transparency and insist that the image not show up when CSS is disabled (neither seem to be required here); otherwise, that technique is disadvantageous compared to the one that I proposed (in the previous post, not this one). koyama’s technique also works better than the one proposed in your previous post, although it’s uglier IMO.

    It seems that I overlooked an advantage of using an img element too; in Firefox, you can select the image and copy the replacement text. If the text is the same as that of the image, this means that you can effectively copy and paste the text seen in the image.
    Last edited by Arbitrator; 08-09-2007 at 03:26 PM. Reason: Both sets of code had the unnecessary [icode]z-index: 1[/icode] removed.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    I do agree with all of your points and I’ve looked at and pondered about all of the methods compared at mezzoblue. Another disadvantage of using an HTML image could be the size in small screen devices. While plain text would be resized and wrapped where necessary an image has a default size. Could be resized, too, but I wouldn’t count on it.

    Anyway, don’t see this as general disagreement. I’m just contributing another point. I’ve used an image for the title/logo on the Mahanaim website, for example, and the advantage is that it will also be printed in IE (where background images are disabled by default) and I’m using the image-over-text method on my current project. As I said: which way to go depends on different factors.

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by VIPStephan View Post
    I do agree with all of your points and I’ve looked at and pondered about all of the methods compared at mezzoblue.
    Thanks for sharing that article which seems to be a good review of the proposed image replacement techniques through time. After looking through those proposals I learned that the technique that I outlined in my previous post is called the Gilder-Levin method.

    Out of the 10 methods discussed in that article only two of them satisfy that text is seen when the image fails to load. The first one is the Gilder-Levin method and the second one is called the Shea Enhancement which is actually the same as the Gilder-Levin method, but with the enhancement that a title attribute is added to the header element so that a tool tip is available on mouseover. So, in that article, in my opinion, there is really only one candidate for image replacement. As has already been said, on the down-side, the method requires extra markup.
    Quote Originally Posted by Arbitrator View Post
    That can be fixed with a little CSS2.1, although Internet Explorer won’t play due to lack of before and after pseudo‐element support.
    Brilliant! I didn't have the imagination to come up with the idea of using the ::before pseudo element. After some searching it appears that after the article at mezzoblue was written, mention has been made by Nash [1] about using the ::before pseudo element for the purpose of image replacement. But I find that his method may have short-comings in Opera 9 and Safari 3 (beta).

    [1] http://www.unintentionallyblank.co.u...etting-closer/

    The proposed code (for compliant browsers) by Nash is this:
    Code:
    <h1 id="replace">Unintentionally Blank</h1>
    
    #replace:before {
    content:url(header.gif);
    display:block;
    }
    #replace {
    padding:0;
    margin:0;
    height:104px;
    overflow:hidden;
    }
    Quote Originally Posted by Arbitrator View Post
    Code:
    h1, h1::before { width: 500px; height: 100px; }
    h1 { position: relative; }
    h1::before { content: url("logo_jsgp.png"); position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; }
    As can be seen, this is quite similar to the Nash method, but Nash does not use absolute positioning for h1::before and does not set a width and height either for h1::before.
    Quote Originally Posted by Arbitrator View Post
    However, unlike my example, it now requires that the text have a solid background (otherwise, the text will show through); this may be a disadvantage with regard to flexibility and file size.
    Good point. The Nash method avoids the transparency problem because the image as inserted using content: url(…) pushes down the text in the HTML document. When overflow: hidden together with a fixed height is set for the h1 element then the text that is pushed outside is not seen.

    Quote Originally Posted by Arbitrator View Post
    Firefox also won’t play since it uses the CSS2 interpretation of those pseudo‐elements, where use of the position property is not supported.
    I see what you mean. I was not aware of Firefox's lacking support. As for the Nash method, the position property is not used so one doesn't run into trouble with that method.

    Now the Nash method seemed promising and worked fine in Firefox 2. But then I tried the technique and viewed the page in Opera 9 and Safari 3 (beta). Check out Example 1 on this demo page.

    When the image fails to load (case (b) in Example 1) via content: url(…) then Opera 9 decides to paste the word “Image” (occupying space) where the image should have been. Similarly, Safari 3 (beta) decides to paste a “question mark image”. Although the intention of the browser vendors may be good then this is ruining the Nash method in those browsers. If this discrepancy cannot be solved in those browsers, then, for me, this may be reason enough to discard the technique.

    Quote Originally Posted by Arbitrator View Post
    Code that is less optimal allows Firefox to degrade gracefully.
    Code:
    h1, h1::before { width: 500px; height: 100px; }
    h1 { position: relative; }
    h1::before { content: ""; position: absolute; z-index: 1; background: url("logo_jsgp.png") no-repeat; }
    This looks promising. Example 2 shows this technique. Although you say that this code is less optimal than the previous snippet, then using a background image solves for the unwanted stuff added by Opera 9 and Safari 3 (beta) when the image does not load. No unwanted stuff is added in those browsers when a background image does not load contrary to when the image is does not load via content: url(…). On the other hand no image shows up in Firefox 2; I'm not sure if you were missing something in your code?

    As you say, we are here facing Firefox 2 not supporting the position property for the ::before pseudo element. Also, the transparency problem arises again with text showing through the transparent parts of an image. Example 3 on my demo page demonstrates the transparency problem.

    To partially solve for Firefox 2 I needed to add display: block in your code for the image to show up at all in that browser. Otherwise the width and height for the ::before pseudo element were ignored. (I guess that the ::before element is inline by default). Unfortunately, this means that nothing is seen in Firefox 2 when the image fails to load because the text is pushed down by the ::before element which has a width and height regardless of the image failing to load or not. When Firefox hopefully starts to correctly support the ::before element then everything should be fine.

    Based on everything collected here, Example 4 is intended to be the candidate for the “best image replacement technique” for non-transparent images. It is based on the modified Example 2 with that added display: block for the ::before pseudo element. Also, the Gilder-Levin method has been used through conditional comments for IE6/7 to work flawlessly. Altogether, the only problem is with Firefox 2 when the image fails to load. Here no replacement text is seen. But Opera 9 and Safari 3 (beta) seem to work flawlessly.

    Live Example 1-2-3-4

    For archival purposes, here is the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>CF120855</title>
    		<style type="text/css">
    			body {
    				background: wheat;
    				font-family: sans-serif;
    			}
    			h2 {
    				border-top: 2px solid black;
    			}
    
    			/* example 1 */
    			#ex1 h1 {
    				width: 315px;
    				height: 64px;
    				overflow: hidden;
    			}
    			#ex1 h1::before {
    				display: block;
    				content: url(logo.gif);
    			}
    			#ex1 h1.noimg::before {
    				content: url(b-a-d-u-r-l);
    			}
    
    
    			/* example 2 */
    			#ex2 h1 {
    				width: 315px;
    				height: 64px;
    			}
    			#ex2 h1::before {
    				position: absolute;
    				width: 315px;
    				height: 64px;
    				content: "";
    				background-image: url(logo.gif);
    			}
    			#ex2 h1.noimg::before {
    				background-image: url(b-a-d-u-r-l);
    			}
    
    			/* example 3 */
    			#ex3 h1 {
    				width: 315px;
    				height: 64px;
    				overflow: hidden;
    			}
    			#ex3 h1::before {
    				position: absolute;
    				width: 315px;
    				height: 64px;
    				content: "";
    				background-image: url(logo-transparent.gif);
    			}
    			#ex3 h1.noimg::before {
    				background-image: url(b-a-d-u-r-l);
    			}
    		</style>
    		<!--[if !IE]>-->
    		<style type="text/css">
    			/* example 4 */
    			#ex4 h1 {
    				width: 315px;
    				height: 64px;
    				overflow: hidden;
    			}
    			#ex4 h1::before {
    				position: absolute;
    				width: 315px;
    				height: 64px;
    				display: block;
    				content: "";
    				background-image: url(logo.gif);
    			}
    			#ex4 h1.noimg::before {
    				background-image: url(b-a-d-u-r-l);
    			}
    		</style>
    		<!--<![endif]-->
    		<!--[if IE]>
    		<style type="text/css">
    			/* example 4 */
    			#ex4 h1 {
    				position: relative;
    				width: 315px;
    				height: 64px;
    				}
    			#ex4 span {
    				position: absolute;
    				width: 315px;
    				height: 64px;
    				top: 0;
    				left: 0;
    				background-image: url(logo.gif);
    			}
    			#ex4 span.noimg {
    				background-image: url(b-a-d-u-r-l);
    			}
    		</style>
    		<![endif]-->
    	</head>
    	<body>
    		<h1>Image replacement, various tests.</h1>
    		<h2>Example 1: Using the <code>::before</code> pseudo element together with <code>content: url(logo.gif)</code></h2>
    		<p>Basically, this is the <a href="http://www.unintentionallyblank.co.uk/2006/08/31/image-replacement-getting-closer/">Nash Image Replacement technique</a> but without any tweaks for making it work in IE.</p>
    		<p>Rendering issues:</p>
    		<ul>
    			<li>IE6/7: Does not support the <code>::before</code> pseudo element</li>
    			<li>Firefox 2: OK</li>
    			<li>Opera 9: In case (b) the browser pastes the word “Image” where the image was supposed to be. This causes replacement text to be pushed down.</li>
    			<li>Safari 3 (beta): in case (b) the browser pastes a “question mark image” where the image was supposed to be. This causes replacement text to be pushed down.</li>
    		</ul>
    		<div id="ex1">
    			<h3>case (a): image loads</h3>
    			<h1>Codingforums</h1>
    			<h3>case (b): image fails to load</h3>
    			<h1 class="noimg">Codingforums</h1>
    		</div>
    		
    		<h2>Example 2: Using the <code>::before</code> pseudo element together with <code>background-image: url(logo.gif)</code></h2>
    		<p>Rendering issues:</p>
    		<ul>
    			<li>IE6/7: Does not support the <code>::before</code> pseudo element</li>
    			<li>Firefox 2: Image not being replaced because of lacking support for <code>position: absolute</code> for the <code>::before</code> pseudo element</li>
    			<li>Opera 9: ok</li>
    			<li>Safari 3 (beta): ok</li>
    		</ul>
    		<div id="ex2">
    			<h3>case (a): image loads</h3>
    			<h1>Codingforums</h1>
    			<h3>case (b): image fails to load</h3>
    			<h1 class="noimg">Codingforums</h1>
    		</div>
    		
    		<h2>Example 3: Same as above, but shown with partly transparent background-image</h2>
    		<p>Rendering issues:</p>
    		<ul>
    			<li>IE6/7: Does not support the <code>::before</code> pseudo element</li>
    			<li>Firefox 2: Image not being replaced because of lacking support for <code>position: absolute</code> for the <code>::before</code> pseudo element</li>
    			<li>Opera 9: Displays correctly. Text shows through the partly transparent background image</li>
    			<li>Safari 3 (beta): Displays correctly. Text shows through the partly transparent background image</li>
    		</ul>
    		<div id="ex3">
    			<h3>case (a): image loads</h3>
    			<h1>Codingforums</h1>
    			<h3>case (b): image fails to load</h3>
    			<h1 class="noimg">Codingforums</h1>
    		</div>
    		
    		<h2>Example 4: Best code for “real world” with various tweaks for Firefox and IE6/7</h2>
    		<p>Same as example 2, but with tweaks:</p>
    		<ul>
    			<li><code>display: block</code> specified for the <code>::before</code> pseudo element to partially solve for Firefox 2 not supporting <code>position: absolute</code> for the <code>::before</code> pseudo element.</li>
    			<li>An absolutely positioned <code>span</code> element with a background image is added using IE conditional comments.</li>
    		</ul>
    		<p>Rendering issues:</p>
    		<ul>
    			<li>IE6/7: OK</li>
    			<li>Firefox 2: No text is seen when the image fails to load because of lacking support for <code>position: absolute</code> for the <code>::before</code> element. The problem is that the <code>::before</code> pseudo element pushes the text out</li>
    			<li>Opera 9: OK</li>
    			<li>Safari 3 (beta): OK</li>
    		</ul>
    		<div id="ex4">
    			<h3>case (a): image loads</h3>
    			<h1><!--[if IE]><span></span><![endif]-->Codingforums</h1>
    			<h3>case (b): image fails to load</h3>
    			<h1 class="noimg"><!--[if IE]><span class="noimg"></span><![endif]-->Codingforums</h1>
    		</div>
    		
    	</body>
    </html>

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by koyama View Post
    Now the Nash method seemed promising and worked fine in Firefox 2. But then I tried the technique and viewed the page in Opera 9 and Safari 3 (beta). Check out Example 1 on this demo page.

    When the image fails to load (case (b) in Example 1) via content: url(…) then Opera 9 decides to paste the word “Image” (occupying space) where the image should have been. Similarly, Safari 3 (beta) decides to paste a “question mark image”. Although the intention of the browser vendors may be good then this is ruining the Nash method in those browsers. If this discrepancy cannot be solved in those browsers, then, for me, this may be reason enough to discard the technique.
    Yes, I encountered this issue with my more “optimal” code and forgot about it. In effect, this means that the two methods, one of each outlined by both Nash and myself, are unacceptable.

    Unfortunately, this behavior is explicitly sanctioned by the CSS2.1 CR which states, “If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.” [1] I find the Opera and Safari behavior to be lame since the image is not content and, thus, there should be no indication that it’s missing; their current behavior lacks utility. Recently, I read a proposal to specifically prohibit the behavior of Opera and Safari in CSS3, but I believe that it was rejected by the CSS3 Working Group since CSS2.1 already allows it; I thought that I saw this on the www-style mailing list [2], but I can’t seem to find the post.

    The CSS3 Generated and Replaced Content Module (WD) may solve this issue though since it allows the content property to be used on any element and allows you to list multiple fall‐backs [3]; this effectively turns the element into a replaced element and is similar to the XHTML 2 proposal to add an src attribute to every element. [4] Below is an example.

    Code:
    h1 { content: url("header.png"), normal; }
    Quote Originally Posted by koyama View Post
    This looks promising. Example 2 shows this technique. Although you say that this code is less optimal than the previous snippet, then using a background image solves for the unwanted stuff added by Opera 9 and Safari 3 (beta) when the image does not load. No unwanted stuff is added in those browsers when a background image does not load contrary to when the image is does not load via content: url(…).
    In retrospect, this is the optimal method when compared to the other that I proposed.

    Quote Originally Posted by koyama View Post
    On the other hand no image shows up in Firefox 2; I'm not sure if you were missing something in your code?
    This was intentional. I explicitly stated that the method “allows Firefox to degrade gracefully”. The text should be shown instead of the image. The method is also forward compatible in that it should also work in the future when Firefox changes its model to that of CSS2.1 or CSS3.

    Quote Originally Posted by koyama View Post
    To partially solve for Firefox 2 I needed to add display: block in your code for the image to show up at all in that browser. Otherwise the width and height for the ::before pseudo element were ignored. (I guess that the ::before element is inline by default). Unfortunately, this means that nothing is seen in Firefox 2 when the image fails to load because the text is pushed down by the ::before element which has a width and height regardless of the image failing to load or not.
    Pseudo‐elements start with the default display value of inline. As just mentioned, I realized this and the behavior was intentional.

    Quote Originally Posted by koyama View Post
    Altogether, the only problem is with Firefox 2 when the image fails to load. Here no replacement text is seen.
    If you simply took the method that Internet Explorer requires and served it to all browsers, things should work in Firefox too. Considering that you have to have that empty span there regardless, you may as well take advantage of it.

    Check out Example 1 on this demo page.
    Just FYI, you forgot to declare the document encoding. It apparently uses Windows-1252, but, since no encoding was specified, I was seeing replacement glyphs as a result of the document being incorrectly displayed under UTF-8.

    1. http://www.w3.org/TR/CSS21/generate.html#content
    2. http://lists.w3.org/Archives/Public/www-style/
    3. http://www.w3.org/TR/css3-content/#content
    4. http://www.w3.org/TR/xhtml2/mod-embe..._embedding_src
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Arbitrator View Post
    Recently, I read a proposal to specifically prohibit the behavior of Opera and Safari in CSS3, but I believe that it was rejected by the CSS3 Working Group since CSS2.1 already allows it; I thought that I saw this on the www-style mailing list [2], but I can’t seem to find the post.
    I did a bit searching on that mailing list. It seems you are right. This may be the thread:

    http://lists.w3.org/Archives/Public/...7Feb/0105.html

    Quote Originally Posted by Arbitrator View Post
    This was intentional. I explicitly stated that the method “allows Firefox to degrade gracefully”. The text should be shown instead of the image. The method is also forward compatible in that it should also work in the future when Firefox changes its model to that of CSS2.1 or CSS3.
    Sorry, I misinterpreted your statement. I thought you meant that the image replacement technique using the absolutely positioned before element would degrade to the more common (broken) image replacement techniques where there would be no fall-back text when the image does not load.

    Quote Originally Posted by Arbitrator View Post
    If you simply took the method that Internet Explorer requires and served it to all browsers, things should work in Firefox too. Considering that you have to have that empty span there regardless, you may as well take advantage of it.
    Yeah, I guess that you are right. I think that if I ever need to use this kind of image replacement with non-transparent images then I will go for the empty span element.

    Quote Originally Posted by Arbitrator View Post
    Just FYI, you forgot to declare the document encoding. It apparently uses Windows-1252, but, since no encoding was specified, I was seeing replacement glyphs as a result of the document being incorrectly displayed under UTF-8.
    Whoops... Thanks for noting that. The new updated link is here: Example 1-2-3-4 (UTF-8)

    I left the old link untouched in case someone is wondering what you mean by replacement glyphs.

    Thanks for the information about what we may look forward to with CSS3. I now feel confident that CSS3 likely will provide the final solution for this kind of image replacement where the image goes within presentational layer. I will definitely check out your other links too.

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by koyama View Post
    I did a bit searching on that mailing list. It seems you are right. This may be the thread:

    http://lists.w3.org/Archives/Public/...7Feb/0105.html
    I believe that’s it; some of the links on that page are marked as visited anyway. I didn’t pay the issue much heed when I originally read it; investigating this issue made it hit home.

    For reference to anyone that reads the linked discussion, the first email in that discussion is at http://lists.w3.org/Archives/Public/...6Dec/0086.html. For some reason, the “In reply to” and “Next in thread” links don’t get added if the previous messages or replies end up falling into the archive for a different month.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •