Re: [css-d] Background images for element within MQ ?

[Tom Livingston]

No. This...

body {
 background-image: url('my300pximage.jpg');
}

@media and (min-width: 700px) {
 body {
  background-image: url('my700pximage.jpg');
 }
}

...is not Sass, but it does what you described.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images for element within MQ ?

[Crest Christopher]

Yes, knowing that SaSS is the solution ;-)

Tom Livingston wrote:
>
> On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
> wrote:
>
>>
>> If I understand you correctly, no.
>>
>> You can do:
>> body {
>>   background-image: url('my300pximage.jpg');
>> }
>> @media and (min-width: 700px) {
>>   body {
>> background-image: url('my700pximage.jpg');
>>   }
>> }
>>
>
>
>
> This accomplishes what you were describing.
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images for element within MQ ?

[Tom Livingston]

On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
wrote:

> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>


This accomplishes what you were describing.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images for element within MQ ?

[Chris Rockwell]

Note that it still compiles to the first example.

On Fri, Aug 5, 2016 at 3:18 PM Crest Christopher 
wrote:

> I knew probably SaSS could do it although I don't use SaSS atleast I was
> right ;-)
>
> Chris Rockwell wrote:
>
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
>
> > wrote:
>
> Is it possible to do conditions within a rule for an element;
>
>p; similar to
>
>
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org
>
> ]
>
>
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
>
> Supported by evolt.org  --
> http://www.evolt.org/help_support_evolt/
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images for element within MQ ?

[Crest Christopher]

I knew probably SaSS could do it although I don't use SaSS atleast I was
right ;-)

Chris Rockwell wrote:
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
> > wrote:
>
> Is it possible to do conditions within a rule for an element;
> similar to
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org
> ]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org  --
> http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images for element within MQ ?

[Chris Rockwell]

If I understand you correctly, no.

You can do:
body {
  background-image: url('my300pximage.jpg');
}
@media and (min-width: 700px) {
  body {
background-image: url('my700pximage.jpg');
  }
}

With sass you can do this:
body {
  background-image: url('my300pximage.jpg');
  @media and (min-width: 700px) {
background-image: url('my700pximage.jpg');
  }
}

On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher 
wrote:

> Is it possible to do conditions within a rule for an element; similar to
> MQ.  For example, you may have a break point that if the screen is 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images for element within MQ ?

[Crest Christopher]

Is it possible to do conditions within a rule for an element; similar to
MQ.  For example, you may have a break point that if the screen is 300px
and 700px then a background image of 300px width or close will be
displayed, otherwise a background image of a 700px width will be
displayed ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Drake Malone]

Cool, it was 'Page-Zoom' like you mentioned. I'm not gonna worry about
it since it seems like its not possible to stop browsers
interpretation.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Duncan Hill]

On Fri, 16 Apr 2010 22:43:57 +0200, Drake Malone drakemal...@gmail.com
wrote:

 Hey Dave,
 Yes, it was one of first things I checked.
 Hmmm, looks good on another person IE8 in the office lol. Wonder if it
 may be specific to my version, IE8 8.0.6001.18702 or just general
 Friday-crazyness that I can just forget about over the weekend haha.

 -Arian
If it is any consolation, it is showing in Opera 10.51, and IE 7  8,  
Chrome, and finally Safari on Win
XP.
Only visible on page zoom, (my eyes aren't so good) Opera and IE seem to  
be 'dropping' the sprite hover image on the #navBar ul  
li,(1473_nav_bg.jpg), while Chrome and Safari are raising it.
Firefox seems to stick it where you want it to be but there seems to be a  
background image on the #navBar that is not loading, (1473_NAVBAR_BG.jpg).
The page also has some html errors that could be throwing the browsers out  
a little on rendering.

Duncan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background-images off by subpixel? in IE7/8

[Arian]

Hello all,
I have a page where its fine in FF and IE6, but not in IE7 and 8 and
not sure why if anyone can help
So I have a design where the body has a background-image and every
content div before a menu (#navBar) is set via css height/pixels ...
so I assumed the #navBar list items (which have a background-image to
match the body background) would be positioned perfectly but its off
by 1px (or actually a subpixel I think since i tried making an IE7/8
specific stylesheet where the background-position of the list items
are moved 1px down... but its still off )... Unusually its fine in IE6
lol.
In fact I think even the other background-images are off by a subpixel
too possibly, look at the buttons/header image in IE7/8 compared to FF
and you'll see what i mean.

Here is the site: http://www15.acurian.com/jsp/1473/index.jsp (its the
'Learn More About...' menu links which are off by a subpixel)


Thanks if anyone can help,
Ari
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Tim Snadden]

On 17/04/2010, at 3:56 AM, Arian wrote:

 Hello all,
 I have a page where its fine in FF and IE6, but not in IE7 and 8 and
 not sure why if anyone can help
 So I have a design where the body has a background-image and every
 content div before a menu (#navBar) is set via css height/pixels ...
 so I assumed the #navBar list items (which have a background-image to
 match the body background) would be positioned perfectly but its off
 by 1px (or actually a subpixel I think since i tried making an IE7/8
 specific stylesheet where the background-position of the list items
 are moved 1px down... but its still off )... Unusually its fine in IE6
 lol.
 In fact I think even the other background-images are off by a subpixel
 too possibly, look at the buttons/header image in IE7/8 compared to FF
 and you'll see what i mean.

 Here is the site: http://www15.acurian.com/jsp/1473/index.jsp (its the
 'Learn More About...' menu links which are off by a subpixel)

I'm not seeing the problem (running WinXP via parallels).
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[David Laakso]

Tim Snadden wrote:
 On 17/04/2010, at 3:56 AM, Arian wrote:

   
 Here is the site: http://www15.acurian.com/jsp/1473/index.jsp (its the
 'Learn More About...' menu links which are off by a subpixel)
 

 I'm not seeing the problem (running WinXP via parallels).

   



I don't see it either: xp ie/8 on parallels and xp ie/8 on pc.

Best,
 ~d

-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Drake Malone]

Hey guys thanks for looking...
So you guys dont see the lil' 1px marks here (I highlight them in
yellow): http://www.arianhojat.com/temp/problem.jpg
I dont see them in FireFox

I am using IE8 8.0.6001.18702 (and simulate IE7 with IE8 Browser Mode)

Thanks,
Arian



On Fri, Apr 16, 2010 at 4:00 PM, David Laakso
da...@chelseacreekstudio.com wrote:
 Tim Snadden wrote:
 On 17/04/2010, at 3:56 AM, Arian wrote:


 Here is the site: http://www15.acurian.com/jsp/1473/index.jsp (its the
 'Learn More About...' menu links which are off by a subpixel)


 I'm not seeing the problem (running WinXP via parallels).





 I don't see it either: xp ie/8 on parallels and xp ie/8 on pc.

 Best,
  ~d

 --
 desktop
 http://chelseacreekstudio.com/
 mobile
 http://chelseacreekstudio.mobi/

 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Drake Malone]

Whoops replied under my other email ...
Anyway, lemmee know if those marks show up. Kinda weird why they only
show up on my machine's IE8.

Heres another b-image that looks funky off by a subpixel:
http://arianhojat.com/temp/problem2.jpg


-Arian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Arian]

Hey Linda,
Yes, I have tried background-color:transparent (removed the line but i
can add it for double-checking). Its not a background leaking
through... Its almost as if the actual image's background-position is
being calculated wrong by IE...
(unless other peeps confirm its not IE8, Im have to assume it is as
thats how it looks in my browser)



On Fri, Apr 16, 2010 at 4:16 PM, Linda Miller, DVM anm...@bellsouth.net wrote:
 Have you tried background-color:transparent ?  That may solve the issue 
 rather than trying to line them up.

 Linda
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Drake Malone]

Hey Dave,
Yes, it was one of first things I checked.
Hmmm, looks good on another person IE8 in the office lol. Wonder if it
may be specific to my version, IE8 8.0.6001.18702 or just general
Friday-crazyness that I can just forget about over the weekend haha.

-Arian



 re: http://www15.acurian.com/jsp/1473/index.jsp

 Not picking it up here.
 Is IE/8 at default: pagetext-sizemedium.

 ~d
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[David Laakso]

Drake Malone wrote:
 Whoops replied under my other email ...
 Anyway, lemmee know if those marks show up. Kinda weird why they only
 show up on my machine's IE8.

 Heres another b-image that looks funky off by a subpixel:
 http://arianhojat.com/temp/problem2.jpg


 -Arian
   


