Re: [css-d] Drop shadows on a non-white background

[David Laakso]

David Laakso wrote:




Error Correction:
"text-shadow" should read "box-shadow"



> Ellen Heitman wrote:
>> I want to use some drop shadows against a dark green background. All the
>> tutorials I have found are for white backgrounds. (I even tried some of
>> these with my background and the drop shadow didn't work.) Any ideas 
>> on how
>> to create drop shadows against colored backgrounds? Thanks!
>>   
>
>
> Very simple CSS drop-shadows on any background-color is easy enough to 
> produce.
> 
> Just a matter of using a darker shade of whatever the hue is for the 
> shadow.
>
> Gets a little tougher trying to get the shades balanced when using two 
> or more multiple shadows.
>
> The CSS3 text-shadow module could be a neat, easy and viable 
> alternative, if it were not for the fact that it is so poorly 
> supported cross-browser-- at least as of this writing.
>
> If you are trying to do a drop-shadow using images for the shadows; 
> and, you have run into a CSS issue in positioning those images, you'll 
> need to post a clickable link to the problem page.
>

__
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] Drop shadows on a non-white background

[David Laakso]

Ellen Heitman wrote:
> I want to use some drop shadows against a dark green background. All the
> tutorials I have found are for white backgrounds. (I even tried some of
> these with my background and the drop shadow didn't work.) Any ideas on how
> to create drop shadows against colored backgrounds? Thanks!
>   


Very simple CSS drop-shadows on any background-color is easy enough to 
produce.

Just a matter of using a darker shade of whatever the hue is for the shadow.

Gets a little tougher trying to get the shades balanced when using two 
or more multiple shadows.

The CSS3 text-shadow module could be a neat, easy and viable 
alternative, if it were not for the fact that it is so poorly supported 
cross-browser-- at least as of this writing.

If you are trying to do a drop-shadow using images for the shadows; and, 
you have run into a CSS issue in positioning those images, you'll need 
to post a clickable link to the problem page.
__
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] Drop shadows on a non-white background

[Tim Snadden]

On 13/05/2009, at 9:56 AM, Ellen Heitman wrote:

> I want to use some drop shadows against a dark green background. All  
> the
> tutorials I have found are for white backgrounds. (I even tried some  
> of
> these with my background and the drop shadow didn't work.)

If you are planning on creating your drop shadows in a graphics app  
(e.g. Photoshop) rather than via CSS then this list is the wrong place  
to ask I'm afraid. This is a CSS list.

If you *are* doing it with CSS (only supported in Safari 3+ and  
Firefox 3.5) have a look at this: http://www.css3.info/preview/box-shadow/

All you need to do to make you shadow visible is make it darker (or  
make it white and go for a glow effect!)
__
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] column without tables or fixed width

[Gunlaug Sørtun]

Jack Bates wrote:

> Does CSS support presenting the text in a straight up and down
> column?

Yes, see...


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] Regarding negative value

[Philippe Wittenbergh]

On May 12, 2009, at 1:28 PM, Gautam Bhatia wrote:

>  My question was regarding values,Is it a bad practice to
> have negative values in your css file, for example
>
> padding : -5%;

Only some properties accept negative values. Padding is not one of them


The following properties take negative values
margin
z-index
top, left, bottom, right
text-indent, word-spacing, letter-spacing
vertical-align
background-position

(CSS3)
outline-offset
box-shadow
text-shadow

Check the spec(s) to make sure.


Philippe
---
Philippe Wittenbergh
http://l-c-n.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] Vertically Centering multiple images in a div.

[Mark Henderson]

Oliver Garvey wrote:
> Hi guys, I'm having a lot of trouble trying to get some images vertically
> centered in a div. I'm creating a gallery and underneath the main image have
> a set of thumbnails which can be scrolled to select an image to display. The
> problem is, no matter what I try I just can't get the images to center
> vertically.
>
> Here's a link to one of the pages: http://garvey.netne.net/beach.html
>   

Hi Oliver,

