Re: [css-d] Will the unsemantic HTML elements B and I be soon phased out?

2014-02-17 Thread Richard Grevers
It must be remembered that the presentation layer is optional, and CSS
isn't always available. It might be due to a server error or timeout (i
experience that on maybe 1% of page loads), or, as HTML rendering
capability extends to ever-smaller devices, a physical limitation.

 has no default presentation. So I tend to use it only in situations
where it doesn't matter if presentation is lost. But if the differentiation
of such text matters, it makes sense to use markup that will differentiate
it regardless of the availability of CSS. In most cases this is  or
, often with a class to classify it semantically. But if I want to
use a binomial name, where emphasis is not intended but italic rendering is
desirable, then there is a case for beta vulgaris.
__
css-discuss [css-d@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] Clean fallback for CSS Animation in IE9 etc.

2013-11-20 Thread Richard Grevers
Hi everyone,

I've just completed my first CSS animation, at
http://www.businessstart.co.nz/index.php?page=test-page

What's a safe way of having non-supporting browsers just display all six
lines of text in front of the first background image? At present, IE 8 and
9 are showing the image only.

It's a CMS, but I can use conditional comments in the template.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [css-d@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] Top margin problem from accessibility link

2013-10-04 Thread Richard Grevers
 Thanks Philippe


On Fri, Oct 4, 2013 at 7:42 PM, Philippe Wittenbergh  wrote:

>
> Le 4 oct. 2013 à 12:38, Richard Grevers  a
> écrit :
>
> > Hi,
> >
> > At http://test.permaculture.co.nz I am trying to tighten the layout a
> > little in order to fit more content above the fold.
> > reducing the top margin of #page has had no effect, so I am guessing that
> > the Drupal-generated p#skip-link above it is the problem.
> > It looks as though the "off-left" technique has been applied to the link
> > inside the p rather than to the block element.
> >
> > Is it safe to give p#skip-link a zero height?
>
> correct url (thanks Richard): http://test.permaculture.org.nz/
>
> I would make the p#skip-link position: absolute with width, top and left
> coordinates to taste, then adjust the margin-top for #page as needed. That
> would also avoid having the whole page slide down when the skip-link is
> focussed (that could be disconcerting for some users).
>
> IIrc, some AT software treats elements with height:0 as invisible or
> hidden.
>
> PS - colour mismatch for background-color in the logo image with the rest
> of the masthead
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com
>
>
>
>
>


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [css-d@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] Top margin problem from accessibility link

2013-10-03 Thread Richard Grevers
Hi,

At http://test.permaculture.co.nz I am trying to tighten the layout a
little in order to fit more content above the fold.
reducing the top margin of #page has had no effect, so I am guessing that
the Drupal-generated p#skip-link above it is the problem.
It looks as though the "off-left" technique has been applied to the link
inside the p rather than to the block element.

Is it safe to give p#skip-link a zero height?

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [css-d@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] Controlling main-content width on a fluid design?

2012-09-02 Thread Richard Grevers
Thanks Georg, that fixed it.

Thinking back, that might have gotten commented out when it made the
div 100% of screen width on one preview. Drupal's theme bebuild
function gets a bit behind itself occasionally.

Richard

On Mon, Sep 3, 2012 at 9:18 AM, Georg  wrote:
> On 02.09.2012 21:42, Richard Grevers wrote:
>>
>> Problem 1: Centre column has narrow content, e.g.
>> http://www.permaculture.org.nz/classified  - the left column moves
>> off-left.
>
>
> Make...
> #content {width: 100%;}
> ...active again.
>
> Have not tested, but given the "negative margin design basis" the above will
> probably also fix your Problem 2.
>
> regards
>
> Georg
> __
> css-discuss [css-d@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/



-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [css-d@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] Controlling main-content width on a fluid design?

2012-09-02 Thread Richard Grevers
Hi,

I've just built a new template for www.permaculture.org.nz
It's a negative-margins design (I followed the original holy grail
article on ALA) with em units for withs, flexible between 54 and 72
ems total page width (I might yet increase the maximum to about 80).

It is working well on most pages, but if something affects the width
of the centre column, it in turn affects the position of the left-hand
column.

Problem 1: Centre column has narrow content, e.g.
http://www.permaculture.org.nz/classified  - the left column moves
off-left.

Problem 2: Centre colum is forced too wide (I don't currently have an
example after putting limits on form field lengths) - the left column
moves to the right and starts overlapping the main column.

I've thought about trying min and max widths for the centre column (in
either ems or %), but min-width would only be effective when the page
is 54em wide and max-width when it is 72em wide.

Since Drupal is such a mess of stylesheets, I'll extract my layout styles here:
#container {
position:relative;  /* This fixes the IE7 overflow hidden 
bug and
stops the layout jumping out of place */
clear:both;
overflow:hidden;/* This chops off any overhanging divs 
*/
padding-left: 13em;   /* LC width */
padding-right: 15em;  /* RC width */
margin-right: 10px;
}
#container .column {
  float: left;
  position:relative;
}
#content {
  /*width: 100%;*/
}
#navcol {
  width: 13em;  /* LC width */
  margin-left: -100%;
  right: 13em;
}
#sidebar {
width: 14em;  /* RC width */
margin-right: -15em;
border-top: 1px solid #999;
border-right:1px solid #999;
border-left: 1px solid #444;
border-bottom: 1px solid #444;
border-radius: 30px;
background-color:#edece6;
padding: 0.4em;
}
#sidebar section {
border-bottom: 1px solid #fff;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
#content-inner {
margin: 0 0.5em;
border-top: 1px solid #999;
border-right:1px solid #999;
border-left: 1px solid #444;
border-bottom: 1px solid #444;
border-radius: 30px;
background-color:#edece6;
    padding: 0.8em;
}


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [css-d@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] fixed background

2010-09-24 Thread Richard Grevers
On Thu, Sep 23, 2010 at 6:31 PM, Richard Grevers
 wrote:
> Other than railing against the fact that you can only apply a fixed
> background relative to the viewport rather than a container, what can
> I do to position the *left* edge of a background image at 50% with a
> fluid layout?
> "fudging" it with 65% works for a narrow range of widths, but gaps
> start appearing as the screen gets too wide or too narrow.

I have solved this problem by appending an equal width of white to the
left-hand side of the image, so that when the image is centered, I see
the desired part of it.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] fixed background

2010-09-22 Thread Richard Grevers
Other than railing against the fact that you can only apply a fixed
background relative to the viewport rather than a container, what can
I do to position the *left* edge of a background image at 50% with a
fluid layout?
"fudging" it with 65% works for a narrow range of widths, but gaps
start appearing as the screen gets too wide or too narrow.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Making GridView's Header Fixed while Scrolling vertically or horizantally

2010-09-20 Thread Richard Grevers
On Fri, Sep 17, 2010 at 9:32 PM, Dilip Nagle  wrote:
> *The Problem:*
>
> At present, I use following css to achieve above; This CSS is
> then associated with  gridview.header of the gridview
>
> 
>
> .gvFixedHeader_Aqua{position:relative;
>
> top:expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1)
> ;
>
> background-color: Aqua;
>
> color:Black;
>
> font-family:Arial;
>
> font-size: X-Small;
>
> font-weight: lighter;
>
> border : none;
>
> text-align:center;
> height: 20px;}
>
>
> *The Help Needed:*
>
> The *expression* is not css2 compliant. While, it still works in IE6 to 8,
> what is the best alternative?
>
Use the expression, but in an external stylesheet targeted to the
versions of IE which need it, called from a conditional comment.
Everything the validator and non-IE browsers will see can be valid.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] 3-column layouts, current state of play

2010-09-20 Thread Richard Grevers
It's a while since I did a 3 column layout, and while looking around a
couple of sites (Alex Robinson's onetruelayout and Matthew James
Taylor's) I realised that most of this information is 4-5 years old.
Which of the gotchas are still valid in latest versions? (I recall not
using onetruelayout originally because of scrollbar issues in Opera)

My requirements are:
- 3 columns, percentage width based) (one is purely decorative and
will contain only a background image)
- wrapper will be fluid with maximum and minimum widths set
- any order (in fact there will be four templates using all 4 possible
order permutations)
- image backgrounds on some columns (difficult with
- full height columns
- sticky footer

Are there any more up-to-date layout articles?
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] NOT restarting numbered lists after element

2009-12-18 Thread Richard Grevers
On Wed, Dec 16, 2009 at 11:03 AM, Climis, Tim  wrote:
>> After inserting the  I find I cannot continue with my second list item 
>> as "2"; the list starts over at "1". Can I do that using CSS? I've got
>> the other sub-items to style correctly using CSS, so this is my only problem.
>
> There's two answers:
> There is the start attribute of ol () which apparently is 
> deprecated (just learned that now)
> And then there's counter reset, which is the CSS replacement.  I'm not sure 
> how it works yet, but I found this page: 
> http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html
>
Use the start attribute and an HTML 5 doctype if you want it to be
valid. The spec writers have seen the light that the numbering is
semantic rather than presentational and handed the task back to HTML.
More importantly, all browsers support , while support
for css counters isn't universal.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Chrome vs floated tables

2009-06-17 Thread Richard Grevers
On Wed, Jun 17, 2009 at 9:34 PM, Bobby Jack wrote:
>
> --- On Wed, 6/17/09, Richard Grevers  wrote:
>
>> Google chrome (2.0.172.31) appears to
>> minimise the width of floated
>> tables which have no explicit width, while most other
>> browsers assume
>> 100%. Is this actually a bug or just one of those undefined
>> behaviours
>> that serve as a lesson to always follow Braden's mantra?
>
> I've always been led to believe that "float without explicit width" is a 
> no-no, but I think this might only be due to poor browser implementations. 
> >From the spec:
>
> "10.3.5 Floating, non-replaced elements - If 'width' is computed as 'auto', 
> the used value is the "shrink-to-fit" width."
>    http://www.w3.org/TR/CSS21/visudet.html#float-width
>
> As I read that, Google chrome is the only browser that behaves correctly - 
> over to someone else to correct ME though :)
>
I suspect that Opera and Gecko have both decided to go bug-compatible
with Microsoft on this one. Thanks for the feedback everyone.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Chrome vs floated tables

2009-06-17 Thread Richard Grevers
Google chrome (2.0.172.31) appears to minimise the width of floated
tables which have no explicit width, while most other browsers assume
100%. Is this actually a bug or just one of those undefined behaviours
that serve as a lesson to always follow Braden's mantra?

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] site check / footerstickalt problem

2009-05-17 Thread Richard Grevers
Hi,
we are making some cosmetic tweaks to a site I designed five years
ago: Eliminating some of the fixed and pseudo-fixed elements and
rearranging elements on the home page. This has also permitted a
change from quirks mode to standards mode rendering. There is still
some use of

The reworked page is at http://www.newzealandmint.com/nzmint_test.html
(all css inline for now)
The old page is at http://www.newzealandmint.com

