Re: [css-d] How to align list numbers?

[Jukka K. Korpela]

David Jones wrote:

> Is there a way to align roman numeral list numbers left, instead of
> right-aligned on the period?

In theory, yes. In practice, currently not in CSS if you use the logical 
 markup; you would have to use e.g. table markup instead of list 
markup to create the desired rendering

> Example:
> I. List item 1
> II. List item 2
>
> Instead of:
>  I. List item 1
> II. List item 2

Assuming that you want the list items themselves aligned to the left, 
this could by the specs be achieved by using something like the 
following:

ol { list-style-type: none;
 counter-reset: itemnr; }
ol li:before {
 content: counter(itemnr, upper-roman) ".";
 display: inline-block;
 width: 1.5em;
 counter-increment: itemnr; }

That is, you suppress the normal browser-generated list item numbers and 
use generated content to create numbers the way you like. Here the 
essential difference would be that your generated numbers are 
left-aligned, because that's the default for HTML elements, including 
pseudoelements, in general.

And Opera supports this. But most other browsers don't. Worse still, 
they implement the part they understand - suppressing the normal numbers 
but creating no replacement, i.e. the list appears with no numbers 
whatsoever.

As a workaround, you can insert the numbers into the document content 
proper and use an HTML table, with the numbers in one column, items in 
the second:


I. List item 1.
II. List item 2.


This gives roughly the right rendering even without CSS, but you can 
fine-tune it, especially by adding some left margin:

table.ol { margin-left: 2em;
   border-collapse: collapse; }
table.ol td { padding: 0 0.5em 0 0; }
table.ol td+td { padding: 0; } /* this rule doesn't work on old IEs, but 
no big deal */

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/ 

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

Re: [css-d] request for general guidance on simple css layout

[Gunlaug Sørtun]

snak detek+0r wrote:

> http://tinyurl.com/6sb7bp

> 1) why does my wrapper div (gray bg) not fully enclose my columns? If
>  I want space between rows, do I have to do something different?

Floats are not contained by default. Buggy IE/win contains them because
there's a 'hasLayout' trigger on .wrapper, but more decent browsers need
to be told.

Adding...

.product_wrapper:after {
  content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
}

...will make decent browsers behave as you intended.


> 2) each box is broken up into 3 main columns, which are currently 
> floated against eachother as follows:
> 
> +-+--+--+
>  | leftCol - float L   |   midCol - float L   |   rightCol - float R 
> | 
> +-+--+--+
> 
> My questions are, does it matter which way the right column is 
> floated?

In some very old browser-versions, yes, IIRC. In today's browsers, no.
What you've got is probably most resistant against unwanted float hook-ups.

> And is there a better way of achieving fixed-width columns than 
> floating in the first place?

Fixed width CSS table or real HTML table, are better - especially if you
want columns that really are of same height.
However, the former isn't supported by IE7 and older versions - seems to
be in IE8, and the latter can easily get you into the firing line of the
standardistas if they think you use them for the "wrong" purposes.

Floats are already used for the "wrong" purposes all over the place,
mainly because there is no better - working (also in IE) - alternative.
No, I haven't found one either :-)

> 3) Currently these 3 columns have pixel widths of 200+300+300, all 
> with 5px borders = 830px total. They are wrapped in a div with 
> width=830, so it all seems to work. My question about this is: could 
> this break for some reason later? Obviously, if i change the border 
> width of the interior divs to 4px, I'll end up with a bunch of thin 
> lines between columns. OR, if I enlarged these borders, my Right 
> column would flow down & break my layout.

Unless the floats run out of horizontal space in their wrapper there
shouldn't be any problems.

