Re: [css-d] Quirks compendium?

[Peter Coates]

"Sorry, this page is not available"

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David McGlone
Sent: November-07-10 11:39
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Quirks compendium?

On Sun, 2010-11-07 at 13:15 -0600, Keith Purtell wrote:
> When it comes to making sure my Web design appears normally in different
> browsers, I've been checking via the three installed on my PC, the Mac
> at work, two other PCs owned by family members, and an iPhone a friend
> has. I'll probably always check to see how a site looks on different
> machines because of differing resolutions and media, but when it comes
> to simply sniffing out CSS quirks, I wonder if someone on the Web has a
> list of the most common quirks for different browsers/versions?

Why go through all that? Use adobe browserlab to check your site in a
bunch of browsers easily.

http://www.Adobe.com/BrowserLab

If anyone here has a different perspective, I'd like to hear it. I can't
find anything other than browswerlab, but everyone here IMHO is much
better than I, so I am all ears.

-- 
Blessings
David M.

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


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

Re: [css-d] Off topic, web hosting help

[Peter Coates]

I know exactly where you are coming from, I was there a couple of years ago.


A couple of bits of good news.  (1) it is not as hard as it looks to make
the next steps, and (2) there are hosting companies out there who offer
exactly what you need for very modest fees.

I have had very good experiences with dreamhost.com, but there are lots of
other outfits out there offering similar things.

Peter

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tomasz Kisielewski
Sent: August-26-10 06:35
To: css-d@lists.css-discuss.org
Subject: [css-d] Off topic, web hosting help

Hi
I know this list is about CSS, but I don't trust google.com when searching
for web hosting. I need basic host for drupal, joomla  just for my business.
I have no experience in this field, I can do programming and design but
hosting,domain registrationhave never done it. Will register domain with
godaddy, can I register domain and find hosting later? I wouldn't like to
make big mistake at the beginning. It is not my intention to spam the list,
but I need help and advice

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


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

Re: [css-d] centering 3 float: left boxes

[Peter Coates]

Well the first thing that comes to mind is to add a larger margin-left to
#left_main.  But the calculation is not obvious as your container is 1024px,
and you have margins and padding of 1em.

Across the floating divs, you have 3x25%x1024px = 768px for the div content,
6x1em for the margins.  So you wan
#left_main { margin-left: 1024px - 768px - }

But how many px in an em?  This is dependent on you font-size and on the
device displaying the page.  I believe the answer is to eschew the use of px
as a measurement everywhere, but that is a bit rough when you have pictures
in the mix.

Peter

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of martin
Sent: June-22-10 5:06 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] centering 3 float: left boxes

Hi all

I'm trying to center 3 float:left boxes in the middle of the main container.
So far I've got:

 
,[ html markup ]
| 
| 
| Everyday Expressions
| 
|   This is the left one
| 
| 
| This is the centre one
| 
| 
|  this is the right one
| 
| 
| 
| 
| 
`

,[ css ]
| 
| body {
|margin: 0;
|padding: 0;
|text-align: center;
| }
| #container {
|width: 1024px;
|margin: 0 auto;
|text-align: left;
|background-color: cyan;
|border-style: solid;
| }
| #left_main, #centre_main, #right_main {
|   float: left;  
|   width: 25%;
|   background-color: red;
|   margin: 1em;  
|   padding: 1em;
| }
| .curved {
|   border-radius: 8px; /* CSS3 compliant browsers */
|   -moz-border-radius: 8px; /* firefox */
|   -webkit-border-radius: 8px; /* Google Chrome, Safari  */
|   -khtml-border-radius: 8px; /* Linux Browsers */
|   behavior: url("css/border-radius.htc"); /* IE
Browsers */
|   background-image: url("1px.svg");  /* Opera
9.5+ */
| }
| .cleared {
|clear: both;
| }
`


How would I have to change it so that those three boxes (left_main,
centre_main, right_main)
were positioned in the middle of the container. As you can see they
(understandably) are slightly
to the left.

Thank you.

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


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

Re: [css-d] Re : Re : IE8, CSS 2.1 & page-break-inside: avoid problem

[Peter Coates]

http://reference.sitepoint.com/css/page-break-inside

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Stéphane Carnot
Sent: June-21-10 6:27 AM
To: css-d
Subject: [css-d] Re : Re : IE8, CSS 2.1 & page-break-inside: avoid problem

Hi, 

I don't know if IE8 is buggy but it seems to be ok with page-break-inside
tag :
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style
_Sheets%29
http://msdn.microsoft.com/en-us/library/cc196971%28VS.85%29.aspx

But i can't make it work :-(

Thanks for your help,
JYves