My own observations so far:
1) The menus have stopped working (all browsers). They were the other
night so I'm trying to backtrack what has changed since then. (it
isn't footerstickalt) Alas this site isn't in SVN.
2) Footerstickalt isn't sticking - the footer is merely being placed
at the bottom of the in-flow content then margin-shifted upwards.
3) The client has checked in IE8 and says that when the viewport is
narrowed the bullion and precious metals images overlap rather than
dropping to vertical alignment.
4) In IE6, #heading is going extremely wide (much more than 100%),
causing horizontal scrolling and the centred content block to drift to
the right.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] other alphabets

2009-02-26 Thread Richard Grevers
On Thu, Feb 26, 2009 at 2:57 AM, Nicky McCatty  wrote:
> I am working on a bilingual Greek-English site, using a Mac running OS
> 10.5.6. Is there anything I have to do to make the fonts display
> properly, without buying a special edition of Dreamweaver?
>
As others have said, set the encoding of your page to UTF-8. Also,
avoid using Verdana on the page, as pre-vista versions of verdana are
buggy and put diacriticals on the wrong character in some browsers.
(see http://en.wikipedia.org/wiki/Verdana )
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Is there an alternative way of doing this?

2009-02-01 Thread Richard Grevers
On Mon, Feb 2, 2009 at 2:05 PM, tedd  wrote:
>> http://appia.dramatic.co.nz/~admin7/index.php is attempting to use a
>> hover effect on the left-hand column where the background image
>> changes from monochrome to colour. I can't use a traditional "2 images
>> in 1" sprite because you cannot position a background image in pixels
>> relative to the right-hand side of a box.
>>
>> SO I have the coloured image as the background to the main wrapper div
>> and hovering the div #colleft switches the position of colleft's
>> background from right to left (= out of sight). However, the hover is
>> also triggering on the main column, presumably because this is a child
>> of #colleft, even though is is positioned entirely to the right of it
>> (the blue border exists for debugging only). is there any way to
>> "cancel" the hover for .col1?
>>
>> or can anyone see an alternative method. (I can't use col2 as that is
>> not full-height).
>> I considered using a "vertical sprite", but there would be some length
>> of page for which that would look ugly, and it would presumably siffer
>> from exactly the same triggering issue.
>
> Richard:
>
> I'm not sure what you're doing, but I am thinking you're making this more
> difficult than it should be.
>
> Here's something that looks difficult, but isn't.
>
> http://sperling.com/examples/image-replacement/
>
Hi Tedd,

your method demonstrates why the sprite technique was invented in the
first place. In IE, I see a 7 second delay while the second image
loads, since IE doesn't preload resourced defined in :hover

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Is there an alternative way of doing this?

2009-02-01 Thread Richard Grevers
http://appia.dramatic.co.nz/~admin7/index.php is attempting to use a
hover effect on the left-hand column where the background image
changes from monochrome to colour. I can't use a traditional "2 images
in 1" sprite because you cannot position a background image in pixels
relative to the right-hand side of a box.

SO I have the coloured image as the background to the main wrapper div
and hovering the div #colleft switches the position of colleft's
background from right to left (= out of sight). However, the hover is
also triggering on the main column, presumably because this is a child
of #colleft, even though is is positioned entirely to the right of it
(the blue border exists for debugging only). is there any way to
"cancel" the hover for .col1?

or can anyone see an alternative method. (I can't use col2 as that is
not full-height).
I considered using a "vertical sprite", but there would be some length
of page for which that would look ugly, and it would presumably siffer
from exactly the same triggering issue.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Positioning a background image in holy grail layout

2009-01-23 Thread Richard Grevers
On Sat, Jan 24, 2009 at 5:47 AM, Gunlaug Sørtun  wrote:
> Richard Grevers wrote:
>
>> When I remove no-repeat, the background becomes visible, but its offset
>> varies as you change the page width. How can I get it static where I want it
>> to be?
>
> That .leftcol is 100% wide, so it stretches far outside the
> browser-window on the left side and changes width with the
> browser-window. You should rethink that construction.
>
> As it is now, if you make the background on .leftcol...
>
> background:#ff0 url('../images/left_bg_bw.jpg') top right no-repeat;
>
> ...it will appear stable.
>
>> URL: http://appia.dramatic.co.nz/~admin7/index.php
>>
>> Secondly, the top header image is truncated at the right-hand side in
>>  IE7. What have I done to offend it?
>
> #skiplinks takes up space on the right side, and IE7 adjusts the
> header's space to it because the header has 'height' as 'hasLayout' trigger.
>
> Add...
>
> #skiplinks {margin-left: -400px;}
>
> ...and the "offending space" will be removed.
>
> regards
>Georg

Thanks Georg
You hit the nail on the head as always!

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Positioning a background image in holy grail layout

2009-01-23 Thread Richard Grevers
Hi,

I'm slogging away at turning a Joomla template into a holy grail
layout. My design has a background-image on the left column, and
because  we are considering some sprite-like effects with that
background, I want to use no-repeat on it. At present if I do that, it
vanishes, and must be somewhere out to the left or right thanks to
negative margins.

When I remove no-repeat, the background becomes visible, but its
offset varies as you change the page width. How can I get it static
where I want it to be?

URL: http://appia.dramatic.co.nz/~admin7/index.php

Secondly, the top header image is truncated at the right-hand side in
IE7. What have I done to offend it?

Thanks in advance

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE not hiding overflow?

2009-01-13 Thread Richard Grevers
On Wed, Jan 14, 2009 at 7:04 PM, Daniel Hammond
 wrote:
> I have three things for you guys to look at. IE6 and IE7 are the only
> browsers having this problem.
>
> Here's the first thing:
> URL: http://www.studentremix.org/ms/index.htm
> CSS: http://www.studentremix.org/ms/ms.css
> Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg
> The red arrows show what's going wrong. There is a little bit of blue
> extending down below the nav bar. It's not supposed to do that. View the
> page in FF, Opera, Safari, or Chrome to see how it's supposed to look.
>
It's probably not a case of failing to hide overflow but of it making
the element larger than you expect. Slap on a red border as a test and
I bet it will be beneath your unwanted bit of blue.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Larger Chinese characters

2008-09-20 Thread Richard Grevers
On Wed, Sep 17, 2008 at 4:17 AM, Tony Lush <[EMAIL PROTECTED]> wrote:
> I would like to find a way to automagically increase the font size for
> Chinese characters when interspersed with Western European characters. An
> examples are at:
>
> http://catalog.etco.com/item.php?sku=08393&l=c  (mixed)
> http://catalog.etco.com/item.php?sku=08393&l=e  English
>
You would be best to use attribute selectors for the lang attribute -
except your markup seems to be lacking them.Their use (for the
secondary language on the page) would be a good idea.
Attribute selectors don't work in IE 6/7 of course.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Rounded Corners -- Simplest Way

2008-07-09 Thread Richard Grevers
On 7/8/08, Sohail Aboobaker <[EMAIL PROTECTED]> wrote:
> Hi,
>
>  What is the simplest way to create rounded corners using CSS. I saw a
>  technique using 3 extra div tags for three corner images (left-bottom,
>  right-bottom, left top) which seemed cumbersome and the posting was old. Are
>  there any newer and simpler ways of creating rounded boxes containers?
>

Depends on your requirements:
The need for multiple elements is based on the idea that using
background images as corners is morally better than adding foreground
images (and looks less ugly in the absence of stylesheets) - you need
one element to hang each background on*.

If you have a fluid-width, fluid height box, you therefore need four
elements. If the box is fixed-width, you only need two. If it has a
fixed height as well, you can get away with one, but I'd only risk
this on an element containing nothing but a single image.

If the element has borders, it gets more complex: I've seen methods
using 8 elements (just as bad as a table) or using positioning jiggles
with mixed success.

The wiki has a pretty comprehensive round-up of methods.

*Until everyone implements the backgrounds module of css3, at which
point rounded corners will become much easier, but I'm picking that
everyone will support border-radius before that.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Writing CSS articles in English: site structure issues

2008-06-04 Thread Richard Grevers
On 6/1/08, Gabriele Romanato <[EMAIL PROTECTED]> wrote:
> Yesterday I've finished to write my first CSS article in English.
>  This is the first of a series of articles that I'm going to _deliver_ in the
>  next fall or something.
>  I've a problem with my site structure.
>  As some of you know, a page named /articoli.html already exists.
>  My site is static, so I've the following options:
>
>  1. add a link to /articoli.html >> articles.html
>  2. create a /en section
>  3. create a third-level domain
>  4. rebuild my site navigation
>
>  so:
>
>  1. most probable. do you think English/American/Foreign people  will have
>  some problems with finding it on Google?
>  2. this doesn't fit to the rest...
>  3. expensive!
>  4. baaz! I'm too lazy *^.^*

I would opt for an /en section - it gives you the most flexiblity,
especially if you have the same article in multiple languages. It is
reasonable that the default language of the site doesn't have /it, and
if you come up with a language-based navigation management as the site
grows, you can always create a redirect from /it to / if that assists
automated generation of links.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] How to align list numbers?

2008-05-25 Thread Richard Grevers
On 5/23/08, David Jones <[EMAIL PROTECTED]> wrote:
> 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.
>
I could see why that wouldn't work, but also how it could be made to
work, so I started tinkering:

http://www.dramatic.co.nz/testing/lefty_roman_list.html

It's not a perfect solution, as it requires extra markup inside the
list items: A div to make the content line up with itself, and a
non-breaking space to force the browser to keep the item number
outside the div. I only have Opera, firefox 2 and IE6 available to
test with at present, but its orking fine on all of those

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Nested div break in IE7