I haven't taken the time to implement the necessary changes to get this 
working, but I'm sure if you take a look at Bruno Fassino's Gallery 
example[1] you will see it can be done. Incidentally, Bruno has some 
other interesting layout techniques you may be interested in (just 
navigate to the home page and go from there).

If for some reason you can't get this approach to work, post back and we 
can take another look. Good luck.

HTH
Mark

[1] http://www.brunildo.org/test/ImgThumbIBL2b.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] column without tables or fixed width

[Jack Bates]

http://campcoop.com/

^ A basic page with an image on the left and text on the right. The
image is randomly rotated with other images of different dimensions.

To get the image on the left, I currently "float: left", so the text
flows around the bottom of the image. Instead I want the text to appear
in a straight up and down column.

I want to avoid tables, and hard coding a left margin on the text
doesn't work for the dimensions of all images. Everything else I've
tried flows the text around the bottom of the image.

Does CSS support presenting the text in a straight up and down column?
__
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] Drop shadows on a non-white background

[Ellen Heitman]

I want to use some drop shadows against a dark green background. All the
tutorials I have found are for white backgrounds. (I even tried some of
these with my background and the drop shadow didn't work.) Any ideas on how
to create drop shadows against colored backgrounds? 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] Hover over link - opacity

[Tim Snadden]

On 13/05/2009, at 3:59 AM, Niels Matthijs wrote:

>
> a {opacity:1;}
> a:hover {opacity:0.7;}

Bear in mind that if you want this to work in Internet Explorer you  
will need to include extra rules (preferably in a separate stylesheet  
included via conditional comments):

a { filter: alpha(opacity=100); }
a:hover { filter: alpha(opacity=70); }

Note that IE's opacity scale is 0-100 cf. 0-1.
__
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] Getting absolutely positioned divs with bottom: auto to end together

[David Laakso]

Michael Leibson wrote:
> Hi, David;
>
>
> Keep it in your "war chest," if you like, if for no other reason than 
> to compare a float vs absolute positioned structure for your visual.
>
> 
>
>  Thank-you very much!   I will definitely use it as a way to study 
> float-based design!!!   Perhaps, when/if the smoke clears and I've had 
> time to study floats via your page, I may very well replace my current 
> approach with it. 
>
> Forgive my ignorance -- this is a real beginner's question! -- but is 
> there any better way of my saving your 
> http://chelseacreekstudio.com/ca/cssd/ml-visual/ than by simply 
> viewing and then copying the source code? 
>
>
> - Michael



You are very welcome.

I will send an archive to you as an attachment off-list in a few minutes.

Otherwise to download:
Opera>File Save As>HTML with images
Firefox>File>Pick the appropriate method to suit your need.




__
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] Regarding negative value

[David Laakso]

Gautam Bhatia wrote:
> Hello all,
>  My question was regarding values,Is it a bad practice to
> have negative values in your css file, for example
>
> padding : -5%;
>
> Regards,
>
> Gautam Bhatia .
>
>
>   


Not on padding. Your CSS is not valid (negative values on padding are 
not allowed).

Negative values /are/ allowed on margins,

and negative values are sometime used in creating a stacking order, 
z-index, of absolute positioned elements.


There are a few other instances where negative values are allowed in the 
CSS2.1, CSS3, specs. Perhaps someone else can point you to them. I am 
brain dead at the moment.
__
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] Text won't flow around images in IE

[Carolyn Rosner]

Apologies if this has been asked a million times, but how do I get text to flow 
around floated images in IE? I don't put my images in divs; I just plunk them 
at the beginnings of paragraphs or heads and float them right or left. But in 
IE, the text won't wrap; it jumps below the bottom of the image. Code is:

.leftimage {   float: left;margin: 10px 15px 10px 0;  }

Is there a workaround?
Thanks for any advice, Carolyn
__
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] UL Menu Causing Separate Issues In IE and Firefox?

[Alan Gresley]