____
De : Peter Coates 
À : "Philip Taylor (Webmaster, Ret'd)" ; Stéphane
Carnot 
Cc : css-d 
Envoyé le : Lun 21 juin 2010, 14h 27min 46s
Objet : RE: [css-d] Re : IE8, CSS 2.1 & page-break-inside: avoid problem

It appears that you are trying to avoid a page break in a div containing
several s.  Your examples appear to work in Opera, but not in IE8.  IE8's
support for page-break-inside is best described as "buggy".

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Philip Taylor
(Webmaster, Ret'd)
Sent: June-21-10 2:09 AM
To: Stéphane Carnot
Cc: 'css-d'
Subject: Re: [css-d] Re : IE8, CSS 2.1 & page-break-inside: avoid problem



Stéphane Carnot wrote:
> Hi Chris,
>
> Sorry, i was on holidays :-)
>
> First, thanks for your help.
> But it doesn't help much.
> I'm trying to use the 'page-break-inside : avoid'. The page-break-after is
not what i'm looking for.

OK, you have test files, but we (or at least, I)
still do not know what you are trying to achieve :-(

Which of your three demo. files demonstrates the problem ?
Where does the page break occur, if you print to A4 paper ?
Help us to help you, and more help may well be forthcoming !

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


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


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

Re: [css-d] An Image On Top Of an Image

[Peter Coates]

  

  



 

The enclosing  is important.  It has positional info, so the
coordinated in the enclosed s are relative to that div.  You do not
have to specify the width and height of the images.  I've just doing that to
show the sizes.  The second image will be displayed on top of the first: no
z-index is given, so they are rendered in the order they occur.  If you
want, you could say

 



  

  



 

From: Victor Subervi [mailto:victorsube...@gmail.com] 
Sent: June-21-10 10:09 AM
To: Peter Coates
Cc: Climis, Tim; CSS Discuss
Subject: Re: [css-d] An Image On Top Of an Image

 

On Mon, Jun 21, 2010 at 12:23 PM, Peter Coates 
wrote:

Wouldn't it be easier to construct the finished image you want, and define
the active area for the "button" with a ?


Yeah, well, could do; however, I reuse the button over different images. How
do? Too complicated?
V 


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi
Sent: June-21-10 8:36 AM
To: Climis, Tim
Cc: CSS Discuss
Subject: Re: [css-d] An Image On Top Of an Image

On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim  wrote:

> Umm.  Can we have an example of what you want?  There are many options
> here, and depending on the effect you're looking for, some may or may not
> work.


kinda figured that...


> For example: do you want the bottom image to be visible under the top
image
> (translucent)?


yes


>  Are the images the same size or is one going to frame the other?


not the same size. The bottom one has a "hole" in it for the button to fill.
Imagine the logo for mailman (python mailing list). There is a "flag" part
to the left with a "circle" on the right:
http://www.mailmanlist.net/img/MailmanLogo75x199.jpg
Imagine it with "flags" on either side. Hope that was better.
TIA.
V

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



 

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

Re: [css-d] An Image On Top Of an Image

[Peter Coates]

Wouldn't it be easier to construct the finished image you want, and define
the active area for the "button" with a ?

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi
Sent: June-21-10 8:36 AM
To: Climis, Tim
Cc: CSS Discuss
Subject: Re: [css-d] An Image On Top Of an Image

On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim  wrote:

> Umm.  Can we have an example of what you want?  There are many options
> here, and depending on the effect you're looking for, some may or may not
> work.


kinda figured that...


> For example: do you want the bottom image to be visible under the top
image
> (translucent)?


yes


>  Are the images the same size or is one going to frame the other?


not the same size. The bottom one has a "hole" in it for the button to fill.
Imagine the logo for mailman (python mailing list). There is a "flag" part
to the left with a "circle" on the right:
http://www.mailmanlist.net/img/MailmanLogo75x199.jpg
Imagine it with "flags" on either side. Hope that was better.
TIA.
V
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


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

Re: [css-d] Re : IE8, CSS 2.1 & page-break-inside: avoid problem

[Peter Coates]

It appears that you are trying to avoid a page break in a div containing
several s.  Your examples appear to work in Opera, but not in IE8.  IE8's
support for page-break-inside is best described as "buggy".

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Philip Taylor
(Webmaster, Ret'd)
Sent: June-21-10 2:09 AM
To: Stéphane Carnot
Cc: 'css-d'
Subject: Re: [css-d] Re : IE8, CSS 2.1 & page-break-inside: avoid problem



Stéphane Carnot wrote:
> Hi Chris,
>
> Sorry, i was on holidays :-)
>
> First, thanks for your help.
> But it doesn't help much.
> I'm trying to use the 'page-break-inside : avoid'. The page-break-after is
not what i'm looking for.

OK, you have test files, but we (or at least, I)
still do not know what you are trying to achieve :-(

Which of your three demo. files demonstrates the problem ?
Where does the page break occur, if you print to A4 paper ?
Help us to help you, and more help may well be forthcoming !

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


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

Re: [css-d] liquid design for small screens

[Peter Coates]

I know that there is an easy solution for this if I was trying to do this
for all media, simply put the main content in an outer div.  But (a) the
content then flows around the nav div, and (b) I want the conventional fixed
width layout for the normal "screen" media type.

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Peter Coates
Sent: June-20-10 11:54 AM
To: 'css-d'
Subject: [css-d] liquid design for small screens

On a regular screen, the norm appear to be to define a container div of a
fixed width, put in a float left nav bar, etc, etc.

 

On a small screen, this really doesn't cut it.  I'm trying to make a couple
of style sheets for small screens that have a family likeness to the
"normal" one, but which are friendly for small screens, one landscape, one
portrait.  This means my header looks something along the lines of:















 

Screen.css is the base style sheet, handheld.css is for small portrait
screens, handheldl.css is for small landscape screens, and print.css is for
printers.  I suppose if I was really doing this right, I'd do media types
TV, braile, speech, ... but no, or at least not yet.

 

Now for portrait screens, it makes sense to put the navigation frills along
the top (or bottom).  For landscape screens, it makes sense to put them on
the left (or right).  I want a nice tight little menu bar on the left, fixed
width, and I want the main container to occupy the rest of the width.  I do
not see how to do that.  I do not know the screen width, so I do not know
how much to subtract.  It would be nice if I could define the main container
as {float:left;width:all-the-rest}.  In fact, all the rest would be a useful
interpretation of "auto", but that is not what auto means here.

 

This cannot be a new problem.  What is the solution.  I hope it is nice and
simple.  I don't mind feeling stupid, and I dislike complexity and
contrapted solutions.

 

Peter

 

 

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


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

[css-d] liquid design for small screens

[Peter Coates]

On a regular screen, the norm appear to be to define a container div of a
fixed width, put in a float left nav bar, etc, etc.

 

On a small screen, this really doesn't cut it.  I'm trying to make a couple
of style sheets for small screens that have a family likeness to the
"normal" one, but which are friendly for small screens, one landscape, one
portrait.  This means my header looks something along the lines of:















 

Screen.css is the base style sheet, handheld.css is for small portrait
screens, handheldl.css is for small landscape screens, and print.css is for
printers.  I suppose if I was really doing this right, I'd do media types
TV, braile, speech, ... but no, or at least not yet.

 

Now for portrait screens, it makes sense to put the navigation frills along
the top (or bottom).  For landscape screens, it makes sense to put them on
the left (or right).  I want a nice tight little menu bar on the left, fixed
width, and I want the main container to occupy the rest of the width.  I do
not see how to do that.  I do not know the screen width, so I do not know
how much to subtract.  It would be nice if I could define the main container
as {float:left;width:all-the-rest}.  In fact, all the rest would be a useful
interpretation of "auto", but that is not what auto means here.

 

This cannot be a new problem.  What is the solution.  I hope it is nice and
simple.  I don't mind feeling stupid, and I dislike complexity and
contrapted solutions.

 

Peter

 

 

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

Re: [css-d] Font treatment suggestion?

[Peter Coates]

You might find something of interest here:
http://24ways.org/2005/swooshy-curly-quotes-without-images

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso
Sent: June-19-10 8:27 PM
To: Brian M. Curran
Cc: css-d
Subject: Re: [css-d] Font treatment suggestion?

re:
http:www.draftingservices.com

Brian M. Curran wrote:
As usual, thank you gentlemen.

...

IMO it still lacks
something though? I'm thinking that adding a nice little image for the
quotation marks would be a start. That's what has always been appealing to
me when I see quotes on blogs. -- The cool quotation marks and indented
text.

-


The mission of this list is the practical application of CSS. If your 
/personal mission/ is to seek ideas, the Web, rather than this list, may 
be the place to start.

For example:
Blockquotes and pull quotes.


or, if you are into the more esoteric, explore the pages and past issues 
of sites like these...
Idea Magazine

Baseline


Best,
~d


-- 

http://chelseacreekstudio.com/

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


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

Re: [css-d] Sizing bullets in IE6/IE7

[Peter Coates]

Why not use 
ul {
list-style-image URL(bullet.gif);
}

I believe that is supported by IE.

Peter

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Jay Carlson
Sent: June-15-10 10:13 PM
Cc: 'css-discuss'
Subject: Re: [css-d] Sizing bullets in IE6/IE7

Good point.

And yes, I'm not a fan of the bullets, but the client insists. Ugh.

-J

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso
Sent: Tuesday, June 15, 2010 11:03 AM
To: Jay Carlson
Cc: 'css-discuss'
Subject: Re: [css-d] Sizing bullets in IE6/IE7

Jay Carlson wrote:
> I'm normally pretty clever with CSS, but the IE6/IE7 rendering of this
page
> is giving me issues:
>
> http://smmirror.jaycarlson.net/?noscript
>
> I want nice, big bullets, but normal-sized text on the sidebars, so I'm
> doing something like:
>
> And although the exact sizes have had to be tweaked between Gecko, WebKit,
> Presto, and IE8, the CSS doesn't seem to work at all in IE6 or IE7 -- the
> bullets are tiny, regardless of what I set as the li font-size.
>   





I guess because it is just a little to sophisticated for IE/6 and IE/7 ???
And it gets a little strange in compliant browsers if the user has the 
fonts set to a minimum font-size (I am at 16px).
I think you may need to use an image if you want those to look the same 
in IE 6/7.


Best,
~d
PS If you are seeking an off-wall  personal opinion, I'd bump the type a 
little and not use any list style marker at all.


-- 
desktop
http://chelseacreekstudio.com/

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

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


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

Re: [css-d] Pure CSS fisheye menu with icons: a demo

[Peter Coates]

I like this.  Hut shouldn't the expansion also work when the menu item is
selected by keyboard?  I tried adding
#navigation li a:active {
-webkit-transform: scale(1.5); 
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}

But it did not have the effect I expected.  Why not?

Peter

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim White
Sent: June-14-10 7:24 AM
To: Gabriele Romanato
Cc: css-discuss
Subject: Re: [css-d] Pure CSS fisheye menu with icons: a demo

> Hi all!
> I'm pretty inspired this time:
>
> http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html
> Gabriele

Or, we can do it with just one image and a little bit of CSS3 magic:
http://tjameswhite.com/demos/fisheye/

My demo uses Gabriele's original code, minus all the extra background
images and heights. Instead, I've added CSS transition and transform
to replicate the fisheye.

Yes, this requires vendor prefixes. It should work in the latest
versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I
didn't bother making a fall back for IE, which could be done easy
enough.

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


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

Re: [css-d] Going from tables to divs...help!

[Peter Coates]

I think you want to have padding-left:10px;width:760; specified for
#divisions.  I do not understand why you need to state the width for the ul,
but it makes the page work.

Peter

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ellen Heitman
Sent: June-09-10 9:41 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Going from tables to divs...help!

I'm trying to get this page (new way, am converting to divs and semantic
markup):