2008-05-20 Thread Richard Grevers
On 5/17/08, Daniel Botting <[EMAIL PROTECTED]> wrote:
> Dear all,
>
>  I have been a subscriber to the css-d list for a long while and always
>  found it an interesting read. I'm not a web pro, my background for a
>  while was a tester on a large travel website, so I have a fair-ish idea
>  of things.
>
>  I'm building a site at the moment as per below url:
>
>  http://beta.bedazzled.name
>
>  It looks fine in FF and Opera, a little broken in Konqueror and
>  completely broken in IE7. I use Linux and I don't have IE7 at home
>  (though I am looking at installing ies4linux), but I've had a look at work.
>
>  It should look like the below mockup I built:
>
>  http://beta.bedazzled.name/mockup/mockup.png
>
>  The main background for the body is a tiled 1px image, as are
>  backgrounds for both nested div's, if there is another way of doing it
>  to avoid this any suggestions would be appreciated.
>
Hi Daniel,
I would strongly recommend recreating all your bakground images wider
than 1px. Tiling tiny images slos some browsers to a crawl, as they
have to process each instance of the tiled image. With a vertical
gradient in a .png or .gif image you will find that an image 20px or
even 100px wide is not signifiantly larger. (If they are jpeg images
they shouldn't be!)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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/


[css-d] Last-minute question

2008-05-15 Thread Richard Grevers
I just remembered that I had to reapply min/Max width expressions for
the 3 container elements of a website and I discovered that IE6 is
doing strange things with the companion column as a result (On a
window wider than 1440px it extends the white background of the
content colum to the left by the same amount as the space to the right
of the globalwrapper. Since the site has just gone live, I duplicated
the template and created a test page:

http://www.vine.org.nz/index.php/test-page


(My guess is that there is something in the companion column method
that is assuming 100% width that I haven't spotted)
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Full-height left column in fluid layout.

2008-04-15 Thread Richard Grevers
On 4/15/08, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Richard Grevers wrote:
>  >> Having had problems with onetruelayout before, I tried Gunlaug's
>  >> companion column example.
>
>
> FYI: "companion column" is not mine. It's Ingo Chao's (linked to from my
>  site).
>
I stand corrected. (Sorry Ingo!)
>
> > But I still have the problem of the gap (stripe of background colour)
>  >  in FF/Opera, plus the client will want the left column to go all the
>  >  way to the bottom (or a "narrow footer")
>
>
> Contradicting requirements - or I simply don't understand them.

Since the footer has a child it was easiest to fake the left column by
giving the child the same left margin and moving the background.
>
>  Also a number of contradicting styles in your page, which makes it less
>  cooperative. I don't have time to debug it all, so I just play along
>  with what's already there.
>
That's what happens when you start out with some negative margins code
from layoutgala, overlay your IE width expressions (currently lost in
the wash), then add footerstickalt into the mix, then have a change in
brief and a new design (which necessitates losing the header), and
finally add companion columns.

As I understand it, footerstickalt precludes having a global container
to set width (because the 100% height has to pass down the chain of
inheritance), so I was looking at having 3 elements to handle when I
get the min-max for IE working again. I added a class (fluidwidth),
but on second thoughts isn't the method dependent on using ids?

It's just about in shape now,
http://www.vine.org.nz/index.php/adult-classes
except pages seem to be an em too tall in most browsers, and I haven't
yet spotted where that snuck in.

Richard


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Full-height left column in fluid layout.

2008-04-14 Thread Richard Grevers
On 4/15/08, Richard Grevers <[EMAIL PROTECTED]> wrote:
> On 4/10/08, David Laakso <[EMAIL PROTECTED]> wrote:
>  > Richard Grevers wrote:
>  >
>  > > http://www.vine.org.nz/index.php/services uses a

>  >  And also:
>  >  <http://www.satzansatz.de/cssd/companions.html>
>  >
>
> Having had problems with onetruelayout before, I tried Gunlaug's
>  companion column example.
>  Footerstickalt is now working correctly on both short and long pages,
>  but .leftcol still doesn't appear full length
>
>  In Opera and Firefox, the long page example (
>  http://www.vine.org.nz/index.php/adult-classes ) shows a gap between
>  content and footer, and the sample text and outline I included in the
>  companion column for testing purposes are visible, but not its
>  background.
>  Any further clues?
>
Aaaargh! After playing around for 2 hours I finally post to the list,
then 2 minutes later I find an errant background-color which is
overriding .leftcol

But I still have the problem of the gap (stripe of background colour)
in FF/Opera, plus the client will want the left column to go all the
way to the bottom (or a "narrow footer")

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Full-height left column in fluid layout.

2008-04-14 Thread Richard Grevers
On 4/10/08, David Laakso <[EMAIL PROTECTED]> wrote:
> Richard Grevers wrote:
>
> > http://www.vine.org.nz/index.php/services uses a
> negative-margin based
> >  How can I make the left-column
> > (which is sized in ems) full height?
> >
> > http://www.vine.org.nz/index.php - complicated by the
> presence of
> > the two-column masthead, which may mess up 100% heights.
> >
>  This is one way to do it  (providing this link is not totally mangled in
> transmission):
> <http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1-3&width=33-34-33&equal_height=1&longest=1&time=1207745223288>
>  -- and check the make columns equal height box.
>
>  And also:
>  <http://www.satzansatz.de/cssd/companions.html>
>
Having had problems with onetruelayout before, I tried Gunlaug's
companion column example.
Footerstickalt is now working correctly on both short and long pages,
but .leftcol still doesn't appear full length

In Opera and Firefox, the long page example (
http://www.vine.org.nz/index.php/adult-classes ) shows a gap between
content and footer, and the sample text and outline I included in the
companion column for testing purposes are visible, but not its
background.
Any further clues?
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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/


[css-d] Full-height left column in fluid layout.

2008-04-08 Thread Richard Grevers
Hi,
http://www.vine.org.nz/index.php/services uses a negative-margin based
2-column layout plus footerstickalt. How can I make the left-column
(which is sized in ems) full height? - note that it is full height in
IE6, but that has broken the footer positioning on short pages.

I will have a similar problem on three-column pages
e.g. http://www.vine.org.nz/index.php - complicated by the presence of
the two-column masthead, which may mess up 100% heights. (I still have
to redo the footer there as I write)

some days I hat implementing other people's designs :-)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Broken negative-margin layout

2008-04-07 Thread Richard Grevers
On 4/8/08, Richard Grevers <[EMAIL PROTECTED]> wrote:
> I'm not sure which of several changes did it, but the 2-column
>  negative margin layout at
>
>  http://www.vine.org.nz/index.php/services
>
>  suddenly has a disappeared left column (in IE, firefox, Opera)
>  HTML and CSS both validate.
>
Never mind - I worked it out! (I had accidentally moved #leftcol
inside #wrapper in the template


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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/


[css-d] Broken negative-margin layout

2008-04-07 Thread Richard Grevers
I'm not sure which of several changes did it, but the 2-column
negative margin layout at

http://www.vine.org.nz/index.php/services

suddenly has a disappeared left column (in IE, firefox, Opera)
HTML and CSS both validate.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] font vs. font-size in firefox

2008-04-03 Thread Richard Grevers
On 4/4/08, vincent pollard <[EMAIL PROTECTED]> wrote:
> is there anything buggy about the way firefox reads these that i should know
>  about?
>  i'm getting some weird results.
>
By "font" do you mean the  element in HTML, or the css shorthand
property? http://www.w3.org/TR/REC-CSS21/fonts.html#propdef-font
If the latter, the values have to be in a specific order: Value:[ [
<'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'>
[ / <'line-height'> ]? <'font-family'> ]
Firefox might be being stricter about this than IE.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Creating inner border on hover

2008-04-02 Thread Richard Grevers
On 4/3/08, Marcelo de Moraes Serpa <[EMAIL PROTECTED]> wrote:
> Hello,
>
>  http://201.51.69.207:8081/fotos
>
>  Take a look at the thumbs. Hover the mouse over them. You can see a "inner"
>  border is created. However, it isn't yet the way I wanted. Becouse of the
>  margin rule, the img element "jumps" a pixel towards the top.
>
>  I want something like the effect in this page: http://www.globo.com/ (hover
>  on any of the thumbs there and see) and have failed to duplicate the effect.
>
>  If someone could helpe me or at least put me in the right direction I would
>  be grateful!
>
I have isolated an minimised the code they are using at
http://www.dramatic.co.nz/testing/innerborder.html

The effect requires the image to have display:block and a parent with
overflow:hidden. If the parent is an  element, then the effect will
work on IE6.
On hover, the parent is resized (reduced by twice the border width,
the border is added, and a negative margin applied to the image to
prevent it moving.

The original used multiple classes in order to control color, and of
course you need a separate class for each size of image you want to
use the effect on.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Prohibit Font resizing (cross browser)

2008-03-31 Thread Richard Grevers
On 3/29/08, cj <[EMAIL PROTECTED]> wrote:
> On 3/28/08, Christian Heilmann <[EMAIL PROTECTED]> wrote:
>  > Use a graphic?
>
>  the trend with browsers seems to moving towards "zoom" (yuck) instead
>  of a simple text resize, so i'm not sure how long the graphic idea
>  would work.
>
But page zoom (e.g. Opera - haven't tried IE's) just scales everything
proportionately - it doesn't break layouts, only magnifies them. So
the solution of using an image still works.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Oldest Browser Currently Testing for

2008-03-06 Thread Richard Grevers
On 3/6/08, Mark Story <[EMAIL PROTECTED]> wrote:
> Hernly, Lee wrote:
>  > Netscape 4.X here...
>  >
>  >
>  >
>  When testing with an older browser such as netscape 4.x are you looking
>  for identical results to current browsers.  Or just 'good enough' results?
>
identical is impossible with Netscape 4. In fact, so much modern CSS
crashes that browser that the only safe method would be to serve
unstyled content. (achieved by importing all the stylesheets).
I would imagine that many of the remaining NN4 users would surf with
Javascript disabled (which has the effect of disabling stylesheets
from the user end)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] THis layout must exist somewhere...

2008-03-05 Thread Richard Grevers
Ok, I have selected a reasonable starting point from layoutgala and
started modifying but struck an imapasse and what looks like an Opera
bug. Please check out
http://www.dramatic.co.nz/layoutlab/3col_fixed_minliq_fixed/index.html
and the two subsequent steps. (Fully annotated on the pages).

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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/


[css-d] THis layout must exist somewhere...

2008-03-05 Thread Richard Grevers
I'm sure this exists, but my searching hasn't found it yet:

1) Fluid design but with a max width on the outer container
2) 3 columns
3) Center column first in source, has min width (may be in ems)
4) Left column last in source - fixed (or possibly em) sized.
5) Right column second in source - fixed (or possibly em) sized.
6) full width footer.
7) any column longest.

In other words, when the screen is narrow enought to trigger the
min-width of the center column, there will be a horizontal scrollbar
and the right column will start to vanish.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Textarea padding and scrolling

2008-03-03 Thread Richard Grevers
On 3/1/08, Valerie Wininger <[EMAIL PROTECTED]> wrote:
> Ray,
>
>  I added a background-color:white to the div containing the overlay and then
>  played with the margins a bit, as well as the position of that div.  This is
>  the result:  http://valeriewininger.com/css_list/test.html
>
>  It looked right in firefox and ie6 and 7.
>  Hope this helps!
>  Valerie
>
>
>  On Fri, Feb 29, 2008 at 9:20 AM, Ray Costanzo <[EMAIL PROTECTED]> wrote:
>
>  > Hi list,
>  >
>  > I'm trying to display some text that appears at the bottom right of a
>  > textarea, but the text is not part of the content of the textarea.   This
>  > works fine, but the problem is that in IE, that when you are typing at the
>  > bottom of the textbox, it doesn't scroll in the same way that firefox
>  > does,
>  > and you wind up typing over the overlaid text.  Is there anything
>  > css-related that I can do to get IE to behave the way Firefox does?  In
>  > Firefox, when you pad the bottom of the textarea, the vertical scrollbar
>  > does not extend into the padded area.  This works perfectly for my needs,
>  > but IE doesn't do it this way.  Any ideas?
>  >
Ray's original example has problems since text colour is specified but
background isn't: The light grey almost matched my default background
making the overlay text  almost invisible. The padding works in Opera,
however.

Valerie's version causes some display glitches in Opera. In version
9.26, scrolling the textarea causes white artefacts to partially
obscure the text. These are gone in the latest 9.5 weekly, but the
overlay does partly (50%) cover the vertical scrollbar and its bottom
arrow button.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Keeping table rows together when printing.