The Ferrett wrote:
> I'm working on a table-free layout with jQuery-based drop-down megamenus
> (which have a hover-based trigger that displays a panel).  The menus are
> ULs, though to make it fit underneath the logo they're contained in a DIV
> set to a "display: inline" (since otherwise, it doesn't validate).  
> 
> Though the page now validates, it's running into two problems in separate
> browsers.  
> 
> http://www.starcitygames.com/SCG_6/test.html


Hello Ferrett. That is one busy page.

> 
> In FIREFOX, the menu displays fine, but displays another line just below it
> - a narrow strip the height and background color of the menu that drops
> everything else down.  I'm not sure why this is happening.

Me neither, I can't see any difference (I don't see a line).


> In IE, if you hover your mouse over the "Buying Cards" link and see the
> (horrifically styled) drop-down panel, you'll note that the author in the
> text underneath the panel ("The Ferrett") bleeds through into the actual
> panel, even though the z-index on the panel is set to 10,000.  This could be
> a JavaScript issue, but I think it's CSS-related.  


You have given IE7 z-index:0. This causes the "ferret" text to be 
stacked higher than the list items [1] see example 10. So delete the 
z-index and then IE7 will treat it as *auto*.

.author_bio {
   position: relative;
   z-index: 0; /* DELETE */
}


Now you must add a z-index to the list item since in IE7, 
position:relative establishes a new stacking context. The behavior that 
you want is [1] example 6.

ul#menu li {
   display: inline;
   margin: 0.1em .5em;
   position: relative;
   background: none;
   z-index: 1; /* ADD */
}


You may want to hide this nonsense from non IE7- browsers. Like this.

* html .author_bio { z-index: auto; /* for IE6 */ }
*+html .author_bio { z-index: auto; /* for IE7 */ }

* html ul#menu li { z-index: 1; /* for IE6 */ }
*+html ul#menu li { z-index: 1; /* for IE7 */ }


1. 


BTW, If you move div#header in the source to below div#main-body then 
the layering (by the flow) will work without resorting to z-index. Give 
div#main-body a margin-top and absolutely position the div#header.


-- 
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/

[css-d] Regarding negative value

[Gautam Bhatia]

Hello all,
 My question was regarding values,Is it a bad practice to
have negative values in your css file, for example

padding : -5%;

Regards,

Gautam Bhatia .



__
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] Image bullets and floated images

[Stephen Tang]

Hi,
The final result of this line of thought is shown here:
http://stephentang.info/floattest/test2.html

Based on feedback here, I think this solves my issues:
- Changed the background bullet image into a list-style-image.
- Used position: relative and left properties on the ul to shift the
bulleted list away form the floated element, if the list extends past
the bottom of the floated element, wrapping occurs normally, which is
what was desired.

Thanks for those that who contributed advice to this.

--Stephen

On Tue, May 12, 2009 at 11:04 AM, Stephen Tang
 wrote:
> Hi Alan,
> Thanks for your input.  I may have to some browser hacking.  If the
> the bullet list item is long, it will wrap (which is what the end user
> wants to happen).  I think the positioning of the green bullet based
> on coordinates 310px, 8px will not work for lists that are underneath
> the floated element.  This area is managed by a content management
> system, so I don't have control over the content.  I may try swapping
> out the bullet image for a green disc, since the bullet image is
> really a green disc.
>
> Thanks,
> Stephen
>
> On Tue, May 12, 2009 at 10:40 AM, Alan Gresley  wrote:
>> Stephen Tang wrote:
>>>
>>> Hi,
>>> I have a div/image that is floated left from the rest of the content.
>>> My content consists primarily of  tags and lists.  The text needs
>>> to wrap below the floated dv/image.  This part is not difficult.
>>> However, I have a list where the bullets have been replaced with
>>> images.  When I do this, the image bullets are all the way to the left
>>> of the page and collides with the floated div/image.
>>>
>>> When I check this in firebug, I noticed that the  takes up the
>>> width of the parent element, so the bullet images are placed on the
>>> left side.  I wanted the bullets to be immediately next to the list
>>> items (if I use the default bullets, the bullets appear next to the
>>> list item. Is there any way to get the bullet images next to the list
>>> items again?  I don't want to jeopardize the text-wrapping either.
>>>
>>> Here is the URL:
>>> http://stephentang.info/floattest/test.html
>>>
>>> Thank you for your time in reading this.
>>>
>>> Sincerely,
>>> Stephen
>>
>>
>>
>> Hello Stephen. This works in Firefox. Change this CSS.
>>
>> ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; }
>>
>> to
>>
>> ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 310px
>> 8px; }
>>
>>
>> Image positions for list items vary widely across browserland. You may have
>> to hack browsers with this one.
>>
>>
>> --
>> 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] Hover over link - opacity