> 4) When I remove .product_wrapper {white-space:nowrap;} the layout 
> breaks in dreamweaver (here's a picture: http://tinyurl.com/4do3eu ).
>  I thought it was doing it in FF too, but now I don't see it. 
> Nonetheless, it worries me. In the past I've only used 
> {white-space:nowrap;} for text. Is it advisable to leave this in? Or 
> am I just worrying about a dreamweaver bug when I would be better off
> to delete this and ignore it? FWIW, it gets even worse if I stack a
> third row on the bottom.

Have no idea what Dreamweaver is up to, but DW isn't a browser so it
doesn't count as one. Check that "fixes" for DW don't disturb real
browsers, and make sure to take them out if they do.

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

Re: [css-d] How to align list numbers?

[Philippe Wittenbergh]

On May 22, 2008, at 4:41 PM, Jukka K. Korpela wrote:

> Assuming that you want the list items themselves aligned to the left,
> this could by the specs be achieved by using something like the
> following:
>
> ol { list-style-type: none;
> counter-reset: itemnr; }
> ol li:before {
> content: counter(itemnr, upper-roman) ".";
> display: inline-block;
> width: 1.5em;
> counter-increment: itemnr; }
>
> That is, you suppress the normal browser-generated list item numbers  
> and
> use generated content to create numbers the way you like. Here the
> essential difference would be that your generated numbers are
> left-aligned, because that's the default for HTML elements, including
> pseudoelements, in general.
>
> And Opera supports this. But most other browsers don't.

Gecko (1.8 and 1.9), Konqueror (3.5), iCab 3 and WebKit (Safari 2+)  
have good support for CSS 2.1 counters - better than Opera, which  
still has problems with the scope of the counter-reset.

With the mark-up above Gecko 1.8 (Fx2) would only have a problem with  
the 'display:inline-block' that it doesn't support (but Gecko 1.9, Fx3  
does). Using the substitute 'display: -moz-inline-box;' won't work in  
this case.

Who knows, it may even work in IE8. During my brief encounter with IE8  
alpha 1, I didn't have time to explore those properties.

For iExploder 6 and 7, one could always let them revert back to more  
default display.

The one issue with the technique above is the width. If you plan to  
have a long lists, 'width: 1.5em' will not be enough.