2008-02-23 Thread Richard Grevers
On 2/23/08, James Smith <[EMAIL PROTECTED]> wrote:
> I have a table that looks similar to...
>
>  Product Name - Other details
>Order
>Order
>Order
>  Another Product - Other Details
>Order
>  Yet Another Product - Other Details
>Order
>Order
>
>  When printing I would like the order detail rows to be kept with the product
>  details and not page break in between (product and order) or (order and
>  order) but only between (order and product).
>
>  I know that css has the page-break-before, page-break-after and
>  page-break-inside properties but I can't figure out how to use them to
>  achieve this. I have even tried enclosing the groups in divs with
>  page-break-inside set to "avoid" and that didn't work. I tried setting
>  various combinations of before and after avoids with no success.
>
>  I have tried using a tgroup around each group and a tbody around each group,
>  again with page-break-inside set to "avoid" but nothing works.
>
>  Any ideas?
>
What browser are you testing in? IE has no support for paged media.
Opera supports it but with a few bugs, and Firefox had patchy support
last time I checked.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Absolutely positioned div breaking out of parent in IE

2008-02-20 Thread Richard Grevers
On 2/20/08, Hayley Kinash <[EMAIL PROTECTED]> wrote:
> I've got an absolutely positioned div inside a relatively positioned div,
>  but in IE the child div is breaking out of the parent and uses the body as
>  its parent.  There's a width and a height on the parent div, and all divs
>  above the parent have position:relative and a width.  It behaves as expected
>  in FF and Safari.
>
>  I can't post the site URL right now, so I'll post code.  Thanks for any
>  help!
>
>  
>
>  
> (inside is Macromedia's mm_menu, which is what is jumping out of the
>  parent div, but is absolutely positioned)
>  
>
>  
>
>  #container {
> margin-left: auto;
> margin-right: auto;
> width: 761px;
> background-color:#ff;
> position:relative;
>  }
>
>  #wrapper {
> width:577px;
> float:right;
> text-align:left;
> position:relative;
>  }
>
>  #menu {
> position:relative;
> width:538px;
> height:30px;
> text-align:left;
> padding-left:10px;
> padding-right:29px;
> background-color:#318b4d;
> }
>
Is your doctype one that will trigger quirks mode rendering in IE?
>From memory, getting the parent wrong for absolute positioned elements
was an IE5 / 5.5 bug, and might have only been fixed for standards
mode in IE6.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] wrap text around an absolute image

2008-02-20 Thread Richard Grevers
On 2/20/08, Rob freeman <[EMAIL PROTECTED]> wrote:
> hello everyone..
>
> Could someone please help? I am working on quite a basic site which
> has an image positioned absolutely to the right of the page, hanging
> off slightly.
>
> Down the side of the image I have some text which at the moment is
> forced marginally to the left as a basic column.
>
> How do I allow the text to wrap around the image. At the moment the
> absolute image is taken out of the document flow, so Im not sure how I
> can get the text to wrap
>
> Here is the URL
> http://www.coloursense.net/testfolder/instructions.html
>
> any tips..please..
>
My first instinct was to drop the right margin on the content column
and wrap the image in a right-floated container with a negative left
margin, then give the image position relative until the backgrounds
align.  http://www.dramatic.co.nz/testing/coloursense.html It works in
Opera and firefox, but is probably a bit fragile, and IE6 (couldn't
check 7) is misaligned - that might be box-model or a limitation on
positioning within floats in IE.

Failing that (and an alternative which would involve making #wrapper
wider and putting faux columns inside it), a quick-and-very dirty fix
would be to leave the image absolutely positioned and float a
transparent image to push the text out of its way.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] setting background colour

2008-02-17 Thread Richard Grevers
On 2/15/08, Kristina Floyd <[EMAIL PROTECTED]> wrote:
> Hi all
>
> I've always learnt that setting the background colour on a site is a very
> basic thing to do and shows that as a web developer you've taken care and
> pride in your work.
>
> All of the browsers that I use I have set a ridiculously garish background
> colour set to remind myself to do it.  I am teased relentlessly for this.
> However it is important to me.
>
> It never ceases to amaze me the number of sites that do not set a background
> colour.  As if adding body { background-color: #FF; } is a really
> tedious task.
>
> I'm curious to know your thoughts on this matter, as it literally drives me
> bonkers.  I am fully aware that we have moved on from the default grey
> background of Netscape 3(?) and by default browsers will set their
> background colours to white.  Does this mean it's okay for developers to be
> lazy and sloppy and not bother to set it.  Or am I just too old school
> (eep!!) and set in my ways.
>

Leaving colours unspecified is definitely a valid design choice,  but
not one that many clients would accept, so I have only ever used it on
personal sites. The key thing to remember is that if one colour, e.g.
background, is left to user's choice, then all colours (text and link)
need to be left unspecified to avoid a collision with the user's
settings - e.g. black 0r near-black text on a very dark background. It
also becomes necessary to make all imagery either rectangular or using
alpha transparency (24-bit png - hello IE6!).

It certainly is an elementary but common mistake to forget that
default background can be something other than white (mine is a warm
grey, for comfort and longevity of eyes) and suddenly have unreadable
text or ugly white edge artefacts on images. To me its a sign that the
designer doesn't have a sound understanding of CSS.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Suckerfish Dropdown Problem with IE6

2008-02-13 Thread Richard Grevers
On 2/13/08, Nancy Johnson <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I am using suckerfish drop down in a section of my website.
>
> One page of this section also has a form with select boxes.
>
> In IE6, the suckerfish drop-down menu which is at the top of the
> section appears behind the select boxes instead of in front of the
> select boxes.  IE6 is the only browser I test in that this happens.
> Any suggestions to correct this?
>
> I cannot put this on a public site to show you.  If someone responds
> offline, then I am happy to send a screen shot.
>
Form elements have infinite z-index in IE6. No way to correct it, so
you will have to work around it in the design:
Either
1) Move the form so that the menus won't intersect the form elements
or
2) Hide the form elements when the menus extend.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] printing online forms

2008-02-04 Thread Richard Grevers
On 2/2/08, Jessica Tanny <[EMAIL PROTECTED]> wrote:
>
> Hello --
>
> I'm the webmaster for a regional archives organization who have asked me to 
> update an online member application form.
>
> They do not want members to email the form to them, but rather fill in the 
> form online, print it out, and mail it in. I know this could be accomplished 
> very easily with a PDF form, but I think the idea is to be as user-friendly 
> (and accessible) as possible, so we've tried to limit the number of PDFs on 
> the site...
>
> So... since I am in the process of teaching myself tableless design with CSS 
> and thought I'd start here. I built the form with CSS (with many thanks to 
> "CSS Mastery" by Andy Budd), but now I need it to print properly.
>
> I've created a print stylesheet and now the biggest issue I'm having is 
> getting the checkbox columns to work in the print-out. They look great on the 
> screen and they print really awful... I'm trying so hard to make this work, 
> but I'm not exactly sure what I am doing wrong.
>
> Here is the online form:
> http://www.lib.umd.edu/MARAC/members/member-app.html
>
> Here is the form stylesheet:
> http://www.lib.umd.edu/MARAC/forms.css
>
> Here is the print stylesheet:
> http://www.lib.umd.edu/MARAC/print.css
>
> Any suggestions or resources you could point me to?
>
Your checkboxes are still governed by the rule
input {width: 400px;} and it appears that most browsers center a
standard checkbox widget in the defined width if it is greater than
the minimum necessary.
The following should correct it:

input.checkbox {width:auto;}

By the way I'm not sure about the frustration level of asking people
to print a form which includes half a dozen select fields (they have
to remember to make all the selections prior to printing, especially
as the "choose one" text gets in the way of them simply writing their
response in the box.)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] February 12th, 2008 - a Glorious day for web designers / developers

2008-01-23 Thread Richard Grevers
On 1/22/08, James Leslie <[EMAIL PROTECTED]> wrote:
>
> Microsoft is pushing an update on February 12th, 2008 that will
> force-upgrade Internet Explorer to IE7.
>
> http://support.microsoft.com/kb/946202 has the details.
>
> ---
>
> Forgive my ignorance on server matters, but does this mean that all
> machines running IE6 will be forced to upgrade to IE7?
>
No, because last time I heard they still aren't releasing IE7 for all
those Win2000 systems (like the one I'm posting from - using Opera of
course)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Selecting CSS file depending on Server using the HTML Page

2007-12-12 Thread Richard Grevers
On 12/12/07, Charlene <[EMAIL PROTECTED]> wrote:
> My explaination is a little bit complicated and not using the proper
> technical terms. I'm sorry about that but I have a bad cold but a hard
> deadline.
>
> I am setting up a bunch of subdomains such as a.domain.com,
> b.domain.com... domain.com (or www.domain.com).
>
> The page I'll be referencing (call it frame.htm) using an Iframe is on
> the www.domain.com main folder.  Each of the subdomains will have its
> own stylesheet.
>
> http://domain.com/frame.htm"; frameborder="0"
> height="87" width="96%" scrolling="no">
>
> I'd like to set the stylesheet in frame.htm to use the stylesheet for
> the subdomain (ie a.domain.com/css/style.css or b.domain.com/css/style.css).
>
> Is there an easy way of doing it?
>
> BTW this frame.htm is created 5 times a day, so I would rather not copy
> it into 30 subdomains 5 times a day.
>
Presumably you are assembling the page with some server-side scripting
language. Most of them have some system variable which contains the
full domain used in the request (usually the variable name is some
variant of 'HTTP_HOST' if the server is Apache). This would allow you
to inject the correct FQDN into the stylesheet call. (Using this
method it should be possible to eliminate the iframe, too).

Alternatively there should be a solution possible via MOD_REWRITE:
Have the web pages call a constant path for the css file and modify it
according to the domain. My Mod rewrite skills aren't up to actually
giving an example.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Ideal way to link-ify a div?

2007-12-05 Thread Richard Grevers
On 12/5/07, Jesper Rønn-Jensen <[EMAIL PROTECTED]> wrote:
> I'm creating a small "appetizer" section on a web page. You probably know it
> from news websites or web2.0-like signup graphics:
>
> I need a combination of an image, headline, paragraph text and a link all to
> be clickable. All of this nested in a div, that changes background-color on
> hover and is clickable. So instead of adding an a-element to each inline
> text/image, I want the empty space in the div to be clickable too.
>
> Here is the markup I imagine:
> div (wrapper div -- probably with rounded corners)
>   h3 (heading)
>   img (image for this article -- could go inside h3 if that would be better)
>   p (appetizer text)
>   p > a (read more)
>
> What's the most ideal way of doing this?
>
> Here are the different strategies I can come up with -- but what would be
> the most ideal. Criteria:
> * accessible
> * slim markup
> * easy to implement and maintain
> * not necessarily cross-browser compatible, as long as the fallback works
> (but must work as intended in IE7 and FF2)
> * must validate xhtml (1.0 transitional)
>
You want a single hyperlink on one line of text (avoiding too many
links to the same resource is an accessibility guideline). Odds are
that the most suitable bit of text will be the heading, since it will
indicate what the article is about. "Read more" is semantically
useless, and as bad as "click here" - it works for the sighted user
with a visual browser, but for people (and searchbots) where all
navigation is performed via a listing of links on the page without any
other context, its hopeless.
You can do your hover effects with css on an outer element (with a
little bit of help for IE7) and use a javascript onclick handler to
link the other elements. (I think you can get away with just the outer
container, but I haven't tried it myself).

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] IE Flicker on hover problem