re: http://www15.acurian.com/jsp/1473/index.jsp

Not picking it up here.
Is IE/8 at default: pagetext-sizemedium.

~d

-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images off by subpixel? in IE7/8

[Bruno Fassino]

On Fri, Apr 16, 2010 at 10:43 PM, Drake Malone drakemal...@gmail.com wrote:

 re: http://www15.acurian.com/jsp/1473/index.jsp


Check also the page zoom level in your IE8. Perhaps yours is at
110%.  Look at the right corner of the browser bottom bar or  under
the menu page|zoom and try resetting it to 100%.

Bruno

-- 
Bruno Fassino http://www.brunildo.org/test
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Alan Gresley]

Christopher R wrote:
 I was reading up on how to create links from background images, so I came 
 across this page
 which mentions the following:
 http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
 Simple enough one thought, I applied it like so to my code:
 
 HTML:
 
 span id=logomiddlea href=www.cokecola.com/a/span /* coka cola is 
 just a test URL */
 
 CSS:
 
 #logomiddle {
   display: block;
   background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
   display: block;
   position: absolute;
   left: -490px;
   top: -150px;
   height: 1150px;
   width: 960px;
   z-index: 1;
 }
 
 I added display: block as it mentions but there is some mentioning of 
 positioning that has gotten me lost.


Hello Christopher,

The linked example has this which is very different to what you have.

div id=headera 
href=http://mysite.com;spanMySite.com/span/a/div

#header a {
   background: #fff url(images/header.png) no-repeat;
   display: block;
   height: 101px;
   width: 800px;
}
#header a span {
   visibility: hidden;
}


Maybe using such code will help.


E id=ancestor-elementa href=www.cokecola.comspanText 
here/span/a/E


with this CSS.

#ancestor-element a {
   display: block;
   background: url(header-web-page-graphic-done3_01.png) no-repeat top 
center;
   height: 1150px;
   width: 960px;
}
#ancestor-element a span {
   position: absolute;
   left: -490px;
   top: -150px;
}


And change the id to that of an ancestor element containing the anchor 
link to cokecola.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[David Laakso]

Ellen Heitman wrote:
 Thanks, that is very encouraging to hear. I've thought about your 
 email and have decided to try to eliminate the big background images 
 without changing the look too much. Thanks again.




Set your own pace. You'll do just fine. No question about it.

Good-bye,
Westmoreland


Old soldiers never die they just fade away.
--Douglas MacArthur


















__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[David Laakso]

Ellen Heitman wrote:
 I finally have a URL that you all can look at: www.williamtobrien.com. volt/
   



Wouldn't it just be easier to make two images: one for the word open; 
the other image for everything else? No ap needed.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[Ellen Heitman]

You mean just having the only HTML be for the word open and having
everything else as a background image? Good idea, I'll try that.

On Wed, Jul 29, 2009 at 7:16 AM, David Laakso
da...@chelseacreekstudio.comwrote:

 Ellen Heitman wrote:

 I finally have a URL that you all can look at: www.williamtobrien.com.
 volt/





 Wouldn't it just be easier to make two images: one for the word open; the
 other image for everything else? No ap needed.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[David Laakso]

Ellen Heitman wrote:
 You mean just having the only HTML be for the word open and having 
 everything else as a background image? Good idea, I'll try that.


 I finally have a URL that you all can look at:
 www.williamtobrien.com http://www.williamtobrien.com. volt/
  




 Wouldn't it just be easier to make two images: one for the word
 open; the other image for everything else? No ap needed.





Better yet pretend you are a Web designer. They are few and and between. 
No absolute positioning needed. No primary content set as an image 
needed. No huge background image that takes forever and a day to load is 
needed, either.

Best,
Westmoreland


PS
Bottom post, please.
.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[Ellen Heitman]

I appreciate your replies, however I'm looking for *specific* ways I can
work with what I have. Optimizing images, using less HTML, etc. Changing the
design at this point is not an option. I understand your objections to my
design, but this is my first try, and I'm still very green - I'll keep your
suggestions in mind for the future, however.

On Wed, Jul 29, 2009 at 3:09 PM, David Laakso
da...@chelseacreekstudio.comwrote:

 Ellen Heitman wrote:

 You mean just having the only HTML be for the word open and having
 everything else as a background image? Good idea, I'll try that.


I finally have a URL that you all can look at:
www.williamtobrien.com http://www.williamtobrien.com. volt/




Wouldn't it just be easier to make two images: one for the word
open; the other image for everything else? No ap needed.





 Better yet pretend you are a Web designer. They are few and and between. No
 absolute positioning needed. No primary content set as an image needed. No
 huge background image that takes forever and a day to load is needed,
 either.

 Best,
 Westmoreland


 PS
 Bottom post, please.
 .


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[Ellen Heitman]

Thanks, that is very encouraging to hear. I've thought about your email and
have decided to try to eliminate the big background images without changing
the look too much. Thanks again.

On Wed, Jul 29, 2009 at 8:58 PM, David Laakso
da...@chelseacreekstudio.comwrote:

 Ellen Heitman wrote:

 I appreciate your replies, however I'm looking for /specific/ ways I can
 work with what I have. Optimizing images, using less HTML, etc. Changing the
 design at this point is not an option. I understand your objections to my
 design, but this is my first try, and I'm still very green - I'll keep your
 suggestions in mind for the future, however.



 I love your design. I have no objection to it, whatsoever: military color;
 and, appropriate typography to go with it. It was only a suggestion. The
 intent, not to change the design, but merely adapt the design to the
 medium with which we struggle to please on this list.

 I wish you well. Now, and in the future...

 Westmoreland

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not appearing in IE7

[David Laakso]

Ellen Heitman wrote:
 I appreciate your replies, however I'm looking for /specific/ ways I 
 can work with what I have. Optimizing images, using less HTML, etc. 
 Changing the design at this point is not an option. I understand your 
 objections to my design, but this is my first try, and I'm still very 
 green - I'll keep your suggestions in mind for the future, however.



I love your design. I have no objection to it, whatsoever: military 
color; and, appropriate typography to go with it. It was only a 
suggestion. The intent, not to change the design, but merely adapt the 
design to the medium with which we struggle to please on this list.

I wish you well. Now, and in the future...

Westmoreland
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images not appearing in IE7

[Ellen Heitman]

I finally have a URL that you all can look at: www.williamtobrien.com. I'm
having the same problem on multiple pages, so you can probably restrict your
attention to the intro page (the code I'll be posting below is for this
page).
Aside from the fact that I need to do some optimization on the images
(because the page is loading realy slowly...or could just be my
connection), the background images aren't showing up in IE7. The site works
(except for a few minor tweaks) in both Safari and Firefox.

I have performed a minimal usage test but just cannot seem to get these
images to work. I have validated both the CSS and the HTML. The only errors
I'm getting from CSS are in regards to the opacity, but this feature seems
to still work in IE, and even when I removed the opacity code the images
weren't showing up. Also, I was strangely able to use other images and get
them to show up (not many, but a few). Could there be an issue with the
image itself?

Here is the relevant CSS:

@charset UTF-8;

/* BACKGROUND */

body {
background-color:#413a19;
}

#jacket {
background: url(images/jacketbkgd.jpg);
width:990px;
height:726px;
margin:auto;
margin-top:40px;
z-index:1;
position:relative;
}

#bigredbar {
background-color:#66;
width:990px;
height:250px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:2;
position:relative;
top:306px;
left:20px;
}

#smallredbar {
background-color:#66;
width:990px;
height:47px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:2;
position:absolute;
top:575px;
left:20px;
}

/* INDEX */

#indexjacket {
background: url(images/indexbkgd.jpg);
width:990px;
height:727px;
margin:0 auto;
margin-top:40px;
z-index:1;
position:relative;
}

#textstrip {
background: url(images/textstrip.jpg);
width:1014px;
height:156px;
position:absolute;
top:445px;
left:-10px;
z-index:2;
}

#transbox {
background-color:#66;
width:493px;
height:379px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:3;
position:absolute;
top:255px;
left:39px;
}

#indextext {
background: url(images/indextext.png);
width:465px;
height:357px;
position:absolute;
top:265px;
left:49px;
z-index:4;
}

#open {
font-family: orator std, courier;
font-size:3em;
position:absolute;
right:25px;
bottom:0px;
padding:0;
margin:0;
}