(and a little bit of margin-right would be a nice touch: 'margin- 
right: .5ex' gives good results)

Test case:



Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





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

[css-d] cross browser testing web application

[rashantha de silva]

i couldn't find a way to do search of this list so please pardon if  
this has been posted before.

is there a website where i can test a web page across browser/ 
operating system.

i am on mac an i need to test ajax/tabbed hide/display

since i am here...

here's the page 

i believe the pane is not sitting correctly on windows. how are you  
guys solving your tabbed divs. it must be pure css, not interested in  
images.

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

Re: [css-d] cross browser testing web application

[Christian Kirchhoff]

rashantha de silva schrieb:
> i couldn't find a way to do search of this list so please pardon if  
> this has been posted before.
>
> is there a website where i can test a web page across browser/ 
> operating system.
>   
Yes, its http://browsershots.org/

Regards,

Christian Kirchhoff
*Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
> i am on mac an i need to test ajax/tabbed hide/display
>
> since i am here...
>
> here's the page 
>
> i believe the pane is not sitting correctly on windows. how are you  
> guys solving your tabbed divs. it must be pure css, not interested in  
> images.
>
> thanks
> rush
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css dropdown not working

[Sol Sinclair]

Hi all;

 

I had this working, and then I was forced to make a change, and I thought I
had it working properly, so I re-wrote my css files, and then I checked it
again and its not working. 

 

The problem is with this site:

 

http://www.haveagoodday.ca/

 

http://www.haveagoodday.ca/robert.css

 

The problem is that when you hover over "Creation Factsheets" a dropdown
appears. But when you move your mouse down the first one becomes highlighted
and the flyout appears, then if you want to try to select one farther down,
it won't let you.

 

I don't know what the problem is, as it is working fine on the other one -
ie "Creation vs Evolution". I am hoping there is a simple solution to this.

 

Thanks in advance for advice.

 

>Sol Sinclair 

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

[css-d] Creating a family tree

[Wade Smart]

20080522 0844 GMT-6

Im working with a site developer locally with a large project. He has all these 
charts that will need to be put on an intranet site.

They are kinda like a family tree chart, like this:

  |--   
|-|
  |--
---
  |---
|-|
  |---

The farthest out to the right on top are two names which combine to say an off 
spring.. The same on the bottom. Those two off spring combine to a single 
(current generation) off spring.. and so on.

As there are literally hundreds of these to be done I was trying to think of a 
way that a single layout could be applied and pull data from a db to populate 
it. What Im stuck on is - how.

I was thinking: take a single div to hold it. On the right div I put a top and 
bottom div. Then have two lines of text in a  and then underline that. But I 
still need a left line and a line connecting in the middle.

Anyone done this or have any suggestions?

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

Re: [css-d] Creating a family tree

[tedd]

At 8:51 AM -0500 5/22/08, Wade Smart wrote:
>20080522 0844 GMT-6
>
>Im working with a site developer locally with a large project. He 
>has all these
>charts that will need to be put on an intranet site.
>
>They are kinda like a family tree chart, like this:
>
> |--
>   |-|
> |--
>---
> |---
>   |-|
> |---
>
>The farthest out to the right on top are two names which combine to say an off
>spring.. The same on the bottom. Those two off spring combine to a single
>(current generation) off spring.. and so on.
>
>As there are literally hundreds of these to be done I was trying to think of a
>way that a single layout could be applied and pull data from a db to populate
>it. What Im stuck on is - how.
>
>I was thinking: take a single div to hold it. On the right div I put a top and
>bottom div. Then have two lines of text in a  and then underline 
>that. But I
>still need a left line and a line connecting in the middle.
>
>Anyone done this or have any suggestions?
>
>Wade



Wade:

It's a bit involved, but here's my solution:

http://webbytedd.com/ccc/family-tree/

The php code is listed and the css is easy enough to get.

Have fun.

Cheers,

tedd


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

[css-d] off-left technique and width

[Ingo Chao]

Hi

The off-left technique [1] often comes with a width set.

Does anyone remember the reason for this width? IE5-Mac?


.off-left {

position: absolute;

left: -999px;

width: 990px; /**/

}

or

.hide{
position:absolute;
top:0;
left:-4000px;
width:1px; /**/
}

.show{
position:relative;
top:0;
left:0;
width:auto;
}

Thanks,

  Ingo


[1] http://css-discuss.incutio.com/?page=ScreenreaderVisibility


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

Re: [css-d] off-left technique and width

[Rainer Wagener]

Ingo Chao schrieb:

> Hi
> 
> The off-left technique [1] often comes with a width set.
> 
> Does anyone remember the reason for this width? IE5-Mac?
> 
> 
> .off-left {
> 
> position: absolute;
> 
> left: -999px;
> 
> width: 990px; /**/

Because otherwise the hidden element could possibly extend into the 
viewport. 'overflow:hidden' could also be added to prevent this on 
scaling.

Rainer

---

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

[css-d] floated anchors not wrapping/returning

[Brian Cummiskey]

Hi guys,

Having an IE7 problem.

please see:
http://imageupload.com/out.php/i120625_float.jpg

Basically, ie7 in the screen shot is not wrapping/CR to the next line 
like it does in firefox, thus having all the extra of the last block 
hang down at the end of the 'row'.

the code block i'm using:

.sizes a {
display: block;
float: left;
margin: 0 3px 3px 0;
padding: 2px;
height: 15px;
border: 1px solid #B5B5B3;
text-align: center;
text-decoration: none;
}


foo
bar
etc



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

Re: [css-d] floated anchors not wrapping/returning

[Ingo Chao]

Brian Cummiskey wrote:
> Hi guys,
> 
> Having an IE7 problem.
> 
> please see:
> http://imageupload.com/out.php/i120625_float.jpg
> 
> Basically, ie7 in the screen shot is not wrapping/CR to the next line 
> like it does in firefox, thus having all the extra of the last block 
> hang down at the end of the 'row'.

Maybe white-space:nowrap helps in the original file. Can't test it on a jpg.


Ingo

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

Re: [css-d] floated anchors not wrapping/returning

[Brian Cummiskey]

Ingo Chao wrote:
> Maybe white-space:nowrap helps in the original file. Can't test it on 
> a jpg.
Thank you Ingo!  That fixed it :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to align list numbers?

[snak detek+0r]

David Jones wrote:
> Is there a way to align roman numeral list numbers left, instead of
> right-aligned on the period?
>  
> Example:
> I. List item 1
> II. List item 2
>  
> Instead of:
>  I. List item 1
> II. List item 2
>  

i suggested this to david offlist, but since it seems like a simple 
answer to a simple question, i'm reposting to the list, for the record.

ul { list-style-position: inside }

as described here:
http://www.blooberry.com/indexdot/css/properties/list/lsposition.htm

(happy to read why this is an inferior solution, though :-)

josh

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

Re: [css-d] How to align list numbers?

[David Jones]

Thanks, Josh (and Jukka and Phillipe).

I tried the list-style-position: inside option. When text wraps in the
list item, it wraps back to the start of the item number. That wouldn't
be acceptable here.

Using generated content is out because our corporate standard web
browser is IE6. IE7 and later aren't even on the testing horizon, and
only a few people get special permission to use Firefox or Opera (for
the purposes of testing our public sites).

Jukka, interesting that you mention using table markup instead. That's
what our current enterprise content management (ECM) system uses. Its
content editing tool has outline buttons that transparently do the heavy
lifting of creating/destroying table elements, calculating outline
numbers, etc. The content editing tool of our soon-to-come new ECM uses
standard list markup instead - so working with
outlines-marked-up-as-tables will be a tedious manual process. (And,
unfortunately, when our content converted over into the new system, the
outlines came across as tables.)

We have hundreds of pages with the outline-tables problem, so I guess
we're just going to have to put up with them and over time get rid of
the outline-tables.

David Jones, Content Coordinator, Customer Relations - KL PS, (808)
948-5830

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of snak detek+0r
Sent: Thursday, May 22, 2008 10:39 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] How to align list numbers?

David Jones wrote:
> Is there a way to align roman numeral list numbers left, instead of 
> right-aligned on the period?
>  
> Example:
> I. List item 1
> II. List item 2
>  
> Instead of:
>  I. List item 1
> II. List item 2

i suggested this to david offlist, but since it seems like a simple
answer to a simple question, i'm reposting to the list, for the record.

ul { list-style-position: inside }

as described here:
http://www.blooberry.com/indexdot/css/properties/list/lsposition.htm

(happy to read why this is an inferior solution, though :-)

josh

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


"MMS " made the following annotations.
--

This electronic message is not an offer to contract, the acceptance of an offer 
to contract, or in any other way intended to contractually obligate HMSA; 
neither is it intended to change the terms of any existing contract unless 
specifically so stated.

The information contained in this electronic message (or attached hereto) is 
intended only for the individual or entity to which it is addressed and may 
contain information that is confidential and protected by law.  If you are not 
the intended recipient of this e-mail, you are cautioned that use of its 
contents in any way is prohibited and may be unlawful.  If you have received 
this communication in error, please notify the sender immediately by e-mail or 
telephone and return the original message by e-mail to the sender or to [EMAIL 
PROTECTED]  We will reimburse you for any cost you incur in notifying us of the 
errant e-mail.  Thank you. · 
==

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

[css-d] Latest Rounded Corners

[Chris Akins]

I know there are many rounded corner techniques out there, and I'm not
looking to start a war.  :-)
But I was wondering if there are any especially good, newer techniques to
the game.  I need my rounded box to be resizable, and kind of like the idea
of using only one small circle image that gets offset for each corner.
Prefer no javascript for this.