[Niels Matthijs]

As far as i can see, this shouldn't be any problem at all. Just switch
the opacity values. Normal case:

a {opacity:1;}
a:hover {opacity:0.7;}

what you want:

a {opacity:0.7;}
a:hover {opacity:1;}

That should about cover it I guess. Of course, it doesn't have to be 1,
you can choose any value between 0 and 1 as base value.

Greets,
Niels Matthijs

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ellen Heitman
Sent: 12 May 2009 16:30
To: css-d@lists.css-discuss.org
Subject: [css-d] Hover over link - opacity

I've come across numerous tutorials on how to alter the opacity of an
image
link when hovering over it. I've seen that you start with a less opaque
image and, when hovered over, the image becomes opaque. Can the reverse
be
done? Can I have the normal image, and when I hover over it, lessen the
opacity? I haven't seen any advice on how to do this, and I know that
opacity is sometimes a tricky thing in how browsers process it.
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-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] Hover over link - opacity

[Ellen Heitman]

I've come across numerous tutorials on how to alter the opacity of an image
link when hovering over it. I've seen that you start with a less opaque
image and, when hovered over, the image becomes opaque. Can the reverse be
done? Can I have the normal image, and when I hover over it, lessen the
opacity? I haven't seen any advice on how to do this, and I know that
opacity is sometimes a tricky thing in how browsers process it.
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] Image bullets and floated images

[Stephen Tang]

Hi Alan,
Thanks for your input.  I may have to some browser hacking.  If the
the bullet list item is long, it will wrap (which is what the end user
wants to happen).  I think the positioning of the green bullet based
on coordinates 310px, 8px will not work for lists that are underneath
the floated element.  This area is managed by a content management
system, so I don't have control over the content.  I may try swapping
out the bullet image for a green disc, since the bullet image is
really a green disc.

Thanks,
Stephen

On Tue, May 12, 2009 at 10:40 AM, Alan Gresley  wrote:
> Stephen Tang wrote:
>>
>> Hi,
>> I have a div/image that is floated left from the rest of the content.
>> My content consists primarily of  tags and lists.  The text needs
>> to wrap below the floated dv/image.  This part is not difficult.
>> However, I have a list where the bullets have been replaced with
>> images.  When I do this, the image bullets are all the way to the left
>> of the page and collides with the floated div/image.
>>
>> When I check this in firebug, I noticed that the  takes up the
>> width of the parent element, so the bullet images are placed on the
>> left side.  I wanted the bullets to be immediately next to the list
>> items (if I use the default bullets, the bullets appear next to the
>> list item. Is there any way to get the bullet images next to the list
>> items again?  I don't want to jeopardize the text-wrapping either.
>>
>> Here is the URL:
>> http://stephentang.info/floattest/test.html
>>
>> Thank you for your time in reading this.
>>
>> Sincerely,
>> Stephen
>
>
>
> Hello Stephen. This works in Firefox. Change this CSS.
>
> ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; }
>
> to
>
> ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 310px
> 8px; }
>
>
> Image positions for list items vary widely across browserland. You may have
> to hack browsers with this one.
>
>
> --
> 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/

[css-d] Vertically Centering multiple images in a div.

[Oliver Garvey]