#open a:link {text-decoration:none; color:#fffde8;}
#open a:visited {text-decoration:none; color:#fffde8;}
#open a:hover {color:#32;}

And the HTML:

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
title- Welcome -/title
link href=wto.css rel=stylesheet type=text/css /
/head
body
div id=indexjacket
div id=textstrip
p id=opena href=toc.htmlOpen/a/p
/div
div id=transbox/div
div id=indextext/div
/div
/body
/html

I would greatly appreciate any comments or advice. I really want to get this
thing done and out the door! Thanks!
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images not displaying in IE 7

[Ellen Heitman]

I'm working on getting a test site up, but in the meantime I was hoping
someone could look over my code quickly and see if anything jumps out as
possibly causing this bug. My background images aren't showing up in IE 7.
They work perfectly fine in both Safari and Firefox.
I've looked over the code endlessly and tried a lot of different hacks from
online forums, but nothing has worked yet. I've tried many times to change
the position of the #indexjacket element, which is not showing up, with no
success. The #textstrip element is also not appearing, although the
#indextext one is. Any ideas??
Here's the HTML:

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
title- Welcome -/title
link href=wto.css rel=stylesheet type=text/css /
/head
body
div id=indexjacket
div id=textstrip
p id=opena href=toc.htmlOpen/a/p
/div
div id=transbox/div
div id=indextext/div
/div
/body
/html

And the CSS:

body {
background-color:#413a19;
}

#indexjacket {
background: url(images/indexbkgd.jpg);
width:990px;
height:726px;
margin:0 auto;
margin-top:40px;
z-index:1;
position:relative;
}

#textstrip {
background: url(images/textstrip.jpg);
width:1014px;
height:156px;
position:absolute;
top:445px;
left:-10px;
z-index:2;
}

#transbox {
background-color:#66;
width:493px;;
height:379px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:3;
position:absolute;
top:255px;
left:39px;
}

#indextext {
background: url(images/indextext.png);
width:465px;
height:357px;
position:absolute;
top:265px;
left:49px;
z-index:4;
}

#open {
font-family: orator std, courier;
font-size:3em;
position:absolute;
right:25px;
bottom:0px;
padding:0;
margin:0;
}

#open a:link {text-decoration:none; color:#fffde8;}
#open a:visited {text-decoration:none; color:#fffde8;}
#open a:hover {color:#32;}

Thanks for looking!!
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images not displaying in IE 7

[David Laakso]

Ellen Heitman wrote:
 I'm working on getting a test site up, but in the meantime I was hoping
 someone could look over my code quickly and see if anything jumps out as
 possibly causing this bug. My background images aren't showing up in IE 7.
 They work perfectly fine in both Safari and Firefox.
 I've looked over the code endlessly and tried a lot of different hacks from
 online forums, but nothing has worked yet. I've tried many times to change
 the position of the #indexjacket element, which is not showing up, with no
 success. The #textstrip element is also not appearing, although the
 #indextext one is. Any ideas??
 Here's the HTML:
   




Dunno, unless you already fixed it and kept it a secret. And you'll 
likely get more response if you actually brake-down and put your stuff 
on a server. 

All three background images show up on this end [1] in IE 6/7/8 (IE 
Tester/Parallels/Mac 10.4).  Opacity is not supported in Mac  
Opera/10.4; consequently,  the block #transbox is a no-show. However, it 
does show in PC Opera/9.60. Validate the markup: you've got a mangled 
thing.

[1] http://chelseacreekstudio.com/ca/cssd/ellen.html












__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background images

[Brian Hazelton]

When should I use an image and when should i use it as a background
image. Since CSS allows designers to seperate content from styling, when
should I use the image tag or should I never use the image tag?


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[Mark Henderson]

At 10:10 April 2009 Brian Hazelton wrote
 
 When should I use an image and when should i use it as a background
 image. Since CSS allows designers to seperate content from styling,
when
 should I use the image tag or should I never use the image tag?
 

Hi Brian, 

Have you done any background reading on this topic?[1] 

To cut a long story short, the summary version is background images for
presentation, img tags for content.  In some cases that will be a
judgement call, but for the most part it's self explanatory.


[1] http://tinyurl.com/cssvimg 


Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[Bobby Jack]

--- On Tue, 4/14/09, Brian Hazelton bdh_2...@comcast.net wrote:

 When should I use an image and when should i use it as a
 background image.

Semantically (and generally) speaking, it's recommended that you use an img 
element if the image is actually part of the content (e.g. you're displaying a 
bunch of photos, maybe with comments) and a background image if it's 
'decoration', such as a border. Of course, this can be subjective and the 
distinction gets somewhat blurry - a logo, for example, is not as obviously 
classified as the previous two examples. You may also find various benefits of 
one or the other for styling purposes, but you should try and avoid breaking 
the general rule if possible.

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[Kathy Wheeler]

On 15/04/2009, at 8:10 AM, Brian Hazelton wrote:

 When should I use an image and when should i use it as a background
 image.


If an image is purely decorative, it makes sense to utilise css  
background techniques and keep it out of the content flow. If on the  
other hand it's an integral part of the page information - say a  
photo of the rooms in an apartment to be rented, product photo or  
illustration, location map etc, then it makes sense to have it as an  
img in the content, along with appropriate alt (and optionally title  
and long description tags).

However I think may be more appropriate for discussion on webdesign-l  
(http://webdesign-L.com/)?

Regards,
KathyW.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[Brian Hazelton]

I have been told by a couple people this is off topic, I am not sure how
and to avoid angering eric any more I would like to get a clarification
as to how it is off topic and would like to apologize to everyone if it
is indeed off topic. Thanks


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[Bill Brown]

Brian Hazelton wrote:
 I have been told by a couple people this is off topic, I am not sure how
 and to avoid angering eric any more I would like to get a clarification
 as to how it is off topic and would like to apologize to everyone if it
 is indeed off topic. Thanks

I would opine that this is perfectly acceptable for this list as your 
question relates to whether or not to use CSS in a particular case. 
While it's not exactly a 'how-to' question, it certainly relates to CSS 
Best Practice.

Furthermore, as list moderators go, I've always found Eric to be very 
rational and compassionate in his moderation of this list. I doubt his 
reaction would be anything akin to anger regarding your question.

That being said, I think you'll also find Kathy's suggestion to check in 
on webdesign-l useful for answers to this question.

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Martyn Merrett]

Hi Chris,

What you've done there is partially correct (the HTML is fine).

However, in the CSS you've made the #logomiddle have it's dimensions
(960x1150px) but the A tag is empty.
You'd need to do something like this:

CSS:
#logomiddle {
 display: block;
 background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
 position: absolute;
 left: -490px;
 top: -150px;
 height: 1150px;
 width: 960px;
}
#logomiddle a
{
display: block;
height: 1150px; /* same as height above */
width: 960px; /* same as width above */
}

I've just tested this and it works correctly in FF3  IE6.
Based on the code you've used I'm guessing this has something to do
with your indexpage9.html? ;)

Ta,

~Mx
http://www.mxdx.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Christopher R]

Sorry, I don't follow and is there a major difference ?


On Mon, Apr 6, 2009 at 7:22 PM Jack Timmons jorac...@gmail.com wrote:
On Mon, Apr 6, 2009 at 12:37 PM, Christopher R majes...@thecreativesheep.ca
  wrote:
 
  HTML:
 
  span id=logomiddlea href=www.cokecola.com/a/span /* coka cola
  is just a test URL */
 
 
 You shouldn't be bothering with positioning. Move your spans inside your
 anchors, not outside. Throw in some text, and use spans to hide it. Place
 background on the anchor. Position block to anchor.
 -- 
 -Jack Timmons
 http://www.trotlc.com
 Twitter: @codeacula
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Christopher R]

Oh, I tried it and I so far it appears that it works so all I was missing was 
to tell the a tag to be {display: block} and it had to be
the height and width of the #logomiddle.  I've tried to make the link size 
smaller by going as low as 200px but then it just doesn't work, I'm going to 
see if I can make it smaller.