I did start with Google, but quite a few of the promising link titles lead
to pages no longer there, so I hoping this list could point me to recent
improvements in this area.

Thanks as always for the expertise here.

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

Re: [css-d] Latest Rounded Corners

[maxxu !]

What about Nifty Corners by Alessandro Fulciniti ?

I don't know any newer techniqus, except that with sliding door 
technique and fixed round corner box.

P.S. I hoped I managed to reply to your message. This is my first time 
in css-discuss and also my first using a mailing-list.

Chris Akins wrote:
> I know there are many rounded corner techniques out there, and I'm not
> looking to start a war.  :-)
> But I was wondering if there are any especially good, newer techniques to
> the game.  I need my rounded box to be resizable, and kind of like the idea
> of using only one small circle image that gets offset for each corner.
> Prefer no javascript for this.
>
> I did start with Google, but quite a few of the promising link titles lead
> to pages no longer there, so I hoping this list could point me to recent
> improvements in this area.
>
> Thanks as always for the expertise here.
>
> Chris
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   

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

Re: [css-d] Site Check please

[Karl Hardisty]

On 22/05/2008, at 12:39 AM, David Laakso wrote:

Karl Hardisty wrote:
> http://mothership.co.nz/blog
>
>
> All feedback greatly accepted.
>
>
>
> Karl
>
>

It looked fine to me cross-browser, Karl.
Couple of trivial CSS errors to correct.

Aside:
The title of the document does not seem to appear in the text.
Font-scaling breaks the long word "mothership." in the nav
It is not very user friendly to feed the IE's pixel fonts.
If you are into pushing the envelope, minimum font-size 32px in Opera
does a real number on the page.




--  
http://chelseacreekstudio.com/

__


David,

thank you for this.  In my headlong fall toward slumber I also  
noticed that I had only changed the main page, and not the blog entry  
pages as well.  I'll be rectifying this later today, along with the  
three css errors.

Also, thank you for the heads up on the font sizing (esp. with  
'mothership').  I am guilty of forgetting from time to time to run  
the +2/-2 font size test (at a minimum) and this was one of those.

Regards,

Karl
mothership | mothership.co.nz


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

Re: [css-d] off-left technique and width

[Ingo Chao]

Rainer Wagener wrote:
> Ingo Chao schrieb:
>> The off-left technique [1] often comes with a width set.
>> Does anyone remember the reason for this width? IE5-Mac?

> Because otherwise the hidden element could possibly extend into the 
> viewport. 'overflow:hidden' could also be added to prevent this on scaling.

Aha! Thanks.

Ingo

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