Hi guys, I'm having a lot of trouble trying to get some images vertically
centered in a div. I'm creating a gallery and underneath the main image have
a set of thumbnails which can be scrolled to select an image to display. The
problem is, no matter what I try I just can't get the images to center
vertically.

Here's a link to one of the pages: http://garvey.netne.net/beach.html

This is the code I'm using for the div and images.

HTML















The Restaurant inside
The Restaurant
outside
Beach Bar
Central Bar
Dancefloor in front of Central
Bar
Buffet at Central Bar
This is the caption of image
number 7
This is the caption of image
number 8






CSS

#galleryContainer{

height:132px;/* Height of the images + 2 */
position:relative;
overflow:hidden;
padding:1px;

/* CSS HACK */
height: 134px;/* IE 5.x - Added 2 pixels for border left and
right */
height/* */:/**/132px;/* Other browsers */
height: /**/132px;

}
#arrow_left{
position:absolute;
left:0px;
z-index:10;
background-color: #FFF;
padding:1px;
}
#arrow_right{
position:absolute;
right:0px;
z-index:10;
background-color: #FFF;
padding:1px;
}

#theImages{
position:absolute;
height:132px;
vertical-align:middle;
display:table-cell;
left:40px;
width:10px;
margin:auto;
}
#theImages #slideEnd{
float:left;
}
#theImages a img{
float:left;
padding-right:1px;
filter: alpha(opacity=50);
opacity: 0.5;
cursor:pointer;
border:0px;
border:none;
display:block;
margin: auto auto;}

End Code

If anyone can point me in the right direction I'd be very grateful.

Thanks guys
__
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] Image bullets and floated images

[Alan Gresley]

Stephen Tang wrote:
> Hi,
> I have a div/image that is floated left from the rest of the content.
> My content consists primarily of  tags and lists.  The text needs
> to wrap below the floated dv/image.  This part is not difficult.
> However, I have a list where the bullets have been replaced with
> images.  When I do this, the image bullets are all the way to the left
> of the page and collides with the floated div/image.
> 
> When I check this in firebug, I noticed that the  takes up the
> width of the parent element, so the bullet images are placed on the
> left side.  I wanted the bullets to be immediately next to the list
> items (if I use the default bullets, the bullets appear next to the
> list item. Is there any way to get the bullet images next to the list
> items again?  I don't want to jeopardize the text-wrapping either.
> 
> Here is the URL:
> http://stephentang.info/floattest/test.html
> 
> Thank you for your time in reading this.
> 
> Sincerely,
> Stephen



Hello Stephen. This works in Firefox. Change this CSS.

ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; }

to

ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 
310px 8px; }


Image positions for list items vary widely across browserland. You may 
have to hack browsers with this one.


-- 
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] How do you dynamically change the size of graphics on a page?

[tedd]

At 5:37 PM -1000 5/11/09, Trevor wrote:
>Aloha!
>
>This is my first post, so be kind...
>
>Here's a site I've been playing around with:
>
>
>
>
>Right now the images are created at 150px square, but I list their 
>height and width as 300px.
>
>What I would like to know is how can you create CSS code to 
>dynamically change the dimensions of the images, say 75px for 
>thumbnails, 300px to get a good overview, 600px for examining the 
>color palette closely.
>
>Mahalo,

Trevor:

You might check out php -- I know I can dynamically change images to 
just about any size I want.

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.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] Image bullets and floated images

[Stephen Tang]

Hi Bill,
I did find one problem with your CSS.  If the bullet item's content is
really long, it will no longer wraps around the image. Because of the
inline-block, it will simply move the entire list below the floated
element.

Thanks for your suggestion anyway.

--Stephen

-- Forwarded message --
From: Bill Brown 
To: Stephen Tang 
Date: Mon, 11 May 2009 14:56:46 -0400
Subject: Re: [css-d] Image bullets and floated images
Stephen Tang wrote:
[snipped/]

list item. Is there any way to get the bullet images next to the list
items again?  I don't want to jeopardize the text-wrapping either.
http://stephentang.info/floattest/test.html


