Re: [WSG] Background image not visible in ie
Hi Lyn, I've tested it in IE7 and it works ok, but just isn't working in IE6 (it loads but is blue at one end rather than white). The reason for this is that you're using a transparent PNG which isn't supported on IE6 and below. There are tons of examples of this (and how to fix it) on this mailing list but I've put a link below which should get it working for you. http://thedesignspace.net/MT2archives/000103.html Cheers, Ben --- e: b...@bendodson.com w: http://bendodson.com/ Feeling social? Connect with me on various social networks at http://social.bendodson.com/ - You might also want to follow me on Twitter at http://twitter.com/bendodson On 29 Apr 2009, at 06:44, Lynette Smith wrote: Good afternoon http://www.westernwebdesign.com.au/zoobridal/index.html IE is not showing the background image on #container. Have only just noticed this. Cannot find any reason for it to be so. I have a very similar site with a background image on #container and it has no problems in IE. Can anyone spot the problem? I would be most grateful. Kind regards Lyn www.westernwebdesign.com.au Affordable web design - Perth *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Background image not visible in ie
The guys over at unit interactive also have a help script to help fix the issues with transparent PNG images in IE6. http://labs.unitinteractive.com/unitpngfix.php Cheers, -Phillip From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Ben Dodson Sent: Wednesday, April 29, 2009 11:18 AM To: wsg@webstandardsgroup.org; Lynette Smith Subject: Re: [WSG] Background image not visible in ie Hi Lyn, I've tested it in IE7 and it works ok, but just isn't working in IE6 (it loads but is blue at one end rather than white). The reason for this is that you're using a transparent PNG which isn't supported on IE6 and below. There are tons of examples of this (and how to fix it) on this mailing list but I've put a link below which should get it working for you. http://thedesignspace.net/MT2archives/000103.html Cheers, Ben --- e: b...@bendodson.com w: http://bendodson.com/ Feeling social? Connect with me on various social networks at http://social.bendodson.com/ - You might also want to follow me on Twitter at http://twitter.com/bendodson On 29 Apr 2009, at 06:44, Lynette Smith wrote: Good afternoon http://www.westernwebdesign.com.au/zoobridal/index.html IE is not showing the background image on #container. Have only just noticed this. Cannot find any reason for it to be so. I have a very similar site with a background image on #container and it has no problems in IE. Can anyone spot the problem? I would be most grateful. Kind regards Lyn www.westernwebdesign.com.au Affordable web design - Perth *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Background image not visible in ie
The guys over at unit interactive also have a help script to help fix the issues with transparent PNG images in IE6. http://labs.unitinteractive.com/unitpngfix.php I highly recommend this script very handy and concise. The one problem I have noticed with it is that it doesn't respect background position on background images - everything goes to (0,0) . If this is ok, it is a great solution and can of course be applied via a conditional comment meaning no superfluous code for 'decent' browsers. James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Background image not visible in ie
It does of course require JavaScript which isn't strictly necessary as you can get the same effect with just CSS (especially for the purposes of the example given initially). With regards to background image positioning, I'm fairly sure there is no way to stop it going to position (0,0) as that's how the Microsoft Filter works. Ben --- e: b...@bendodson.com w: http://bendodson.com/ Feeling social? Connect with me on various social networks at http://social.bendodson.com/ - You might also want to follow me on Twitter at http://twitter.com/bendodson On 29 Apr 2009, at 13:46, James Leslie wrote: The guys over at unit interactive also have a help script to help fix the issues with transparent PNG images in IE6. http://labs.unitinteractive.com/unitpngfix.php I highly recommend this script very handy and concise. The one problem I have noticed with it is that it doesn't respect background position on background images - everything goes to (0,0) . If this is ok, it is a great solution and can of course be applied via a conditional comment meaning no superfluous code for 'decent' browsers. James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Background image not visible in ie
Have you used the CSS: background-position: center center; ? -- Brett P. On Wed, Apr 29, 2009 at 12:48 PM, Ben Dodson b...@bendodson.com wrote: It does of course require JavaScript which isn't strictly necessary as you can get the same effect with just CSS (especially for the purposes of the example given initially). With regards to background image positioning, I'm fairly sure there is no way to stop it going to position (0,0) as that's how the Microsoft Filter works. Ben --- *e:* b...@bendodson.com *w:* http://bendodson.com/ Feeling social? Connect with me on various social networks at http://social.bendodson.com/ - You might also want to follow me on Twitter at http://twitter.com/bendodson On 29 Apr 2009, at 13:46, James Leslie wrote: The guys over at unit interactive also have a help script to help fix the issues with transparent PNG images in IE6. http://labs.unitinteractive.com/unitpngfix.php I highly recommend this script very handy and concise. The one problem I have noticed with it is that it doesn't respect background position on background images - everything goes to (0,0) . If this is ok, it is a great solution and can of course be applied via a conditional comment meaning no superfluous code for 'decent' browsers. James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Background image not visible in ie
The only place I ran into a problem with the background position was using sprites for the menu on this site: http://thebrokenfamilyband.com I needed to use pixels for left and top values so didn't try 'center', maybe it would work. In the end I just used a conditional comment stylesheet to deliver IE6 a text only menu instead. The beauty of the script was not needing to set the filter on numerous elements as it searches for all PNGs and fixes them, but as mentioned it does require JavaScript as a small disadvantage. If you only want 1 or 2 PNGs then the filter is probably lighter. J From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Brett Patterson Sent: 29 April 2009 18:00 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Background image not visible in ie Have you used the CSS: background-position: center center; ? -- Brett P. On Wed, Apr 29, 2009 at 12:48 PM, Ben Dodson b...@bendodson.com wrote: It does of course require JavaScript which isn't strictly necessary as you can get the same effect with just CSS (especially for the purposes of the example given initially). With regards to background image positioning, I'm fairly sure there is no way to stop it going to position (0,0) as that's how the Microsoft Filter works. Ben --- e: b...@bendodson.com w: http://bendodson.com/ Feeling social? Connect with me on various social networks at http://social.bendodson.com/ - You might also want to follow me on Twitter at http://twitter.com/bendodson On 29 Apr 2009, at 13:46, James Leslie wrote: The guys over at unit interactive also have a help script to help fix the issues with transparent PNG images in IE6. http://labs.unitinteractive.com/unitpngfix.php I highly recommend this script very handy and concise. The one problem I have noticed with it is that it doesn't respect background position on background images - everything goes to (0,0) . If this is ok, it is a great solution and can of course be applied via a conditional comment meaning no superfluous code for 'decent' browsers. James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Background image not visible in ie
Thanks Ben, Phillip, James and Brett The guys over at unit interactive also have a help script to help fix the issues with transparent PNG images in IE6. http://labs.unitinteractive.com/unitpngfix.php I thought I would have a go at this one first - with the result that IE7 shows an index page with no CSS evident and no #header image (because it is positioned center center?) or #container background image, and in IE6 just a blank white page. I put the js file in the main file folder (the Lightbox js files are in a js folder, but I also tried putting this file in the js folder, too with no change in result), added script type=text/javascript src=unitpngfix.js in the head and also in the head I put the conditional comment. Also put the clear.gif image in the correct place: images/clear.gif.The js already had this path for the image. So where have I gone wrong? Just working on the computer ATM, have not uploaded any of this. Thanks Kind regards Lyn *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Background-Image not displaying in IE5 IE6
Kristine Cummins wrote:
I have a div container that has a background image (gradation) which is
displaying fine in IE7 Mozilla, but it's not displaying in IE5 IE6.
http://www.cpwrehab.com/test/index.html
Add...
* html #container,
* html #headercontainer {
height: 1%; overflow: visible;
}
...to give old IE something it understands - a 'hasLayout' trigger and a
hint not to hide the overflow. That will fix the problems.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Background-Image not displaying in IE5 IE6
Kristine Cummins wrote:
I have a div container that has a background image (gradation)
which is
displaying fine in IE7 Mozilla, but it's not displaying in IE5
IE6.
http://www.cpwrehab.com/test/index.html
On Sep 25, 2008, at 10:08 PM, Gunlaug Sørtun wrote:
Add...
* html #container,
* html #headercontainer {
height: 1%; overflow: visible;
}
...to give old IE something it understands - a 'hasLayout' trigger
and a hint not to hide the overflow. That will fix the problems.
Clearing your main containing div did the trick for me, but requires
some extra markup. so i'd fly with Gunlaug's solution.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] background image
Would be something to do with the url address in your background image.
Check the path in your browser using your site url with
images/images/lets.gif to see if it appears...
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Alexander Uribe
Sent: Monday, 28 April 2008 12:37 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] background image
I have a problem with a background image.
When viewing the site on a number of browsers, the background image appears
fine.
However, recently the site went up and the background image has dissapeared.
Any ideas?
This is the CSS
body {
background-color: #A816AD;
margin: 0; padding: 0;
background-image: url(images/images/lets.gif);
background-repeat: repeat-y;
width:1100px;
}
Cheers,
_
Find out: SEEK Salary Centre Are you paid what you're worth?
http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Fninemsn%2Eseek%2Ecom%2Eau%2
Fcareer%2Dresources%2Fsalary%2Dcentre%2F%3Ftracking%3Dsk%3Ahet%3Asc%3Anine%3
A0%3Ahot%3Atext_t=764565661_r=OCT07_endtext_salary_m=EXT
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Background image in IE
It's being affected by the float on #nav so you need to clear the content that comes after it correctly. On Fri, 03 Aug 2007 11:21:29 +1000, Lyn Patterson [EMAIL PROTECTED] wrote: Good morning http://www.plecomadness.com/index.html Can someone tell me why my background image on #container in IE7/6 (large pic on right) is not positioned at the very edge of the screen as it is correctly in Fx, Opera and Safari? Thanks! Lyn *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
Stephen Rosman wrote: Maybe you could try: * Adding the background image to the body instead of the div? * Floating the div right? Thank you - I will try that In what way does it mess up Firefox? Causes horizontal scrolling Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
Steven Rosman wrote: In IE a block is, by default, only as wide as the content. If you add width: 100% to it it might help. I already tried that - it messes severely with Fx etc. When I used the IE AIS I noticed that the container didn't reach the edge of the screen which was when I tried Width: 100%. I noticed that in the source code you have an opening div that isn't closed - doesn't seem to be breaking anything though... H - it validates but will check thanks. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
It's being affected by the float on #nav so you need to clear the content that comes after it correctly. I clear #nav but it hasn't made any difference, thanks. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
John Faulds wrote: It's being affected by the float on #nav so you need to clear the content that comes after it correctly. You are quite right - I didn't clear it properly - at least as far as IE is concerned - so I added a .clear after the #nav and this has fixed the positioning - now all I need to do is revise some margins. Thank you! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
* Adding the background image to the body instead of the div? In Fx the image disappears completely. In IE the righthalf of the image is visible but the left half is hidden under #container which is still obviously stopping short of the right hand side of the browser Maybe if the #container didn't have a background colour it wouldn't hide the background image on the body? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
If you add width: 100% to it it might help. I already tried that - it messes severely with Fx etc. When I used the IE AIS I noticed that the container didn't reach the edge of the screen which was when I tried Width: 100%. Maybe you could try: * Adding the background image to the body instead of the div? * Floating the div right? In what way does it mess up Firefox? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
Stephen Rosman wrote: Maybe you could try: * Adding the background image to the body instead of the div? In Fx the image disappears completely. In IE the righthalf of the image is visible but the left half is hidden under #container which is still obviously stopping short of the right hand side of the browser *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
In IE a block is, by default, only as wide as the content. If you add width: 100% to it it might help. I noticed that in the source code you have an opening div that isn't closed - doesn't seem to be breaking anything though... On 8/3/07, Lyn Patterson [EMAIL PROTECTED] wrote: Good morning http://www.plecomadness.com/index.html Can someone tell me why my background image on #container in IE7/6 (large pic on right) is not positioned at the very edge of the screen as it is correctly in Fx, Opera and Safari? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image in IE
Stephen Rosman wrote: Maybe if the #container didn't have a background colour it wouldn't hide the background image on the body? Things only got worse LOL John Faulds was correct originally - I added a different clear method to #nav and now IE matches Fx etc - I just have to revise some margins and it should be OK. Thanks for replies! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image problem
On Fri, 6 Jul 2007 16:46:52 -0400, Dean Matthews wrote: I have a page with 3 divs in a wrapper div, essentially top, middle, bottom. The repeating background for the middle div is showing about 5 pixels below the bottom div (which has it's own background). This is only happening on IE 6 Windows. http://www.madisonFH.com/new ~~ Hi Dean, Try adding background-position: bottom left; to your rule for #bottomBevel. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image problem
On Fri, 6 Jul 2007 16:46:52 -0400, Dean Matthews wrote: I have a page with 3 divs in a wrapper div, essentially top, middle, bottom. The repeating background for the middle div is showing about 5 pixels below the bottom div (which has it's own background). This is only happening on IE 6 Windows. http://www.madisonFH.com/new ~~ Hi Dean, Try adding background-position: bottom left; to your rule for #bottomBevel. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background image problem
On Jul 6, 2007, at 8:23 PM, David Hucklesby wrote: Try adding background-position: bottom left; to your rule for #bottomBevel. David, Thanks so much. You've ended a day of frustration and IE cursing ;-) Dean *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] background image
Most likely it's a bug in IE, try adding position: relative to fix it. On 3/2/07, Ricky Onsman [EMAIL PROTECTED] wrote: Your background doesn't show up in my IE6. Rolf and Paul's comments are both worth checking out. Ricky -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kevin mcmonagle Sent: Friday, 2 March 2007 5:49 AM To: wsg@webstandardsgroup.org Subject: [WSG] background image Hi, Just one more question about this page: http://www.arena7.ie/index2.html When viewing the above page with ie6 pc can you see the diagonal striped bacground pattern? I have ie6 running locally on an old machine thats offline and its not showing up. thanks for all the help -best kvnmcwebn www.mcmonagledesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] background image
Without more info...check the URL of the background image in your CSS? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kevin mcmonagle Sent: Friday, March 02, 2007 7:49 AM To: wsg@webstandardsgroup.org Subject: [WSG] background image Hi, Just one more question about this page: http://www.arena7.ie/index2.html When viewing the above page with ie6 pc can you see the diagonal striped bacground pattern? I have ie6 running locally on an old machine thats offline and its not showing up. thanks for all the help -best kvnmcwebn www.mcmonagledesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] background image
On Mar 1, 2007, at 11:53 AM, Paul Bennett wrote: Without more info...check the URL of the background image in your CSS? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kevin mcmonagle Sent: Friday, March 02, 2007 7:49 AM To: wsg@webstandardsgroup.org Subject: [WSG] background image Hi, Just one more question about this page: http://www.arena7.ie/index2.html When viewing the above page with ie6 pc can you see the diagonal striped bacground pattern? I have ie6 running locally on an old machine thats offline and its not showing up. I don't have windows booted up at the moment, but looking at your css, there's no reason to do that diagonal striped background image as a PNG, in which case you can avoid dealing with AlphaImageLoader. Just use a transparent .GIF and save yourself the IE PNG headache. Rolf *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] background image
Your background doesn't show up in my IE6. Rolf and Paul's comments are both worth checking out. Ricky -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kevin mcmonagle Sent: Friday, 2 March 2007 5:49 AM To: wsg@webstandardsgroup.org Subject: [WSG] background image Hi, Just one more question about this page: http://www.arena7.ie/index2.html When viewing the above page with ie6 pc can you see the diagonal striped bacground pattern? I have ie6 running locally on an old machine thats offline and its not showing up. thanks for all the help -best kvnmcwebn www.mcmonagledesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Background-Image download order
Thanks Terrence Wood, yes the nav items work with images turned off, they have a bg color as well as an image. Jay Gilmore, www.smh.com.au has most of their images in these files -- http://www.smh.com.au/css/2005/img/sprite_section-strap.gif http://www.smh.com.au/css/2005/img/sprite_li.gif Not a bad method. Im not sure it would work for us. but its worth investigating. Thanks for everyones input. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
Todd Baker wrote: We are finding that the background images for our main navigation are downloading last and as such the white text is unreadable untill the background arrives You're assuming the background image will arrive. What happens if someone has images turned off? You should specify a background colour as well. Is there any logic I can apply (ordering CSS etc) that will affect the order the browser requests and downloads background images? Browsers would likely request images in the order that they are required, though there is no guarantee of this. If the markup for the navigation appears last in the markup, then due to incremental rendering, it is likely that the images required to render it will be downloaded near the end. If it's at the top of the markup, then it seems logical that it would be downloaded near the beginning. -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
So you're saying that if images are disabled in the browser you navigation becomes invisible? Can you add a background color so the nav is readable before the images load? Alex On 2/2/06, Todd Baker [EMAIL PROTECTED] wrote: Hello Everyone, We are in final testing for a largish site that uses a large amount of background images for navigation and various graphical effects (as all CSS-based sites do). We are finding that the background images for our main navigation are downloading last and as such the white text is unreadable untill the background arrives .. almost last. The list that drives this is right at the topm of the source code. Is there any logic I can apply (ordering CSS etc) that will affect the order the browser requests and downloads background images? Cheers Todd ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
For the navigation, you can put all your nav images into the one file so that they all load at once, then use background-position to make them sit in place. As for making things readable before the background images download, how about setting a background colour as well? That way if users have images disabled (dialup users, etc.) they can still read your primary navigation. This will obviously only work if you're not dependent on the background being partially transparent for the nav. Josh On 2/2/06, Todd Baker [EMAIL PROTECTED] wrote: Hello Everyone, We are in final testing for a largish site that uses a large amount of background images for navigation and various graphical effects (as all CSS-based sites do). We are finding that the background images for our main navigation are downloading last and as such the white text is unreadable untill the background arrives .. almost last. The list that drives this is right at the topm of the source code. Is there any logic I can apply (ordering CSS etc) that will affect the order the browser requests and downloads background images? Cheers Todd ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
On 02/02/06, Lachlan Hunt [EMAIL PROTECTED] wrote: You're assuming the background image will arrive. What happens if someone has images turned off? You should specify a background colour as well. Yes indeed we are adding a background colour that its close to the graphic. Is there any logic I can apply (ordering CSS etc) that will affect the order the browser requests and downloads background images? Browsers would likely request images in the order that they are required, though there is no guarantee of this. If the markup for the navigation appears last in the markup, then due to incremental rendering, it is likely that the images required to render it will be downloaded near the end. If it's at the top of the markup, then it seems logical that it would be downloaded near the beginning. Thats what I would of thought but the list for this nav is right at the top.. Thanks ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
Todd Baker wrote: On 02/02/06, Lachlan Hunt [EMAIL PROTECTED] wrote: You're assuming the background image will arrive. What happens if someone has images turned off? You should specify a background colour as well. Yes indeed we are adding a background colour that its close to the graphic. But you stated that the text is unreadable until the text arrives. The background colour is obviously not suitable. Is there any logic I can apply (ordering CSS etc) that will affect the order the browser requests and downloads background images? Browsers would likely request images in the order that they are required, though there is no guarantee of this. If the markup for the navigation appears last in the markup, then due to incremental rendering, it is likely that the images required to render it will be downloaded near the end. If it's at the top of the markup, then it seems logical that it would be downloaded near the beginning. Thats what I would of thought but the list for this nav is right at the top.. Is there a URI so that we may see the page and this effect occurring? -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
On 02/02/2006, at 9:59 AM, Todd Baker wrote: We are finding that the background images for our main navigation are downloading last and as such the white text is unreadable untill the background arrives .. almost last. The list that drives this is right at the topm of the source code. I've always found the download order somewhat unpredictable, particularly cross-browser. Generally the image you want most drops in last (I think its related to that butter and bread falling thing) Just to be a naysayer, have you given consideration to the accessability issues of background images being Important? Derek Featherstone's CSS Background Images: Naughty or Nice? discusses it nicely. http://24ways.org/advent/naughty-or-nice-css-background-images (Hi Derek!) Hope that doesn't make you scream too much :) Lea -- Lea de Groot Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
Is there any logic I can apply (ordering CSS etc) that will affect the order the browser requests and downloads background images? Bear this in mind, too - some browsers will call *all* images specified with the background property in your CSS file, whether they're needed for that page or not. I fell foul of this one, and was wondering why my first page was taking ges to render. The solution? Boring, but multiple CSS files, one for each page, containing only the bg image declarations for that page. HTH... Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
Nick Gleitzman wrote: Boring, but multiple CSS files, one for each page, containing only the bg image declarations for that page. Maybe I've missed something, but why wouldn't you just have the one css file but declare the background image in the head section of each individual page? Regards, Ric ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Background-Image download order
nick Bear this in mind, too - some browsers will call *all* images specified with the background property in your CSS file, whether they're needed for that page or not. errr.. what browsers? I wonder what would happen if the seperate stylesheets were alled called in from one importer stylesheet? would that make any sense? kvnmcwebn ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
On 2 Feb 2006, at 1:24 PM, Ric Raftis wrote: Nick Gleitzman wrote: Boring, but multiple CSS files, one for each page, containing only the bg image declarations for that page. Maybe I've missed something, but why wouldn't you just have the one css file but declare the background image in the head section of each individual page? You could, of course, but I use external files for the same reason that I don't include the whole CSS file in the head - separation of of content and presentation. N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
Todd Baker said:
We are finding that the background images for our main navigation are
downloading last and as such the white text is unreadable
This makes for quite a usability issue. Is there any way you can revisit
the design to ensure the text is visible with images turned off or not
downloaded?
Or if it's just a case of fixing the anchor color then supply a background
color for just that element. The browser will render the specified
background color and place the image over the top of it when it is
downloaded.
EXAMPLE
a {background: #000 url(image.gif); color: #fff}
Is there any logic I can apply (ordering CSS etc) that will affect the
order the browser requests and downloads background images?
Not that I'm aware of... I always thought it was something magical that
browsers and servers worked out amongst themselves to in order to make
best use of the available packets and minimise requests.
kind regards
Terrence Wood.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Background-Image download order
On 2 Feb 2006, at 1:18 PM, kvnmcwebn wrote: nick Bear this in mind, too - some browsers will call *all* images specified with the background property in your CSS file, whether they're needed for that page or not. errr.. what browsers? Safari, from memory... it was a while ago. Later versions may have seen a fix. Sorry, don't have time to test right now... I wonder what would happen if the seperate stylesheets were alled called in from one importer stylesheet? would that make any sense? Uh - wouldn't that result in the same problem? If a browser reads a CSS file, it will process all the other files called by it - won't it? N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background-Image download order
NickGleitzman wrote: On 2 Feb 2006, at 1:24 PM, Ric Raftis wrote: Nick Gleitzman wrote: Boring, but multiple CSS files, one for each page, containing only the bg image declarations for that page. Maybe I've missed something, but why wouldn't you just have the one css file but declare the background image in the head section of each individual page? You could, of course, but I use external files for the same reason that I don't include the whole CSS file in the head - separation of of content and presentation. What about SSI or PHP. I have used this for conditional class application in navigations I don't see why you couldn't use it for applying to stylesheet insertion. For navigation where I use image replacement I use a single image and use the background image positioning to handle the various states. This way the whole nav loads at the same time and there is no need for _javascript_ preloads. This makes me think that I should put all my background images on one image for an entire site. That might be a cool experiment. Has any one tried this? Jay Jay Gilmore U)SmashingRed Web Marketing B)Jay Gilmore's SmashingRed Blog P) 902.529.0651 E) [EMAIL PROTECTED]
Re: [WSG] Background image alignment - percentages and scalable elements
Hi Chris, Not sure exactly what you mean but this quick sample may help: http://www.maxdesign.com.au/presentation/percentage/ The background images scale based on viewport size. Only tested on mac Safari... If this is what you are after, the key is to create large images and use percentages of the images too. In this case I used 1000px wide images (due to laziness) but you should use wider ones in a real site to cover very wide monitors. Russ Hi, I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div I have a collection of classes (called percent0 to percent100) which have a nice gradiated background image. I'm trying to position the background image on the left of the element so that it covers, in this example, 20% of the element. As you will have guessed this is for a statistics-type application. I've tried all sorts - aligning left/right positive/negative margins etc. As the element needs to be scalable the background should move as well, but keep it's ratio with regard to the width of the element. Does anyone have any ideas? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background image alignment - percentages and scalable elements
Chris Taylor schrieb: I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div ... Chris, I don't know if I got the problem right, but I think Zoe's article abut Creating Liquid Faux Columns [1] covers a lot of the theme: http://www.communitymx.com/content/article.cfm?page=1cid=AFC58 Please provide an URL to a _minimal_ test case showing the problem you reported if it's not covered in this article. Another aspect: Due to a severe bug in Opera8, you can't use fractional percentage values for the offset of background images, for example, a background x-offset of 19.65% will be rendered at 1965%, that's really far off :) Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Background image alignment - percentages and scalable elements
Thanks everyone, I got it working. One again the standards ninjas prove their worth! Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign Sent: 27 June 2005 13:12 To: Web Standards Group Subject: Re: [WSG] Background image alignment - percentages and scalable elements Hi Chris, Not sure exactly what you mean but this quick sample may help: http://www.maxdesign.com.au/presentation/percentage/ The background images scale based on viewport size. Only tested on mac Safari... If this is what you are after, the key is to create large images and use percentages of the images too. In this case I used 1000px wide images (due to laziness) but you should use wider ones in a real site to cover very wide monitors. Russ Hi, I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div I have a collection of classes (called percent0 to percent100) which have a nice gradiated background image. I'm trying to position the background image on the left of the element so that it covers, in this example, 20% of the element. As you will have guessed this is for a statistics-type application. I've tried all sorts - aligning left/right positive/negative margins etc. As the element needs to be scalable the background should move as well, but keep it's ratio with regard to the width of the element. Does anyone have any ideas? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background image in li not showing in IE
Cole wrote: I've got a small background icon that I've hooked to a few li's. Displays as planned in FF, but doesn't display at all in IE6.
Any ideas how I can fix this in IE?not sure if youve solved this by now but often i find if you specify a background colour (instead of transparent), IE will play along nicely.
so instead of :li.signInOptions {background: transparent url(../../admin/i/info.jpg) 0 5px no-repeat}try
li.signInOptions {background: #fff url(../../admin/i/info.jpg) 0 5px no-repeat}
of course, then thats a pain if you have a background image that needs to sit on varying background colours. you may end up needing to feed specific colours to certain uses, eg...
#nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a navigation area that has a background of #ccc
the other thing to try when IE isnt displaying a background image is to specify a width on the li.
hth,
pete ottery
Re: [WSG] Background image in li not showing in IE
Thanks for all the suggestions Peter. I hadn't gotten it fixed
until I set the width of the li as per your suggestion.
Now the bullets show up in IE as desired.
Cole
- Original Message -
From:
Peter
Ottery
To: wsg@webstandardsgroup.org
Sent: Monday, June 20, 2005 7:54 AM
Subject: Re: [WSG] Background image in
li not showing in IE
Cole
wrote: I've got a small background icon that I've hooked
to a few li's. Displays as planned in FF, but doesn't display at all
in IE6. Any ideas how I can fix this in IE?not sure if
youve solved this by now but often i find if you specify a background colour
(instead of transparent), IE will play along nicely.
so instead of :li.signInOptions {background:
transparent url(../../admin/i/info.jpg) 0 5px
no-repeat}tryli.signInOptions {background: #fff
url(../../admin/i/info.jpg) 0 5px no-repeat}
of course, then thats a pain if you
have a background image that needs to sit on varying background colours. you
may end up needing to feed specific colours to certain uses, eg... #nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a
navigation area that has a background of #ccc
the other thing to try when IE isnt
displaying a background image is to specify a width on the li.
hth,
pete
ottery
Re: [WSG] Background image in li not showing in IE
Other fixes for this problem are as follows:
li { position:relative; }
li { height:1%; }
li { zoom:1.0; }
Applying borders may also fix the problem, I haven't tested that one
as it's a bad solution anyway -- changing the design to fix a bug
isn't cool at all; plus IE can't handle transparent borders anyhoo.
Other solutions can be tested by using this JS in IE:
alert(this.hasLayout);
If it comes back true, you've won :D
Now that I can confidently tackle the IE/PC bugset, I don't mind IE so
much... it keeps me in a job! heh ;)
Andrew.
---
http://leftjusitfied.net/
On 6/20/05, Cole Kuryakin - x7m [EMAIL PROTECTED] wrote:
Thanks for all the suggestions Peter. I hadn't gotten it fixed until I set
the width of the li as per your suggestion.
Now the bullets show up in IE as desired.
Cole
- Original Message -
From: Peter Ottery
To: wsg@webstandardsgroup.org
Sent: Monday, June 20, 2005 7:54 AM
Subject: Re: [WSG] Background image in li not showing in IE
Cole wrote:
I've got a small background icon that I've hooked to a few li's.
Displays as planned in FF, but doesn't display at all in IE6.
Any ideas how I can fix this in IE?
not sure if youve solved this by now but often i find if you specify a
background colour (instead of transparent), IE will play along nicely.
so instead of :
li.signInOptions {background: transparent url(../../admin/i/info.jpg) 0 5px
no-repeat}
try
li.signInOptions {background: #fff url(../../admin/i/info.jpg) 0 5px
no-repeat}
of course, then thats a pain if you have a background image that needs to
sit on varying background colours. you may end up needing to feed specific
colours to certain uses, eg...
#nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a navigation area that has a background
of #ccc
the other thing to try when IE isnt displaying a background image is to
specify a width on the li.
hth,
pete ottery
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Background Image
On 10 May 2005, at 3:26 AM, Chris Kennon wrote: http://www.ckimedia.com/ep_site/index.htm At the url listed is a solution for a large textured background, against a gradient. Can someone offer a critique of this method, and if possible another solution? Using one large image as bgrd to div#container is generating a page that's as wide as the image - with a horizontal scrollbar - and the parchment, which presumably will be bg to the site content, is offset 250px from the left edge of the viewport. Try separating the parchment and green background, using the green background as background image of body (hence no horiz scrollbar), and the parchment image as background to div#container, centred within body. That way, the parchment will 'float' over the green background, and fit without horizontal scroll in a browser 800px wide. N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background Image
Hi, Thanks so much, I also dissected the sections into a head image, body and footer. C On May 9, 2005, at 2:07 PM, Nick Gleitzman wrote: On 10 May 2005, at 3:26 AM, Chris Kennon wrote: http://www.ckimedia.com/ep_site/index.htm At the url listed is a solution for a large textured background, against a gradient. Can someone offer a critique of this method, and if possible another solution? Using one large image as bgrd to div#container is generating a page that's as wide as the image - with a horizontal scrollbar - and the parchment, which presumably will be bg to the site content, is offset 250px from the left edge of the viewport. Try separating the parchment and green background, using the green background as background image of body (hence no horiz scrollbar), and the parchment image as background to div#container, centred within body. That way, the parchment will 'float' over the green background, and fit without horizontal scroll in a browser 800px wide. N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background image size in future CSS
On 5/5/05, Julián Landerreche [EMAIL PROTECTED] wrote: just curiosity: Will it be possible (in CSS3) to change the dimension (width, height) of a background image directly from the stylesheet? There's work on 'stretch'. Read the draft to know more. So, you can use a tiny image to create a whole screen background by stretching it from the CSS... and save a lot of bandwith... In what possible way can you stretch an image, keep it looking good and save bandwidth? The only possible thing I can imagine can be done with 'repeat', so tell me what you actually want to achieve. -- Cheers, Rob. http://zooibaai.nl | http://digital-proof.org | http://chancecube.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background image size in future CSS
In what possible way can you stretch an image, keep it looking good and save bandwidth? SVG ;) -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background image size in future CSS
On 5/5/05, Jan Brasna [EMAIL PROTECTED] wrote: SVG ;) Jan, I thought we try to pursue a goal here: working stuff in IE too ;) But seriously, I have no idea what the use _can_ be. -- Cheers, Rob. http://zooibaai.nl | http://digital-proof.org | http://chancecube.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background image size in future CSS
Rob Mientjes But seriously, I have no idea what the use _can_ be. If the resized image is smoothed by the browser before being displayed, and the original image is only meant to be an abstract, mood type background, then this could be useful within reason. But yes, only useful in a few limited instances. Apart from that, I'd say the usefulnes of stretch will come with fairly good quality, large images, as a way of making them fit nicely if they only need to be resized a few percent up/down from their original size. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background image size in future CSS
But seriously, I have no idea what the use _can_ be. Well, I can't make anything up at the moment, but it could be something like em-sized vecor logotype etc. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Background image in the mast head...
I trust you saw the light bulb glowing all the way from Wyoming!
Deeply appreciate the detailed breakdown and explanation of the process.
#dss#
From: [EMAIL PROTECTED] on behalf of russ - maxdesign
Sent: Tue 4/12/2005 7:35 PM
To: Web Standards Group
Subject: Re: [WSG] Background image in the mast head...
OK, you have an image set in the div as a background, but you want it to
act, to all intents, like a link.
The first thing to do is make the link area the same size as the background
image. This is achieved by converting the a element to a block (display:
block) and then giving it a width and height.
div id=masthead
a href=http://mysite.com;/a
/div
a { display: block; width: 750px; height: 100px; }
Now you have a background image and a link that is the same size.
The problem is that there is nothing inside the link. It is much better to
put content in there. Even more important, this content will be beneficial -
it can be used for print css and as a description for screen readers etc.
So, the next thing to do is place the text inside the a element
div id=masthead
a href=http://mysite.com;My Site/a
/div
The problem is now that this text will sit over the top of your background
image. Probably a very undesirable outcome.
So, you want to move this link text off the page, just for modern browsers
that support css. You do not want to use display: none as this has a
negative impact on screen readers - who may not register this text at all.
A solution is to wrap a span around this link content and then position it
off the page. Some still argue that this is not a good idea. If you choose
to do this option, a good method is position:absolute.
It moves just the span wrapped content off the page - leaving the link still
in position at the same size as the backgrounds image. If you set the span
to left: -500px, it will take the span and its content 500px to the left -
off the page.
You should then set a width of 500px so that if the content grows massively
it will not poke back in the left side of the page. This could occur if a
user set their own large font sizes.
Again, this is only one method, and it has downsides as well as upsides.
Does all that make sense? Apologies if not - written in a rush between
meetings.
HTH
Russ
As a newbie to CSS, I do not know what this does:
#masthead span { position: absolute; left: -500px; width: 500px; }
Would appreciate your explanation - thanks!
#DSS#
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
winmail.dat
Re: [WSG] Background image in the mast head...
There are so many ways to do this but I would not use a spacer gif. One way
you could go is:
HTML
div id=masthead
a href=http://mysite.com;spanMy Site/span/a
/div
CSS
#masthead { width: 750px; height: 100px; background: blah... }
#masthead a { display: block; width: 750px; height: 100px; }
#masthead span { position: absolute; left: -500px; width: 500px; }
Be warned, this was written quickly without any checking, so be careful :)
The advantage with this method is that for non-css users they will get your
text. Also, when you go to print it you can use this text version if you
need to, instead of a background image. There is also another advantage. You
can set the a element to any size - it does not need to be the entire size
of the banner - you could have it only the size of a logo within the banner
image. So, in some ways this method gives you a good degree of flexibility.
However, like all methods there are good and bad. Worth looking at a range
of them and deciding what is right for your needs.
Russ
Over the last few days I have encountered some sites that use something
similar to the code below:
div id=masthead
a href=http://mysite.com;img src=img/spacer.gif
width=750 height=100 border=0 alt= //a
/div
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Background image in the mast head...
Thank you for prompt and detailed response!
#DSS#
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of russ - maxdesign
Sent: Tuesday, April 12, 2005 4:40 PM
To: Web Standards Group
Subject: Re: [WSG] Background image in the mast head...
There are so many ways to do this but I would not use a spacer gif. One
way you could go is:
HTML
div id=masthead
a href=http://mysite.com;spanMy Site/span/a
/div
CSS
#masthead { width: 750px; height: 100px; background: blah... } #masthead
a { display: block; width: 750px; height: 100px; } #masthead span {
position: absolute; left: -500px; width: 500px; }
Be warned, this was written quickly without any checking, so be careful
:)
The advantage with this method is that for non-css users they will get
your text. Also, when you go to print it you can use this text version
if you need to, instead of a background image. There is also another
advantage. You can set the a element to any size - it does not need to
be the entire size of the banner - you could have it only the size of a
logo within the banner image. So, in some ways this method gives you a
good degree of flexibility.
However, like all methods there are good and bad. Worth looking at a
range of them and deciding what is right for your needs.
Russ
Over the last few days I have encountered some sites that use
something similar to the code below:
div id=masthead
a href=http://mysite.com;img src=img/spacer.gif width=750
height=100 border=0 alt= //a /div
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Background image in the mast head...
Russ:
As a newbie to CSS, I do not know what this does:
#masthead span { position: absolute; left: -500px; width: 500px; }
Would appreciate your explanation - thanks!
#DSS#
-Original Message-
There are so many ways to do this but I would not use a spacer gif. One
way you could go is:
HTML
div id=masthead
a href=http://mysite.com;spanMy Site/span/a
/div
CSS
#masthead { width: 750px; height: 100px; background: blah... } #masthead
a { display: block; width: 750px; height: 100px; } #masthead span {
position: absolute; left: -500px; width: 500px; }
Be warned, this was written quickly without any checking, so be careful
:)
The advantage with this method is that for non-css users they will get
your text. Also, when you go to print it you can use this text version
if you need to, instead of a background image. There is also another
advantage. You can set the a element to any size - it does not need to
be the entire size of the banner - you could have it only the size of a
logo within the banner image. So, in some ways this method gives you a
good degree of flexibility.
However, like all methods there are good and bad. Worth looking at a
range of them and deciding what is right for your needs.
Russ
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Background image in the mast head...
from a cursory examination it seesm to position the top left corner of a span
(500px width) 500px to the left of the edge of the visible page. (thus making
the span invisible.)
In what context is it being used?
Paul
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Devendra
Shrikhande
Sent: Wednesday, April 13, 2005 11:22 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Background image in the mast head...
Russ:
As a newbie to CSS, I do not know what this does:
#masthead span { position: absolute; left: -500px; width: 500px; }
Would appreciate your explanation - thanks!
#DSS#
-Original Message-
There are so many ways to do this but I would not use a spacer gif. One way you
could go is:
HTML
div id=masthead
a href=http://mysite.com;spanMy Site/span/a /div
CSS
#masthead { width: 750px; height: 100px; background: blah... } #masthead a {
display: block; width: 750px; height: 100px; } #masthead span {
position: absolute; left: -500px; width: 500px; }
Be warned, this was written quickly without any checking, so be careful
:)
The advantage with this method is that for non-css users they will get your
text. Also, when you go to print it you can use this text version if you need
to, instead of a background image. There is also another advantage. You can set
the a element to any size - it does not need to be the entire size of the
banner - you could have it only the size of a logo within the banner image. So,
in some ways this method gives you a good degree of flexibility.
However, like all methods there are good and bad. Worth looking at a range of
them and deciding what is right for your needs.
Russ
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Background image in the mast head...
OK, you have an image set in the div as a background, but you want it to
act, to all intents, like a link.
The first thing to do is make the link area the same size as the background
image. This is achieved by converting the a element to a block (display:
block) and then giving it a width and height.
div id=masthead
a href=http://mysite.com;/a
/div
a { display: block; width: 750px; height: 100px; }
Now you have a background image and a link that is the same size.
The problem is that there is nothing inside the link. It is much better to
put content in there. Even more important, this content will be beneficial -
it can be used for print css and as a description for screen readers etc.
So, the next thing to do is place the text inside the a element
div id=masthead
a href=http://mysite.com;My Site/a
/div
The problem is now that this text will sit over the top of your background
image. Probably a very undesirable outcome.
So, you want to move this link text off the page, just for modern browsers
that support css. You do not want to use display: none as this has a
negative impact on screen readers - who may not register this text at all.
A solution is to wrap a span around this link content and then position it
off the page. Some still argue that this is not a good idea. If you choose
to do this option, a good method is position:absolute.
It moves just the span wrapped content off the page - leaving the link still
in position at the same size as the backgrounds image. If you set the span
to left: -500px, it will take the span and its content 500px to the left -
off the page.
You should then set a width of 500px so that if the content grows massively
it will not poke back in the left side of the page. This could occur if a
user set their own large font sizes.
Again, this is only one method, and it has downsides as well as upsides.
Does all that make sense? Apologies if not - written in a rush between
meetings.
HTH
Russ
As a newbie to CSS, I do not know what this does:
#masthead span { position: absolute; left: -500px; width: 500px; }
Would appreciate your explanation - thanks!
#DSS#
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background-image:
perfectly safe, no scrollbars, and indeed you don't even need the span element. just set the text-indent on the a, and the text will be offscreen, with the background image still in place. That's nice, however ... I've never gotten that technique to work properly in Opera. It always either a) makes scrollbars b) displays some of the text despite insane negative text-indent values... ... I'm quite afraid of that :( Add top:-1000px; left:-1000px; and you'll be bullet proof ;) No scrollbar problems here? Actually... Why the hell do we need to do this? :( Screen readers should only stick with the aural styles and not the screen ones (not ignoring elements, that are not to be displayed) so only display: none in screen style would do the work :'( ... -- Jan Brasna :: alphanumeric.cz | webcore.cz | designlab.cz | janbrasna.com Stop IE! - http://www.stopie.com/ | http://browsehappy.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background-image:
From: JohnyB [...] Actually... Why the hell do we need to do this? :( Screen readers should only stick with the aural styles and not the screen ones (not ignoring elements, that are not to be displayed) so only display: none in screen style would do the work :'( ... Just like with browsers, what screenreaders *should* do is not always the same as what they *actually* do in practice. See http://css-discuss.incutio.com/?page=ScreenreaderVisibility Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
Just like with browsers, what screenreaders *should* do is not always the same as what they *actually* do in practice. I know, I know... I just needed to vent it :( -- Jan Brasna :: alphanumeric.cz | webcore.cz | designlab.cz | janbrasna.com Stop IE! - http://www.stopie.com/ | http://browsehappy.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
Hi, I must be missing something here because I just don't get the concept of using background images as links. Could someone please explain? -- Eunice If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals. - Sirius Black ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
What I was talking about and I think some other were too was being able to have a href link attached to an image that is a background image, particularly for banner images, so that they can link back to the home page for instance. Normally you can put a link right onto an image, but the question was, how do you put it onto a background image. *** Helen Rysavy Web Designer, Teaching Learning Development Charles Darwin University, Northern Territory 0909 Tel: 8946 7779 Mobile: 0403 290 842 mailto:[EMAIL PROTECTED] www.cdu.edu.au CRICOS Provider No: 00300K *** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
On Wed, 19 Jan 2005 16:25:55 +1000, Andrew Krespanis
[EMAIL PROTECTED] wrote:
I've never gotten that technique to work properly in Opera. It always either
a) makes scrollbars
b) displays some of the text despite insane negative text-indent values...
curious. in Opera 7.54, Firefox 1.0 and IE 5.5 and 6.0 (on Win), this
works for me - the image is shown and linked, with no text visible:
html:
a href=blah.html class=indenttestlink text/a
css:
.indenttest {
display: block;
height: 40px; /* image dimensions */
width: 200px;
text-indent: -px;
background: transparent url(imageurlgoeshere.png);
}
it appears that Opera starts spewing text all over the place if you
specify the text-indent in em.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background-image:
As far as I understand, a background image means just that, a image in the background. If something needs to be a link, I believe it should be in the foreground. Am I being too strict and literal? Helen wrote: What I was talking about and I think some other were too was being able to have a href link attached to an image that is a background image, particularly for banner images, so that they can link back to the home page for instance. Normally you can put a link right onto an image, but the question was, how do you put it onto a background image. -- Eunice Choi email - [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background-image:
Helen wrote: What I was talking about and I think some other were too was being able to have a href link attached to an image that is a background image, particularly for banner images, so that they can link back to the home page for instance. Normally you can put a link right onto an image, but the question was, how do you put it onto a background image. Helen, I use a transparent gif image technique. Simply place a solid colour transparent gif the size of the required hotspot of the background image in the link. http://www.seowebsitepromotion.com/enigma_log0403.htm illustrates the principle and thinking behind the initiative. Cheers, Mike Pepper Accessible Web Developer Internet SEO and Marketing Analyst [EMAIL PROTECTED] http://www.visidigm.com (in progress) Administrator Guild of Accessible Web Designers [EMAIL PROTECTED] http://www.gawds.org -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 265.7.0 - Release Date: 17/01/05 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background-image:
Thanks Mike... that sounds like the best and most accessible solution I have seen so far. *** Helen Rysavy Web Designer, Teaching Learning Development Charles Darwin University, Northern Territory 0909 Tel: 8946 7779 Mobile: 0403 290 842 mailto:[EMAIL PROTECTED] www.cdu.edu.au CRICOS Provider No: 00300K *** Mike Pepper [EMAIL PROTECTED]To: wsg@webstandardsgroup.org motion.com cc: Sent by: Subject: RE: [WSG] background-image: [EMAIL PROTECTED] 20/01/2005 11:04 AM Please respond to wsg Helen wrote: What I was talking about and I think some other were too was being able to have a href link attached to an image that is a background image, particularly for banner images, so that they can link back to the home page for instance. Normally you can put a link right onto an image, but the question was, how do you put it onto a background image. Helen, I use a transparent gif image technique. Simply place a solid colour transparent gif the size of the required hotspot of the background image in the link. http://www.seowebsitepromotion.com/enigma_log0403.htm illustrates the principle and thinking behind the initiative. Cheers, Mike Pepper Accessible Web Developer Internet SEO and Marketing Analyst [EMAIL PROTECTED] http://www.visidigm.com (in progress) Administrator Guild of Accessible Web Designers [EMAIL PROTECTED] http://www.gawds.org -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 265.7.0 - Release Date: 17/01/05 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
This site seems to do it http://www.qrow.com/home.php div id=banner a href=home.php style=display: block;height: 198px;width:700px/a /div Cheers *** Helen Rysavy Web Designer, Teaching Learning Development Charles Darwin University, Northern Territory 0909 Tel: 8946 7779 Mobile: 0403 290 842 mailto:[EMAIL PROTECTED] www.cdu.edu.au CRICOS Provider No: 00300K *** Carmelyne Thompson To: wsg@webstandardsgroup.org [EMAIL PROTECTED]cc: tely.comSubject: [WSG] background-image: Sent by: [EMAIL PROTECTED] group.org 19/01/2005 10:09 AM Please respond to wsg Maybe I was dreaming but I recall reading somewhere that it is possible to put links on images in the background-image: property. Any direction toward that article will be greatly appreciated. I've looked far and wide, now I just want to know if I was just dreaming that I thought I read this somewhere. Thanks in advance. PS. /rock on -- Carmelyne Thompson (See attached file: cbthomps.vcf) cbthomps.vcf Description: Binary data
RE: [WSG] background-image:
Carmelyne- Not sure if this will help, but the following link refers to links and background-image property: http://www.w3schools.com/css/pr_background-image.asp Mary Ann -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Carmelyne Thompson Sent: Tuesday, January 18, 2005 6:39 PM To: wsg@webstandardsgroup.org Subject: [WSG] background-image: Maybe I was dreaming but I recall reading somewhere that it is possible to put links on images in the background-image: property. Any direction toward that article will be greatly appreciated. I've looked far and wide, now I just want to know if I was just dreaming that I thought I read this somewhere. Thanks in advance. PS. /rock on -- Carmelyne Thompson ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
[EMAIL PROTECTED] wrote: This site seems to do it http://www.qrow.com/home.php div id=banner a href=home.php style=display: block;height: 198px;width:700px/a /div How about this ALA article? http://www.alistapart.com/articles/imagemap/ -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
Thanks. :) -- Carmelyne Thompson Web Architect/Developer [EMAIL PROTECTED] wrote: This site seems to do it http://www.qrow.com/home.php div id=banner a href=home.php style=display: block;height: 198px;width:700px/a /div Cheers *** Helen Rysavy Web Designer, Teaching Learning Development Charles Darwin University, Northern Territory 0909 Tel: 8946 7779 Mobile: 0403 290 842 mailto:[EMAIL PROTECTED] www.cdu.edu.au CRICOS Provider No: 00300K *** Carmelyne Thompson To: wsg@webstandardsgroup.org [EMAIL PROTECTED]cc: tely.comSubject: [WSG] background-image: Sent by: [EMAIL PROTECTED] group.org 19/01/2005 10:09 AM Please respond to wsg Maybe I was dreaming but I recall reading somewhere that it is possible to put links on images in the background-image: property. Any direction toward that article will be greatly appreciated. I've looked far and wide, now I just want to know if I was just dreaming that I thought I read this somewhere. Thanks in advance. PS. /rock on -- Carmelyne Thompson (See attached file: cbthomps.vcf) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
[EMAIL PROTECTED] wrote:
http://www.qrow.com/home.php
div id=banner
a href=home.php style=display: block;height: 198px;width:700px/a
/div
For accessibility reasons (and, heck, common sense) you should never
have a completely empty link element. If anything, you could use a span
or similar within it, and visually move it out of the viewport
a href=blahspanthis is the link text/span/a
with (in this case...you obviously would want to be specific with an id
or class)
a { display: block; background: url(/path/to/your/image) no-repeat top
left; width: 700px; height: 198px; }
a span { display: block; text-indent: -999em; }
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background-image:
Thanks, Mary, I appreciate it. Helen has given me an example of what I exactly had in mind. div id="banner" a href="" style="display: block;height: 198px;width:700px"/a /div :) -- Carmelyne Thompson Web Architect/Developer Mary Ann wrote: Carmelyne- Not sure if this will help, but the following link refers to links and background-image property: http://www.w3schools.com/css/pr_background-image.asp Mary Ann -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]]On Behalf Of Carmelyne Thompson Sent: Tuesday, January 18, 2005 6:39 PM To: wsg@webstandardsgroup.org Subject: [WSG] background-image: Maybe I was dreaming but I recall reading somewhere that it is possible to put links on images in the "background-image: " property. Any direction toward that article will be greatly appreciated. I've looked far and wide, now I just want to know if I was just dreaming that I thought I read this somewhere. Thanks in advance. PS. /rock on -- Carmelyne Thompson ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background-image:
Hi Patrick,
a span { display: block; text-indent: -999em; }
is this safe? (won't it bring some scrollbars somehow etc.?)
I recently tried something like
.hide {
display: block;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0px;
position: absolute;
}
and not also 100% sure about it...
--
Jan Brasna :: alphanumeric.cz | webcore.cz | designlab.cz | janbrasna.com
Stop IE! - http://www.stopie.com/ | http://browsehappy.com/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background-image:
On Wed, 19 Jan 2005 02:08:53 +0100, JohnyB [EMAIL PROTECTED] wrote:
Hi Patrick,
a span { display: block; text-indent: -999em; }
is this safe? (won't it bring some scrollbars somehow etc.?)
I recently tried something like
.hide {
display: block;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0px;
position: absolute;
}
and not also 100% sure about it...
--
Jan Brasna :: alphanumeric.cz | webcore.cz | designlab.cz | janbrasna.com
perfectly safe, no scrollbars, and indeed you don't even need the
span element. just set the text-indent on the a, and the text will
be offscreen, with the background image still in place.
the earlier example (with no text being linked) is very poor for
accessibility - a meaningless link, with not even an alt for the
(background) image.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background-image:
On Wed, 19 Jan 2005 02:08:53 +0100, JohnyB [EMAIL PROTECTED] wrote:
a span { display: block; text-indent: -999em; }
is this safe? (won't it bring some scrollbars somehow etc.?)
I've never gotten that technique to work properly in Opera. It always either
a) makes scrollbars
b) displays some of the text despite insane negative text-indent values...
I recently tried something like
.hide {
display: block;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0px;
position: absolute;
}
and not also 100% sure about it...
Add top:-1000px; left:-1000px; and you'll be bullet proof ;)
Andrew.
http://leftjustified.net/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Lennart,
Using display:inline will cancel out the width of the element and make it as wide
as the text inside of it,
what i tend to do when creating horizontal menu's is
#menu-UL { margin : 0px ; padding : 0px ; }
#menu-UL li { margin : 0px ; padding : 0px ; float : left ; }
#menu-UL li a { width : 100px ; background : #99cc00 ; padding : 5px ; }
Hope that help's fella
Mark Harwood
--
phunky.co.uk / zinkmedia.co.uk / xhtmlandcss.co.uk
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] background image on a horizontal list.
Hi Lennart,
From your CSS, you could apply the width:100px to the #navlist li ID and
use float:left instead of display:inline.
Hope this helps.
- Regnard Raquedan
mobile: 639192907711
ym: rkraquedan @ yahoo.com
msn: rkraquedan @ hotmail.com
web: http://regnard.raquedan.com
Original Message:
-
From: Lennart Fylling [EMAIL PROTECTED]
Date: Wed, 1 Sep 2004 10:56:37 +0200
To: [EMAIL PROTECTED]
Subject: [WSG] background image on a horizontal list.
Hello there!!
I've been a member here for some time, and now I will see if I as well can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width: 100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
mail2web - Check your email from the web at
http://mail2web.com/ .
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Hi Lennart - welcome.
Your buttons are only visible for the width of the word used for your
links, plus its padding - so a bigger (wider) word reveals more of your
button. Try this:
#navlist li {
list-style: none;
margin: 4px;
float: left;
}
#navlist li a {
display: block;
...etc }
That way the button is always fully visible - but if your linked text
is longer than 100px, it will extend outside of the button...
By the way, I noticed you tried to 'open up' your buttons with spaces
in the code:
lia href=#About/a/li
That won't work; the browser ignores whitespace. Adding non-breaking
spaces (nbsp;) would work, but it's not the best way to fix the
problem!
Oh, and your English is fine - better than my Norewgian (which is zero)!
Hope that helps.
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Wednesday, Sep 1, 2004, at 18:56 Australia/Sydney, Lennart Fylling
wrote:
Hello there!!
I've been a member here for some time, and now I will see if I as well
can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested
them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width:
100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a
problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much
better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Mark Harwood WebMail wrote: Least your sorted now! you got about 4/5 emails all given the same advise :D Yes, but the advises I've got helped me out, so with a bit testing and failing, I'm finally getting somewhere. I'm far from finished, but you can se the result of my list here http://lennart-fylling.com/ , need to do some more positioning before I'm 100% satisfied. -- Lennart Fylling Aalesund Norway http://lennart-fylling.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background image
body{
background: url(image.jpg) center center no-repeat;
}
-
Jeremy Flint
www.jeremyflint.com
theGrafixGuy wrote:
Is there anyway to center the background image on a page withoiut
resorting to a div?
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] Background image
theGrafixGuy wrote:
Is there anyway to center the background image on a page withoiut
resorting to a div?
body {
background-image: url(yourimage.jpg);
background-position: center;
}
Should do it.
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