Re: [css-d] Latest Rounded Corners

[Jim Nannery]

Afternoon Chris

You wrote:

>I know there are many rounded corner techniques out there, and I'm not
> looking to start a war.  :-)
> But I was wondering if there are any especially good, newer techniques to
> the game.  I need my rounded box to be resizable, and kind of like the 
> idea
> of using only one small circle image that gets offset for each corner.
> Prefer no javascript for this.
>
> I did start with Google, but quite a few of the promising link titles lead
> to pages no longer there, so I hoping this list could point me to recent
> improvements in this area.
>
> Thanks as always for the expertise here.
>
> Chris
>

Not sure how *new* these are, but the list WIKI [1] has lots of info and 
links that may prove useful.

Best

[1] http://css-discuss.incutio.com/?page=RoundedCorners

Jim Nannery
www.gotbeebar.com

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

Re: [css-d] off-left technique and width

[David Jones]

Rainer Wagener wrote:
> Ingo Chao schrieb:
>> The off-left technique [1] often comes with a width set.
>> Does anyone remember the reason for this width? IE5-Mac?
> 
> Because otherwise the hidden element could possibly extend into the 
> viewport. 'overflow:hidden' could also be added to prevent 
> this on scaling.

The thought occurred to me that without a width, IE's autoexpansion bug
might decide that the off-left item really needed to be wide enough to
hold its content and widen the element enough for part of it to appear
in the viewport?

David Jones, Content Coordinator, Customer Relations - KL PS, (808)
948-5830

"MMS " made the following annotations.
--

This electronic message is not an offer to contract, the acceptance of an offer 
to contract, or in any other way intended to contractually obligate HMSA; 
neither is it intended to change the terms of any existing contract unless 
specifically so stated.

The information contained in this electronic message (or attached hereto) is 
intended only for the individual or entity to which it is addressed and may 
contain information that is confidential and protected by law.  If you are not 
the intended recipient of this e-mail, you are cautioned that use of its 
contents in any way is prohibited and may be unlawful.  If you have received 
this communication in error, please notify the sender immediately by e-mail or 
telephone and return the original message by e-mail to the sender or to [EMAIL 
PROTECTED]  We will reimburse you for any cost you incur in notifying us of the 
errant e-mail.  Thank you. · 
==

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

[css-d] Browser compatibility with basic background formats?

[e h]

G'day All,

I have had a website up and running for ages, www.brierleywines.com (css is 
www.brierleywines.com/images/brierley.css).  It is quite basic, and I have 
never had any issues with it before, but now the background colour and gradient 
image for the  are not showing up in the newest (2.0.0.14) Firefox and IE 
browsers - it appears when I load the working copy from my hard drive into 
firefox, but not via the internet/server.  The host I'm using does have an 
advertising banner at the top, but I've checked the html adjustments that it 
makes and can't find any issues here, (although it's a possibility, checked via 
'view source').

Things I have tried: checking url's for images & .css, checking colour codes, 
reuploading both css and image, changing css so is in 'images' directory rather 
than main file folder, validating .css file alone, specifying a 
background-repeat, applying the body bg to a div instead of the body...

It opens as it ought in my older internet explorer (6.0) and never had any 
issues in my older Firefox (I think 7.0?) - so now I'm wondering if this might 
be an issue with new browsers and css1/css2 compatibility, as the background 
properties I have used are listed as only css1/Firefox 1 on the w3c.org site. 
What is strange is that the background images/colours for other  work 
fine. 

My body background specific code is thus: 

body {
background-color: #D8BAEC; 
background-image: url(images/bggradient1.jpg);
background-repeat: repeat-y; 
text-align: left; 
margin: 0px; 
padding: 0px;
color: #611E41;
}

The only thing I can think of is that there is an issue with my body 
element/background and the newest browsers, but I can't think why this would 
happen.  Any ideas would be fantastic, as I am out.

Thanks, Ellana Sue.
[EMAIL PROTECTED]

 
_
Are you paid what you're worth? Find out: SEEK Salary Centre
http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Fninemsn%2Eseek%2Ecom%2Eau%2Fcareer%2Dresources%2Fsalary%2Dcentre%2F%3Ftracking%3Dsk%3Ahet%3Asc%3Anine%3A0%3Ahot%3Atext&_t=764565661&_r=OCT07_endtext_salary&_m=EXT
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser compatibility with basic background formats?

[David Laakso]

e h wrote:
>
> I have had a website up and running for ages, www.brierleywines.com (css is 
> www.brierleywines.com/images/brierley.css).  Any ideas would be fantastic, as 
> I am out.
>
> Thanks, Ellana Sue.
>   