Something like this ought to work for you:
~~~
body, ul, p, li, div
 {margin:0;padding:0;}
.container
 {height:600px;width:700px;border:1px red solid;}
.floatedobj
 {border:1px blue solid;margin-right:20px;height:100px;width:300px;
 float:left;}
p
 {margin-bottom:5px;}
ul
 {list-style:none;margin:0;padding:0;display:inline-block;}
ul
 {display:inline!ie;}
ul li
 {list-style:none;margin:0;padding:0 0 0 10px;
 background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
~~~

Hope it helps.
--Bill

-- 

__
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] IE 8

[David Dorward]

2009/5/4 Climis, Tim :
> Microsoft has actually done something to make out jobs easier there.
>  (unbelievable, I know)  IE8 has a "Compatability View" button in the
> address bar, which when pressed, makes pages render as in IE7.
> So you don't need separate machines, nor do you need to keep IE7.

Don't use this for testing IE7 compatibility. It is designed to let
users attempt to view webpages which would otherwise break in IE8. It
is not designed as a testing tool.

As such it:

(a) Is not a perfectly compatible with IE7 - there are differences.

and

(b) It flags the URL as potentially incompatible with IE8 with
Microsoft. If enough users use IE7 mode, then the URL could be added
to a list of URLs for which compatibility mode is the default for IE8
users.

-- 
David Dorward 
__
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] Image bullets and floated images

[Stephen Tang]

Hi Brian,
Thanks for the information.  I tried that, and the bullets are no
longer centered.  I will have to see if that visual presentation
passes with our QA team and users.  Otherwise, a solution by Bill
Brown will most likely work as well.

Thanks,
Stephen

-- Forwarded message --
From: Brian Hazelton 
To: CSS-D 
Date: Mon, 11 May 2009 12:58:13 -0600
Subject: Re: [css-d] Image bullets and floated images

The best that I can come up with is that since it is just a circle and
not anything too intricate, you can just use the image as the list-style
type...list-style:url(image name);  the only problem with this is that
the image is not directly in the center of the text. Hope this helps.


-- Forwarded message --
From: Stephen Tang 
To: CSS-D 
Date: Mon, 11 May 2009 14:09:16 -0400
Subject: [css-d] Image bullets and floated images
Hi,
I have a div/image that is floated left from the rest of the content.
My content consists primarily of  tags and lists.  The text needs
to wrap below the floated dv/image.  This part is not difficult.
However, I have a list where the bullets have been replaced with
images.  When I do this, the image bullets are all the way to the left
of the page and collides with the floated div/image.

When I check this in firebug, I noticed that the  takes up the
width of the parent element, so the bullet images are placed on the
left side.  I wanted the bullets to be immediately next to the list
items (if I use the default bullets, the bullets appear next to the
list item. Is there any way to get the bullet images next to the list
items again?  I don't want to jeopardize the text-wrapping either.

Here is the URL:
http://stephentang.info/floattest/test.html

Thank you for your time in reading this.

Sincerely,
Stephen
__
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] Getting absolutely positioned divs with bottom: auto to end together

[David Laakso]

Michael Leibson wrote:
>
> Several weeks ago, I
> sought and received some help from this list re. my www.thinkingmusic.ca 
> website.  
>  
> While building two more
> pages for that site -- www.thinkingmusic.ca/analyses/coltrane,
> and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve 
> begun to implement some of your recommendations.  
>  
>   


Michael,

I believe Georg and Philippe have answered your questions, and Georg has 
provided several online working solutions. Consequently, you are good to 
go, and should be able to meet your pending advertising deadline without 
issue.

Since you and I have discussed a totally different approach, and more 
particularly because I really like your visual concept, I took a crack 
at a float version-- no absolute positioning is used. No hacks needed, 
thus far anyway. Cursory checked in IE 6/7/8 and Mac browsers. Any 
amount of content, whether short or longs, should work alright.

Keep it in your "war chest," if you like, if for no other reason than to 
compare a float vs absolute positioned structure for your visual.