On Tue, Apr 7, 2009 at 8:53 AM Martyn Merrett mx.css...@googlemail.com 
wrote:
Hi Chris,
 
 What you've done there is partially correct (the HTML is fine).
 
 However, in the CSS you've made the #logomiddle have it's dimensions
 (960x1150px) but the A tag is empty.
 You'd need to do something like this:
 
 CSS:
 #logomiddle {
  display: block;
  background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
  position: absolute;
  left: -490px;
  top: -150px;
  height: 1150px;
  width: 960px;
 }
 #logomiddle a
 {
 display: block;
 height: 1150px; /* same as height above */
 width: 960px; /* same as width above */
 }
 
 I've just tested this and it works correctly in FF3  IE6.
 Based on the code you've used I'm guessing this has something to do
 with your indexpage9.html? ;)
 
 Ta,
 
 ~Mx
 http://www.mxdx.co.uk
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background Images clickable links

[Christopher R]

I was reading up on how to create links from background images, so I came 
across this page
which mentions the following:
http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
Simple enough one thought, I applied it like so to my code:

HTML:

span id=logomiddlea href=www.cokecola.com/a/span /* coka cola is 
just a test URL */

CSS:

#logomiddle {
  display: block;
  background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
  display: block;
  position: absolute;
  left: -490px;
  top: -150px;
  height: 1150px;
  width: 960px;
  z-index: 1;
}

I added display: block as it mentions but there is some mentioning of 
positioning that has gotten me lost.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Christopher R]

Well the concept they mention is pretty easy, but I can't get it to work.


On Mon, Apr 6, 2009 at 6:19 PM Krystian - Sunlust sunl...@gmail.com wrote:
I don't get what's the point of doing that , why not just use an image
 as a link?
 
 
 
 On 4/6/09, Christopher R majes...@thecreativesheep.ca wrote:
  I was reading up on how to create links from background images, so I came
  across this page
  which mentions the following:
  http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
  Simple enough one thought, I applied it like so to my code:
 
  HTML:
 
  span id=logomiddlea href=www.cokecola.com/a/span /* coka cola is
  just a test URL */
 
  CSS:
 
  #logomiddle {
display: block;
background: url(header-web-page-graphic-done3_01.png) no-repeat top
  center;
display: block;
position: absolute;
left: -490px;
top: -150px;
height: 1150px;
width: 960px;
z-index: 1;
  }
 
  I added display: block as it mentions but there is some mentioning of
  positioning that has gotten me lost.
 
 
  __
  css-discuss [cs...@lists.css-discuss.org]
  http://www.css-discuss.org/mailman/listinfo/css-d
  List wiki/FAQ -- http://css-discuss.incutio.com/
  List policies -- http://css-discuss.org/policies.html
  Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
 
 
 -- 
 Krystian Szastok
 Affordable, Freelance Web Designer in Eastbourne, East Sussex:
 http://eastbournewebdesign.net
 Mobile UK (Orange): 07528 036 337
 Call for more information or email me.
 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Krystian - Sunlust]

I don't get what's the point of doing that , why not just use an image
as a link?



On 4/6/09, Christopher R majes...@thecreativesheep.ca wrote:
 I was reading up on how to create links from background images, so I came
 across this page
 which mentions the following:
 http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
 Simple enough one thought, I applied it like so to my code:

 HTML:

 span id=logomiddlea href=www.cokecola.com/a/span /* coka cola is
 just a test URL */

 CSS:

 #logomiddle {
   display: block;
   background: url(header-web-page-graphic-done3_01.png) no-repeat top
 center;
   display: block;
   position: absolute;
   left: -490px;
   top: -150px;
   height: 1150px;
   width: 960px;
   z-index: 1;
 }

 I added display: block as it mentions but there is some mentioning of
 positioning that has gotten me lost.


 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 
Krystian Szastok
Affordable, Freelance Web Designer in Eastbourne, East Sussex:
http://eastbournewebdesign.net
Mobile UK (Orange): 07528 036 337
Call for more information or email me.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Jack Timmons]

On Mon, Apr 6, 2009 at 12:37 PM, Christopher R majes...@thecreativesheep.ca
 wrote:

 HTML:

 span id=logomiddlea href=www.cokecola.com/a/span /* coka cola
 is just a test URL */


You shouldn't be bothering with positioning. Move your spans inside your
anchors, not outside. Throw in some text, and use spans to hide it. Place
background on the anchor. Position block to anchor.
-- 
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images offset 1px horizontal in Firefox

[phidlerwerf]

I've got a new effort at http://stmconsultants.com for which I used a  
freecsstemplates.com layout as a starting point. In Firefox 3.0.5  
(running Mac OS X 10.4.11), for some reason, I get a single-pixel- 
wide vertical line in the background color along the right edge of  
the header background image and the same on the left of the footer  
background image, plus a few other odd pixels near the lower right  
corner of the main content div. This doesn't appear in Safari or the  
BBEdit Preview.

My css file is at http://stmconsultants.com/default.css and the  
background images and all page-wide DIVs are 939px; there doesn't  
seem to be anything in the 940 range, and I can't find any sort of  
1px offset that would be doing this. I'll appreciate any help!

Thanks,
Paul
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images offset 1px horizontal in Firefox

[Gunlaug Sørtun]

phidlerw...@gmail.com wrote:
 http://stmconsultants.com

 In Firefox 3.0.5 (running Mac OS X 10.4.11), for some reason, I get a
  single-pixel- wide vertical line in the background color along the 
 right edge of the header background image and the same on the left of
  the footer background image, plus a few other odd pixels near the 
 lower right corner of the main content div.

Normal for all Gecko based browsers. They have problems hitting the
exact positions and dimensions - all at the same time, especially when
given odd numbers and larger sizes.

Change window-width slightly - slowly - and Gecko may or may not hit the
right spots at various sizes.

Note that all browsers (that I know of) may introduce +/-1px
calculation-errors on some window-widths for _some_ layouts on some
screen-resolutions, simply because of number-rounding.

Simplest solution: make element-dimensions 1px narrower...

#page {width: 938px;}

...which is an even number that Gecko handles better, and also covers up
for its remaining calculation-flaws. Won't hurt in any browser.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images on List Items

[Chris Akins]

 The page in question
 http://www.college-algebra.com/essays/toc_essays.html
 In FF the background images on the gray menu items appear exactly where I
 want them between the left border and the text.
 In IE7 they are almost completely hidden under the left border.
 How do I correct this?


I haven't looked at your code, but can probably help.  If you haven't
started by zeroing out your margins AND padding on your list elements
(ul, li, a tags) then explicitly setting them in your stylesheet
rules, you'll often run into what you're seeing.  It's the differences
between browser defaults in how they treat list items.  Some browsers
use padding, some margins for their default settings.  To counter
this, you must make it look at the settings you want your list
elements to have.

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background Images on List Items

[Del Wegener]

Good Morning;

The page in question
http://www.college-algebra.com/essays/toc_essays.html
In FF the background images on the gray menu items appear exactly where I 
want them between the left border and the text.
In IE7 they are almost completely hidden under the left border.
How do I correct this?

Thanks for your help.

Del
[EMAIL PROTECTED]


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images on List Items

[Del Wegener]

 The page in question
 http://www.college-algebra.com/essays/toc_essays.html
 In FF the background images on the gray menu items appear exactly where I
 want them between the left border and the text.
 In IE7 they are almost completely hidden under the left border.
 How do I correct this?

I tried your suggestions and got nowhere.  Probably my fault.

However, it seems that related to background-position
FF computes from the left edge of the left border
IE computes from the right edge of the left border

Armed with that guess I build an IE only stylesheet in which I set the
background-position 1em (the width of the left border) more than for FF. 
Worked GREAT!

Is my observation about the two methods of computing correct?

Thanks

Del 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images on List Items

[Gunlaug Sørtun]

Del Wegener wrote:

 http://www.college-algebra.com/essays/toc_essays.html In FF the 
 background images on the gray menu items appear exactly where I 
 want them between the left border and the text. In IE7 they are 
 almost completely hidden under the left border. How do I 
 correct this?

 Is my observation about the two methods of computing correct?

No. :-)

1: delete the IE-only styles - it's the wrong approach.

2: add a 'hasLayout'[1] trigger to the anchor, as IE7 and older don't
recognize 'display: block' on its own, and _that_ is causing the problem.

Adding...
.navlist li a {height: 1%;}
...will do the trick.


If you want to fine-tune the line-up a little further across
browser-land, you can add...

.navlist li {margin-bottom: -1px; position: relative;}

...which will cover up for IE7' calculation errors and IE6' unstable border.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images on List Items