2007-10-30 Thread Richard Grevers
On 10/30/07, James Leslie <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I know this is quite a well documented problem but I was wondering if
> anyone has any great, new solutions.
>
> It is the problem of IE6 reloading background images in links every time
> they are hovered on.
>
> I am using a sliding doors style technique for a few tabs as shown at
> http://jamestesting.metafaq.com/clients/jamestesting/debug.html  (CSS in
> head) whenever they are hovered over in IE6 the image is reloaded
> causing a flicker.
>
> I can't really do anything to the server to try to fix this (even though
> there seems to be a Dean Edwards solution via that means) and would
> really like it to be a CSS fix.
>
> At the moment the only thing I can think of is to try to position
> another image directly behind it so that the under-image is shown when
> the top one disappears but this will add superfluous code I would prefer
> to avoid.
>
My solution is to use the approach that has been christened "Css
sprites" - you create one background image which contains both the
hovered and unhovered states (whether they are arranged vertically or
side by side depents on the context) and alter the background-position
upon hover. I usually find that there is a nett saving in total
bandwidth as well as requiring one fewer requests.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Drop down menu and float problems

2007-10-17 Thread Richard Grevers
On 10/16/07, Lyn Williams <[EMAIL PROTECTED]> wrote:
>
> The first being a drop down menu I have developed won't display the
> appropriate links. I seems the the drop down works but the links
> won't appear.
>
> the second problem is I'm trying to float six different div elements
> side to side but after the fourth element the next two clears to the
> bottom of the page.
>
> You can see the page here: http://www.irn2000.com/public/
> (dropdown => the Information tab)
>
It works fine in Opera, so I'm assuming you are viewing in IE. (The
menu doesn't drop down at all in my IE6 but that is probably because I
have javascript locked down rather tight in IE *).
Anyway, when content is invisible in IE, it is usually a problem with
"HasLayout". Visit  www.satzansatz.de/cssd/onhavinglayout.html to gain
insight and solutions.

* This raises the point that to make your page both accessible and
search-engine friendly, the tab "information" should link to a landing
page which has conventional links to all the menu items.

For the floats, the content of your first item is longer than the
defined height of the float (because its heading text takes two
lines). Therefore the items in the second row move left until they
bump into the bottom corner of item 1, leaving a spare item to go on a
third row. This isn't happening in other browsers, because  they will
position the image over the overlong text instead (IE treats "height"
as min-height, others correctly treat it as absolute and default to
overflow:visible).
Not only that, the entire design of the panels is extremely fragile.
In no browser does the white text sit in the middle of the bottom bar
for me - you might have encountered my minimum font settings. Which
results in a very broken page. You need to have the coloured bars as
backgrounds to the relevant elements. Putting text of various colours
over a single image background will never work reliably.

Oh, and your design seems to assume that everyone has white window
backgrounds. We don't. So if your design requires a white background
you need to declare it.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Hosted, Site-Specific User Stylesheet

2007-10-10 Thread Richard Grevers
On 10/5/07, Jason Karns <[EMAIL PROTECTED]> wrote:
> I've had this idea brewing in my head for a while now concerning user
> style sheets and I thought I'd run it by the list and get some
> feedback on the idea.
>
> The issue I'm trying to address, is that people who use user style
> sheets usually have site-specific style sheets but they can only be
> applied via the browser (natively or with extensions).  This means
> that if one had multiple machines, the user style sheet would have to
> be saved on each machine, which may not even be possible (public
> access computers, for instance).  This led to the idea of having
> hosted user style sheets, where the web application stored the style
> sheet along with the rest of the user's profile information.
> Therefore, whenever, wherever and however the user signed on, the user
> styles would take hold.  Obviously, this introduces serious potential
> security risks.  Without any intensive research, my initial idea is to
> simply run any user styles through a CSS validator and to reject
> anything that isn't fully valid.  This should keep users from being
> able to inject javascript, etc.  Although before this is ever
> implemented, serious security testing would be done.
>
> Any thoughts or comments on this idea?
>
Sorry, I'm coming to this discussion rather late.
It's been done.

Quite well.

by Wikipedia.

- sign in to a wikipedia account and you can make a stylesheet as a
subpage of your userpage. Every Wikipedia page you view while logged
in calls that stylesheet. (Mine just makes the body text fonts
bigger).

The Mediawiki source should show you how it's done.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] css and frames

2007-09-26 Thread Richard Grevers
On 9/24/07, Andrew Doades <[EMAIL PROTECTED]> wrote:
> Hello, I have been working a a website the needs a menu, I have managed
> to get my menu and working with css, but the main page is using frames,
> and the menu is listed down the left frame (on the left side) but some
> text is long in the buttons, is there a way I can shrink the buttons or
> allow the buttons/ menu to fix to the text??
>
We'd need to see the site in order to offer constructive advice, but
in general I would put eliminating the frameset at a much higher
priority than converting the layout to css.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] hack for IE6

2007-09-10 Thread Richard Grevers
On 9/11/07, Daniel Petre <[EMAIL PROTECTED]> wrote:
>
> hello, i have the following :
>
> #menu ul li[id]:after {
> margin: 0 0 0 -5px;
> padding: 0;
> content: url("./images/menugroup-end.png");
> }
>
> which puts a nice background like on my #menu div.
> however internet explorer 6 seems not to see it.
> anyone has any idea or a workaround for IE ?
>
Internet Explorer simply does not support generated content. Nor does
it understant the attribute selector.
Since you are able to insert an id attribute on the relevant menu
items, can you also add a class and simply style that class (with a
background image)?


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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/


[css-d] IE6 - failure to clear

2007-09-10 Thread Richard Grevers
On http://www.wildcatcoffee.co.nz/index.php/coffee-guide/storage
Why is #footer failing to clear the left column in IE6? It works elsewhere.

Also, is there an IE6-proof way (without resorting to a table) to get
both the copyright and design credit on the same vertical alignment in
IE6? I've tried ordering them both ways in the source. Once again no
problem in Opera or Mozilla.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] IE6 to IE7 to IE6 design

2007-09-07 Thread Richard Grevers
On 9/7/07, Rick Lecoat <[EMAIL PROTECTED]> wrote:

> Also, do any of the others have anything that compares to FF's web
> developer toolbar?
>
Opera (9+) has the developer console which you will find under
tools/advanced/developer tools (but I put a button on a toolbar to
launch it). It is still in development, but since the javascript is
delivered from the Opera servers, you automatically get the latest
improvements. Biggest bug remaining is that if you edit and refesh the
parent page you need to close and relaunch the console.
But it has an absolute ton of information for DOM tree and js event
debugging and figuring the net resultant style on any element.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] This Thing On? IE6 Positioning Issues

2007-09-07 Thread Richard Grevers
On 9/6/07, Daniel Talsky <[EMAIL PROTECTED]> wrote:
> It's hard for me to know if my note is posting to the list or not,
> since it's not getting mailed to me.  If it is getting posted, but
> it's just not attractive for people to answer, could someone do me the
> favor of responding and just letting me know that it is posting?
>
> This is a tricky issue here:
> http://dev.fluorideworks.org/parent
>
> Where in IE6 I have one div in the graphic header that's not expanding
> to it's 0px right position, and an IMG that isn't obeying its left
> position.  Works great of course in all other browsers.
>
Did you already fix this? IE6 looks identical to other browsers for
me. You were not specific enough for me to find which element you were
talking about in the extensive css, but in general IE can't handle
absolutely positioned elements defined by right and left - it needs a
width (and hence only one of left or right)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.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] Underlining back a text inside an

2007-09-03 Thread Richard Grevers
On 8/31/07, Marcelo de Moraes Serpa <[EMAIL PROTECTED]> wrote:
> Hello list,
>
> I'm creating a horizontal icon-based menu. Each item has an icon and a
> legend. Here's the XHTML:
>
> 
> 
>
>   />Edit Profile
>   src="/images/icons/okdate_48.png" />Check payment
> history
>   />Edit Profile
>   src="/images/icons/okdate_48.png" />Check payment
> history
>
> 
> 
>
>
> The question is: How can I get this legend link to be underlined like any
> other default link text?
>
By writing valid xhtml:  is inline - it may not contain block
elements, so the compliant rendering engines will close the  before
commencing the first  (you might even find that it isn't
clickable).

Try this:
foo

and style .legend {display:block; text-align:center;}

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] inline element that could be sized ?

2007-09-02 Thread Richard Grevers
On 9/3/07, Fabien Meghazi <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> Is there an inline element which can contains nothing (no child
> inside) and that can be sized with "width" and "height" yet keeping
> the possibility to use a background ?
>
> I would like to make a staring system that can be "inline" so it would
> look like this :
>
> Please rate this : * * * * * * [button]
>
I would have thought that a star rating was *content* and therefore
you should use an actual image + alt text rather than a CSS
background. Don't you want visitors to be aware of the rating
regardless of whether or not they are accepting/applying css?


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Flexible width in IE.

2007-08-27 Thread Richard Grevers
I am part-way through developing a template for a CMS (easier to work
with a static page until the wrinkles are ironed out!).

http://www.wildcatcoffee.co.nz/template.html (style is inline for now)

The layout is centered with a maximum width of 60ems. In addition, the
body has a padding so that some of the body background always shows.

The CMS template I used as a starting point uses a javascript to
emulate min/max width in IE, but it only works with pixels.

And in IE6, the backgrounds of both the footer and the bottom (rounded
corners) elements are shifted left. Can anyone figure out why?

Checks in IE7 and Safari would also be appreciated.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Differing font-sizes between operating systems

2007-08-24 Thread Richard Grevers
On 8/22/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm working for a company in which the boss (who's originally from the
> print industry) insists on having equal line lengths in the browsers on
> different operating systems.
>
> So in an example text, "hello, i'm example text!", if the text is split to
> the following line at "example" on Firefox Windows, it must be split at
> "example" in Firefox Mac/Safari as well.
>
> On Windows, I had to resort to inserting manual line-breaks where the boss
> wants the split which are not honoured on Safari for example.
>
> How do you solve this technically, if at all? My reasoning that you cannot
> finally determine the user's operating system and settings is not
> acceptable for the boss.
>
> Please assume that influencing the line-length or font-size for the
> diferent operating systems is what needs to be solved. Please, no
> discussion how and why you should *not* influence it, that wouldn't help
> me. It's probably to do with resolution which differs between WIn and Mac
> OS, but I'm facing the situation as-is.
>
The most robust solution for you might be to use the HTML element
 - which is intended to preserve whitespace and line breaks, and
to override its default monospace appearance with

pre {font-family:Arial, Helvetica, serif;} or something similar.

You should avoid making the container fixed-width (pre will overflow
the container by default if lines are too long) or specify the width
in ems.
Using a font-size as small as 62.5% will cause the layout to break
more quickly, as it hits people's minimum font settings or they need
to text zoom in order to read. It sounds as though your bosses'
browser is set to default fonts larger than he likes - that is where
things need to be fixed.
Also,  gets a smaller font size by default in nearly every
browser (13pt vs 16pt, IIRC) so you would at least need to allow for
that.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Good default font-family stacks?