Good luck and best,

~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] IE7 dropdown menu disappearing

[Philippe Wittenbergh]

On May 12, 2009, at 6:46 PM, Andrew Frazier wrote:

> 

Unrelated to your problem, but something you should think about:
At the moment, your page is not very friendly to keyboard users: there  
is absolutely no feedback as to where/which link has focus when  
accessed from the keyboard.
You suppress the outline on the  (stylesheet.css, line 3) but do  
not provide any alternative (a:focus :... ??).

Philippe
---
Philippe Wittenbergh
http://l-c-n.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] IE7 dropdown menu disappearing

[Andrew Frazier]

On Tue, 12 May 2009 10:46:05 +0100, Andrew Frazier 
 wrote:

> 1) when the dropdown below 'Store' is activated moving the mouse down it  
> causes the menu to disappear as soon as the mouse pointer reaches any  
> block level item beneath it - the images on the home page, the  tag  
> on the other pages.
> 2) there is a third-level fly-out menu appearing from this dropdown  
> which has an unexpected space between the two menus only on the first  
> item of the dropdown.
> 3) even though the links are set to display: block, moving the mouse off  
> the text of the links in the dropdown causes the flyout to disappear.



Isn't it always the way that after spending ages fruitlessly searching for a 
solution, as soon as I ask for help I find the answer myself.

number 1 is solved by adding a background colour to the  tag, numbers 2 and 
3 are solved by adding a height to the  tag.



Andrew Frazier

-- 
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/





__
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] IE7 dropdown menu disappearing

[Andrew Frazier]

I have a css dropdown menu on this site:


Stylesheets here:  and here: 



That works fine in most 'good' browsers (Opera, Firefox, Safari) and even in 
IE6 with some persuading, but in IE7 there a number of issues:
1) when the dropdown below 'Store' is activated moving the mouse down it causes 
the menu to disappear as soon as the mouse pointer reaches any block level item 
beneath it - the images on the home page, the  tag on the other pages.
2) there is a third-level fly-out menu appearing from this dropdown which has 
an unexpected space between the two menus only on the first item of the 
dropdown.
3) even though the links are set to display: block, moving the mouse off the 
text of the links in the dropdown causes the flyout to disappear.

Any help greatly appreciated.

Andrew Frazier

-- 
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/






__
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] UL Menu Causing Separate Issues In IE and Firefox?

[Dan Gooch]

The Ferrett wrote:
> I'm working on a table-free layout with jQuery-based drop-down megamenus
> (which have a hover-based trigger that displays a panel).  The menus are
> ULs, though to make it fit underneath the logo they're contained in a DIV
> set to a "display: inline" (since otherwise, it doesn't validate). 
> Though the page now validates, it's running into two problems in separate
> browsers. 
> http://www.starcitygames.com/SCG_6/test.html
>
> In FIREFOX, the menu displays fine, but displays another line just 
> below it
> - a narrow strip the height and background color of the menu that drops
> everything else down.  I'm not sure why this is happening.
>
> In IE, if you hover your mouse over the "Buying Cards" link and see the
> (horrifically styled) drop-down panel, you'll note that the author in the
> text underneath the panel ("The Ferrett") bleeds through into the actual
> panel, even though the z-index on the panel is set to 10,000.  This 
> could be
> a JavaScript issue, but I think it's CSS-related. 
> In CHROME, OPERA, and SAFARI: No problems. 
> Any ideas?  The relevant markup and CSS is below, though obviously the 
> whole
> page can be visited. 
> Thanks in advance!  [...]

Can't answer the IE problem from this computer, but the problem in 
Firefox seems to be with the navigation_bar div. Setting the border to 
0px eliminated the line, and reducing the margin to 0px eliminated the 
extra space. I'm not sure what your intentions are for these values, as 
my removing them seemed to produce no visual effect in Chrome or Safari, 
but it's possible removing them might fix your problem.

Sincerely,
Dan Gooch
__
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/