Dunno. But but the first thing to do is validate the CSS and markup.



-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Latest Rounded Corners

[Mark Wheeler]

On May 22, 2008, at 2:21 PM, Chris Akins wrote:

> I know there are many rounded corner techniques out there, and I'm not
> looking to start a war.  :-)
> But I was wondering if there are any especially good, newer  
> techniques to
> the game.  I need my rounded box to be resizable, and kind of like  
> the idea
> of using only one small circle image that gets offset for each corner.
> Prefer no javascript for this.
>
> I did start with Google, but quite a few of the promising link  
> titles lead
> to pages no longer there, so I hoping this list could point me to  
> recent
> improvements in this area.
>
> Thanks as always for the expertise here.
>
> Chris

I like this one by Adam Kalsey.

http://kalsey.com/2003/07/rounded_corners_in_css/

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

Re: [css-d] Latest Rounded Corners

[Kepler Gelotte]

> I need my rounded box to be resizable, and kind of like the idea
> of using only one small circle image that gets offset for each corner.
> Prefer no javascript for this.

Hi Chris,

I created an example page using a single gif image and no javascript. You
can see the page here: http://www.neighborwebmaster.com/tests/balloon.html

Best regards,

Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904

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

[css-d] Latest Rounded Corners

[Julián Landerreche]

@Kepler (and all)

I use the same technique (slightly different markup which doesn't make any
difference) that you posted, and after reading this thread, I will try to
write an article about this method to illustrate with examples, on a blog
where I collaborate.

Some advantages:
- it's flexible
- just one image (http://www.exaudi.com.ar/images/corners-r8-white.gif,
which can include different rounded corners)
- you can use borders on the box (remember to add borders to the rounded
corners on the image).
- the added extra mark-up isn't too "invasive". It doesn't "take physical
space", nor it isn't wrapping the real content, making it pretty "agnostic".
That is, if you decide to remove this extra markup, the content should still
look pretty fine, (but without rounded corners, of course).
- if you prefer to apply it as a progressive visual enhancement, you can
easily prepend this extra markup with JS

Disvantages:
- nobody likes to have empty elements in their HTML. That's why I prefer to
add the extra mark-up using JS.

So, here is the HTML and CSS (and optionally, the JS, using jQuery, in this
case)

/* HTML */






Your content here...
Your content here...


/* CSS */

.message {
background-color: #fff9d7;
padding: 15px;
position: relative;
height: 100%; /* IE6/7 bug fix  on rendering absolute positioned
elements */
width: 578px;
border: 1px solid #ded078;
}

/* rounded corners */
.message span.tl, .message span.tr, .message span.br, .message span.bl  {
display: block;
height: 9px;
width: 9px;
position: absolute;
background: #fff9d7 url(/images/corners-r8-white.gif) no-repeat 0 0;
}
.message span.tl {
top: -1px;
left: -1px;
background-position: -9px -9px
}
.message span.tr {
top: -1px;
right: -1px;
background-position: 0 -9px
}
.message span.br {
bottom: -1px;
right: -1px;
background-position: 0 0;
}
.message span.bl {
bottom: -1px;
left: -1px;
background-position: -9px 0;
}

/* JS (jQuery, optional) */

/* radd extra mark-up for ounded corners for messages */

$('.message').prepend('');


2008/5/22 Kepler Gelotte <[EMAIL PROTECTED]>:

> > I need my rounded box to be resizable, and kind of like the idea
> > of using only one small circle image that gets offset for each corner.
> > Prefer no javascript for this.
>
> Hi Chris,
>
> I created an example page using a single gif image and no javascript. You
> can see the page here: http://www.neighborwebmaster.com/tests/balloon.html
>
> Best regards,
>
> Kepler Gelotte
> Neighbor Webmaster, Inc.
> 156 Normandy Dr., Piscataway, NJ 08854
> www.neighborwebmaster.com
> phone/fax: (732) 302-0904
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Latest Rounded Corners

[Gunlaug Sørtun]

Chris Akins wrote:

> [...] I need my rounded box to be resizable, and kind of like the 
> idea of using only one small circle image that gets offset for each 
> corner. Prefer no javascript for this.

Since the following can be done with hard-coded instead of
script-generated markup, I think I'll throw them in.

The method uses real borders so no images are needed...



...but of course some can be included since the whole thing is pretty
flexible.

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

Re: [css-d] Latest Rounded Corners

[Chris Akins]

Wow - several good choices for me to mull over.  Thanks for the great tips.

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