[Del Wegener]

 Adding...
 .navlist li a {height: 1%;}
 ...will do the trick.
 Georg

 [1]http://www.satzansatz.de/cssd/onhavinglayout.html
 -- 
 http://www.gunlaug.no

Thanks Georg.  That worked fine.  I have no idea why, but maybe I will 
understand it better after I study [1] above.
I do like the idea of avoiding an ie stylesheet.

Del 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images in divs

[Kristina Floyd]

On 11/02/2008, Carrie Strongwater Drazin [EMAIL PROTECTED] wrote:


 We are trying to put dividers between paragraphs using background images
 in divs but, they never show up. Should we not be using divs?



HI Carrie

Do you have a url we could look at?

Thanks
Kristina
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images in divs

[Valerie Wininger]

I believe she fixed her problem.  After my initial suggestion to specify a
width/height for those divs, she replied that she got it--I think she meant
to reply to the list, but actually only replied to me.

Valerie
www.valeriewininger.com

On Thu, Feb 14, 2008 at 7:06 AM, Kristina Floyd [EMAIL PROTECTED]
wrote:

 On 11/02/2008, Carrie Strongwater Drazin [EMAIL PROTECTED] wrote:
 
 
  We are trying to put dividers between paragraphs using background images
  in divs but, they never show up. Should we not be using divs?



 HI Carrie

 Do you have a url we could look at?

 Thanks
 Kristina
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 
Valerie Wininger
www.valeriewininger.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images in divs

[David Hucklesby]

On Mon, 11 Feb 2008 10:32:33 -0500, Carrie Strongwater Drazin wrote:
 Hi all,
 We are trying to put dividers between paragraphs using background images in 
 divs but,
 they never show up. Should we not be using divs? Any suggestions would be 
 greatly
 appreciated or any sample code that has worked with this scenario.

How about using horizontal rules?
  http://www.sovavsiti.cz/css/hr.html

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background images in divs

[Carrie Strongwater Drazin]

Hi all,
We are trying to put dividers between paragraphs using background images
in divs but, they never show up. Should we not be using divs?
Any suggestions would be greatly appreciated or any sample code that  
has worked
with this scenario.
Thank you.
Carrie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images in divs

[Valerie Wininger]

Are you setting a width/height on those divs?  If their only content is a
background image, they won't show up, as those don't count as content.

Valerie

On Feb 11, 2008 10:32 AM, Carrie Strongwater Drazin [EMAIL PROTECTED]
wrote:

 Hi all,
 We are trying to put dividers between paragraphs using background images
 in divs but, they never show up. Should we not be using divs?
 Any suggestions would be greatly appreciated or any sample code that
 has worked
 with this scenario.
 Thank you.
 Carrie
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 
Valerie Wininger
www.valeriewininger.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background images

[Kathryn Crutcher]

A new site requires a gradient background image, repeat x, and a flower
outline image behind the upper right corner. Is there a css solution? Design
needs to be center aligned. Wider screens will show more of the flower
image. 
http://www.grandconnections.com/buttercup/ shows the design as one large
jpg. 
 
Thanks,
KC
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images in divs

[ed good]

The panels(tabs) are all showing the same background image(images/uk.gif). What 
I want is to have a different background image for each div. I tried to do this 
with a different 
image putting a background image on the dhtmlgoodies_iTab class and changed the 
class to on one of the divs to dhtmlgoodies_iTab but it didn´t work right. I 
would be very greatful if someone could tell me how to get this working. Thank 
you very much for any pointers.
   
  URL: http://216.219.94.105/index3.html
   
  DIVS:
DIV id=dhtmlgoodies_tabView1
DIV class=dhtmlgoodies_aTabFirst Tab/DIV
DIV class=dhtmlgoodies_aTabSecond Tab/DIV
DIV class=dhtmlgoodies_aTabThird Tab/DIV
DIV class=dhtmlgoodies_aTabFouth tabBR
/DIV/DIV
  