http://www.pottersignal.com/default_tableless.html

to look like this page (old way, using table structure):

http://www.pottersignal.com/

I cannot for the life of me get the menu to center and lengthen itself to
the proper width (760px). I think I have a poorer grasp on positioning and
floats than I thought. :/

Can someone help me? What am I doing wrong?

Thanks!

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


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

Re: [css-d] IE6 floating right div drops below container

[Peter Coates]

You are trying for fluidity and a side bar.  Here's a suggestion.  How about
a container div width:100%.  Then your float:left;width:13% left div, your
float:left;width:72% main div (as now) and your side bar as a
float:left;width:11%.  Except the %s don't add up.

Peter

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ken Davies
Sent: May-30-10 3:16 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] IE6 floating right div drops below container

Page validates CSS and Html 401strict  
http://www.equestrian-jewelry.com/horse_rings.htm
I have been trying all sorts of variations of % width, max-width, px 
width of the right div (rail)
I have a gallery  with larger previews in the center with a div to the 
right (in FF and IE8) to accommodate  the preview.
In Ie6 the div is below the container div. One third of my Iexplorer 
traffic is Ie6
How can I get this div to stay right of the container div? Please?
A quick question my webstats show Mozilla 5  viewers more often than 
Firefox, (almost as often as Ie6). Is Moz 1.7.2 the same as it views OK 
there.
Thanks
Ken
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


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

[css-d] (no subject)

[Peter Coates]

I'm playing around with CSS3 form elements, which are really rather
delightful (don't you wish that IE6 and 7 would creep off into a corner and
quietly die)

 

I want to have a visible indicator that a field is valid or invalid (easy
enough) as follows:

CSS:

   

  input:valid + span::after { content: "\2713 "}

  input:invalid + span::after { content: "\2717 "}

  

HTML:

   

  Name:  

   E-mail:  

   colour:  

   URL:  

   Comment:  



  

 

This puts a tick after valid input fields, and a cross after invalid ones.
But I want neither after empty fields.  I have tried all sorts of variants
on

 

input[value=""] + span::after {content:""}

 

but to no avail.  It would appear that Firefox and Chrome both evaluate the
value= only on load, and not after the field has changed.  Anyone got any
suggestions?

 

Peter

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