Re: [css-d] Browser compatibility with basic background formats?

[David Jones]

> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On Behalf Of 
> Philippe Wittenbergh
> Sent: Thursday, May 22, 2008 3:31 PM
> To: CSS-D
> Cc: e h
> Subject: Re: [css-d] Browser compatibility with basic 
> background formats?
> 
> 
> On May 23, 2008, at 7:34 AM, e h wrote:
> 
> > I have had a website up and running for ages, www.brierleywines.com 
> > (css iswww.brierleywines.com/images/brierley.css).  It is 
> quite basic, 
> > and I have never had any issues with it before, but now the 
> background 
> > colour and gradient image for the  are not showing up in the 
> > newest (2.0.0.14) Firefox and IE browsers - it appears when 
> I load the 
> > working copy from my hard drive into firefox, but not via the 
> > internet/server.  The host I'm using does have an 
> advertising banner 
> > at the top, but I've checked the html adjustments that it makes and 
> > can't find any issues here, (although it's a possibility, 
> checked via 
> > 'view source').
> 
> Your host _is_ the problem.
> Their scripts are injecting ads into your stylesheet, at the 
> very top of it. As a result, any browser things that all that 
> ad-crap is part of the first selector (body in an 'unedited' 
> stylesheet).
> 
> Time to look for a better host, I think.

Or contact your existing one and let them know that there's no point in
their scripts injecting ads into CSS files - they only mess up the CSS
file and aren't seen by anyone. (Be interesting to know if they're also
injecting ads into external JS files.) Sounds like they don't really
know what they're doing ... 

David Jones, Content Coordinator, Customer Relations - KL PS, (808)
948-5830

"MMS " made the following annotations.
--

This electronic message is not an offer to contract, the acceptance of an offer 
to contract, or in any other way intended to contractually obligate HMSA; 
neither is it intended to change the terms of any existing contract unless 
specifically so stated.

The information contained in this electronic message (or attached hereto) is 
intended only for the individual or entity to which it is addressed and may 
contain information that is confidential and protected by law.  If you are not 
the intended recipient of this e-mail, you are cautioned that use of its 
contents in any way is prohibited and may be unlawful.  If you have received 
this communication in error, please notify the sender immediately by e-mail or 
telephone and return the original message by e-mail to the sender or to [EMAIL 
PROTECTED]  We will reimburse you for any cost you incur in notifying us of the 
errant e-mail.  Thank you. · 
==

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

[css-d] site check please - WHIWB

[Peter Hyde-Smith]

05/22/2008

Hi All:

Would appreciate a site check/thorough vetting of 
www.whitehouseinwestbend.com

http://www.whitehouseinwestbend.com/whitehousebaseformatcss.css
http://www.whitehouseinwestbend.com/whitehousepagecss.css

Comments regarding ease of use/accessibility, fonts, colors, etc always 
welcome.

Thanks in Advance, and Cheers,

Peter
www.fatpawdesign.com

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

Re: [css-d] Browser compatibility with basic background formats?

[Philippe Wittenbergh]

On May 23, 2008, at 7:34 AM, e h wrote:

> I have had a website up and running for ages, www.brierleywines.com  
> (css iswww.brierleywines.com/images/brierley.css).  It is quite  
> basic, and I have never had any issues with it before, but now the  
> background colour and gradient image for the  are not showing  
> up in the newest (2.0.0.14) Firefox and IE browsers - it appears  
> when I load the working copy from my hard drive into firefox, but  
> not via the internet/server.  The host I'm using does have an  
> advertising banner at the top, but I've checked the html adjustments  
> that it makes and can't find any issues here, (although it's a  
> possibility, checked via 'view source').

Your host _is_ the problem.
Their scripts are injecting ads into your stylesheet, at the very top  
of it. As a result, any browser things that all that ad-crap is part  
of the first selector (body in an 'unedited' stylesheet).

Time to look for a better host, I think.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





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

[css-d] IE6 ruins Holy Grail Layout with innocuous javascript

[Chris Hardie]

I've seen a lot, but this is a new one and a doozy:

http://142.177.155.236/test.asp

This page is a modified version of Levine's Holy Grail layout. At first 
blush, everything is tickety-boo. In IE6, click on the "Check position 
of left-hand column" button to pop-up a message indicating the 
x-position of the left-hand column. By design, it is 5 pixels.

Now, click on the "Change alt text of right-hand image" button. The 
left-hand column is now thrown over 375 pixels, and the alert now 
indicates an x-position of 380px! I think the 375px is calculated by 
doubling the width of the right-hand column (190px) and subtracting the 
5 pixels from the right-side padding, but I can't figure out why.