CSS:
.dhtmlgoodies_tabPane {
 BORDER-BOTTOM: #e5e5e5 1px solid; HEIGHT: 21px
}
.dhtmlgoodies_aTab {
 BORDER-RIGHT: #e5e5e5 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; 
PADDING-BOTTOM: 5px; BORDER-LEFT: #e5e5e5 1px solid; PADDING-TOP: 5px; 
BORDER-BOTTOM: #e5e5e5 1px solid; FONT-FAMILY: Trebuchet MS, Lucida Sans 
Unicode, Arial, sans-serif; background-image: url(../images/uk.gif);  
BACKGROUND-REPEAT: no-repeat
}
  .dhtmlgoodies_iTab {
 BORDER-RIGHT: #e5e5e5 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; 
PADDING-BOTTOM: 5px; BORDER-LEFT: #e5e5e5 1px solid; PADDING-TOP: 5px; 
BORDER-BOTTOM: #e5e5e5 1px solid; FONT-FAMILY: Trebuchet MS, Lucida Sans 
Unicode, Arial, sans-serif; background-image: url(../images/worldmap.gif);  
BACKGROUND-REPEAT: no-repeat
}
.dhtmlgoodies_tabPane DIV {
 BACKGROUND-POSITION: left bottom; PADDING-LEFT: 3px; FLOAT: left; MARGIN-LEFT: 
0px; VERTICAL-ALIGN: middle; CURSOR: pointer; BOTTOM: -1px; MARGIN-RIGHT: 0px;  
BACKGROUND-REPEAT: no-repeat; POSITION: relative; HEIGHT: 90%
}
.dhtmlgoodies_tabPane .tabActive {
 Z-INDEX: 10; BACKGROUND-IMAGE: url(../images/tab_left_active.gif); 
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.dhtmlgoodies_tabPane .tabInactive {
 Z-INDEX: 1; BACKGROUND-IMAGE: url(../images/tab_left_inactive.gif); 
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.dhtmlgoodies_tabPane .inactiveTabOver {
 BACKGROUND-IMAGE: url(../images/tab_left_over.gif); MARGIN-LEFT: 0px; 
MARGIN-RIGHT: 0px
}
.dhtmlgoodies_tabPane SPAN {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; FLOAT: left; 
VERTICAL-ALIGN: top; LINE-HEIGHT: 21px; FONT-FAMILY: arial
}
.dhtmlgoodies_tabPane .tabActive SPAN {
 PADDING-BOTTOM: 1px; LINE-HEIGHT: 20px
}
.dhtmlgoodies_tabPane IMG {
 FLOAT: left


   
-
 Yahoo! Mail is the world's favourite email. Don't settle for less, sign up for 
your freeaccount today.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images in divs

[ed good]

The panels(tabs) are all showing the same background image(images/uk.gif). What 
I want is to have a different background image for each div. I tried to do this 
with a different 
image putting a background image on the dhtmlgoodies_iTab class and changed the 
class to on one of the divs to dhtmlgoodies_iTab but it didn´t work right. I 
would be very greatful if someone could tell me how to get this working. Thank 
you.
  URL: http://216.219.94.105/index3.html
  DIVS:
DIV id=dhtmlgoodies_tabView1
DIV class=dhtmlgoodies_aTabFirst Tab/DIV
DIV class=dhtmlgoodies_aTabSecond Tab/DIV
DIV class=dhtmlgoodies_aTabThird Tab/DIV
DIV class=dhtmlgoodies_aTabFouth tabBR
/DIV/DIV
  
CSS:
.dhtmlgoodies_tabPane {
 BORDER-BOTTOM: #e5e5e5 1px solid; HEIGHT: 21px
}
.dhtmlgoodies_aTab {
 BORDER-RIGHT: #e5e5e5 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; 
PADDING-BOTTOM: 5px; BORDER-LEFT: #e5e5e5 1px solid; PADDING-TOP: 5px; 
BORDER-BOTTOM: #e5e5e5 1px solid; FONT-FAMILY: Trebuchet MS, Lucida Sans 
Unicode, Arial, sans-serif; background-image: url(../images/uk.gif);  
BACKGROUND-REPEAT: no-repeat
}
  .dhtmlgoodies_iTab {
 BORDER-RIGHT: #e5e5e5 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; 
PADDING-BOTTOM: 5px; BORDER-LEFT: #e5e5e5 1px solid; PADDING-TOP: 5px; 
BORDER-BOTTOM: #e5e5e5 1px solid; FONT-FAMILY: Trebuchet MS, Lucida Sans 
Unicode, Arial, sans-serif; background-image: url(../images/worldmap.gif);  
BACKGROUND-REPEAT: no-repeat
}
.dhtmlgoodies_tabPane DIV {
 BACKGROUND-POSITION: left bottom; PADDING-LEFT: 3px; FLOAT: left; MARGIN-LEFT: 
0px; VERTICAL-ALIGN: middle; CURSOR: pointer; BOTTOM: -1px; MARGIN-RIGHT: 0px;  
BACKGROUND-REPEAT: no-repeat; POSITION: relative; HEIGHT: 90%
}
.dhtmlgoodies_tabPane .tabActive {
 Z-INDEX: 10; BACKGROUND-IMAGE: url(../images/tab_left_active.gif); 
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.dhtmlgoodies_tabPane .tabInactive {
 Z-INDEX: 1; BACKGROUND-IMAGE: url(../images/tab_left_inactive.gif); 
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.dhtmlgoodies_tabPane .inactiveTabOver {
 BACKGROUND-IMAGE: url(../images/tab_left_over.gif); MARGIN-LEFT: 0px; 
MARGIN-RIGHT: 0px
}
.dhtmlgoodies_tabPane SPAN {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; FLOAT: left; 
VERTICAL-ALIGN: top; LINE-HEIGHT: 21px; FONT-FAMILY: arial
}
.dhtmlgoodies_tabPane .tabActive SPAN {
 PADDING-BOTTOM: 1px; LINE-HEIGHT: 20px
}
.dhtmlgoodies_tabPane IMG {
 FLOAT: left



-
 All New Yahoo! Mail – Tired of unwanted email come-ons? Let our SpamGuard 
protect you.

-
 New Yahoo! Mail is the ultimate force in competitive emailing. Find out more 
at the Yahoo! Mail Championships. Plus: play games and win prizes.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images

[Micky Hulse]

Howdy,

This may seem like a silly question, but... Are there any restrictions 
(or, suggested best practices) when it comes to width/height of small 
background image tiles?

I am trying to optimize some template graphics, but did not want to go 
over-board when it comes to tiled background images... IIRC, several 
years ago some browsers had redraw probs when it came to small (few px 
by few px) background images.

Lol, what are your thoughts? Should I be worried about this, or can I go 
as small as needed for optimal file size? :)

TIA!
Cheers,
Micky

-- 
Wishlists: http://snipurl.com/vrs9
Switch: http://browsehappy.com/
  BCC?: http://snipurl.com/w6f8
My: http://del.icio.us/mhulse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[Ingo Chao]

Micky Hulse wrote:
 Micky Hulse wrote:
 Lol, what are your thoughts? Should I be worried about this, or can I go 
 as small as needed for optimal file size? :)
 
 To be a little more on topic, I am just wondering if there are 
 restrictions and/or problems when it comes to using small bitmaps (in 
 width/height) as CSS background tiles?
 
 Is it better to tile (via CSS) a 20px wide/30px tall background vs. 
 tiling a 1px wide/30px tall background? Hrmmm. I guess this could go OT 
 for the list... If so, sorry in advance... Pleas email off-list if 
 answer has nothing to do with how CSS interacts with the said image.
 

The rendering of a 2x2 px PNG (tiled, bg-image on the html element) in 
IE7 may take 10 seconds or more. Some users may find this inacceptable.

I'd use 100x100px at minimum.

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[Micky Hulse]

Micky Hulse wrote:
 Lol, what are your thoughts? Should I be worried about this, or can I go 
 as small as needed for optimal file size? :)

To be a little more on topic, I am just wondering if there are 
restrictions and/or problems when it comes to using small bitmaps (in 
width/height) as CSS background tiles?

Is it better to tile (via CSS) a 20px wide/30px tall background vs. 
tiling a 1px wide/30px tall background? Hrmmm. I guess this could go OT 
for the list... If so, sorry in advance... Pleas email off-list if 
answer has nothing to do with how CSS interacts with the said image.

Cheers,
Micky


-- 
Wishlists: http://snipurl.com/vrs9
Switch: http://browsehappy.com/
  BCC?: http://snipurl.com/w6f8
My: http://del.icio.us/mhulse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[Micky Hulse]

Ingo Chao wrote:
 The rendering of a 2x2 px PNG (tiled, bg-image on the html element) in 
 IE7 may take 10 seconds or more. Some users may find this inacceptable.

Ah, interesting. Is that just the html element, or other elements too? 
Also, is that just PNG (24/8) or does that apply to other graphic 
formats too?

 I'd use 100x100px at minimum.

Sounds good. I am definitely getting some varied responses. Still all 
good advice though. :)

Many thanks Ingo and all for the help, I greatly appreciate it. Sorry if 
this was a bit OT for the list -- I did not think before sending. :D

Cheers,
Micky

-- 
Wishlists: http://snipurl.com/vrs9
Switch: http://browsehappy.com/
  BCC?: http://snipurl.com/w6f8
My: http://del.icio.us/mhulse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[Conyers, Dwayne]

Micky Hulse ink wired:

 Are there any restrictions (or, suggested best practices) 
 when it comes to width/height of small background image 
 tiles?

Depends.  

On an intranet where I know the bandwidth and the settings of the users
workstations, I can gauge how a tile effect will look.  

On the internet where you will have Macs and PCs, 640x480 through
1280x1024... I tend to go for the (near)lowest common denominator.

Your mileage may vary.


-- 
I made magic once.  Now, the sofa is gone.
http://dwacon.blogspot.com
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background images cut to html

[Robert Schooley]

Hello,

I have created a wire frame in PS and am now cutting it to html.  There is a 
gradient background 1 pixel wide that is applied to the body element of the 
document.  There is also a header, footer, and main content area slices that 
all have a drop shadow that fades into the background image.  The header and 
footer look fine, but the content area is presenting an issue.

The body element has a 1px wide gradient that is 200px tall that fades into the 
background color of the element.
The header looks fine, as it was cut from the wire frame and the drop shadow 
and background line up correctly.
The footer as well looks fine, as it is outside of the height of the background 
image.

The height of the body background image is greater then the height of the 
header background image.  The content selector contains the remainder of the 
transition.  This overlap is say 200px and can set the element's height 
applying the background image as such.  

Once content grows past this area I do not know how to apply a slice to this 
area.

Maybe there is a simpler way to go about this, thank you for any insight.

*
{
color: #000;
margin: 0px;
padding: 0px;
}

body
{
background-color: #e8e8e8;
background-image: 
url('../../PresentationLayer/Template/Images/background-gray-sliver.gif');
background-repeat: repeat-x;
font-family: Arial, Verdana, Tahoma;
font-size: .82em;
margin-top: 0px;
width: 100%;
}

div#container
{
margin: auto;
width: 800px;
} 

div#header 
{
background-image: 
url('../../PresentationLayer/Template/Images/background-header.gif');
background-repeat: no-repeat;
height: 128px;
width: 800px;
}

div#content
{
background-image: 
url('../../PresentationLayer/Template/Images/background-content.gif');
height: auto;
min-height: 200px;
width: 800px;
}

div#footer
{
background-image: 
url('../../PresentationLayer/Template/Images/background-footer.gif');
background-repeat: no-repeat;
height: 128px;
width: 800px;
}


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

html xmlns=http://www.w3.org/1999/xhtml; 
head runat=server
titleTitle goes here/title
/head
body
form id=form1 runat=server

!-- container --
div id=container

!-- header --
div id=header
h1header goes here/h1
/div

!-- content --
div id=content
pcontent goes here/p
/div

!-- footer --
div id=footer
pfooter/p
/div

/div

/form
/body
/html




 

No need to miss a message. Get email on-the-go 
with Yahoo! Mail for Mobile. Get started.
http://mobile.yahoo.com/mail 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background-images for divs

[Stephen Oravec]

I`m trying to figure out how to get my images, I`d like to add to fit the
div`s background properly. I`m using
a 3 column layout that I created with StyleMaster.

When I create the images for the div`s in photoShop the width x height seems
to get cut off
not showing parts of the image`s.



my CSS for this :

/* GLOBAL SETTINGS */
html {
margin: 0em;
padding: 0em;
background-image: url(/1234.png);
background-attachment: fixed;
}
body {
width: 836px;
margin: 10px;
padding: 0px;
}
div#container {
width: 836px; font-family: sans-serif;
line-height: 1.4em;
font-size: .75em;
}
body, a:link, a:visited, #maincontent, #rightcolumn, #leftcolumn {
text-decoration: none;
}
/* HEADER SETTINGS */
div#header {
padding: 1.5em;
text-align: center;
width: 798px;
border: 1px solid;
margin-top: 10px;
background-image: url(/1234.png);
}
/* MAIN CONTENT SETTINGS */
div#maincontent {
text-align: justify;
border-right: dashed 1px;
border-left: dashed 1px;
width: 450px;
margin-left: 180px;
padding: 1em;
margin-top: 2px;
border-top: 1px solid;
border-bottom: 1px solid;
margin-bottom: 10px;
background-color: #cc;
background-image: url(/1234.png);
}
#myimage {
float: left;
padding: .5em;
}
#myimage2 {
float: right;
 padding: .5em;
}
#quote1{
padding: 1em;
background-color: #e6e6e6;
border: 2px #408000 outset;
background-image: url(/1234.png);
}
#quote2, #quote3{
padding: 1em;
background-color: #e6e6e6;
border: 2px #408000 outset;
background-image: url(/1234.png);
}
/* LEFT COLUMN SETTINGS */
div#leftcolumn {
float: left;
text-align: center;
width: 175px;
border: 1px solid;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
background-color: #cc;
background-image: url(/1234.png);
}
/* RIGHT COLUMN SETTINGS */
div#rightcolumn {
float: right;
width: 175px;
text-align: center;
border: 1px solid;
margin-top: 2px;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #cc;
background-image: url(/1234.png);
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images for divs