2007-08-23 Thread Richard Grevers
On 8/21/07, Timothy Kelty <[EMAIL PROTECTED]> wrote:
> I'm trying to find a good reference to set up some good font-family default
> stacks with fonts that share similar enough characteristics.  Ideally, I'm
> looking for some examples that contain all your basic web fonts, then a
> couple at the top of the top of the stack for more common but not
> necessarily web safe fonts.
>
> The best example I've seen of this so far is part of the latest Blueprint
> CSS Framework, but it seems like there would be a more inclusive resource
> out there.
>
> Anybody know of any good examples or resources for this?

http://www.codestyle.org/ has surveys of the most commonly installed
fonts for each OS. They switched to measuring by a java applet rather
than user judgement earlier this year, so accuracy has improved a bit
(for the given sample).

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Can a subdivided 6px baseline grid work?

2007-08-17 Thread Richard Grevers
On 8/15/07, Timothy Kelty <[EMAIL PROTECTED]> wrote:
> I've been trying to set up some groundwork for setting up future sites on a
> baseline grid. We starting setting to a 18px baseline, with a 12px body
> type.
>
> Problems we ran into initially dealt with lists, where we weren't satisfied
> with a full line of leading between list items, but we also didn't want to
> set it solid, with no spacing.  Since we didn't know the amount of list
> items, we couldnt simply go off the grid temporarily, then adjust the ul/ol
> to get back on the grid.
>
> What my coworker eventually suggested was designing the site to a subdivided
> baseline of 6px, so for normal body type, 3 baseline heights would equal
> 18px, the desired leading.  A list item also takes up 18px, with 1 baseline
> (6px) between.  So regardless of the amount of items, when the list is done,
> you're still back on your next 6px line.
>
> I'm having trouble getting my head around this whether or not this is a
> valid method or not.  Obviously you could set a grid infinitely small, then
> everything is 'on the grid', hooray!
>
> Any thoughts/criticisms are greatly appreciated, or if you have any other
> solutions.
> Thanks

I am subscribed to http://webtypography.net/ - which is a project
where one of the classic books on print typography is being used as
the inspiration for a series on web typography. What you are trying to
do seems in keeping with Section 2.2 - maintaining a set measure even
after elements of different size disrupt the vertical flow. As you
will see, this can be achieved via a combination of margin (in ems)
and line-height.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] filter:gray()

2007-08-14 Thread Richard Grevers
On 8/14/07, Maziak, Peter <[EMAIL PROTECTED]> wrote:
> I like the IE proprietary property filter:gray().  Does anyone know of a
> similar property for other browsers (specifically FF & Safari)?
>
>
>
> Note on application: I like using it to indicate the disabled state of
> an icon, especially in combination as such:
>
> .disabledIcon{
>
> filter: BlendTrans(Percent=40) gray();
>
> -moz-opacity:.40;
>
> opacity:.40;
>
> }
>
>
>
> ...but would be nice to get other-than-IE to turn gray.
>
Nothing in CSS2. (I'm not sure where to look for that one in CSS3 drafts).
A valid way of reproducing the effect would be a 'sprite' method: Have
a background image containing both the bright and greyed icons and
reposition it as necessary.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] CSS validation warnings question

2007-08-08 Thread Richard Grevers
On 8/8/07, Brian Cummiskey <[EMAIL PROTECTED]> wrote:
> Terri Chicko wrote:
> > It says my CSS validates but I have 22 warnings all similar. Sorry, I
> > know these are dumb... but I don't understand.
> >
> > Warning
> > "Same colors for color and background-color in two contexts #headline
> > and h1"
> > Thanks
> > Terri
> >
> This means you have a background color that equals the foreground color,
> ie White on White.
>
> It gives you a warning, as technically, this text is not visible.

I'll just add that the validator has no knowledge that you have no
intention of ever combining #headline and h1 in the same element.
The irony is that if you have #fe on #ff, the validator won't
issue a warning, but it will still be "invisible".

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] div spacing and borders

2007-07-23 Thread Richard Grevers
On 7/24/07, H. Bartel <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I have a recurring problem, which I know how to solve, but I don't know why 
> that is..
>
> Having two 's with a margin of 10px in beetween them results in a margin 
> slightly larger than 10px. If the top  has border-top or border-bottom 
> defined the result is a correct 10px margin. I believe this only happens, if 
> the top div doesn't contain anything.
>
> I'm quite sure, that I've already read about it before, but can't find it 
> anymore.
>
> An explanation to a probably very common problem would be appreciated ;)
>
search for "margin collapsing" - it is a moderately complex behaviour
described in the standards, made more fun by MSIE (of course) having
some bugs with it.
As to the "more than 10px" - I would gess that you are seeing a
combination of the larger of the two margins (10px) and the top or
bottom padding of one or other of the elements. Of course as soon as
you declare a border to test that, the margins will no longer
collapse.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] display: none and Google

2007-07-23 Thread Richard Grevers
On 7/24/07, H. Bartel <[EMAIL PROTECTED]> wrote:
> Hi,
>
> if I use a  inside a headline to substitute a .png image with text in 
> IE5.5 which is set to display: none, does this effect Google or general 
> search engine indexing in a negative way?
>
> It usually looks like:
>  />one or two words
>
Googlebot (and bots in general) will ignore the stylesheet, so it will
read and index the text which you hide.
However, there was a passing fad for keyword spamming by stuffing lots
of (usually off-topic) keywords into an element with inline styling to
hide it - until search bots started detecting and punishing that. I
believe the bots are clever enough to discriminate between keyword
stuffing and normal Image replacement methods, however. Just stick to
having the text match the alt attribute and you should be fine.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Floating images with text wrapping underneath

2007-07-16 Thread Richard Grevers
On 7/16/07, Rachel Vidrine <[EMAIL PROTECTED]> wrote:
> This issue has probably been covered before, but it wouldn't hurt for
> someone to ask it again.
>
>
>
> When floating an image to the left or right of a paragraph, what is the CSS
> to prevent the last line(s) of the paragraph from continuing under the
> image? I just want the last lines to continue under the other lines, not
> underneath the image.
>
>
>
> Please see the last line of the following page:
>

Or various lines depending on viewport width and font sizing :-) Until
I resized my window it looked perfect, with the second paragreaph
starting beneath the camelia image

> HYPERLINK
> "http://www.fortvalleyrealestate.com/"http://www.fortvalleyrealestate.com/
>
One solution is to move the image out of the  (ahead of it) and
give the paragraph margin-left equal to the width of the image +
margin. Not particularly robust, as you have to change the margin if
you change to a different width image, and you have to decide what you
want to happen with the second paragraph.

What CSS needs is some sort of orphan protection with floats :-)


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE and FF difference killing me...

2007-07-08 Thread Richard Grevers
On 7/5/07, Mark Finney <[EMAIL PROTECTED]> wrote:
> I have submit this same problem over the last couple of days, but the
> problem persists! The site layout is very simple, a fixed width column, with
> a centred image for the header. However, IE pushes the image 1 px left and
> off center whereas FF treats it as expected... A test page demonstrating the
> issue is here: www.helpusmarry.co.uk/test/
>
> I am using IE6...
>
> Someone please explain what is happening! The coding is so basic, the only
> issue I have is with the positioning of the header img, the page is just a
> quick knock up to illustrate the problem. I have tried using a background
> image with css, and inserting the img directly into the html document with
> identical results.
>

If I stare really really hard I can just see the problem at some
viewport widths (IE and Opera) - given that it comes and goes as you
change the viewport width it is almost certainly a rounding error.
You could try eliminating the text-align:center on body, or serving it
only to IE 5.5 and older (plus ensure IE6 is in standards mode)


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] IE fails to put border on one link...

2007-07-05 Thread Richard Grevers
On http://www.paen.net/en/live-interpreting.mv, links are styled with
a dashed bottom border.
However, in IE6, the link for Berlin (last in the right-hand column)
has no border. Can anyone figure why?

Notes on validity: The page has four validation errors. Three of them
are because the email munging javascripts are not contained in  blocks. That is because the scripts did not work at all
until I removed the CDATA blocks. If anyone has a theory on that, let
me know off-list (since it is not a CSS issue).
The fourth error is because someone decided  must contain a
block level element. Why, for deity's sake? I guess I could insert a
block element and then force it back to inline, but that is just
ridiculous

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 6 site check needed

2007-07-05 Thread Richard Grevers
On 7/4/07, udhaya shankar <[EMAIL PROTECTED]> wrote:
> Try avoid png format images for  you webpage. Use gif format images for
> transperency. Using gif will solve this problem.
>
Gif will solve anything on this site, because the alpha-transparent
image is overlaid on an area with four distinct background colours, so
a single matte colour for transparency is not possible. Anyway, its a
given that in any situation where gif would suffice, 8-bit png would
do better.

The solutions are to use a contidional comment to invoke the IE6
transparency filter, or to use an opaque file which matches the
backgrounds and hope (possibly in vain) that no browsers experience
any small differences.

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] mozilla and opera bug?

2007-07-05 Thread Richard Grevers
On 7/4/07, Luc <[EMAIL PROTECTED]> wrote:
>  Good evening list,
>
>  I have on a form 2 yellow borders i can't get rid of in opera. Other
>  browsers display the borders as intended.
>
>  In Mozilla i have the known dotted border around my nav links. I had
>  them in FF also but adding
>
>  a {
>outline: none;
> }
>
> got rid of it in FF. Moz however insists on showing them.
>
> http://www.dzinelabs.com/projects/MPT/Pages/Contact.php
>
> http://www.dzinelabs.com/projects/MPT/Styles/MP.css
>
> Can somebody help me out on these 2 issues?
>
With Opera, it is Webfoms2 support - the browser is recognising field
names and indicating that you have matching data stored. Not sure if
it is css-controllable.
Why are you so determined to destroy the accessibility of your site by
removing the focus outlines, though?
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Mac site check please

2007-06-10 Thread Richard Grevers
On 6/11/07, Brian Cummiskey <[EMAIL PROTECTED]> wrote:
> Can someone on a mac please check this out for me?
>
> *http://tinyurl.com/2bnwgu
>
um, your image replacement appears to be broken in Opera (checked in
9.21 on Windows) - I see both the logo and the H1 text overlapping.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Background Colour Different in IE6

2007-06-07 Thread Richard Grevers
On 6/7/07, Steph <[EMAIL PROTECTED]> wrote:
> Hi Audra & Richard,
>
> Many thanks for ideas below.  There is a background non-repeating file
> which is a gif.  There's also a graphic which is a gif.  the graphic
> colour works as created in another application, but everything else on
> the page is not ok.  I should have added that these do work in Mac IE
> 5.5 and Safari, but have not tried other browsers yet.
>
ok, doing a screen capture in irfanview from Opera on windows, the
page background has RGB values 254,255,222 while the background in the
outer parts of the spiral image is 251,251,225.
It probably wouldn't be noticeable on your typical uncalibrated LCD
display but I can see it on a CRT and a calibrated LCD screen.
It could be the colour space in your image editor and the way it
exports. (is it something weird like 16-bit)?
As a workaround, consider using transparency in the image with a
carefully selected boundary.
But I don't think its a css problem. - other than it would look better
if  your text block had a transparent (the default) background
colour).

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Background Colour Different in IE6

