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
: 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
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
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
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
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
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
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;
}
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,
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
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
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
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
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:
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
* 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
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
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
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
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
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
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
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
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
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
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:
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]
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
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
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
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
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
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.
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
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
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?
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
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
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
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
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
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
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:
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
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
: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
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
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
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,
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
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
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
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
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
: 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
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; }
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
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
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
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
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)
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
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/ |
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
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
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
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
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
:
Sent by: Subject: RE: [WSG]
background-image:
[EMAIL PROTECTED
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
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,
[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
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
[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
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
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
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;
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
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 {
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:
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 }
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
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
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
84 matches
Mail list logo
