Re: [css-d] SOLVED Re: URL exceeds width of Pop up window and doesn't wrap
SOLVED Here is a link that seems to work in several browsers. http://forums.cocoaforge.com/viewtopic.php?f=13t=21981 On Mon, Apr 5, 2010 at 12:24 PM, Nancy Johnson njohnso...@gmail.com wrote: I have an Email a Friend using an open new window js. I've set the pop-up window size to be 525px wide. ?Many times the URL exceeds the width of the new window. ?I've set up some divs with pixel widths nothing works. ?I even tried a fixed width tabular structure. Is there any way through CSS to force the URL to wrap? This is a content management system and the URL (friendly url) is dynamically generated off the page title/or title of an article which can be extremely long. Thanks in advance Nancy Johnson Just a quick note on this for future reference: there is a partly supported property in CSS3 known as text-overflow which allows you to truncate long strings. See http://dev.w3.org/csswg/css3-text/#text-overflow -- AstraZeneca UK Limited is a company incorporated in England and Wales with registered number: 03674842 and a registered office at 15 Stanhope Gate, London W1K 1LN. Confidentiality Notice: This message is private and may contain confidential, proprietary and legally privileged information. If you have received this message in error, please notify us and remove it from your system and note that you must not copy, distribute or take any action in reliance on it. Any unauthorised use or disclosure of the contents of this message is not permitted and may be unlawful. Disclaimer: Email messages may be subject to delays, interception, non-delivery and unauthorised alterations. Therefore, information expressed in this message is not given or endorsed by AstraZeneca UK Limited unless otherwise notified by an authorised representative independent of this message. No contractual relationship is created by this message by any person unless specifically indicated by agreement in writing other than email. Monitoring: AstraZeneca UK Limited may monitor email traffic data and content for the purposes of the prevention and detection of crime, ensuring the security of our computer systems and checking Compliance with our Code of Conduct and Policies. __ 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] Can media values be used as a part of a selector ?
Finding myself writing (this morning) :
style type=text/css media=print
BODY {font-family: Arial Narrow, sans-serif}
/style
style type=text/css media=screen
BODY {font-family: Trebuchet MS, sans-serif}
/style
I felt the urge to want to simplify it, along the lines of
style type=text/css
BODY::media:print {font-family: Arial Narrow, sans-serif}
BODY::media:screen {font-family: Trebuchet MS, sans-serif}
/style
but could find nothing in the spec's to suggest that such
simplification is possible. Is anyone aware of any technique
that could be used in circumstances such as this ?
Philip Taylor
__
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] Can media values be used as a part of a selector ?
On 7/04/2010, at 10:11 PM, Philip TAYLOR wrote:
Finding myself writing (this morning) :
style type=text/css media=print
BODY {font-family: Arial Narrow, sans-serif}
/style
style type=text/css media=screen
BODY {font-family: Trebuchet MS, sans-serif}
/style
I felt the urge to want to simplify it, along the lines of
style type=text/css
BODY::media:print {font-family: Arial Narrow, sans-serif}
BODY::media:screen {font-family: Trebuchet MS, sans-serif}
/style
You can handle this as follows:
@media print {
body { font-family: Arial Narrow, sans-serif ; }
}
@media screen {
body {font-family: Trebuchet MS, sans-serif; }
}
Cheers, Tim
__
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] Can media values be used as a part of a selector ?
Tim Snadden wrote:
You can handle this as follows:
@media print {
body { font-family: Arial Narrow, sans-serif ; }
}
@media screen {
body {font-family: Trebuchet MS, sans-serif; }
}
Thank you, Tim. I assume that the @media constructs
appear within a style element; is that correct ?
** Phil.
__
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] Can media values be used as a part of a selector ?
On 7/04/2010, at 10:26 PM, Philip TAYLOR wrote:
Tim Snadden wrote:
You can handle this as follows:
@media print {
body { font-family: Arial Narrow, sans-serif ; }
}
@media screen {
body {font-family: Trebuchet MS, sans-serif; }
}
Thank you, Tim. I assume that the @media constructs
appear within a style element; is that correct ?
They can appear in style elements or in external stylesheets. Also,
you aren't limited to one ruleset.
__
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] Can media values be used as a part of a selector ?
Tim Snadden wrote: They can appear instyle elements or in external stylesheets. Also, you aren't limited to one ruleset. Excellent, many thanks for the clarification. Already deployed, tested and in use :-) ** Phil. __ 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-Image in form-field
On 7/04/2010, at 3:30 AM, Tim Snadden wrote: Your message entitled Text indent won't work. Some options I can think of: Try using input type=image Try using button Graceful degradation for IE8 (no bg image, no absolute position). By the way, on Firefox 3.6 Mac the button is sitting below the bottom border of the text input. Cheers, Tim Thank you for the answer. This morning I've found another way for IE7 and put text-transform: capitalize; into the stylesheet. It works and obviously doesn't bother with other browsers. Thank you for pointing me to the Firefox-Mac problem. That's the next problem to deal with. Cheers, Leo __ 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] Positioning problem
At least part of why it is confusing to get those javascript rotating images to
place correctly is because there are two properties controlling them:
/* - rotator in-page placement - */
div#rotator {
background: #000;
width:300px;
position: relative;
z-index: 1;
padding: 0;
margin: 0;
text-align: center;
}
/* rotator css */
div#rotator span {
float:right;
position:absolute;
list-style: none;
left: 459px;
top: -360px;
I don't know javascript so I'm fumbling around some here. When I change
div#rotator span (the style that places the image within the page to relative,
they are no longer contained in the same place. When they rotate through they
appear all over the page.
Is it possible that this is a case where the absolute positioning is required?
Any help is greatly appreciated!
Matthew
On Apr 6, 2010, at 3:52 PM, Matthew wrote:
Thank you, but when I float: left the div containing the text, and float:
right the image, the image vanishes and the crowd at the bottom is no longer
behind the next. Nor does it stop at the right point if the browser becomes
too small.
On Apr 6, 2010, at 3:42 PM, David Laakso wrote:
Matthew wrote:
Hi everyone,
Please check out this site:
www.em-w.com/oldschoolband
Can someone help me figure out how to control the positioning of the image
in the right side without using absolute positioning? I can't do it! I
can't make objects appear next to each other with relative positioning; I
can only stack them. I realize absolute positioning is not the way to go
here, but its all I can do. I also notice that it appears in different
places depending on the browser I'm using. I'm not getting something
fundamental about CSS. Please help if you think you can.
Thank you!
Matthew
Simple: float.
http://chelseacreekstudio.com/ca/cssd/3.htm
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/
__
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: Background-Image in form-field
On Tue, Apr 6, 2010 at 11:30 AM, Leo Luchs leolu...@googlemail.com wrote: Looking at http://www.fuenf-nrw.de/2010/index_test.php you will notice a search-form in the upper right corner. IE7 does not only show the magnifying-glass but also the value Go. I've hoped to prevent it by using text-indent: -px. That works in most browsers, but not in IE7. Is there something I could do to prevent IE7 from showing the value? Leo I found this online and it works for me on submit buttons. Not sure why, but adding these two properties hides text on IE. color: transparent; text-transform: uppercase; - Jeff __ 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: Background-Image in form-field
On Wed, Apr 7, 2010 at 06:39 PM, jeffrey morin rufus2...@gmail.com wrote: I found this online and it works for me on submit buttons. Not sure why, but adding these two properties hides text on IE. color: transparent; text-transform: uppercase; That works as well. It is strange - uppercase or capitalize, never in 1000 years I would have even tested that to achieve the desired result. Thank you for the suggesion. Leo __ 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] help with custom bullet in nested list
Hello,
I am using a graphic as a background image on all lists in my site. The
problem is that on nested lists, the graphic appears twice on the li that is
the first item for the nested list. How do I make this NOT happen?
My style is written like this:
ul li {
background: url(../images/rightarrow.gif) no-repeat;
}
My html for the nested list is correctly formatted. Thank you.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.comhttp://www.checkoutacollege.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] help with custom bullet in nested list
Angela French wrote:
I am using a graphic as a background image on all lists in my site.
The problem is that on nested lists, the graphic appears twice on the
li that is the first item for the nested list.
This would be easier if you specified the URL, so that we can see the markup
and all of the CSS code.
My style is written like this:
ul li {
background: url(../images/rightarrow.gif) no-repeat;
}
Presumably that's not all... probably you additionally have at least
something like
ul li { list-style: none }
so that you don't get both the default bullets and your customized list
markers.
My html for the nested list is correctly formatted.
But it matters what the markup really is.
If you have
ul
li.../li
li.../li
lisome text
ulli.../li/ul/li
/ul
then the problem does not occur, since the inner list starts on a new line.
But if you omit the some text part, which acts like a heading or a legend
for the inner list that follows, so that you have
ul
li.../li
li.../li
li
ulli.../li/ul/li
/ul
then there's a problem, since you get a background image for the li
element that contains the list as well as for the li elements inside it.
And the outer li element here starts on the same line as the first inner
li element, and they both have the background image.
The natural approach would be to suppress the background image if a li
element contains a ul element, but we don't have a suitable selector at
our disposal. We cannot write a selector that selects elements according to
their content (contained elements).
An obvious workaround is to use classes, but things get somewhat awkward
then. I hope someone has a better idea, but I'd write
li class=inner_list
ulli.../li/ul/li
with
ul li.inner_list { background: none; }
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
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] Positioning problem
Matthew wrote: Thank you, but when I float: left the div containing the text, and float: right the image, the image vanishes and the crowd at the bottom is no longer behind the next. Nor does it stop at the right point if the browser becomes too small. Man, Otis is going to drive everyone on this list nuts-- and then some. http://chelseacreekstudio.com/ca/cssd/otis.htm Switched to jquery on ap. See change in CSS and markup. Best, ~d PS Bottom post, please. -- 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-d] PNG Image Position/ Size question - CSS
Not sure if this is even doable with CSS, but here goes... I have a picture - head and torso, that I removed the background from, added a shadow, and saved as a png with alpha transparency. It is about 520 x 520 px. I set it to be fixed position at the bottom 0 and left 0 - and a z-index to place it in front of everything. It looks great (to me) when I look at it on a screen with 1024x768 resolution screen it gives me just the effect I am after. Examole: http://tinyurl.com/yfl8nb8 But if someone looks at it in a smaller window - say 800 x600 then the image is too large and ends up blocking too much of the text behind it. Basically what I am after is that whatever size the window is, I would like to resize the image (without a lot of distortion) so that it was roughly about one fourth of the usable view port. Is there a way to resize the image using CSS that will work in most current browsers. I am really not concerned about IE6 - mainly want to address users of FF and IE7 and up. If CSS can't do this, is there something else that would be worth investigating? Thanks for any info you can provide or links you can point me to. __ 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] PNG Image Position/ Size question - CSS
Am 07.04.10 21:45, schrieb Conjurer:
[...]
It is about 520 x 520 px. I set it to be fixed position at the
bottom 0 and left 0 - and a z-index to place it in front of
everything.
Not quite, but see below.
It looks great (to me) when I look at it on a screen with 1024x768
resolution screen it gives me just the effect I am after.
Examole: http://tinyurl.com/yfl8nb8
[...]
Is there a way to resize the image using CSS that will work in most
current browsers. I am really not concerned about IE6 - mainly want
to address users of FF and IE7 and up. If CSS can't do this, is there
something else that would be worth investigating?
[...]
Hi,
(since this is my first post, I hope this is appropriate, otherwise let
me know)
here's one way:
in your CSS (commented) replace:
/* this targets an img element *within* an element with the ID #ring */
#rings img {
/* this does *not* what you think it does */
/* it *would* send the image further 'away' from the viewer, */
/* probably behind the text */
z-index: -1;
}
with this:
/* target an img element with the ID #rings */
img#rings {
/* set the size *relative* to the width of the */
/* containing block - usually the viewport */
width: 50%;
/* only use either 'height' or 'width' here, */
/* unless you want your guy to be 'slinky' */
/* move image 'closer' to the viewer */
z-index: 10;
}
in your HTML replace this:
img src=p7iq/img/Rings_png8.png alt=Steel Rings Melt Right Through
Each Other name=rings width=515 height=504 class=pos_fixed
id=rings /
with this:
img src=p7iq/img/Rings_png8.png alt=Steel Rings Melt Right Through
Each Other name=rings class=pos_fixed id=rings /
Working example (using your code):
http://www.joergen-lang.com/css-d/examples/img-resize/
(tested with Safari 4, FF 3.6, OS X 10.6.3)
Note: I have deliberately omitted the 'height' and 'width' attributes
from the HTML markup to make it easier for CSS to take over.
[improvements, rants, etc. welcome]
hope this helps,
Joergen
__
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] PNG Image Position/ Size question - CSS
Joergen W. Lang wrote:
Examole: http://tinyurl.com/yfl8nb8
here's one way:
Working example (using your code):
http://www.joergen-lang.com/css-d/examples/img-resize/
Joergen
Joergen, in your example try (assuming we all share a sense of humor)?
img#rings {
/*delete width: 50%;*/
max-width: 50%; /*add*/
height: auto; /*add*/
z-index: 10;
}
--
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] PNG Image Position/ Size question - CSS
*** REPLY SEPARATOR ***
On 7/04/2010 at 8:26 p.m. David Laakso wrote:
Joergen, in your example try (assuming we all share a sense of humor)?
img#rings {
/*delete width: 50%;*/
max-width: 50%; /*add*/
height: auto; /*add*/
z-index: 10;
}
If I may be so bold as to suggest:
max-height: 65%; (+/-)
width: auto;
On smaller sizes, such as 800x600, the image overlaps the
heavily-compressed navigation menu... (Gotta love Project-7's stuff eh!)
Just a thought...
Cheers...
---
Karl
__
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] Question about cross browser compatibility of max-width
Some time, in the now distant past, I tried using max-width in a css project. The behavior was so quirky across browsers that I solved it another way. The numerous code samples suggested on this list lead me to believe that the situation has changed and that max-width is a very functional property. So I guess the question is: Are there any gotchas to look out for? Or, perhaps standard cross browser considerations when using it. I don't intend to go hog wild with it, but max-width could certainly have its place. Thanks for any input. Claude __ 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/
