Re: [css-d] Will the unsemantic HTML elements B and I be soon phased out?
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. span 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 em or strong, 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 i class=binomialbeta vulgaris/i. __ 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.
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
Thanks Philippe On Fri, Oct 4, 2013 at 7:42 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 4 oct. 2013 à 12:38, Richard Grevers richard.grev...@gmail.com 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
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/
[css-d] Controlling main-content width on a fluid design?
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] Controlling main-content width on a fluid design?
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 gunla...@c2i.net 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/
Re: [css-d] fixed background
On Thu, Sep 23, 2010 at 6:31 PM, Richard Grevers richard.grev...@gmail.com 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
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/
[css-d] 3-column layouts, current state of play
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] Making GridView's Header Fixed while Scrolling vertically or horizantally
On Fri, Sep 17, 2010 at 9:32 PM, Dilip Nagle nagle...@gmail.com wrote:
*The Problem:*
At present, I use following css to achieve above; This CSS is
then associated with gridview.header of the gridview
HeaderStyle CssClass=gvFixedHeader_Aqua /
.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/
Re: [css-d] NOT restarting numbered lists after h1 element
On Wed, Dec 16, 2009 at 11:03 AM, Climis, Tim tcli...@indiana.edu wrote: After inserting the h1 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 (ol start=2) 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 ol start=5, 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/
[css-d] Chrome vs floated tables
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/
Re: [css-d] Chrome vs floated tables
On Wed, Jun 17, 2009 at 9:34 PM, Bobby Jackbobbykj...@yahoo.co.uk wrote: --- On Wed, 6/17/09, Richard Grevers richard.grev...@gmail.com 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] site check / footerstickalt problem
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
On Thu, Feb 26, 2009 at 2:57 AM, Nicky McCatty t...@signifydesign.com 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/
[css-d] Is there an alternative way of doing this?
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] Is there an alternative way of doing this?
On Mon, Feb 2, 2009 at 2:05 PM, tedd tedd.sperl...@gmail.com 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] Positioning a background image in holy grail layout
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] Positioning a background image in holy grail layout
On Sat, Jan 24, 2009 at 5:47 AM, Gunlaug Sørtun gunla...@c2i.net 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/
Re: [css-d] IE not hiding overflow?
On Wed, Jan 14, 2009 at 7:04 PM, Daniel Hammond dan...@objectivedesigns.com 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
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=08393l=c (mixed) http://catalog.etco.com/item.php?sku=08393l=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
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
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?
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
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
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.
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.
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-3width=33-34-33equal_height=1longest=1time=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/
Re: [css-d] Full-height left column in fluid layout.
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/
[css-d] Full-height left column in fluid layout.
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/
[css-d] Broken negative-margin layout
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] Broken negative-margin layout
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/
Re: [css-d] font vs. font-size in firefox
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 font 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
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 a 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)
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
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/
[css-d] THis layout must exist somewhere...
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] THis layout must exist somewhere...
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/
Re: [css-d] Textarea padding and scrolling
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.
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] wrap text around an absolute image
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] Absolutely positioned div breaking out of parent in IE
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!
div id=container
div id=wrapper
div id=menu
(inside is Macromedia's mm_menu, which is what is jumping out of the
parent div, but is absolutely positioned)
/div
/div
/div
#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] setting background colour
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
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
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
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
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. iframe name=I1 src=http://domain.com/frame.htm; frameborder=0 height=87 width=96% scrolling=no/iframe 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?
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
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
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
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
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/
[css-d] IE6 - failure to clear
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] hack for IE6
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/
Re: [css-d] This Thing On? IE6 Positioning Issues
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] IE6 to IE7 to IE6 design
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] Underlining back a text inside an a
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:
div style=padding-left:10px
ul class=horizontal_list
lia href=editdivimg alt=User_48 src=/images/icons/user_48.png
//divdivEdit Profile/div/a/li
lia href=checkdivimg alt=Okdate_48
src=/images/icons/okdate_48.png //divdivCheck payment
history/div/a/li
lia href=editdivimg alt=User_48 src=/images/icons/user_48.png
//divdivEdit Profile/div/a/li
lia href=checkdivimg alt=Okdate_48
src=/images/icons/okdate_48.png //divdivCheck payment
history/div/a/li
/ul
/div
The question is: How can I get this legend link to be underlined like any
other default link text?
By writing valid xhtml: a is inline - it may not contain block
elements, so the compliant rendering engines will close the a before
commencing the first div (you might even find that it isn't
clickable).
Try this:
liaimg /span class=legendfoo/span/a/li
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 ?
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.
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
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
pre - 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, pre 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?
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?
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()
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
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] display: none and Google
On 7/24/07, H. Bartel [EMAIL PROTECTED] wrote: Hi, if I use a span 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: h2img src=images/img.png alt=one or two words width=170 height=18 /spanone or two words/span/h2 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] div spacing and borders
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 div's with a margin of 10px in beetween them results in a margin slightly larger than 10px. If the top div 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] Floating images with text wrapping underneath
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 p (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...
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/
Re: [css-d] mozilla and opera bug?
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] IE 6 site check needed
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/
[css-d] IE fails to put border on one link...
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 ! [CDATA[ ]] 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 noscript 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] Mac site check please
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
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
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
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 table border=1 (assums the default cellspacing of 2px) equates to:
table {border:1px outset; border-spacing: 2px;}
th, td {border: 1px inset;}
while table border=1 celllspacing=0
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
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
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:
li style=background: #00 !important;item/li
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?
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?
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
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 br 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. br and br / 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 br 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
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 select 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
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 rt 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)
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/
[css-d] And now it's Firefox 2 (was Float Drops)
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] And now it's Firefox 2 (was Float Drops)
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/
Re: [css-d] And now it's Firefox 2 (was Float Drops)
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] Random float drops
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] How to embed Flash movies?
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 embed 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
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
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
rhetoric value=2 cents 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. /rhetoric -- 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
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
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
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] Capitalize is making capitals after Apostrophe. e.g. Neil's -Neil'S
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 span 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?
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
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
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:
style type=text/css
body {
background-image: url(images/gradient.png);background-repeat: repeat-
x;background-position: left bottom; background-attachment: fixed; z-
index: 1;
}
/style
body
img src=images/greensmoke.jpg width=955 height=600
style=position: absolute; top: 0; left: 0; z-index:0; visibility:
visible; /
/body
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:
style type=text/css
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; }
/style
body
div class=outer
[...rest of page]
/div
/outer
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
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/
Re: [css-d] form doesn't show well on Linux platform
On 12/5/06, Henk Cortier [EMAIL PROTECTED] wrote:
Hi,
I created a simple form with the labels with fixed width:
form label.fixedwidth {
clear: both
display: block;
width: 140px;
float: left;
}
it shows ok in Safari and PC/IE but on Linux it's a nightmare, any
idease?
You don't give us a lot to go on there: by Linux do you mean
Mozilla, Opera or Konqueror?
But having done CSS form layouts before, I'm guessing that a a
nightmare means a column of labels which is either taller or shorter
than the adjacent column of form controls, so nothing aligns.
Try containing each label/input pair in a div or p element any
apply the clear to that rather than the label.
--
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/