[Ian Young]

To: css-d@lists.css-discuss.org
 Subject: [css-d] background-images for divs


 I`m trying to figure out how to get my images, I`d like to add to fit the
 div`s background properly. I`m using
 a 3 column layout that I created with StyleMaster.

 When I create the images for the div`s in photoShop the width x
 height seems
 to get cut off
 not showing parts of the image`s.


You need to set the height in the div so that the image can be shown eg if
your background image is 100 x 50 px height would need to be at least 50px.

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.430 / Virus Database: 268.14.16/552 - Release Date: 26/11/2006
11:30

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images for divs

[francky]

Ian Young wrote:

To: css-d@lists.css-discuss.org
  

Subject: [css-d] background-images for divs

I`m trying to figure out how to get my images, I`d like to add to fit the
div`s background properly. 
I`m using a 3 column layout that I created with StyleMaster.

When I create the images for the div`s in photoShop the width x
height seems to get cut off not showing parts of the image`s.


You need to set the height in the div so that the image can be shown eg if
your background image is 100 x 50 px height would need to be at least 50px.

Ian

Hi Stephen,
Pasting your css in a html page, I saw your 3 column model has some 
problems in the width settings too.

* see testpage1
  http://home.tiscali.nl/developerscorner/css-discuss/test-stephen-1.htm.
  Style Master (I don't know it) should have given some warnings! ;-)

Solutions are possible too

* see testpage2
  http://home.tiscali.nl/developerscorner/css-discuss/test-stephen-2.htm,
  or you can use 1 of the many working models from the Wiki page 3
  col-layouts http://css-discuss.incutio.com/?page=ThreeColumnLayouts.

I hope the img problems are gone if the model is repaired. If not, 
please upload a problematic page and give us a link to it: without html 
it's difficult/impossible to see what the css is doing in real life.

Succes and greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images covered by floated element - fix?

[Todd Sweet]

In response to:

The easiest way to do this is just to assign the heading a left margin
equal to the width of #navcontainer so that it moves out from underneath
the float. This doesn't appear to be a problem for your page since your
#navcontainer is a fixed and known width.

Reply:

Thank you.  Yes, I knew from troubleshooting that adding a margin
would bump the bg-image out from under the float.  However, since
other h2s will need to flow beneath the navigation bar I didn't want
to apply a margin-left to all h2 elements.  Knowing there is no
alternative I can simply create a class for the first couple h2s.

Thanks again,

Todd
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images covered by floated element - fix?

[Zoe M. Gillenwater]

Todd Sweet wrote:
 In response to:

 The easiest way to do this is just to assign the heading a left margin
 equal to the width of #navcontainer so that it moves out from underneath
 the float. This doesn't appear to be a problem for your page since your
 #navcontainer is a fixed and known width.

 Reply:

 Thank you.  Yes, I knew from troubleshooting that adding a margin
 would bump the bg-image out from under the float.  However, since
 other h2s will need to flow beneath the navigation bar I didn't want
 to apply a margin-left to all h2 elements.  Knowing there is no
 alternative I can simply create a class for the first couple h2s.
   

There are actually alternatives. If you're interested in them, please 
post the URL to your page again, and I'm sure somebody will help you 
with it (though I can't be sure that the alternatives wouldn't also 
involve classing the specific h2s in question -- they may or may not 
require such a thing. I'd have to play and see.)

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images covered by floated element - fix?

[Todd Sweet]

In a prototype I'm working on I have placed a floated div containing
a vertical navigation bar inside a primary content area of our page.
In that content area are a number of h2 elements which have a
background image applied to them via CSS that acts as a custom bullet
point.  I assumed the contents of the h2 would flow around the
floated element, inlcuding the bg-image.  Instead the bg-image remains
pinned to the left margin, invisible beneath the floated element.

I'm wondering if there is a way to keep the bg-image pinned to the h2 text?

Here is a link to the prototype I'm working on, along with the bit of
CSS I think applies.  The h2 should all have a small arrow next to
them.  The ones on the right do, while the Be Part of the Tradition
and Upcoming Events do not.

http://tinyurl.com/h3n9j

/* h2 in question */

h2 {
margin: 0px 0px 8px;
padding: 0px 0px 0px 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-weight: bold;
color: #33;
letter-spacing: 1px;
background-image: url(/images/shared/h2_bullet.gif);
background-repeat: no-repeat;
background-position: top left;
font-variant: small-caps;
}

/* floated vertical navigation div */

#navcontainer {float: left; margin:0 10px 0 0 !important; padding:0
!important; }

Thanks in advance for any advice.

Todd
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images covered by floated element - fix?

[Zoe M. Gillenwater]

Todd Sweet wrote:
 In a prototype I'm working on I have placed a floated div containing
 a vertical navigation bar inside a primary content area of our page.
 In that content area are a number of h2 elements which have a
 background image applied to them via CSS that acts as a custom bullet
 point.  I assumed the contents of the h2 would flow around the
 floated element, inlcuding the bg-image.  Instead the bg-image remains
 pinned to the left margin, invisible beneath the floated element.
   

Nope. Better read up on how floats work -- they layer over other boxes, 
but displace those boxes' inline content only. Suggested articles:
http://www.communitymx.com/abstract.cfm?cid=AC008
http://css.maxdesign.com.au/floatutorial/
http://www.brainjar.com/css/positioning/
http://www.complexspiral.com/publications/containing-floats/

 I'm wondering if there is a way to keep the bg-image pinned to the h2 text?
   

No, but there are ways you can get the h2 out from underneath the float, 
which will accomplish the same thing.

 Here is a link to the prototype I'm working on, along with the bit of
 CSS I think applies.  The h2 should all have a small arrow next to
 them.  The ones on the right do, while the Be Part of the Tradition
 and Upcoming Events do not.

 http://tinyurl.com/h3n9j

 /* h2 in question */

 h2 {
   margin: 0px 0px 8px;
   padding: 0px 0px 0px 20px;
   font-family: Georgia, Times New Roman, Times, serif;
   font-size: 14px;
   font-weight: bold;
   color: #33;
   letter-spacing: 1px;
   background-image: url(/images/shared/h2_bullet.gif);
   background-repeat: no-repeat;
   background-position: top left;
   font-variant: small-caps;
 }

 /* floated vertical navigation div */

 #navcontainer {float: left; margin:0 10px 0 0 !important; padding:0
 !important; }
   

The easiest way to do this is just to assign the heading a left margin 
equal to the width of #navcontainer so that it moves out from underneath 
the float. This doesn't appear to be a problem for your page since your 
#navcontainer is a fixed and known width.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background Images wont load in IE when the parent div is set to display:none

[Bevan Christians]

I currently have this issue on my website.
I use png's, so in order to fix them in ie I use the fixer() javascript code
which changes them into span's with the background png img and the
Alpha Transparency filter doohicky.

But when the parent div is set to display:none onload
ie doesnt load the background images for the children divs

so when u open the tab and set the parent div to display:block
*tada* no background images.

Anyone have a clue, or URL or blog entry or something that i can look
at that may present a solution?