2007-06-06 Thread Richard Grevers
On 6/7/07, Audra Coldiron <[EMAIL PROTECTED]> wrote:
> Steph wrote:
> > Hi,
> >
> > This is probably a very basic question - have chosen to self teach web
> > design by diving straight into CSS so am on a bit of a learning
> > curve...
> >
> > I have a problem with background colour not showing as the correct
> > colour in IE6.
>
> Are you by any chance using a .png as a repeating background?  If so
> that is the problem.  IE6 does not render colors of .png's correctly.
>
...or jpgs :-(
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] table class

2007-06-05 Thread Richard Grevers
On 6/5/07, Michael Stevens <[EMAIL PROTECTED]> wrote:
> Well, I understand you are right, and did from the start because I've
> experienced it myself (even though my argument's logic failed), but I still
> say it's an inconsistency. :)
>
> border= in HTML should equal border: in CSS. I understand they are different
> but to make them inconsistent would be one reason why people have a hard
> time with the "CSS or die" theory of late.
>
Border in HTML cannot be changed after all these years - it would
break millions of old pages - and adding new HTML attributes to
provide the much greater capabilities that CSS has would go against
the entire modern philosophy of content/structural
markup/presentational styling layers. Imagine what a pain it would be
if, in order to get an outer border (only) on a table using CSS you
had to set it for the table element and then unset it for each child
td and th element.

What browsers do when they encounter a presentational HTML attribute
is convert it to the nearest equivalent CSS.
So for  (assums the default cellspacing of 2px) equates to:
table {border:1px outset; border-spacing: 2px;}
th, td {border: 1px inset;}

while 
becomes
td,th {border: 1px solid;}
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Divs moving up page with all browsers except IE

2007-05-30 Thread Richard Grevers
On 5/31/07, trevor bayliss <[EMAIL PROTECTED]> wrote:
> In all these browsers: Mozilla, Firefox, Konqueror, Opera, Netscape except 
> Internet Explorer the "tab" divs in my page move up the page. I don´t 
> understand why this happens and I would be greatful if someone could tell me 
> why this is happening and how to stop it. Thanks everybody
>
It is looking horribly broken in Internet Explorer (both 6 and 7) as
well from here.
Basically, absolute positioning seldom works as a layout mechanism.
Even if you manage to avoid various browser bugs, it tends to be very
fragile and break as soon as the user changes the font size to
soemthing they are comfortable with.

Search for other layout methods which can achieve what you are after.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Overriding style sheet for list item

2007-05-28 Thread Richard Grevers
On 5/29/07, skip evans <[EMAIL PROTECTED]> wrote:
> Hey all,
>
> I have the following defined to set up an unordered lsit
> menu set.
>
> .menu ul {
> width: 100%;
>margin-left:0;
>padding-left:0;
> }
>
> .menu li {
> list-style: none;
> }
>
> .menu li a {
> display: block;
> text-decoration: none;
> border-top: 1px solid #666;
> border-bottom: 1px solid #666;
> background-color: #9cabc4;
> color: #fff;
>  padding-left: 4px;
>  padding-top: 4px;
>  padding-bottom: 4x;
> }
>
> .menu a:hover {
> display: block;
> text-decoration: none;
> border-top: 1px solid #666;
> border-bottom: 1px solid #666;
> background-color: #c5cedc;
> color: #00;
> }
>
> But certain items in the list I want to override the
> background color, so I put this in the line item tag:
>
> item
>
> But on Firefox/Linux (all I have here at home), it is not
> overriding the style sheet, not using the inline code.
>
> Any help would be greatly appreciated!

Try setting background-color rather than background in your inline
style. I don't think that's supposed to make a difference, but it
might be a small bug.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Overflow bug?

2007-05-26 Thread Richard Grevers
On 5/26/07, Martin Paton <[EMAIL PROTECTED]> wrote:
> Hi
>
> I've got a flash movie as a header in my three column container layout
> which I want to set overflow:hidden when the page is resized so it
> doesn't blow out of the side of the page.
>
> I've set "overflow:hidden" on all containers that the flash movie would
> push past - it works superbly in all IE versions, but not in
> Firefox/Opera/NS, etc...
>
> Is there a known problem with overflow:hidden?
>
No, but there is a philosophical argument about whether or not
embedded content should be allowed to interact with (and "passing
behind" the border of a container with overflow set is interacting the
host page, given that the standards state fairly clearly that they may
not interact when the embedded content is another html document. Hence
some browsers give embedded media an "infinite z-index". But, thanks
to the pushiness of advertisers, I think there is a workaround -
google for wmode transparent.

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] clear property clears all floats?

2007-05-23 Thread Richard Grevers
On 5/24/07, Erin Spangler <[EMAIL PROTECTED]> wrote:
> Could someone tell me what I'm doing wrong with this page?
> http://www.hotfrenchbulldogs.com/angus2.html
>
> My goal is to float the first image (angus-02) to the left with the text
> along side. Then I'd like the next image (angus-03) to clear the float
> from the first image and be centered below the image and text above it.
> But, adding my float class to that second image floats it down below my
> (floated) left navigation. Why?
>
If you wrap both images in a floated container, the clear will
restrict itself to that container. the container will have to have
some dimension specified to avoid "haslayout" issues.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Vertical Space Grudge Match: br vs css

2007-05-21 Thread Richard Grevers
On 5/21/07, Bob Easton <[EMAIL PROTECTED]> wrote:
> Francesco Rizzi wrote:
> >
> > So, my question for the list is:
> > why should we use css rules in this scenario instead of  tags ?
>
> Let's call it separating content (HTML) from presentation (CSS).  Use
> technologies for their intended, and standards compliant, purposes.  Use
>
> 1) Use HTML for well structured, semantic, markup.   and  have
> no semantic value.  Those are presentational markup that should never
> have been in HTML.

I would be interested in seeing your pure css solution for inserting a
carriage return in the middle of a paragraph (or similar block element
which is semantically a single unit, but nevertheless needs a newline)
without adding other extraneous markup?

I'm not saying that  isn't abused, but I think that there is a
place for it. this might be one of those grey areas where the border
between content and presentation becomes blurred.

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE problems: select box remains on top of dropdown & white space

2007-05-16 Thread Richard Grevers
On 5/17/07, Brooke Nelson <[EMAIL PROTECTED]> wrote:
> I have two IE problems with this page:
> http://brookenelson.com/statescape/newsearchpage/search1.html
>
> (1) In Internet Explorer, with the horizontal dropdown navbar, the
> dropdown covers everything except the  box! For example, hover
> over the "Resources" link, and it will drop down, but the select box
> with states in it stays on top. I tried setting the z-indexes and
> everything, to no avail.
>
Yes, form controls have infinite z-index in Win IE and in some
versions of Opera. It's because the browser calls native operating
system functions to render the control.
Standard workarounds:
1) Redesign so the form isn't in the path of the menu
2) Use scripting to hide the form element while the menu is displayed
and re-show it when the menu closes.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Styling ruby

2007-04-18 Thread Richard Grevers
Sitting on the bleeding edge here...

I have to display ruby text for some chinese language learning modules.
I've put up an experiment at

http://www.paen.net/en/ruby.mv

using the stylesheet from http://web.nickshanks.com/stylesheets/ruby.css
(I will only be using simple ruby, so the rtc stuff has been stripped out).
IE6: native support is adequate (I need to set lang correctly to fix
fiont selection,)
IE7: adequate but it is parsing the child selectors so I need to fix
font size for 

 but I am getting completely different wrong renderings in Firefox and
Opera (Safari check, anyone?)
Any ideas?

Note: It doesn't validate: I haven't yet tackled the task of
pummelling Miva into sniffing for IE and sending content as xml rather
than text/html

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] And now it's Firefox 2 (was "Float Drops")

2007-03-28 Thread Richard Grevers
On 3/28/07, david <[EMAIL PROTECTED]> wrote:
> > Richard Grevers wrote:
> >> Same page, http://www.freeparking.co.nz/hosting/
> >> The Firefox 2 users in our office report that the background images
> >> for the rounded boxes in the right hand column (Renew hosting and
> >> Select currency) are escaping their containers and spreading under the
> >> left column.
> >>
> >> I'm guessing this must be a bug in Firefox - is there a workaround?
> >> Rendering engines - ya gotta love'em!
>
> I don't see it in FF2.0.0.3 for Linux, either.

Ok, I should make the two people who reported this subscribe to the
list and apologise for wasting everyone's time. I ASKED them if they
had done a forced-refresh and they both said yes. However when we
finally did Ctrl+F5 for them, the problem magically vanished. And they
call themselves support techs!

So thanks for your time folks, sorry to have bothered you. Nothing to
see here, move along please.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] And now it's Firefox 2 (was "Float Drops")

2007-03-27 Thread Richard Grevers
On 3/28/07, Ian Young <[EMAIL PROTECTED]> wrote:

>
> Rught hand col is ok on my FF2 WinXP.
> However, the site looks completely different from IE6 as it is full page in
> FF and in a wrapper in IE6.
>
> Now I can categorically say that this is not due to a bug in FF and is more
> likely to do with the site having been built in IE6 rather than FF.
> Sorry haven't the time to look at style to see the problem.

The site uses the same wrapper for all browsers. its just that in IE6-
it is fixed at 800px and in good browsers we use min-width and
max-width to let it vary between 760 and 960px
:-) I develop  to standards in Opera, firefox is nearly always fine,
and then we fix for IE7 and IE6.

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] And now it's Firefox 2 (was "Float Drops")

2007-03-27 Thread Richard Grevers
On 3/28/07, Raine <[EMAIL PROTECTED]> wrote:
> I don't see that in Firefox/2.0.0.3...the page looks fine to me.

ok folks, here's a screenshot: http://www.freeparking.co.nz/test/ff2.jpg
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] And now it's Firefox 2 (was "Float Drops")

2007-03-27 Thread Richard Grevers
Hi folks:
Same page, http://www.freeparking.co.nz/hosting/
The Firefox 2 users in our office report that the background images
for the rounded boxes in the right hand column (Renew hosting and
Select currency) are escaping their containers and spreading under the
left column.

I'm guessing this must be a bug in Firefox - is there a workaround?
Rendering engines - ya gotta love'em!
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How to embed Flash movies?

2007-03-26 Thread Richard Grevers
On 3/24/07, Michael Stevens <[EMAIL PROTECTED]> wrote:
> I'm working on a site redesign at www.regencygarden.com/test/ and there are
> several pages there with Flash movies. They all validate XHTML 1.0 Strict
> except for the pages with the Flash. The validator doesn't like anything
> about the  tag or the attributes therein.
>
> How do we embed these movies and stay strict?
>
Now that the commercial browsers (MSIE and Opera) have had to
implement "click to activate" barriers on flash controls, I consider
Flash Satay to be outmoded, as it doesn't address this problem.
Instead we use the swfobject javascript [1], which gives valid code,
no "click to activate" and is pretty bulletproof. keep your
alternative content small, as it is downloaded!