The javascript that the button fires that wrecks the layout:

function changeAlt(){
   var myImage = document.getElementById("myImage"); //A reference 
to the image in the right-hand column
   myImage.setAttribute("alt", "argh!");
   findPos(); //Alerts us to the x-position of the nav column
   }

By setting the alt text of the image in the right-hand column 
dynamically, for some reason IE is re-calculating the x-position of the 
left-hand column incorrectly! I can fix this with Javascript, but I'm 
hoping that someone knows what on earth is going on and I can implement 
a non-javascript fix.

C.

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

[css-d] IE6 ruins Holy Grail Layout with innocuous javascript

[Chris Hardie]

I've seen a lot, but this is a new one and a doozy:

http://142.177.155.236/test.asp

This page is a modified version of Levine's Holy Grail layout. At first 
blush, everything is tickety-boo. In IE6, click on the "Check position 
of left-hand column" button to pop-up a message indicating the 
x-position of the left-hand column. By design, it is 5 pixels.

Now, click on the "Change alt text of right-hand image" button. The 
left-hand column is now thrown over 375 pixels, and the alert now 
indicates an x-position of 380px! The javascript that the button fires 
that wrecks the layout:

function changeAlt(){
var myImage = document.getElementById("myImage"); //A reference 
to the image in the right-hand column
myImage.setAttribute("alt", "argh!");
findPos(); //Alerts us to the x-position of the nav column
}

By setting the alt text of the image in the right-hand column 
dynamically, for some reason IE is re-calculating the x-position of the 
left-hand column incorrectly! I can fix this with Javascript, but I'm 
hoping that someone knows what on earth is going on and I can implement 
a non-javascript fix.

C.



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

[css-d] IE5/Mac can't read style sheet

[Raven Gildea]

Hi all.

I've got a site that is showing a bizarre (to me) bug
in IE5/Mac. The site has a separate IE style sheet to
fix the left margin in the absolutely positioned right
column, but IE5/Mac can't seem to read it. 

Here's the really bizarre part: when I looked at the
style sheet, there was this little piece of code: 



at the top of the sheet. The code only shows up in
IE/Mac -- it's not visible in Safari, IE7, or
Dreamweaver. 

I have two style sheets for the site, and IE/Mac
wasn't reading new updates to the main sheet ... until
I removed the mystery code from the top of the sheet.
Then, it could read my new styles. Which was cool,
except that removing the code from the top of the IE
style sheet didn't fix the margin problem. 

Here are urls to my page and the two style sheets:

www.genderspectrum.org/book2.htm
www.genderspectrum.org/css/go_styles.css
www.genderspectrum.org/ie.css

The margin problem is not just in the right column,
but also in #cite, which is not absolutely positioned,
but still has left margin issues. 

I'd love to know what's up with the  and why it is
only visible in IE/Mac, but mostly what I need is help
getting the page to display properly in IE/Mac.

many thanks,
Raven





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

Re: [css-d] IE5/Mac can't read style sheet

[Philippe Wittenbergh]

On May 23, 2008, at 12:34 PM, Raven Gildea wrote:

> 

That is a 'translation' of the BOM (Byte Order Marker). It is an  
invisible character.
You should configure your editor not add this to your stylehseet(s),  
or any other html/js/php document. It is useless for utf-8 anyway.
And IE Mac is known to have problems with this.

> [...]
>
> I have two style sheets for the site, and IE/Mac
> wasn't reading new updates to the main sheet ... until
> I removed the mystery code from the top of the sheet.
> Then, it could read my new styles. Which was cool,
> except that removing the code from the top of the IE
> style sheet didn't fix the margin problem.
>
> Here are urls to my page and the two style sheets:
>
> www.genderspectrum.org/book2.htm
> www.genderspectrum.org/css/go_styles.css
> www.genderspectrum.org/ie.css

I hope you are not expecting that IE mac will read your ie.css  
stylesheet. That one is wrapped in a conditional comment. IE Mac does  
_not_ understand conditional comments.

I'm not clear what you are trying to do with that negative margin-left  
you are using on the #rightcol ul. If you want to zero out the space  
to the left of list-item (), you should set both the margin-left  
and the padding-left to '0' (zero) - that will 'reset' all browsers;  
then, if you want to push the  more to the left, you could use a  
margin-left value (e.g. 10px;).

Your stylesheet may look something like this
#rightcol ul {
margin: 0;
padding: 0 0 0 20px;
}
  /* That would give you a 20px left padding; adjust values to taste */

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





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