I have searched through the archives in CSS-D, i didnt find anything :


Thanks In Advance
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background-images don't hover in IE

[Jan Deppisch]

Hi,

I want to hover some floated background-images, but IE6 doesn't reset
the hover-state back to normal.

HTML:
div id=header
  a href=/service/span class=service title=ServiceService/span/a
  a href=/specials/span class=specials
title=SpecialsSpecials/span/a
/div

CSS:
#header {
  height: 106px;
}

#header a {
  float: left;
}

#header a:link span {
  display: block;
  height: 106px;
  text-indent: -5000px;
}

#header a:hover span {
  cursor: pointer;
}

#header a span.service {
  width: 134px;
  background: #fff url(../../_media/img/header/service_hell.jpg)
no-repeat center center;
}

#header a:hover span.service {
  width: 134px;
  background: #fff url(../../_media/img/header/service.jpg) no-repeat
center center;
}

#header a span.specials {
  width: 245px;
  background: #fff url(../../_media/img/header/specials_hell.jpg)
no-repeat center center;
}

#header a:hover span.specials {
  width: 245px;
  background: #fff url(../../_media/img/header/specials.jpg) no-repeat
center center;
}

Any other idea on how to optimize the css is welcome.

Thanks!

Jan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background images missing in IE

[Christy Collins]

Anyone know what I need to do to get IE to display these background  
images?  It's the yellow triangle things above the navigation.

TIA
-Christy

http://ee.berkshireradio.org/index.php/main/test/

CSS:
#navcontainer{
text-align: left;
position: absolute;
top: 20px;
left: 550px;
}

ul#navlist{
margin: 0;
padding: 0;
white-space: nowrap;
}

#navlist li{
display: inline;
list-style-type: none;
font: 16px Geneva, sans-serif;
color: #666;
text-decoration: none;
letter-spacing: .1em;
padding: 0 15px;
background: url(i/nav_bkg.gif) no-repeat top center;
padding-top: 22px;
}

#navlist li a{
color: #999;
text-decoration: none;
border: 0;
}

#navlist a:hover{
color: #c03;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images missing in IE

[Ingo Chao]

Christy Collins wrote:
 Anyone know what I need to do to get IE to display these background  
 images?  It's the yellow triangle things above the navigation.
 
 TIA
 -Christy
 
 http://ee.berkshireradio.org/index.php/main/test/

Again, IE has a broken inline model. You really should consider using 
floats for a horizontal menu.

This time, you'll need

ul#navlist { ... position:relative}

#navlist li a { ... zoom:1 }

and, in addition, you have to delete all the whitespace in the html 
between the li's, like so

ul id=navlist
li id=pba href=#programs/a/li
li id=oba href=#organization/a/li
 /ul


Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background images

[Stuart King]

How can I make sure the entire background image is viewed, making the
page size the same dimensions as the background image, even if there
is little text?

Thank you.

--s
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[david]

Stuart King wrote:
 How can I make sure the entire background image is viewed, making the
 page size the same dimensions as the background image, even if there
 is little text?

Hmm, you can't control the size of my browser window ... ;-)

I would think you set min-height and min-width on the body to match your 
background image dimensions?

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background images

[david]

francky wrote:
 david wrote:
 
 Stuart King wrote:
  
 How can I make sure the entire background image is viewed, making the
 page size the same dimensions as the background image, even if there
 is little text?

 Hmm, you can't control the size of my browser window ...  ;-) 

 Hi David:
 No?  =-O   The Bubble-Gum Page! 
 http://home.tiscali.nl/developerscorner/css-discuss/bubble-gum.htm

Sorry, Javascript turned off by default and kept that way. ;-)

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background Images Again

[Zellie D . McClelland]

Apologies for my neophyte status.

I now am having difficulty getting my background image to appear
in a content div.

http://www.zdsign.com/gwp/new2.html
http://www.zdsign.com/gwp/new2.css

Can anyone recommend the best CSS guide book?

Thank you ever so much. 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images Again

[[EMAIL PROTECTED]]

Original Message:
-
From: Tyson Tate [EMAIL PROTECTED]
Date: Mon, 6 Feb 2006 14:05:40 -0800
To: [EMAIL PROTECTED], css-d@lists.css-discuss.org
Subject: Re: [css-d] Background Images Again


Please validate your XHTML and CSS before posting to the list. Many  
problems posted to this list can be solved by simply validating. That  
said, the CSS validator[1] points directly to your problem:

background: url(images/bg.gif) repeat x;

Should be:

background: url(images/bg.gif) repeat-x;

I apologize. I had validated -- I missed it. Thank you


Regards,
Tyson Tate

[1] http://jigsaw.w3.org/css-validator/


--
Tyson Tate
* Graphic Designer, CalPoly Library
* Assistant Librarian  Member, Mustang Band
* Team Member, CalPoly Triathlon Team
* Webmaster  Active, Kappa Kappa Psi
* Editor, Entropy Magazine
* Freelance Graphic Designer


On Feb 6, 2006, at 1:12 PM, Zellie D. McClelland wrote:

 Apologies for my neophyte status.

 I now am having difficulty getting my background image to appear
 in a content div.

 http://www.zdsign.com/gwp/new2.html
 http://www.zdsign.com/gwp/new2.css

 Can anyone recommend the best CSS guide book?

 Thank you ever so much.

 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


mail2web - Check your email from the web at
http://mail2web.com/ .


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background-images alignment questions

[Steve Clason]

On 2/3/2006 12:35 AM August Shamino wrote:

 Some web pages divide a background-image across several elements, so that it 
 looks like just one image. How can you do that safely with CSS? In a cross 
 browser way? Especially if you want a particular element's background-image 
 to line up with the body's background-image, pixel perfect?

Most (but not all) of the time I find it better to leave background 
images in one piece, but the question of how is pretty hard to answer 
without something concrete to look at.

If you could provide a URL to a page you're working on we might be able 
to help.

-- 
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background-images alignment questions

[August Shamino]

Wow, this is weird. Have never used a group like this before, and have no 
clue where this email will actually be going. Anyway, see if a question 
works:


Some web pages divide a background-image across several elements, so that it 
looks like just one image. How can you do that safely with CSS? In a cross 
browser way? Especially if you want a particular element's background-image 
to line up with the body's background-image, pixel perfect?

_
On the road to retirement? Check out MSN Life Events for advice on how to 
get there! http://lifeevents.msn.com/category.aspx?cid=Retirement

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[Roberto Gorjão]

Olá Abyss,


Maybe it's this you want?...

body {
  background-image: url(/images/whatever.jpg);
  background-position:center;
  background-repeat:no-repeat;
}

Hth!

Adeus,

Roberto


--

Abyss Information wrote:

Hiya all,

does anyone know where I can grab some css code to display a 
background image right in the center of the page

regardless of the screen resolution?


Regards,
Abyss
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background images

[Abyss Information]

Hiya all,

does anyone know where I can grab some css code to display a background image 
right in the center of the page
regardless of the screen resolution?


Regards,
Abyss
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[David Laakso]

Abyss Information wrote:


Hiya all,
does anyone know where I can grab some css code to display a background image 
right in the center of the page
regardless of the screen resolution?
Regards,
Abyss

 


I'm not sure of anything, much less whatever it is you're looking for.
FWIW: http://www.dlaakso.com/center-stuff.html
Regards,
David Laakso


--
David Laakso
http://www.dlaakso.com/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background images

[Roberto Gorjão]

Olá Abyss,

Maybe it's this you want?...

body {
   background-image: url(/images/whatever.jpg);
   background-position:center;
   background-repeat:no-repeat;
}

Hth!

Adeus,

Roberto

--

Abyss Information wrote:


Hiya all,

does anyone know where I can grab some css code to display a background image 
right in the center of the page
regardless of the screen resolution?


Regards,
Abyss
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images in Mac OS X / IE 5.x

[Adam Kuehn]

Tim Zappe wrote:

I am currently designing a website that will not display the background
images in Mac OS X / IE 5.x. I'm baffled and I don't know what to do. Can
someone much smarter than me please give me a hand. Much appreciated.

Here's the link: http://www.western.edu/webmaster/redesign/


I explicitly deny being smarter than you, but I do have some 
experience with IE/Mac, which does not like URLs enclosed in single 
quotes.  Use no quotes or double quotes in your image URLs, and 
everything will work just fine.


Nice site, BTW.

--

-Adam Kuehn
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/