[1] http://blog.deconcept.com/swfobject/
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Random float drops

2007-03-26 Thread Richard Grevers
On 3/26/07, ~davidLaakso <[EMAIL PROTECTED]> wrote:
> Richard Grevers wrote:
> >>>
> > Do Mac users have any problems with the updated page?
> >
> >
>
>
> There are 15 captures here
> <http://www.browsercam.com/public.aspx?proj_id=334605>.
> Fair warning if the client is a nit-picker like me who gets-off on
> pushing the envelope in XP :-) :
> Top-nav breaking at +1 (Firefox).
> Text-overlap on text-size "largest" when ignoring font-sixes (IE7.0)
> Text-overlap on text-size "largest" when ignoring font-sixes, and right
> column float-drop (IE6.0)
>
Thanks David - and everyone else. It would have helped if I had
comitted the change to the Google logo :-) Now that I have we are good
down to 650px.

The site is in-house, so the client is as picky as I want to be.
Naturally I'm the only one who worries about accessibility. I do want
to redo the masthead to make all the sizes em-based, but past
experience shows there is a compromise needed between content-first
(navigation positioned) layout and flexibility - which you usually hit
when the navigation wraps.


-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Random float drops

2007-03-25 Thread Richard Grevers
On 3/23/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Richard Grevers wrote:
> > We are getting random float drops on the newly redesigned
> > http://www.freeparking.co.nz/hosting/
>
> Depends on what full width (100%) is in pixels. What you have now should
> be more than enough, but you're using the wrong tactic at the moment,
> and there are a few potential/real problems with wide elements in that page.
>
> If you use 'float:left' on the left column and 'float:right' on the
> right column, you won't need - or even want - a 'margin-right: 3%' on
> the left column at all.
>
Thanks Gunlaug - in the past, I had shied away from opposing floats,
but that was because of haslayout problems, which should now be under
control on this site.
>
> The google image is too wide for its container. Same in all browsers on
> narrow windows, but IE6 has narrow window all the time and can't handle
> overflow, so the container becomes too wide and subsequently breaks the
> column-width and causes float-drop.
> Solution: make the image narrower by cutting off white area, and center it.
>
yes, I dealt to that on Friday morning before your reply, but we have
a "no changes on Fridays" policy for the production site.

Do Mac users have any problems with the updated page?

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Random float drops

2007-03-22 Thread Richard Grevers
We are getting random float drops on the newly redesigned
http://www.freeparking.co.nz/hosting/
So far IE7 and Opera have been rock-solid, but Firefox 1.5.11 has
dropped on one PC and been ok on another, and I've seen one instance
of dropping on IE6. (on a smaller monitor)

The sizing is 69% + 3% + 27% (=99%) - how low do we need to go to
avoid rounding errors?

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] negative margined sidebar moving when window narrowed in IE

2007-02-19 Thread Richard Grevers

Am I missing something here? Many posters to this list (and I'm not
implying that Zoe is one of them) seem to get rather upset when floats
drop in narrow windows, and I simply don't get that. The fact that
floats can drop when there's not enough room to do justice to several
columns is a primary reason to use floats - its why they are better
than tables.
The key, of course is to make the correct column drop, which I would
say should be "any column but the primary content, with main
navigation having second priority for not dropping.

My only wish is for some property that would make the remaining floats
expand into the space left by the dropped float.


-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE7 is blocking content when user tries to open a combobox

2007-02-12 Thread Richard Grevers
On 2/13/07, Ricardo Mestre <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> When I try to open a Combobox (in IE7), I get a "Blocked content"
> warning.
> I've tried to google this problem, and it's a know situation, but I
> haven't found any workaround.
> Is there any hack/workaround known, for this bug?
>
> Thanks in advance,
>
This is off-topic for this list - it is unlikely CSS would have
anything to do with blocked content (unless you are calling your css
file from a different domain!) Try Webdesign-L instead.

Since HTML does not have such a beast as a "combo box" (I presume you
mean the sort that MS Access uses which has both dropdown and text
field), are you encountering an ActiveX control?


-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE7 jitters - www.paen.net

2007-02-01 Thread Richard Grevers
On 2/2/07, Ingo Chao <[EMAIL PROTECTED]> wrote:
> Richard Grevers wrote:
> > We're seeing a bizarre behaviour from IE7 on the page http://www.paen.net
> >
> > The 2 or 3 boxes on the right ought to be over on the right with a
> > reasonable gutter between them and the body text, and they display
> > that way in IE6 and all well-brought-up browsers.
>
>
> > However, in IE7 some people are seeing the initial display of the
> > boxes further left. No matter where they are initially, they seem to
> > jump about when the mouse passes over either the text link
> > ISO9001:2000 in the body text or the ISO9001 link in the page footer,
> > then jump back if you mouse over the "feature" box.
>
> I can confirm this. It jumps to the right on hover (footer link), it
> jumps back to the left on hover (text link).
>
> The container #index_body is positioned relatively, but has no layout.
>
> #index-body gets layout via zoom:1;

Thanks - I had discounted haslayout since it didn't happen in 6. So
its newer bugs rather than fewer bugs
>
> Wait a moment - with this fix, the rotating flash-thing stops turning
> ... just kidding.
>
Flash? oh yeah, its blocked in my IE :-) Well at least I persuaded
them to make it run once then stop


-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] IE7 jitters - www.paen.net

2007-01-31 Thread Richard Grevers
We're seeing a bizarre behaviour from IE7 on the page http://www.paen.net

The 2 or 3 boxes on the right ought to be over on the right with a
reasonable gutter between them and the body text, and they display
that way in IE6 and all well-brought-up browsers.
However, in IE7 some people are seeing the initial display of the
boxes further left. No matter where they are initially, they seem to
jump about when the mouse passes over either the text link
ISO9001:2000 in the body text or the ISO9001 link in the page footer,
then jump back if you mouse over the "feature" box.

Note: #blackbox_float is defined as 9em. I've already tried changing
that to px: As 120px it exhibits the same behaviour. As 180px, the
boxes overlay the body text.
Don't ya love IE!

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Using display attribute + javascript moves page to the top

2007-01-23 Thread Richard Grevers
On 1/24/07, Aleve Sicofante <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm using the trick of using the display attribute + javascript to reveal or
> hide parts of the page. It works fine except for one thing. If the user has
> scrolled down the page, clicking on any of the links that invoke the
> appropriate javascript makes the page suddenly scroll to the top. This is
> really annoying. Is there any way to change this?
>
> Please check the behaviour at this test page: http://www.vieira.es/test/
>
Because you are linking to # (which most browsers interpret as "top of page".
put a return false; statement at the end of your javascript and it
will kill the link action, e.g.
Más
recientes

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Capitalize is making capitals after Apostrophe. e.g. Neil's -Neil'S

2007-01-23 Thread Richard Grevers
On 1/21/07, ~davidLaakso <[EMAIL PROTECTED]> wrote:
> Christopher Blake wrote:
> > http://www.neilp.newwavemedia.co.uk/europe.html
> > http://www.neilp.newwavemedia.co.uk/stylefile/style1.css
> >
> > The capitalize has been added to h1. I can turn it off and do the
> > capitals freestlye but was wondering if there was a simple solution
> > to this i.e. without using  for 1 letter!
> >
> Try:
> h1{
> /*text-transform: capitalize;*/ <<< delete
> text-transform: lowercase;<<< add
> }
> And add this ruleset to you css:
> h1:first-letter {
> text-transform: uppercase;
> }

Which would (in supporting browsers) capitalize the first letter of
the heading, but not the first letter of each word the way
text-transform:capitalize should.

By the way, which browsers exhibit the error? Looks fine in Opera
(unless you've changed the markup)

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] how to hyperlink a background image?

2007-01-17 Thread Richard Grevers
On 1/18/07, Peggy Coats <[EMAIL PROTECTED]> wrote:
> Is there a way to hyperlink a background image (so it takes the
> visitor to a page in the site?)
>
> I've got the logo as a background and want to be able to click-through
> to the home page.
>
Quick and dirty - use a transparent image the same size as content and
hyperlink that (using css to disable underline and border)


-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Firefox floated element onclick event ignored

2007-01-16 Thread Richard Grevers
On 1/17/07, Ben Liu <[EMAIL PROTECTED]> wrote:
> okay, admittedly this is not really a CSS question, but I was hoping
> someone on this list has come across this or is familiar with the
> problem. For some reason, in Firefox only (doesn't seem to apply to
> Safari or IE6/7), if you float an element and add an onclick event,
> Firefox ignores the onclick event.
>
Do you have a test page?
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Changing the z-index of a background image

2007-01-14 Thread Richard Grevers
On 1/15/07, Christian Kavanagh <[EMAIL PROTECTED]> wrote:
> Dear list,
>
> On this page:
> http://www.polarissc.com/hr.html
>
> I have two "background" images (only one of which is actually a
> background image in the body tag): gradient.png and greensmoke.jpg .
>
> Here's the relevant code:
>
> 
> body {
> background-image: url(images/gradient.png);background-repeat: repeat-
> x;background-position: left bottom; background-attachment: fixed; z-
> index: 1;
> }
> 
>
> 
>  style="position: absolute; top: 0; left: 0; z-index:0; visibility:
> visible;" />
> 
>
> What I'd like is for GRADIENT to have a higher z-index than
> GREENSMOKE, but I can't seem to make that happen: only the opposite.

1) Gradient appears to be an opaque image, therefore if displayed in
front of greensmoke it would obscure it. hence I doubt if you really
want that.

2) The concept of z-index only applies to elements, not to background
images. background images are stacked according to the elements which
contain them
>
> Considerations:
> 1).  GRADIENT must be a real background image, because I need it to
> be fixed at the bottom of the viewport and IE6 can't seem to handle
> that any other way.
>
> 2).  I tried making GREENSMOKE a background image also, but it just
> stopped displaying GRADIENT when I'd done so.
>
> Can anybody help me?

I think you want soemthing like the following:
 
body {
background: #fff url(images/gradient.png) repeat- x  left bottom  fixed;
margin:0; padding:0; }
.outer { background: url(images/greensmoke.png) no-repeat top left; }



 [...rest of page]



2 background images => 2 elements to attach them to (until everyone
supports the incomplete Css3 background module).
I've zeroed the margins on body to correctly position .outer, hence if
you were depending on any explicit padding on body you would need to
add that padding to .outer.
Note the colour added to the body background - this will avoid chunks
of whatever non-white bg colour the user has defined appearing between
the images.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] FOUC problem

2007-01-10 Thread Richard Grevers
On 1/11/07, Portman <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> I have a FOUC problem on one of my websites and I have tried all the
> fixes I can think of but nothing is helping. Would someone mind taking a
> look and letting me know what the problem is?
> http://www.starqualitydesigns.com/contempo
>
Basically, pay more for a faster server.
I spent 11 seconds waiting while nothing happened, then saw a
split-second flash of white (my default bg is grey, otherwise I
wouldn't have seen it). before the page rendered fully over another
couple of seconds. Take note that I have made a deliberate choice to
disable Opera's default FOUC-killing delay, because I prefer to get
text ASAP.

-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


  1   2   3   >