Re: [css-d] wrapping long URLs
Is there a CSS way to make long URLs wrap? Possibly, however, the easiest option is to shorten the URLs via the backend or JavaScript: http://www.onlinetools.org/tools/shortlinks/ -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] site check
You could optimize your stylesheet quite a bit by removing all of these rules
border-top:0 none;
and other similar ones. If you don't tell it to put a border there,
then it won't. No need to tell it there is no border. However where
you do set a border on all sides consider learning shorthand. Instead
of
border-top:1px solid white;
border-bottom:1px solid white;
border-left: 1px solid white;
border-right:1px solid white;
you could just go with
border: 1px solid white;
Also fonts can go from
font-family:verdana;
font-size:10px;
to
font: 10px verdana;
Also separate multiple font faces with a comma.
In the the portfolio, the link to www.iksystems.co.uk is broken.
You've got http://www.freelance-developer.co.uk/www.iksystems.co.uk
because of a missing http://;
The layout and design looks good on Mac in Firefox 1.0.4 at 1280 x
854. I might bump up the 10px verdana links by one, as they appear
very pixelated, but that's just me. Overall, nice site!
On 5/16/05, Wayne Douglas [EMAIL PROTECTED] wrote:
Second attempt at CSS layout, some thoughts from the house if you please and
a bit of feedback from the Mac fraternity:
http://www.freelance-developer.co.uk/ http://www.freelance-developer.co.uk/
Don't pay too much attention to the content text itself, its all really just
placeholders. What's the loading times like? Do you like the general look and
feel? Not very original I know but I'm not a designer!!! That's the hard part
I'd rather leave to other people!!
:)
w
__
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/
--
Chris Gandolfo
{Designer Standards Advocate}
Twelve Horses
__
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] sentence-spacing?
I was wondering if anyone knows of an appropriate way to increase or decrease sentence-spacing - for which there is no property I can find in the CSS2 spec. By this, I mean to simulate the effect of double-spacing after a period, which some people in my company insist on doing - even after reading the following informative article: Singlespace vs. Double Space http://www.webword.com/reports/period.html I thought there should be a good way to use CSS to add spacing after punctuation. Maybe a pseudo-class? I found some stuff on glyph width, and even a punctuation-trim property (which does sorta the opposite) in the CSS3 proposal. This might be a useful feature for breaking apart sentences, perhaps implemented as a firefox extension, possibly making use of the scroll wheel and some key combo. As my old-school coworker put it: There are many articles online. What it comes down to is the double space came from typewriter days. It is claimed that double space is not necessary with proportional fonts that replaced the typewriter fonts. However I continue to disagree. Double space is intended to provide a visual break between sentences. Even with proportional fonts in a Word document single space after sentences leave a paragraph appearing as a long run on sentence. Double spacing provides grouping of thought processes and more readability. I continue to this day to double space after full stops in every document, and email, I compose. I think he has a point, but basically this guy is relying on bad habits that are continually re-enforced by M$ word being a piece of crap. I want to show him that there is a better way to achieve this visual effect by writing him a custom style sheet for use with his browser and email client. Any thoughts? -- José Hernandez -- EMAIL / WEB + [EMAIL PROTECTED] + http://jozecuervo.com -- VOIP + skype: jozecuervo -- INSTANT MESSAGING + meca: jozecuervo + aim: jozecuervo + msn:[EMAIL PROTECTED] + yahoo!: seniorjoze + icq:1734116 __ 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] wrapping long URLs
At 05:59 PM 5/16/2005, Christy Collins wrote:
Is there a CSS way to make long URLs wrap?
Recently I approached this problem in a different way than I had before:
rather than figure out how to include the entire longCrazyUrl onto the
page, I decided to let it be partially hidden. My rationale is that most
of the time people just need to navigate to an URL; the few that need to
read or copy paste the URL can easily do so through the browser user
interface: mouse-hovering to get the title tooltip or right-clicking to get
the link location.
My links page markup was a definition list:
dtName of the resource/dt
dd
a href=http://longcrazyurl.net/blah/de/blah/de/blah.html;
title=longcrazyurl.net/blah/de/blah/de/blah.html
longcrazyurl.net/blah/de/blah/de/blah.html
/a
/dd
styled as:
dd
{
width: 30em; /* constrain width */
height: 1.5em;/* constrain height */
overflow: hidden; /* hide excess */
}
So it might render like this:
Name of the resource
longcrazyurl.net/blah/de/bla
__
I'm still trying to come up with a further improvement: I'd like an
ellipsis (...) to appear at the right-hand edge of the container when the
contents are truncated but not when they fit.
Doing the opposite is easy: I can display an image at the right edge
that's covered up by long text and not by short text.
Any suggestions?
Paul
__
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] Colouring bullets
Hi [EMAIL PROTECTED], Since the bullet can't be colored, how about turning off the bullets and using a background image that contains an image for the bullets. Not come across that, I'll give it a try. Cheers, Julian Voelcker Cirencester, United Kingdom __ 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] Re: Colouring bullets
Thanks one and all, given me plenty to think about! Cheers, Julian Voelcker Cirencester, United Kingdom __ 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] Colouring bullets
Since the bullet can't be colored, how about turning off the bullets and using a background image that contains an image for the bullets. Not come across that, I'll give it a try. Explained step by step there: http://css.maxdesign.com.au/listutorial/index.htm -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] top and bottom margin lost in td
I get 50px margin left and right, but none on top and botton, how do I make
this happen?
.cartButtons {
color: #006600;
font-weight: bold;
border: 1px solid #006600;
display: inline;
padding: 2px;
margin: 50px;
background-color: #66CC00;
}
table style=border: 1px solid black;
tr
td
a href=# class=cartButtonsUpdate Qunatity/a
a href=# class=cartButtonsUpdate Qunatity/a
a href=# class=cartButtonsUpdate Qunatity/a
/td
/tr
/table
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
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] site check
there's one thing that confuses me..9 out of 10 'site checks please' clearly dont EVER increase the font size when testing. Can we put that in the wiki or something please? Wayne, load up firefox, and increase the font size please. also, the titles for your w3c/xhtml anchors are wrong. __ 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] wrapping long URLs
Ingo Chao schrieb:
I forgot to mention that the text content of the span will be read
obviously by screen readers, maybe openedbracketdotdotdotclosedbracket,
and will appear useless in no-style-view, but this should be easy to
address with an background-image of an ellipsis instead of a
text-ellipsis, and a appropriate width for the span. I haven't tried it
yet, though.
I don't know if link:after-method would give the freedom to float-drop
and position, but I don't think so.
scrap the last line of my post.
Ingo
dd{
width: 10em;/* constrain width try 20em */
height: 1em;/* constrain height */
line-height:1em;/* to be adjusted */
overflow: hidden; /* hide excess */
position:relative; /* Fix IE missing overflow bug of r.p. span */
background: yellow; /* for demo */
}
dd a {
float:left;
white-space: nowrap; /* prevents Opera's wrapping of the link and
destroying the r.p. */
}
dd span.ellipsis {
float: right; /* shall drop when the link is too long */
position:relative; /* move after page flow is done */
margin-top:-1em; /* adjust */
z-index:1; /* higher layer */
background: white; /* overpaint */
}
dd span:after {
content: \A0(...); /* hex nbsp*/
}
/style
/head
body
dtName of the resource/dt
dd
a href=http://longcrazyurl.net/blah/de/blah/de/blah.html;
title=longcrazyurl.net/blah/de/blah/de/blah.html
longcrazyurl.net/blah/de/blah/de/blah.html
/a
span class=ellipsis!--[if lte IE 6]nbsp(...)![endif]--
/span
/dd
__
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] wrapping long URLs
I forgot to mention that the text content of the span will be read obviously by screen readers, maybe openedbracketdotdotdotclosedbracket, and will appear useless in no-style-view, but this should be easy to address with an background-image of an ellipsis instead of a text-ellipsis, and a appropriate width for the span. I haven't tried it yet, though. I don't know if link:after-method would give the freedom to float-drop and position, but I don't think so. It is a sexy proposition, but in the end there is no way in CSS to check the length of the link, which means that the background image will appear after short links, too... That is why I keep that to the backend, or, as mentioned earlier, to JavaScript to deal with this problem. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] Fixed width 3-col
Eric P wrote: I'm looking for examples of a fixed width 3-col html/css template with a common header and footer. Try our WIKI: http://css-discuss.incutio.com/?page=ThreeColumnLayouts -- Bob Easton Accessibility Matters: http://access-matters.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] sentence-spacing?
José Miguel Hernandez wrote:
I was wondering if anyone knows of an appropriate way to increase or
decrease sentence-spacing - for which there is no property I can find
in the CSS2 spec. By this, I mean to simulate the effect of
double-spacing after a period, which some people in my company insist
on doing - even after reading the following informative article:
Singlespace vs. Double Space
http://www.webword.com/reports/period.html
First, the technical answer...
There is nothing in HTML or CSS that recognizes a sentence as a basic
unit. Blocks, yes. Paragraphs, yes. Sentences, no. Without that
basic level of parsing, the answer is going to be very difficult to
implement. One -could- use the content: attribute to add an extra
space, like this. (untested)
.sentence {
content: ;
display: inline; }
Of course, this would mean wrappting every sentence in a div just to
get the class attached.
ref: http://www.w3.org/TR/CSS21/generate.html#propdef-content
Then, an accessibility concern...
Those rivers of white represent a significant cognitive understanding
problem for people with Meares-Irlen Syndrome (scotopic sensitivity).
Stick with one space after a period.
--
Bob Easton
Accessibility Matters: http://access-matters.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] Site check and disappearing dt
Here is an update of the latest change. Changed the whole structure. Tested font resize, please check and let me know what y'all think. Might change small part into image using text-indent: -1000px. http://www.firstbaptistchurchofmilford.org/innovate.htm Scott __ 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] Suckerfish won't hide
Hello, I'm having a strange problem with a Son of Suckerfish menu. The menu is here: http://www.iliveinperego.com/catalogo.php (go over Collezioni to see the menu) The point is that the menu won't hide when the mouse goes away ! This problem happen to me with FF 1.04 but works correctly with IE6. Any ideas ? -- Simone __ 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] wrapping long URLs
This is the background-image attempt.
Note that relatively short links (try with 20em in dd, or try with
l.html as short link) will /not/ show the image ellipsis or the text
ellipsis due to the mechanism
- no float drop
- r.p. upwardly
- overflow:hidden.
and long links /will/ show the ellipsis due to the mechanism
- float drop
- r.p. upwardly
---
I do not know anything about javascript. When I don't provide a script
example, that should not read and does not imply that I question the
fact that it belongs to be solved server sided or via javascript.
I just like thinking about if there are CSS solutions. Often these
solutions are far away from being perfect. Same to the /awkward/ browser
fixes I tried to find in some posts to this list the last year.
I think I'll try to spend more of my free time in gardening. Thanks for
the audience.
Ingo
---
dd{
width: 10em;/* constrain width try 20em */
height: 1em;/* constrain height */
line-height:1em;/* to be adjusted */
overflow: hidden; /* hide excess */
position:relative; /* Fix IE missing overflow bug of r.p. span */
background: yellow; /* for demo */
}
dd a {
float:left;
white-space: nowrap; /* prevents Opera's wrapping of the link and
destroying the r.p. */
}
dd span.ellipsis {
float: right; /* shall drop when the link is too long */
position:relative; /* move after page flow is done */
margin-top:-1em; /* adjust */
z-index:1; /* higher layer */
background: red url(ellipsis.png); /* red for debugging */
width:25px; /* any width will match */
}
dtName of the resource/dt
dd
a href=http://longcrazyurl.net/blah/de/blah/de/blah.html;
title=longcrazyurl.net/blah/de/blah/de/blah.html
longcrazyurl.net/blah/de/blah/de/blah.html
/a
span class=ellipsisnbsp;/span
/dd
__
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] Site Check - http://www.annskitchencorner.com
For Mommy's day, I threw together this web site for my mom to share her recipes. The address is http://www.annskitchencorner.com http://www.annskitchencorner.com/ and I would appreciate any feedback, good or bad. Thomas M. Hall __ 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] FW: H1 question
I'm new to CSS and wanted to know where I can find guidelines regarding how many times I can use an h1 tag (or h2, h3, etc.) per page (stupid question, I know!). For instance, I have two programs I'm highlighting per page, and I want the titles styled the same way. Can I use the h1 tag twice, or should I create the same style for the h2 tag? Not sure what's allowed, and what isn't. Any guidance would be appreciated! TIA, Jackie Lott --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.859 / Virus Database: 585 - Release Date: 2/14/2005 --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.859 / Virus Database: 585 - Release Date: 2/14/2005 CONFIDENTIALITY NOTICE This e-mail message and any documents transmitted as attachments may contain confidential health information that is legally privileged under state and federal law. This information is intended only for the sole use of the individual or entity to which it is addressed above. The authorized recipient of this information is prohibited from disclosing this information to any other party unless required to do so by law or regulation. If you are not the intended recipient, you are hereby notified that any disclosure, copying, distribution, or action taken in reliance on the contents of this email transmission and any attached files or documents is strictly prohibited. If you have received this information in error, please notify the sender immediately by reply email and delete or destroy all copies of the original message. Bancroft NeuroHealth does not ensure that electronic transmission of health information will be secure or virus-free, and the sender therefore does not accept liability for any errors or omissions, viruses, or security breaches which arise as a result of this e-mail transmission. __ 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] FW: H1 question
you can use h1 or h2 etc as many times as you like - the only restriction is in using class or id - you can only use id once, so if it is going to repeat on the page, use class ... or use neither On Tuesday, May 17, 2005, at 08:48 AM, Jackie Lott wrote: I'm new to CSS and wanted to know where I can find guidelines regarding how many times I can use an h1 tag (or h2, h3, etc.) per page (stupid question, I know!). For instance, I have two programs I'm highlighting per page, and I want the titles styled the same way. Can I use the h1 tag twice, or should I create the same style for the h2 tag? Not sure what's allowed, and what isn't. Any guidance would be appreciated! TIA, Jackie Lott __ 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] selectors question
diego nunes wrote: Maybe... a *:not(*) - don't make much sense, but worth a try ;) Thanks Diego, I tried that, but no joy. :( It applies to the *, which would be the image, but not the link, which is where the padding background is applied. Because the text doesn't count as something to style, I can't apply it to the text. Then we are back to the conundrum of not being able to check a sibling to apply styles to the parent. Kind regards, -Alastair -- Please refer to the following disclaimer for this message: http://www.nomensa.com/email-disclaimer.html __ 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] FW: H1 question
Scott Hamm schrieb: It is recommended that you use h1 ONCE, as if you were writing a book. Hm, I allways wonder where this comes from. At least it's not in the current W3C HTML recommendation. http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5 (And off-topic on css-d I guess). Tonico __ 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] div height problem
I am trying to adapt the solution found here:
http://www.quirksmode.org/css/100percheight.html but am running into
some difficulty. I have given html and body heights of 100% in my
stylesheet. When I give my container div id=x03_03 a height of 100%
though, it does not stretch the entire height of it's container div
id=03. I think maybe this is because my div#x03_03 has a style of
float: left perhaps. Can someone suggest a fix? The problem can be
seen here: http://dev.lewisgaleclinic.com/index.cfm/fa/home.css.cfm and
the container div I am referring to is the far right column that starts
with Physician's Opportunities
Here is the code in question:
div id=x03_03
!--- Physician's Guide ---
div id=x03_03_01
h3Physician's Opportunities Guide/h3
img style=float: left; margin-right: 3px;
src=#request.images#/index/spacerimg_23.jpg width=94 height=120
alt= border=0 /
p class=small333 style=float: left;A text
description of this guide for physican's opportunities can go in this
spot right here.br /a href=##...read more/a/p/div
!--- In Good Health ---
div id=x03_03_02
img src=#request.images#/index/InGoodHealth.gif
width=191 height=59 alt= border=0 /br /
img style=margin-right: 3px; float: left;
src=#request.images#/index/igh_28.jpg width=94 height=121 alt=
border=0 /
p class=small333a href=##In this issue...
Prescription Pains/abr /br /a href=##How to Stay
Stress-Free/a/p/div
/div
And the relevant styles:
html, body {
height: 100%;
}
div#x03_03 {
width: 200px;
background-color: #FDF8EA;
margin: 0;
padding: 0;
float: left;
height: 100%;
}
div#x03_03_01 {
padding: 0;
margin: 0;
background-color: #EEE;
border-bottom: 1px solid #606060;
height: 100%;
overflow: auto;
}
div#x03_03_02 {
padding: 0 0 4px 0;
margin: 0;
background-color: #FDF8EA;
border-bottom: 1px solid #606060;
height: 100%;
overflow: auto;
}
Any help much appreciated!!
--
Marty Martin
Senior Web Developer
ICONS, Inc.
Internet Development | Marketing | Support
e: [EMAIL PROTECTED]
p: 540.343.8322 | f: 540.343.0691
w: http://icn.net
__
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] top and bottom margin lost in td
I get 50px margin left and right, but none on top and botton,
how do I make
this happen?
.cartButtons {
color: #006600;
font-weight: bold;
border: 1px solid #006600;
display: inline;
padding: 2px;
margin: 50px;
background-color: #66CC00;
}
table style=border: 1px solid black;
tr
td
a href=# class=cartButtonsUpdate Qunatity/a
a href=# class=cartButtonsUpdate Qunatity/a
a href=# class=cartButtonsUpdate Qunatity/a
/td
/tr
/table
Scott-
I think you'll want to use border-spacing: 50px; on your
td's along with a
border-collapse: separate; on your table.
Actually, I misspoke. The border-spacing property should be applied to the
table tag. It is, however, NOT supported by IE6. To get the correct
spacing in IE you will have to resort to the old html cellspacing tag.
In your example above, you only have one td though. If its to remain like
that with no additional td's being added to the table, you might just want
to add padding:50px; to the table itself, which again, seems to not be
supported in IE6.
Regards,
Ron
__
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] three column layout, do not want wrap - fvnow.com
Hey guys, Got a three column layout that I do not want to wrap. Any suggestions on how I can eliminate the wrap and overlap of the 'float: right'? http://chrismoncus.com/public/websites/fvnow.com/ Click here to get a FREE iPod - http://www.freeiPods.com/?r=9929041 doit4Jesus, Chris Moncus chrismoncus.com AIM: HPPChrisMoncus __ 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] css-driven drop-down menu falls apart on mac
Hi, I have created a CSS-driven drop-down menu that tested out fine on Netscape 6+, Opera, IE 5, IE6 and Firefox 1.3. I used the csshover.htc workaround for IE. All browsers worked fine. Then reality sank in when I looked at my site on a mac, using Safari. In Safari the drop down menu shows up at the top left corner. (Probably has something to do with the absolute positioning of the sub menu.) Using IE 5 on the mac, each list item is filling the entire horizontal space, I believe controlled by the display: block. Does anybody know of any workarounds for mac? the address: http://www.heartlandcommunitychurch.com/temp I would appreciate any help in this matter. Rick __ 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] Create a transparent border around background?
Hi All,
The attached sample produces an effect when viewed in IE (tested with 6) of
having a narrow bar shaped TD cell. When viewed with FireFox or Opera the
effect does not occur. Does anyone know why this is so and if there is a
single technique to achieve the same results with IE/FireFox/Opera browsers?
Thank you!
Mark
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=en
head
META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1
titleTest Page Showing a Bar/title
style type=text/css
td.bar
{
background-color: red;
width: 155px;
border: solid 6px transparent;
}
/style
/head
body
table
trtd class=bar/tdtd/td/tr
/table
/body
/html
__
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] Positioning and Layer Problem
I have the following page: http://www.imaging-resource.com/index-test.html With 2 problems: 1. The gif (in Firefox) or Flash (in IE) are not lining up with the logo. They are actually displaying under the logo. 2. In IE, the Flash expands under the columns, instead of over. Does anyone have any suggestions? Here's the CSS: http://www.imaging-resource.com/IN/style.css Thanks! -- Yazmin Wickham __ 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] FW: H1 question
Interesting discussion I dug up here. Read the comments too: http://www.andybudd.com/archives/2005/02/heading_elements_semantics_and_the_spec/index.php Tonico Strasser wrote: Scott Hamm schrieb: It is recommended that you use h1 ONCE, as if you were writing a book. Hm, I allways wonder where this comes from. At least it's not in the current W3C HTML recommendation. http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5 (And off-topic on css-d I guess). Tonico __ 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] Site Check - http://www.annskitchencorner.com
On 5/18/05, Tom [EMAIL PROTECTED] wrote: For Mommy's day, I threw together this web site for my mom to share her recipes. The address is http://www.annskitchencorner.com http://www.annskitchencorner.com/ and I would appreciate any feedback, good or bad. Thomas M. Hall CSS comments; I personally think we as developers should make more use of CSS shorthand properties. There are some nice articles on shorthands @ www.456bereastreet.com. for example; border-bottom:2px solid #003366; border-left:2px solid #003366; border-right:2px solid #003366; can become border:2px solid #036; border-top: none; and font-family: verdana,'Lucida Grande', 'Lucida Sans Unicode', 'lucida', sans-serif; font-size:14px; can become font: 14px verdana,'Lucida Grande', 'Lucida Sans Unicode', 'lucida', sans-serif; I also noticed a min-height somewhere in there with no escaped height for IE. I've plenty of comments on accessibility too (mainly fixed font sizes and naughty use of dropdown list menus etc), but that's offtopic. Contact me off list if you want to. jack __ 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] unreadable source
Linda, If by gobbledygook you mean lots of readable text interspersed with weird characters, it is probably a Linux/windows end of line character discrepancy. I find that editplus (Windows and free) reads files that do that in notepad. I'm sure other editors allow you some control end of line character sequences as well. Joel Goldstick but it just comes up as gobbledygook. Same in Homesite. I realize I have run across this other times as well. What causes it, and how do I fix it so I can read the pages? Linda Hobbet __ 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] [OT] unreadable source
Linda H wrote: anything). I wanted to print it so I could study it thoroughly but it doesn't wrap lines, so using the browser print function produced an unreadably small font size. I saved the source and tried to open it in Notepad (to add line wrapping), but it just comes up as gobbledygook. Same in Homesite. I realize I have run across this other times as well. What causes it, and how do I fix it so I can read the pages? I guess it may be different format of characters that end the line of text file. In Unix-like environments LF character is commonly used whereas in Microsoft sticked to CR/LF. The solution: get a better editor that can handle both formats. Not to mention, on Mac they use CR exclusively :-) -- ukasz Grabu, http://www.grabun.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/
[practices] Re: [css-d] unreadable source
Embellishing Joel's answer: On Tue, 17 May 2005, Linda H wrote: ... unreadably small font size. I saved the source and tried to open it in Notepad (to add line wrapping), but it just comes up as gobbledygook. Same in Homesite. I realize I have run across this other times as well. What causes it, and how do I fix it so I can read the pages? If the source was properly formatted to begin with, the linebreaks have probably been gobbled up by linebreak translation problems. Unix-flavor operating systems (including OS X) use a carriage return character (ASCII 13/0D, RE \r) to designate a linebreak; previous MacOS versions use a linefeed character (ASCII 12/0C, RE \n) likewise; Windows uses both in the order CR - LF. As a rule, viewing source and copying THAT (as opposed to saving the markup to a file and opening it in a text editor) will avoid the problem you describe on Windows. Otherwise, you should be able to find source formatting functionality in the tools you're using. Textpad, which is powerful even in the shareware version, provides preferences to sidestep this issue by default. HTH -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ 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] sentence-spacing?
Props to Bob.
That's Kinda what I was afraid of... no good way of achieving the
desired effect without creating a bunch of extraneous markup.
Any idea how common (serious of an issue) Meares-Irlen Syndrome really
is? Apparently, you can alleviate that problem with a little color in
the background. It seems that there are at least 2 people in an office
of 12 that have old-schooler typewriter double-space syndrome. One
of them is under 30, so there must be colleges and universities that
still enforce the double-space in their writing style guides. This
ought to be more of a user preference than a set-in-stone typographic
commandment. There must be a way to make the double-space people
happy. It's definitely easy enough to create a background color user
style sheet for the Meares-Irlen people.
I would never really use double-space presentation on a public
website, but am certainly interested in the ability to modify a page
on the client (web browser, email client, IM chat windows - which I
happen to work on) in this manner - literally to the point of
animating the space getting bigger on the press of a key. This is why
we separate presentation from content right? So that the user agent
has the flexibility of form while content remains semantically intact
and machine parse-able...?
Without knowing the bureaucracy and process of the W3C, I would say
that this is at least worth consideration in CSS3, along with the
proposed punctuation-trim... perhaps punctuation-padding or
sentence-spacing...
Now that I think about it, it would also be nice to highlight every
other sentence so I could quickly see if there are any run-ons in an
article. That level of separation would be great - perhaps clicking
to collapse spans of text (without span!), one sentence at a time.
Of course, I could write my own pre-parser to span wrap every
sentence in a p, but what is the point?
Should I move this discussion somewhere more appropriate?
~jose
Date: Tue, 17 May 2005 06:43:47 -0400
From: Bob Easton [EMAIL PROTECTED]
To: CSS List css-d@lists.css-discuss.org
Subject: Re: [css-d] sentence-spacing?
Bob Easton Wrote:
Jose Miguel Hernandez wrote:
I was wondering if anyone knows of an appropriate way to increase or
decrease sentence-spacing - for which there is no property I can find
in the CSS2 spec. By this, I mean to simulate the effect of
double-spacing after a period, which some people in my company insist
on doing - even after reading the following informative article:
Singlespace vs. Double Space
http://www.webword.com/reports/period.html
First, the technical answer...
There is nothing in HTML or CSS that recognizes a sentence as a basic
unit. Blocks, yes. Paragraphs, yes. Sentences, no. Without that
basic level of parsing, the answer is going to be very difficult to
implement. One -could- use the content: attribute to add an extra
space, like this. (untested)
.sentence {
content: ;
display: inline; }
Of course, this would mean wrapping every sentence in a div just to
get the class attached.
ref: http://www.w3.org/TR/CSS21/generate.html#propdef-content
Then, an accessibility concern...
Those rivers of white represent a significant cognitive understanding
problem for people with Meares-Irlen Syndrome (scotopic sensitivity).
Stick with one space after a period.
--
Bob Easton
Accessibility Matters: http://access-matters.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: [practices] Re: [css-d] unreadable source
Thanks to all for the advice. What I was seeing was complete gobbledy-gook, not readable text interspersed with unreadable text. It was the same in Notepad, Wordpad, Word, and Homesite. I don't have Textpad, but I may get it, though I am very used to Homesite, and I like it. The technique that worked was to view the source, do a select all, cut and paste into the editor of my choice. The sire I was having problems with is http://cross-browser.com/ss/ Thanks again, Linda Hobbet __ 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] A Pure CSS Menu - IE not following z-index to render over other divs
Hi all, Would anyone have a solution to a pure CSS menu flyout not showing above divs on IE6? (or lower versions) The problem is this, on Firefox and Opera 8 the lists for the sub-menus are rendered over the content. But on IE6, it hides itself under the divs of the content beneath it. (#container and/or #sechead) Messing with the #nav z-index and the absolute positioned sub-menus doesn't work as intended, in IE of course. Setting the z-index (feeding it only to IE) to negatives for the content divs would make the menu pop out, but renders the links on the content useless (like on the sidebar). Anyone has a solution to this problem or anything that triggers this behavior in IE? You could see the navigation here: http://beacon.ploghost.com CSS for the navigation here: http://beacon.ploghost.com/nav.css CSS for the site here: http://beacon.ploghost.com/beacon.css Note: Sorry for not cutting the other stuff out from the code, as i'm pressed with time at the moment. Thanks in advance -Kevin __ 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] linked images taking on a:hover traits
hello, I am new to the list and very happy to have found you, as I have been trying to sort out this problem for a while now. I am having a problem with linked images taking on a:hover traits despite the fact that in my stylesheet I have done everything I can think of to make 'img' and 'a img' and 'a:hover img' styles have border=0, border-style=none, etc. you can see the page where this is happening here: http://www.bobogourmet.com/desserts_chocolate.shtml and the stylesheet is here: http://www.bobogourmet.com/BOBO_styles.css is it just a syntax error on my part or is there something else I am missing? I am seeing the problem in Firefox and IE but not in Safari. thanks, ellen __ 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] linked images taking on a:hover traits
Try setting the img to display: block Yep, just tried it and it works. Images are by default inline Then you can delete all the 0px stuff... Woo Hoo! I contributed something! -- Lorin Rivers Mosasaur: Killer Technical Marketing http://www.mosasaur.com mailto:[EMAIL PROTECTED] 512/203.3198 (m) __ 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] Help with one line content
I think you could get it simply by adding a br / between the two images you want to display. This is in fact one of the times where a BR is good, because all you want is a single line break. Marcelo Wolfgang wrote: Hi list, I need some help with a xhtml site I'm making, I'm kinda of new in doing things this way, and this is a commom wall I bang my head now and them You can check it out at http://work.grillo.tk/elementn/009/media-centre.html I have one big div there and smaller one inside of it, the small one share the display:inline css selector ( you can check this in the source code ). But I need the not registered img and the forgot password img to be one on top of the other. Something like rowspan=2 for the other elements, and theses images each own its own row. Is there a way to do that with xhtml and css ? Can someone explains to me how to achieve that is someway ? Also if you think my code is going on the wrong direction can you explain what's a better solution for something like this, so I can learn ? TIA Grillo __ 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/ -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] unreadable source
-Original Message- From: Linda H I saved the source and tried to open it in Notepad, but it just comes up as gobbledygook. Probably UNIX or Mac line endings in a Windows editor that doesn't know what to do with them. Either try a diferent editor (Editpad Light seems to always deal with this sort of thing properly), or use a DOS2UNIX util to fix the line endings. UNIX uses a LF as the line end, DOS/Win uses CR/LF, and I think Mac (old MAC OS, not new OS X) uses CR only. -- Peter Williams __ 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] IE issue - DIV's not going full width
Ingo,
Thank you for what seems to be a great deal of time that you have put into
looking at my problem and even providing example pages. You explanation makes
sense. Now I just need to see if the customer is willing to change the source
instead of just the CSS.
Thank you,
Jonathan
Ingo Chao [EMAIL PROTECTED] 05/15/05 2:41 pm
Jonathan Duncan schrieb:
Thank you Ingo, the position:relative at least got the logo and nav
to align to a different div which makes them closer to being in the
center.* However I am also trying to get them to stretch out to fill
the whole page horizontally.* These two div have no width that I can
see and they are not being limited by anything that I can tell so I
would think they should expand to fill the screen like they do in
Firefox.* Any ideas why they do not?
Jonathan
Jonathan, I've tried to isolate a rough approximation of the problem, as
I understand it, but I may be wrong.
http://www.satzansatz.de/cssd/tmp/jonathan.html
Note the slight difference in Op+IE versus FF.
[ for those who still believe in code snippets on css-d:
body { margin: 0 auto; width: 250px; border:5px solid blue; padding:0;
height:500px;}
#p-logo { background-color: red; position: absolute; top: 0; left: 0;
right:0; height: 40px; }
#p-logo a { display: block;width: 100%;** }
body
** div id=p-logoa href=#Logo/a/div
** /body
/html
]
In your example, the parent has the same width as body, not shown in my
test case. The current ancestors of a. p. #p-logo aren't positioned.
I was wrong in my earlier post, sorry.* Op, IE, FF are indeed
positioning with respect to the containing block, and that's html, not
body (offset top:0 left:0; starts at the same location).
So where is the bug?
AFAIK, the block level link gets 100% from its parent of width auto,
therefore, #p-logo should gain 100% of the width of its containing block.
But Opera8.01 and IE6 share the same bug: the do offset an absolute
positioned element with respect to the containing block, yes, but do
calculate a percentage width with respect to the parent (=body in your
case.
But what if the parent is not the ancestor?
see http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
That's still CSS1.
IMHO, the bug cannot be fixed without structural changes to your code.
As you can't take the logo out of body/body to prevent the
relational bug, you'll have to move the centering for body to another
page wrapper, and take the logo out:
http://www.satzansatz.de/cssd/tmp/jonathanmod.html
[again a snippet
body
centredwrapperpagecontent.../centredwrapper
aplogo/aplogo
/body
]
But that will not be fun to do within your complex page.
I would love to hear other opinions concerning your problem on this list.
Ingo
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] Enlarged selector scope from sub element. Possible?
At 04:15 PM 5/17/2005, Visconte, Marc (Contractor) wrote: Short version: IS there a Selector construction that would allow me to affect a parent element based upon a contained (child) element? I want to DISPLAY:NONE for a whole table row TR, if any of the cells have the STRIKE tag internally. I want to affect the PARENT of the child, not the other way around. Short answer: no. As far as I know, you can't do this today with CSS. You could do it easily with javascript, however, but of course you'd have to be able to add a script tag to the header or some code to an existing script file. If you feel it's unethical to modify the existing ASP code without permission, why not get permission from the developer to do so? Adding a class name to a table row would surely be an inoffensive edit. Regards, Paul __ 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] Why does this render so differently in IE?
Hi, I'm trying to layout this page and I get 2 completely different results in Mozilla and IE. Mozilla is behaving as I intended, but IE is a disaster. Does anyone know what I'm doing wrong? http://members.cox.net/~rohnamemories/index2.html http://members.cox.net/~rohnamemories/style.css Thanks in advance. -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.11.11 - Release Date: 5/16/2005 __ 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] A Pure CSS Menu - IE not following z-index to render over other divs
hi Kevin, Would anyone have a solution to a pure CSS menu flyout not showing above divs on IE6? (or lower versions) I've just had this very same problem - see the IE z-index drop down menu thread over the last days or so. The best solution (from Ingo Chao) was to apply position: relative; z-index: [ everything else]; to a div that encloses the menu. Rob __ 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] Site check [www.petus-bulgaria.org] - especially browsers on Mac
On Tue, 17 May 2005 11:15:13 -0400, Mikhail Bozgounov
[EMAIL PROTECTED] wrote:\
Hi to everyone on this great list!:)
The link: http://www.petus-bulgaria.org
Location of CSS file: http://petus-bulgaria.org/lib/css/all.css
Thanks ever so much for the link to the style sheet. When you're 68 and
your default browser is Opera and you have a 1280 optimal LCD monitor
you'll start looking at the style sheet before looking at the site and
when you see this:
htmlbody { /* Opera */
font-size: small;
}
you won't waste your time and just go on to other things, too.
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] Enlarged selector scope from sub element. Possible?
On 5/17/05, Paul Novitski [EMAIL PROTECTED] wrote: At 04:15 PM 5/17/2005, Visconte, Marc (Contractor) wrote: Short version: IS there a Selector construction that would allow me to affect a parent element based upon a contained (child) element? I want to DISPLAY:NONE for a whole table row TR, if any of the cells have the STRIKE tag internally. I want to affect the PARENT of the child, not the other way around. Short answer: no. As far as I know, you can't do this today with CSS. You could do it easily with javascript, however, but of course you'd have to be able to add a script tag to the header or some code to an existing script file. It's even easier than that. Browsers *will* let you put script inside the body. Also, you could use the GreaseMonkey extension to FireFox to have a user script which runs on a certain page. Or, if you like other browsers you can use Proxomitron to alter the page and put in your user script. Any way you do it, you basically: Get all strike tags For each strike tag Go up to parent until you find a TR Hide the TR It's *real* easy. -- Justin Patrin __ 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/
