[css-d] Table Cells and min-/max-width
Hi Folks, I am trying to specify min- and max-widths for table cells in a table of unspecified size, but although the cells will receive width, they take no notice of the min and max in either Firefox or IE7 (obviously it won't work in IE6, I was going to just give that a median value). I'm guessing this refusal across the board means table cells aren't supposed to be monkeyed with in this way, though I can't imagine why not. Anyone care to enlighten me? Cheers! Chris -- Chris Ovenden Director Eyecode Limited. http://eyecode.co.uk http://frontend.blogsome.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @import vs link for stylesheets
On 4/17/07, David Hucklesby [EMAIL PROTECTED] wrote: you may like to consider this technique for viewing coding results in several real browsers every time you press save: http://tinyurl.com/y98bx7 Nice idea, David. I use the Edit CSS feature of Firefox's Web Developer toolbar (http://chrispederick.com/work/webdeveloper/) to see realtime changes (obviously, only in FF - I don't have enough monitors to take advantage of your suggestion anyway...), then switch to IE with Microsoft's DOM Inspector ( http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038displaylang=en) to fix the inevitable IE glitches. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Font Warning
http://frontend.blogsome.com/2007/04/12/use-lucida-lose-your-readers/ Chris __ 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] [CSS2.1 Footer Bugs in IE, Need IE Hack]
On 4/3/07, Ingo Chao [EMAIL PROTECTED] wrote: Thomas Thomas wrote: ... http://matthew16.free.fr/portfolio/test-ie-bug.html Try to click on link 2 than 3 in Mozilla, u can see the footer the 2nd is at the bottom of content, then for 3 (the content is lower than the viewport's height) footer goes at bottom of viewport. But in IE6 when u click 2 then 3, the footer stays at bottom of content 2, which is then display:none when user clicks 3 it doesn't adapt at the 3 height Same when u click first to 2 then 1 for example, the two pages have both footer under content since content is higher than viewport, but the footer won't adapt. I extracted all the unecessery code from my website where I have the original problem : http://matthew16.free.fr/portfolio/ Any ideas would be very appreciated !!! Thank u ! I haven't studied your code, but there is supposed to be a pure CSS solution to this: http://www.themaninblue.com/experiment/footerStickAlt/ I say supposed to be, because I have never been able to get the bugger to work. Chris -- Chris Ovenden http://frontend.blogsome.com __ 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 color names values versus accessibility
On 3/30/07, Mauricio Samy Silva [EMAIL PROTECTED] wrote: Apart the 'probably' typo (grey instead of gray) Yeah, it was a bit hard hearing the (UK) English word described as malformed! -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 color names values versus accessibility
On 3/30/07, Jukka K. Korpela [EMAIL PROTECTED] wrote: On Fri, 30 Mar 2007, Chris Ovenden wrote: Yeah, it was a bit hard hearing the (UK) English word described as malformed! Yet it is, in CSS. Just like colour is, or couleur, or Farbe. I'm well aware of this. But I have to deal with typing 'color', which to my English eyes looks malformed, every day... Don't you think the Finnish flag looks like a malformed St. Georges' cross? ;-) -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 color names values versus accessibility
On 3/30/07, Bryan Hepworth [EMAIL PROTECTED] wrote: Chris Ovenden wrote: On 3/30/07, Jukka K. Korpela [EMAIL PROTECTED] wrote: On Fri, 30 Mar 2007, Chris Ovenden wrote: Yeah, it was a bit hard hearing the (UK) English word described as malformed! Yet it is, in CSS. Just like colour is, or couleur, or Farbe. I'm well aware of this. But I have to deal with typing 'color', which to my English eyes looks malformed, every day... Don't you think the Finnish flag looks like a malformed St. Georges' cross? ;-) Nope because that one is blue! pedants corner That's what's malformed about it! (heh) -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] font-size advice
On 3/27/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: [EMAIL PROTECTED] wrote: There are no definitive answers to anything on the web, there will always be an exception to any rule we care to make, that's what we have to live with, and work with. So lets all accept it and move on.. Agree or not 'Georg?' Asked directly like that, I have to say I agree - more or less. Rules without exceptions are limitations, in my terminology. I hate limitations, so I always reserve the right to make exceptions :-) I've learned a lot over the last ten days, now have to start all over again.. Slightly wrong approach, IMO. No need to discard what works, only what doesn't. A better approach might be to fix or remove the parts that aren't working, keep the rest and add whatever is needed to make it all work together as a whole. One of the nice things about CSS is that you can throw all of it away, or some of it, and you will most likely still have a working website. It's never too late to fix/tweak/accommodate new thinking. I'm going to keep my sites at font-size:76% - for now. At the moment Dennis has to cut off his nose to spite his face on nine out of ten websites he encounters, rather than bumping up his default browser font size, but the day may come when he doesn't. It doesn't always pay to be on the vanguard. Without de facto standards - such as XMLHTTPRequest, Flash, RSS, nofollow links, etc - the web would be messier and develop at a slower pace. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] font-size advice
I'm afraid that question has been discussed to death in this list and
elsewhere. I'd say you just have to decide between usability and right
size, since usability means that there is no right size.
Surely the right size, or a t least the right initial size, is the
same size as (most) other sites. By using body { font-size:100% } or
similar, you're immediately making your fonts annoyingly large
compared to the majority who use something like body { font-size:76% }
- a de facto 'standard' for good reason:
http://www.thenoodleincident.com/tutorials/box_lesson/font/
--
Chris Ovenden
http://frontend.blogsome.com
__
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] font-size advice
On 3/27/07, Rick Pasotto [EMAIL PROTECTED] wrote:
On Tue, Mar 27, 2007 at 02:28:33PM +0100, Chris Ovenden wrote:
I'm afraid that question has been discussed to death in this list
and elsewhere. I'd say you just have to decide between usability
and right size, since usability means that there is no right size.
Surely the right size, or a t least the right initial size, is the
same size as (most) other sites.
Wrong. Truth is *not* determined by majority vote.
Who said anything about Truth (capitalization an' all)?
By using body { font-size:100% } or similar,
You are giving the user what the user finds most comfortable to read.
you're immediately making your fonts annoyingly large compared to the
majority who use something like body { font-size:76% } - a de facto
'standard' for good reason:
Nonsense like that is why I have to increase the displayed font size
(sometimes *twice*) on 90+% of the sites I visit in order to be able to
read them. That is most definitely *not* user friendly.
I think you just proved my point. The world wide web is just that - a
bunch of connected things, of which any particular website is but one.
If you have to change the font size for 90% of the sites you visit,
then you have your browser set up wrongly.
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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 special code
On 3/23/07, david [EMAIL PROTECTED] wrote: Barney Carroll wrote: david wrote: Or avoid a bunch of hacks and just use conditional comments to feed IE7 what it needs. I'm surprised no one has mentioned this yet! Quite refreshing, innit? I think it's because conditional comments aren't CSS. Increasingly I find more people find it more important to maintain honestly valid HTML than CSS - as long as the markup is sparkling, the horrors underneath can twist and turn to accommodate whatever will eat them. CSS is a powerful thing, but it is intended to work with valid HTML (as the W3C CSS validator reports). Clean, basic HTML avoids problems. And conditional comments don't interfere with that at all. I think it's disingenuous to call conditional comments clean, basic HTML. We all want to do beautiful, cross-platform, futureproof page layouts using semantic, accessible markup; unfortunately user agents are currently not quite up to the job (and, much as I love it, I have to include Firefox in this). So we hack; or, less pejoratively, we work around known issues with the user agents we're given - counting our blessings that we live in 2007 and not 1997. Whether we hack the CSS, the HTML or a bit of both is a matter of personal choice (personally I'm with Barney on this) - but call it what it is and don't try to pretend to purity. Chris -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 special code
TO filter the other way you can use something like
.clearing { display:none } /* IE 6 7 */
*|html .clearing { display:block } /* everything else */
Chris
On 3/22/07, Mark Story [EMAIL PROTECTED] wrote:
The selector I've been using with quite a bit of success is
*:first-child+html
so in your circumstance it would be
*:first-child+html .clearing {
This selector uses the invisible super parent object above html that
only IE has, it then uses CSS2 selectors to target the HTML object
something that IE6 cannot do. This selector is completely ignored by
other browsers as they don't have an element above html.
-Mark
Pelle wrote:
Hi all.
I have this in my CSS
* html .clearing {display:none;}
i NEED this to imp+lement in IE7 too, but NOT in Ffx or so.
What is the bug code for this?
In pure .css file cause it is external, no javascript or [if lte IE 7]
works in this case :(
Regards Pelle
__
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/
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] setting width of a
On 3/19/07, Jukka K. Korpela [EMAIL PROTECTED] wrote:
On Mon, 19 Mar 2007, Sandy wrote:
is there a good way, once your link is nicely
tucked into a li of getting the background of the container li to
change colour on mouse over, instead of just the A background colour?
If I understand you correctly, you just need to make the A element occupy
the entire content of the enclosing LI. The simple way is to make the A
element a block in CSS terms and set a width for it.
You probably won't even need to set a width. By default, block
elements expand horizontally to fill the available space - in this
case the with of the LI, which is already block.
Remember that all modern browsers (including IE7) allow :hover
pseudoclasses on any element, so you could set the background colour
using
li:hover { color:#xxx }
...provided you don't mind a little graceful degradation (ie no hover
effect) in IE6.
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Images defined as %
Here's something I did a while back that relies heavily on image scaling: http://alisonmg.com/galleries/landscapes/show.php Chris -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Ahhh! Why can't I find you? Degrading Popup (CSS only?)
IE doesn't get thrown into quirks mode just becuase it finds some tag soup in the body. The switch is in the !DOCTYPE (or lack of it) http://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes Chris On 1/26/07, james shannon [EMAIL PROTECTED] wrote: I'd imagine Andy meant that IE won't internally be able validate it (because it sees through the comments to something that's invalid) -- thus IE will degrade to quirks mode and a lot of other things you had designed under the assumption that IE would be in standards mode will be off. james On Jan 25, 2007, at 3:53 PM, muskokee wrote: Hmm. When I use the validation tools, the xhtml (strict) validates and the css would validate (except for the hand cursor property which doesn't exist) in firefox 2.0, 1e6 and ie7. On 1/25/07, Andy Harrison [EMAIL PROTECTED] wrote: On 1/25/07, muskokee [EMAIL PROTECTED] wrote: Take a look at this page. http://www.cssplay.co.uk/menu/balloons.html This is an excellent css pop-up. This is a surprising solution! I personally wouldn't use it since the conditional comments make the HTML invalid when using IE -- there's tables inside hyperlinks -- hence it's forced into quirks mode. Andy __ 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-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/ -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Follow up/heads-up on url(.css) screen hack
Some may disagree, but I feel * html is completely safe and future-proof. We know precisely which browsers it hits, and their behaviour is frozen forevermore. On 1/26/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: There's no such thing as a 'safe bug/hack', only some that are a bit safer than others. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Site Check please
Seems fine in IE7 On 1/26/07, Taryn Regish [EMAIL PROTECTED] wrote: Hi everyone- Can I please get a site check on http://ifpsm.ism.ws/ Especially on a mac and IE 7. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] one-off CSS values
1) is not really a good idea, as it doesn't separate markup from styling.
What if in a later incarantion, the width of the column is to be changed?
You'd end up with some css which reads td.w77px { width:100px } or whatever.
How confusing is that? It's as bad as having a class called 'orange'; you
might as well use an inline style for all the separation that gives you.
3) is actually impossible, as there is no element (tc or something) to
identify a column in HTML.
which leaves...
2) which as far as I see it is best practise. It gives a clear mening to the
cell, however it may end up getting displayed. What is your objection to
writing td.stock_price_col { width:77px } ?
Chris
On 1/23/07, james shannon [EMAIL PROTECTED] wrote:
Hi...
I hope I'm not going to start/rehash an argument, but I'm looking
for the best practice for one-off css values.
For example, I have a table of data and I want a specific column
to be 77px wide. I don't really like the style=width: 77px inside a
td, because I'm not separating the presentation from the display.
So that leaves several options:
1. The most re-usable would be give it a class - w77px -- and give
that class the width:77px. That way when I have a div, on another
page, that I also want to be 75px wide, I can assign that class. I
can also have a class, maybe -- rtl -- that sets the text direction.
This way I can do class=w77px rtl or class=w120px rtl. This seems
the most straightforward, but not correct.
So that leaves:
2. A specific class, or a specific selector -- table
td.stock_price_col -- that I assign the values to.
3. Assigning to an id that I give that column -- #stock_price_col.
It seems to me that #1 is the easiest, because I can just start
assigning a bunch of classes to an element based on what I want it to
do, but that #2 makes the most sense from the perspective of what CSS
should be.
However, it seems that a lot of people use IDs rather than class
names (div id=footer rather than div class=footer), so I'm
not really sure (except that id= implies there will never be more
than one per page)
--
Chris Ovenden
http://frontend.blogsome.com
__
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] How to Filter Out Explorer 7 and Below
I just discovered a pure CSS way of separating the IEs (7 included) from FF and Opera (not sure about Safari). You can read about it here: http://frontend.blogsome.com/2007/01/23/the-flispide-of-star-html/ -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] one-off CSS values
On 1/23/07, Barney Carroll [EMAIL PROTECTED] wrote:
which leaves...
2) which as far as I see it is best practise. It gives a clear mening to
the
cell, however it may end up getting displayed. What is your objection to
writing td.stock_price_col { width:77px } ?
This is a tough one - we're bumping into the monolith issue of semantic
CSS again. stock_price_col sounds like an id property to me, seeing as
it denotes a specific object - if you wanted to use the same rule on
another object, the name will no longer hold, you'd be wanting another
class - and then it becomes clear that thoses classes should be ids.
But you don't want ids for stock prices, you want a class which is
'fixed width column', which is not primarily associated with stock
prices, but with columns that are better off with a specific width
attribute. The problem is that, according to the rules of semantic CSS,
you can't name a class or id based on the rules you will use them to
apply - it has to be unrelated to the presentation they will be used
for, and more indicative of the the structural semantic reason you're
giving the style. As it is, their probably is none. My advice is
.fixedwidthcolumn, even though it breaks those rules. It still makes far
more sense.
I can't agree with you, Barney. If you really want to use an ID, just attach
it to the first cell in the column of stock prices. (But why, though?
Perhaps we should make the class name 'stock_price', and apply it to every
cell that - guess what? - contains a stock price.) If, elsewhere, you have
another column, say of share prices, whose presentational attributes should
be the same, then write:
td.stock_price, td.share_price { whatever }
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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 Filter Out Explorer 7 and Below
http://www.thefreedictionary.com/dict.asp?Word=minority On 1/23/07, Dave Goodchild [EMAIL PROTECTED] wrote: Depends what you mean by minority browser. It's good to always consider your audience - one site I built had a Safari audience of 40%+. __ 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/ -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 Filter Out Explorer 7 and Below
On 1/23/07, Matt Dawson [EMAIL PROTECTED] wrote: The reason this hack rubs me the wrong way is that you're using the hack to pass a value to FF and other compliant browsers. IE7 gets the unblemished, unhacked version. It's the exact opposite of the way I usually work. In general, I agree. In this case I was trying to find a workaround for firefox bug (which I really must make time to investigate properly). My workaround should have been harmless, but turned out not to be, due to IE stupidity. I am not particularly enamoured of the IE7-only hacks that are circulating, like this: http://www.brothercake.com/site/resources/reference/xxx/ while this one relies on deprecated XHTML: http://www.ibloomstudios.com/article7/ (Also, calling Safari a minority browser is absolute foolishness. Konqueror or Epiphany *maybe* but definitely not Safari.) It is used by a minority of web surfers, and (by the way) so is Firefox - they are minority browsers. I tend to cater to FF more than other minorities as it is the #2 browser by a very long way. Still, I wouldn't want to write CSS that would screw up in a perfect standards-compliant browser, should one exist. Variations in actual support, though, I may not have time to work around. In this particular case, as I tried to say at the end, any damage arising should be minimal. Graceful degradation, if you like. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 Filter Out Explorer 7 and Below
On 1/23/07, Eric A. Meyer [EMAIL PROTECTED] wrote: At 11:22 AM -0500 1/23/07, Matt Dawson wrote: The reason this hack rubs me the wrong way is that you're using the hack to pass a value to FF and other compliant browsers. IE7 gets the unblemished, unhacked version. It's the exact opposite of the way I usually work. Yeah, same here. I can see where this hack might have utility, though-- in cases where you absolutely have to meet this browser support profile AND conditional comments are, for whatever reason, not an option. It can and does happen: I've had clients tell me that hacks in the CSS are okay but in the markup they aren't, and of course some people work (or play) in environments where they have control over the CSS but the markup is inviolate. That's pretty much the situation here. Most of the sites that I maintain is driven by a very complex content engine, and I have to raise tasks and generally bug people if I want to change the HTML. CSS I have complete control over. Which is not such a bad thing. I am provided with content, which I must then style to a design. How I do that is temporary and evolving; the content itself remains the same. Besides that, there is something very ugly about conditional comments; while I find some CSS hacks/filters aesthetically acceptable. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 Filter Out Explorer 7 and Below
I think, at the end of it, all I can say is that this particular hack seemed like the best solution for this particular problem. I don't particularly recommend it (and I *do* want to know whether it's parsed by Safari or not), just thought it might be worth drawing people's attention to it in case others found it useful. Chris __ 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 Filter Out Explorer 7 and Below
Oh, and I do think *|html is kind of amusing. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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 Absolute Positioning
Instead of using position:absolute on the .thumbs DIV, coul not not leave it
in the flow, beneath the .projecttext DIV (that contains the text), and put
a min-height (of about 572px) on .projecttext to keep it in place? (Of
course you'd need * html .projecttext { height:572px } for IE6 -)
Chris
On 1/5/07, Cody Thornton [EMAIL PROTECTED] wrote:
At this site http://www.matthew-cunningham.com/frontridge/project.htmlthere
is a row of thumbnail images that risk overtaking the text if the
viewer has the font size set larger than normal (the text wraps under the
thumbnails).
I want the absolute position of the row of thumbnails to hold among all of
the projects EXCEPT in the rare case that the text is too large to fit in
that space. You can see what I mean by clicking on the project arrows to go
from project to project.
Is there a way to give those thumbnails an absolute position except when
it needs to be pushed down?
Thanks in advance! I'm very new to CSS.
Cody
__
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/
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Why does IE 7 render div margin wrongly?
Hey! This was my first IE bug, too. Have fun with the rest. (If you
read around positioniseverything you'll be prepared for most of them.)
On 12/20/06, Jeroen [EMAIL PROTECTED] wrote:
I've been learning CSS for a while and am now translating a
photoshop/illustrator design
to CSS. It renders correctly in Firefox/Opera/IE 7 but does not in IE
7 without having a dirty fix. (* html trick).
Example: http://www.home.intellit.nl/np/test
Although i have it fixed, and it works now. I don't know why IE
behaves this way.
Can someone shed some light on this, since i don't understand why IE does
this,
i won't learn from 'my' mistakes ;)
If you remove this code:
* html div.albuminfo {
margin-left: 18px; /* Fix for IE, Why does IE 7 render it wrongly?
*/
}
you'll see what i mean with rendering incorrectly; the DIV is placed
too far to the right, it looks like IE doubles the margin-left: value,
which should actually be 35px.
BTW: If someone has IE5.5 handy, i would love to hear if it renders
correctly with the fix in place. (or a mac for that matter).
Thanks!
--
Jeroen
__
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/
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] New and way less than confident
Hi Morgana! With the advent of IE7, CSS 2.1 is now quite well supported in modern browsers, but unfortunately IE6 is likely to remain the majority browser for several years yet :-( Apart from its many layout bugs (eg the ones detailed at http://www.positioniseverything.net/explorer.html) IE6 doesn't support advanced selectors like p a, p + p, a[href], etc - rendering them next to useless apart from little styling 'treats' for people using more standards-compliant browsers. More seriously, it doesn't support the properties min-/max-height/width, content and probably more. Some people here may object to the recommendation, but I found Dreamweaver MX2004 (in code mode) very useful when I was learning CSS, as it has a nice autocomplete feature, and warns about differing browser support. Welcome to the exciting and only occasionally infuriating world of CSS! Chris On 11/28/06, Morgana [EMAIL PROTECTED] wrote: Hi, I'm sure this has been asked hundreds of times, but as I'm new, please forgive the repetition. What's the safest css version to work with at the current time, given the varying degrees of browser support... IOW, should I stick with CSS earlier than 2, to assure the broadest support? If this is laid out somewhere for me to simply read about, please feel free to point me in the right direction, and I'll read up. Many thanks from a longtime designer, but too-new css 'jockey'. - Jean PS: Are there any BrowserCam groups here wanting another member? If so, please contact me off-list. Please excuse req, and thanks again. __ 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/ -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] New and way less than confident
On 11/29/06, Barney Carroll [EMAIL PROTECTED] wrote: Chris Ovenden wrote: unfortunately IE6 is likely to remain the majority browser for several years yet :-( Several years yet? IE7 is now a Microsoft recommended download, and virtually all PCs for sale post-January ship with Vista, and, inherently, IE7. The next couple of months will be very telling, but I reckon things may be about to change. A lot of arrogant developers(TM) I know are telling me I'm an idiot to still spend so much time spoon-feeding IE6, and argue that I should just tell my clients that they should be looking at things with IE7. Of course, I can't quite take this idea seriously. I really would like to ditch IE6 support, except as a degraded-but--still-functional experience, but sadly the upgrade to IE7 is not an option for most Windows users, as it only works on XP SP2 - currently standing at about 23% of web users worldwide. (And of these, how many are legitimate? IE7 also comes with the hated WGA check.) I hope I'm wrong, though. http://www.stylespread.com Gonna check that out. Thanks! -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Still having some trouble with my rounded corners...
Oops - The upper element - ie the UL - should (obviously) be the one
with the transparent background. Sorry about that. That border is
annoying, isn't it? You might need to add a non-semantic element to
hold the bottom curve so that the border on the UL (sides only)
doesn't overlap it; or you could perhaps jiggle the padding on the li
so that the left hand ones each contribute a bit of the left border,
and the right ones likewise with the right border.
Also the .inround DIV is too wide currently. I made a few changes to
these parts of the CSS which gets us a bit nearer:
#bottomlinks ul {
overflow:hidden;
/*width: 520px;*/
background-color:#303b3c;
margin:0 0 12px 0;
padding:7px;
/*border:5px solid #242c2d;*/
}
...
.inround {
background:url(http://www.phazm.net/newphazm/Growth/images/in_top.gif)
top left no-repeat #303B3C; width:544px; padding:20px 0 0 }
.inround ul {
background:url(http://www.phazm.net/newphazm/Growth/images/in_bottom.gif)
-5px 100% no-repeat transparent; margin:0; padding:0 0 20px;
border-left:5px solid #242c2d; border-right:5px solid #242c2d }
Good luck!
Chris
On 11/28/06, Jon Hughes [EMAIL PROTECTED] wrote:
I'm not sure what I'm doing wrong, but this is not right :)
http://www.phazm.net/newphazm/index-abs.html
The top one isn't even showing up, and the bottom one isn't where it is
supposed to be.
Any idea why?
-Original Message-
From: Chris Ovenden [mailto:[EMAIL PROTECTED]
Sent: Monday, November 27, 2006 6:03 AM
To: Jon Hughes
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Still having some trouble with my rounded
corners...
Since your page is fixed-width, you already have two nested block
level elements - div and ul - filling the rounded corners area, and a
plain background, it should be fairly easy. I'd use two images only:
one for the top left and right corners, the other for the bottom two.
They will need to be fully opaque for this to work. Put the top image
on the DIV like this:
.inround { background:url(topimage.gif) top left no-repeat transparent }
and the bottom one on the UL like this:
.inround ul { background:url(bottomimage.gif) bottom left no-repeat
#303B3C }
Don't add any padding to the div, but pad the ul however you like.
Hope this helps,
Chris
On 11/27/06, Jon Hughes [EMAIL PROTECTED] wrote:
http://www.phazm.net/newphazm/index-abs.html
At the bottom, with the list, I want to have a rounded border, like:
http://www.phazm.net/newphazm/index.gif
I should already have the neccisary hooks while maintaining structural
markup.
div class=inround
ul
li class=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta href=#Hosting/a/li
/ul
/div
If you need it, the whole thing is enclosed in this:
div id=bottomlinks
...
/div
I have the necessary images (I think all that are needed) uploaded
already:
http://www.phazm.net/newphazm/Growth/images/in_br.gif
http://www.phazm.net/newphazm/Growth/images/in_bl.gif
http://www.phazm.net/newphazm/Growth/images/in_tr.gif
http://www.phazm.net/newphazm/Growth/images/in_tl.gif
Can someone guide me through the positioning and css needed for this?
I
have been trying unsuccessfully for 4 days now, and haven't gotten
anywhere.
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Still having some trouble with my rounded corners...
I also changed the overlow:hidden clearfix on the ul, which is a bit
problematic, to:
#bottomlinks ul:after { content:.; clear:both; display:block;
visibility:hidden }
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Still having some trouble with my rounded corners...
On 11/28/06, Jon Hughes [EMAIL PROTECTED] wrote:
We are certainly getting closer! :)
I am not sure what you mean by jiggle the padding but I don't swing
that way ;)
What I meant was to remove all margins from the LI so they fill the
space in-between the top and bottom curves and can each hold a bit of
(fake?) border. Obviously you'll have to make some padding adjustments
to keep the layout looking the same. Might cause a problem with the
dotted margins (but since they're links, the a elements could hold
them instead). Welcome to the wonderful world of standards-based
layout!
http://www.phazm.net/newphazm/index-abs.html
IE: Looks like the borders are shifting down, bringing the background
with it.
Something, probably an IE bug, is causing the UL, but not its contents
and background(!), to drop down. Anyone know what this is? I've given
up thinking I've seen every IE6 bug. I notice the UL doesn't have
layout - an IE-only phenomenon, the lack or presence of which
sometimes causes problems. To switch it on, apply zoom:1 to the UL.
Might fix it.
FF: SO close! But it's got little dingle berries hanging off the
sides.
Another solution to this would be to add a non-semantic div underneath
the ul in the markup and apply the background to that.
Have fun!
Chris
- Jon
-Original Message-
From: Chris Ovenden [mailto:[EMAIL PROTECTED]
Sent: Tuesday, November 28, 2006 4:28 AM
To: Jon Hughes
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Still having some trouble with my rounded
corners...
Oops - The upper element - ie the UL - should (obviously) be the one
with the transparent background. Sorry about that. That border is
annoying, isn't it? You might need to add a non-semantic element to
hold the bottom curve so that the border on the UL (sides only)
doesn't overlap it; or you could perhaps jiggle the padding on the li
so that the left hand ones each contribute a bit of the left border,
and the right ones likewise with the right border.
Also the .inround DIV is too wide currently. I made a few changes to
these parts of the CSS which gets us a bit nearer:
#bottomlinks ul {
overflow:hidden;
/*width: 520px;*/
background-color:#303b3c;
margin:0 0 12px 0;
padding:7px;
/*border:5px solid #242c2d;*/
}
...
.inround {
background:url(http://www.phazm.net/newphazm/Growth/images/in_top.gif)
top left no-repeat #303B3C; width:544px; padding:20px 0 0 }
.inround ul {
background:url(http://www.phazm.net/newphazm/Growth/images/in_bottom.gif
)
-5px 100% no-repeat transparent; margin:0; padding:0 0 20px;
border-left:5px solid #242c2d; border-right:5px solid #242c2d }
Good luck!
Chris
On 11/28/06, Jon Hughes [EMAIL PROTECTED] wrote:
I'm not sure what I'm doing wrong, but this is not right :)
http://www.phazm.net/newphazm/index-abs.html
The top one isn't even showing up, and the bottom one isn't where it
is
supposed to be.
Any idea why?
-Original Message-
From: Chris Ovenden [mailto:[EMAIL PROTECTED]
Sent: Monday, November 27, 2006 6:03 AM
To: Jon Hughes
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Still having some trouble with my rounded
corners...
Since your page is fixed-width, you already have two nested block
level elements - div and ul - filling the rounded corners area, and a
plain background, it should be fairly easy. I'd use two images only:
one for the top left and right corners, the other for the bottom two.
They will need to be fully opaque for this to work. Put the top image
on the DIV like this:
.inround { background:url(topimage.gif) top left no-repeat transparent
}
and the bottom one on the UL like this:
.inround ul { background:url(bottomimage.gif) bottom left no-repeat
#303B3C }
Don't add any padding to the div, but pad the ul however you like.
Hope this helps,
Chris
On 11/27/06, Jon Hughes [EMAIL PROTECTED] wrote:
http://www.phazm.net/newphazm/index-abs.html
At the bottom, with the list, I want to have a rounded border, like:
http://www.phazm.net/newphazm/index.gif
I should already have the neccisary hooks while maintaining
structural
markup.
div class=inround
ul
li class=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta href=#Hosting/a/li
/ul
/div
If you need it, the whole thing is enclosed in this:
div id=bottomlinks
...
/div
I have the necessary images (I think all that are needed) uploaded
already:
http://www.phazm.net/newphazm/Growth/images/in_br.gif
http://www.phazm.net/newphazm/Growth/images/in_bl.gif
http://www.phazm.net/newphazm/Growth/images/in_tr.gif
http://www.phazm.net/newphazm/Growth/images/in_tl.gif
Can someone guide me through the positioning and css needed for
this?
I
have been trying unsuccessfully for 4 days now, and haven't gotten
anywhere.
--
Chris Ovenden
Re: [css-d] Still having some trouble with my rounded corners...
Since your page is fixed-width, you already have two nested block
level elements - div and ul - filling the rounded corners area, and a
plain background, it should be fairly easy. I'd use two images only:
one for the top left and right corners, the other for the bottom two.
They will need to be fully opaque for this to work. Put the top image
on the DIV like this:
.inround { background:url(topimage.gif) top left no-repeat transparent }
and the bottom one on the UL like this:
.inround ul { background:url(bottomimage.gif) bottom left no-repeat #303B3C }
Don't add any padding to the div, but pad the ul however you like.
Hope this helps,
Chris
On 11/27/06, Jon Hughes [EMAIL PROTECTED] wrote:
http://www.phazm.net/newphazm/index-abs.html
At the bottom, with the list, I want to have a rounded border, like:
http://www.phazm.net/newphazm/index.gif
I should already have the neccisary hooks while maintaining structural
markup.
div class=inround
ul
li class=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta href=#Hosting/a/li
/ul
/div
If you need it, the whole thing is enclosed in this:
div id=bottomlinks
...
/div
I have the necessary images (I think all that are needed) uploaded
already:
http://www.phazm.net/newphazm/Growth/images/in_br.gif
http://www.phazm.net/newphazm/Growth/images/in_bl.gif
http://www.phazm.net/newphazm/Growth/images/in_tr.gif
http://www.phazm.net/newphazm/Growth/images/in_tl.gif
Can someone guide me through the positioning and css needed for this? I
have been trying unsuccessfully for 4 days now, and haven't gotten
anywhere.
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Elementary questioning about positioning a div
This should work:
div { height:30px; margin-left:20px }
If there are surrounding elements muddying the picture, the solution
might be different, though.
Chris
On 11/24/06, Jazzcreation [EMAIL PROTECTED] wrote:
I'd like to position a div of a certain height (say 30px) so that it starts
20px from the left hand edge, and runs up to the right edge of the screen.
I normally try to figure out a way of doing this in css, then give up and
use a table, which provides a pretty straightforward solution.
Can anyone tell me what the css solution is?
Thanks,
Peter
__
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/
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] first list-item inside dd definition description is out of line in IE6
Hi Charles,
Modern version of the Holly hack:
* html div#text dd { zoom:1 }
No known side effects (except your CSS won't validate - if you insist
on this, use height:1px instead of 1% for safety's sake)
Chris
On 11/24/06, Charles [EMAIL PROTECTED] wrote:
On 11/24/06, francky [EMAIL PROTECTED] wrote:
Hi Dimpie,
It is the IE Three Pixel Text-Jog, described in the special Position
Is Everything IE-compartment:
Wow this is better solution, add height: 1% to the div#text dd styles.
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] FF understands body:last-child
On 11/16/06, Eric A. Meyer [EMAIL PROTECTED] wrote: Similarly, 'body:first-child' would select any body element that's the first child of its parent (which is html) -- and since every document I've ever seen has at least a head element before the body element, 'body:first-child' would fail to find any matches. To do your own translations of selectors like this, check out the SelectORacle at http://gallery.theopalgroup.com/selectoracle/. Anyway, this could be (and apparently is being) used as a CSS hack to feed advanced CSS to browsers that understand :last-child, in a manner very much similar to the 'htmlbody' hack. Whether that's actually a good idea probably depends on your opinion of CSS hacks in general. This kind of hack is just the kind of thing I was referring to here: http://frontend.blogsome.com/2006/11/12/valid-css-is-irrelevant/ -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Unwanted underlines in image links (Firefox) :: updated testpages
On 11/15/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote: I'd generally advice against quirks mode in any browser but IE6. Isn't it time we let quirks mode go altogether? You're not making the most of IE6's already impaired render engine, and inviting a lot of box model hacks. Means abandoning pixel-perfect layout is IE5 5.5, of course. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Footer that fills to botom of browser window
Sounds like you need a background image on the body. Something like this:
body { height:100%; url(yourpic.jpg) no-wrap bottom left #suitablecolour; }
where #suitablecolour blends in to the background image, in case the
gap is bigget then the height of your image.
Then just let your content be whatever height it wants to be. Add a
bottom-margin if you need to see at least some of the image.
On 11/15/06, Les Mizzell [EMAIL PROTECTED] wrote:
I need a site-wide footer that will completely fill the space from the
end of actual content to the bottom of the browser window.
Sorta like
page
div id=content
Everything on the page here (mostly dynamic)
/div
div id=filltoBOTTOM
Nothing here, just a background image
Must extend to browser window bottom
/div
/page
#filltoBOTTOM {height: 100%;} doesn't do it.
Since my content is dynamic, there's no way to know exactly what height
is needed to stretch all the way to the bottom.
Ideas?
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Headers hugging the bottom (float: bottom)
If you mean what I think you mean, you could put
.container { position:relative }
to make the container a containing-block, then use
.content { position:absolute; bottom:0 }
to make each content block sit snugly at the bottom of the container.
The problem is, unless you know in advance how high the containers
are, they won't expand to fit the content.
Another approach would be to give each h2 a fixed height (in ems).
I think this is one of those situations where anything you might do
will be a slight compromise. I never will know why vertical-align is
not specced to do this kind of thing.
Chris
On 11/14/06, Barney Carroll [EMAIL PROTECTED] wrote:
A little idea I wanted to implement but am a bit confused about... Was
wondering if anyone could see an obvious method.
div class=container
h2Whatever/h2
div class= content
(content)
/div
/div
div class=container
h2Whatever whatever whatever whatever/h2
div class= content
(content)
/div
/div
.container has a very narrow set width - in the first instance, the
header would fit in as one line. In the second it would have to wrap.
.content has a top margin of a good deal, where the header fits - but in
practical terms it has a fixed distance from the top of the container.
I want h2 to hug the top of .content - ideally while remaining its
sibling (ie without any extra markup). It has to be positioned relative
(general term) to .content because in the instance of the header being
several lines long, I would want it to extend as far as it might want
upwards, while keeping its lowest point constant compared to .content,
and without itself affecting .content at all.
What I really want is float:bottom. Anyone know what I mean?
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Unwanted underlines in image links (Firefox)
I agree with the img {display:block } tip. I always put that at the
beginning of my stylesheets, and only make them inline if I really
need it (which is almost never).
I may be wrong, but I believe it's bad practise to enclose the image
and text in the same a tag. Inevitably you get a bit of unerlined
empty air where the line break occurs.
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Valid CSS is Irrelevant
Hi Everyone! I was just looking at a very ugly hack someone posted here recently which proudly announces at the end this hack is valid CSS3. Well, great. Does that mean that whatever flaw in the target browser (in this case Safari) the hack was used to work around will bring other browsers to their knees when they catch up in CSS support? Not a great approach to web site building. I am not anti-hack. I use * html in pretty much every stylesheet I write. But I think hacking for current leading-edge browsers is a bad idea, unless you are compensating for some major lack of support that other browsers have (eg no min-height in ie6-). Only use hacks that can do no harm in the future (I don't use the underscore hack, but it's a safe one, as it's unlikely other browsers will suddenly start supporting it.) And as for valid CSS - I could care less. zoom:? filter:? Ok, if it works. Valid HTML - yes, please. That's future-proofing. But isn't CSS where we shunt all the complexity and ugliness that used to be in the markup? One day there may be an elegant and easy-to-understand layout language, but sadly CSS ain't it. Aiming for valid CSS is fine, and won't it be nice when it's all we need? But we mustn't fool ourselves into thinking that if it validates we can't have done anything wrong. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Valid CSS is Irrelevant
I posted a slightly more detailed version of this here: http://frontend.blogsome.com/2006/11/12/valid-css-is-irrelevant/ Prob'ly ought to confine comments to the blog rather than the list... C __ 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] IE6 vs IE7
On 11/8/06, Barney Carroll [EMAIL PROTECTED] wrote: Chris Ovenden wrote: I have to disagree. According to the BBC (http://www.bbc.co.uk/guidelines/newmedia/technical/browser_support.shtml), only 23% of their visitors have XP SP2 installed (ie only about a third of XP users). Even if we assume all those people accept the IE7 upgrade (and it's likely most will), it will remain a minority browser for many years, if not forever. (I am skeptical about Vista ever being widespread, which would be the main factor in further adoption, and still contingent upon an as-yet undetected slowdown in Firefox use.) I have to agree with this. There was a silent consensus of panic where I work when I found that Microsoft were about to make IE7 a 'recommended download'... Luckily IE7 is very well behaved over-all and I only had to spend a couple of ours updating all our websites for it. However, the assertion that Microsoft's announcement meant that everyone will soon be using IE7 was not a reasonable one. As well as the factors Chris points to, we have to consider the notion of people looking to Vista PCs as alternatives to Macs - which in the popular eye are the new PC. It certainly would be a very good time for Apple to loudly reduce their notoriously high prices. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] IE6 vs IE7
On 11/6/06, Erik Harris [EMAIL PROTECTED] wrote: On the bright side, any XP user who has update notification turned on will be prompted to install it automatically, so it should have pretty wide usage among WinXP users who haven't seen the light and downloaded Firefox or Opera. :) I have to disagree. According to the BBC (http://www.bbc.co.uk/guidelines/newmedia/technical/browser_support.shtml), only 23% of their visitors have XP SP2 installed (ie only about a third of XP users). Even if we assume all those people accept the IE7 upgrade (and it's likely most will), it will remain a minority browser for many years, if not forever. (I am skeptical about Vista ever being widespread, which would be the main factor in further adoption, and still contingent upon an as-yet undetected slowdown in Firefox use.) -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Blowtorches at the ready...
I'm sorry - is it now passe to have the navigation after the content? I thought screen reader users (not to mention search engine spiders) hated wading though the navigation to get to the content? This certainly appeared to be the case last year when I was trying to get www.five.tv through level 2 accessibility - has the thinking now changed, and if so could you illuminate me as to why? On 10/31/06, Dave Goodchild [EMAIL PROTECTED] wrote: snip As far as bumping into 'compliant' sites that have nav after content for example, at least people are trying - it's a learning curve. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] [ADMIN- OFF TOPIC] Re: Blowtorches at the ready...
On 10/31/06, Alex Robinson [EMAIL PROTECTED] wrote: My blowtorch is now ready and primed to fry to a frazzle anyone who cares to prolong this torture... I didn't mean to start a debate *HERE*; my intention was for us all (or those who cared to) to canter over to that guy's blog (http://olav.dk/articles/tables.html) and put him straight. Unfortunately there's no comment thread, but I emailed him. Chris __ 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] Blowtorches at the ready...
http://olav.dk/articles/tables.html -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] [ADMIN - OFF TOPIC] Re: IE7 release
On 10/26/06, Mark J. Reed [EMAIL PROTECTED] wrote: On 10/26/06, Chris Ovenden [EMAIL PROTECTED] wrote: This is incorrect. It used to be true of other IE versions, but this time around Microsoft have provided a way to roll back the installation to IE6, using the Add/Remove Programs control panel. The functionality is there, but have you tested it? I admittedly haven't tried with the official IE7 release, but when I tried to roll back from the last release candidate it left me with no functioning IE at all. Deskside tech support wasn't able to get it working and we wound up reinstalling Windows. So you might be able to roll back, and if it really works, that's great - but I'm still sticking with the standalone installs. Fair point, and sorry to hear of your troubles. I successfully rolled back the beta a couple of times - haven't actually tried the final release, but I'm not worried that it won't roll back. When I installed, it automatically uninstalled the RC1 version which was on there at the time - which is the correct behaviour. It has to do this so that rolling back the final release results in IE6 not whichever test version. PITA though, as it rebooted my machine twice. If it hadn't done that, though, I would be worried. I didn't know there were standalone versions of IE7. I have to say, I have already started to see IE6 as a browser on which sites may degrade gracefully. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] [ADMIN - OFF TOPIC] Re: IE7 release
On 10/27/06, Mark J. Reed [EMAIL PROTECTED] wrote: I didn't know there were standalone versions of IE7. There probably are, but that's not what I meant. I was referring to using standalone versions of IE6, as opposed to trying to roll back to it. Sorry I misunderstod. I thought you meant you were sticking with IE6. I too am happy to use a slightly defective version of IE6 for testing purposes. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Change the :hover, :link, :visited and :active of a specific element based ot its ID
On 10/25/06, Barney Carroll [EMAIL PROTECTED] wrote:
A:hover,#myelement { color: #FFF }
But every other a element on the page got selected.
Replace your comma ',' with a space ' ':
a:hover #myelement {color:#fff;}
You were also missing a semi-colon ';' :) - so many times I thought I
had a massive failure on my hands when the only problems were ahandful
of missing semi-colons.
When you write
a:hover,#myelement {}
It selects #myelement and all a:hover - comma is a separator. It is also
a nifty hack for IE only if you put it on the last definee - anyone
tried this on IE7?
Yep, that is an easy mistake to make - links seem the worst culprits
for some reason.
Barney, I would never dream of trying a hack like that. Does IE ignore
or include the selector with a trailing comma?
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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 and 7 on same box
Nice idea. I have thought about trying a similar solution for testing layouts in Safari in our Mac-free office. There is a remote-desktop-like tool called Nomachine NX Client, which I could use to peek into one of our Linux servers running Konqueror (which is as close to Safari as we can get, here - I'd be grateful for comments about how they compare.) For more information about the IE standlones, this PIE page is brilliant: http://www.positioniseverything.net/articles/multiIE.html The page also has some really good tips about the use of conditional comments to target specific windows versions. All the best! Chris On 10/26/06, AG [EMAIL PROTECTED] wrote: I found though some easier solutions, such as for ex. using VirtualPC with a separate system install including an IE6. But the simplest solution I've found is actually to remotely use another box on our network, where I can login for debugging. This way I can simply install IE7 on my box, and use the legacy IE6 on another box, w/o the hassle of physically moving from place to place. --- Chris Ovenden [EMAIL PROTECTED] wrote: On 10/24/06, AG [EMAIL PROTECTED] wrote: Did anybody succesfully install both of these on the same box? How? Thanks Ara G. I have a full installation of IE7 and the standalone of IE6 running pretty well on the same box. You can get standalones from http://browsers.evolt.org/?ie/32bit/standalone The IE6 standalone has a few drawbacks - annoying alert box on page refresh and no transparency (and probably no other filters) either. But it's fine for checking CSS layouts and most javascript that I've thrown at it. Anyone else know another way? -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] [ADMIN - OFF TOPIC] Re: IE7 release
On 10/19/06, Mark J. Reed [EMAIL PROTECTED] wrote: Assuming you want to upgrade, do be careful about installing it, as there's no going back. This is incorrect. It used to be true of other IE versions, but this time around Microsoft have provided a way to roll back the installation to IE6, using the Add/Remove Programs control panel. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Inline elements and display:block
Hi All I am reading More Eric Meyer on CSS, and came across a passage (on p158) that I don't understand. After making some a tags have display:block, he says: Note that we have *not* changed the nature of the links themselves. The a elements are still inline elements. What's happened is that the CSS is getting them to generate block boxes. This is a subtle but crucial difference. If CSS changed the elements themselves to be block level, document validation could easily break down. Is there really an intrinsic difference between block level and inline elements, other than presentational ones? If so, what? I thought that all HTML nodes on the DOM tree were pretty much equal, and that the distinction between block and inline was a convenience that eg makes paragraphs behave the way we want. (Or is merely referring to the fact that the XHTML DTD doesn't allow 'block' elements like div to appear inside a p?) -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 height, min-height difference for internal 100% divs
Hi Tony
I'm guessing the leftcol div is inside the outer div. I can't figure out
exactly what's going on here, but if you change the CSS for #outer to:
#outer {
background-color: red; width: 100%; min-height: 400px; height:1px
}
this triggers the containing block behaviour you're looking for. Anyone care
to explain?
Chris
On 8/20/06, Tony Martin [EMAIL PROTECTED] wrote:
I am writing a page specifically for firefox.
#outer {
background-color: red; width: 100%; height: 400px;
}
#leftcol {
background-color: blue; width: 30%; height: 100%; float: left;
}
gives me what I want - leftcol same length as outer, but I also would
like
the outer div to expand, so I set it to min-height: 400px.
Now the leftcol 100% becomes the height of the viewport.
i can get what i want by setting leftcol to also be min-height 400px, but
what is it that changes in interpretation of height and min-height?
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Clearing in IE6
I can't replicate it either - IE6.0.2900.2180.xpsp_sp2_rtm.040803-2158 - but it might be worth changing the height: 1% fix to height:1px. The percent version is known to cause problems in some situations. Chris On 3/10/06, Bruce MacKay [EMAIL PROTECTED] wrote: Hi folks, Some IE 6 users of one of my sites are experiencing problems with the following page http://107writing.massey.ac.nz/test.htm Specifically, the yellow column is extending past the bottom of their browser and they cannot scroll to read the missing material. I cannot replicate the fault using IE 6.0.2900 but users of other v6. versions are apparently having difficulty. I cannot see the problem in FF or Opera 7/8. The CSS is at http://107writing.massey.ac.nz/scripts/master.css I thought I was doing the right thing for address the div clearing problems in IE 6 by applying height: 1% to the containing div, but apparently I'm wrong. I'll be grateful for pointers to better practice. Thanks, Bruce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Min-Height
On 2/24/06, Paul Novitski [EMAIL PROTECTED] wrote:
At 08:00 AM 2/24/2006, Chris Ovenden wrote:
This area is slightly problematic, because min-height is not yet
supported by IE7 (though we're promised it for the proper release). If
we assume it will be included, the neatest solution that works in all
browsers is:
#element { min-height:100px }
* html #element { height:100px }
Some people are against CSS hacks, but this is the only solution I
know of that is valid CSS and unlikely to have any adverse effects in
the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
not necessary, and in fact will make it break in IE5/mac.]
Internet Explorer conditional comments are validated by the W3C
engine and allow one to differentiate IE from other browsers and to
differentiate among IE versions.
Well, yes, but that isn't a CSS solution, it's a markup solution. Many
developers are either unable or unwillng to change the markup in this
way. It also has maintenance implications.
Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Min-Height
This area is slightly problematic, because min-height is not yet
supported by IE7 (though we're promised it for the proper release). If
we assume it will be included, the neatest solution that works in all
browsers is:
#element { min-height:100px }
* html #element { height:100px }
Some people are against CSS hacks, but this is the only solution I
know of that is valid CSS and unlikely to have any adverse effects in
the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
not necessary, and in fact will make it break in IE5/mac.]
If by some madness IE7 doesn't support min-height this will at least
not harm matters, although an additional hack would probably be
needed. Let's hope not.
Chris
On 2/23/06, jeremy [EMAIL PROTECTED] wrote:
hey there...
I was able to get the min height property to work in IE, but it requires
using a hack.
a quick google search on min-height will give you MANY different hacks
available. I eneded up going with one from Stew
http://www.cssplay.co.uk/boxes/minheight.html
the only problem with it is that it exploits a bug in IE. Most of the
hacks for min-height do.
simple amount off code, not complicated, but not the cleanest.
-jeremy
I am having trouble getting min-height working correctly in IE. Someone
suggested that I use height instead, because it acts as min-height does
when interpreted by IE. However the text just overflowed when it hit the
bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Min-Height
It's hard to know what specifically is wrong, looking at your page. But generally, min-height (and, in IE6-, height), as the name suggests, only regulates the size of a box up til the point when it is filled with text. Beyond this, the box will expand to enclose it UNLESS it is floated, in which case other measures are needed to make it enclose. On 2/23/06, swilly [EMAIL PROTECTED] wrote: I am having trouble getting min-height working correctly in IE. Someone suggested that I use height instead, because it acts as min-height does when interpreted by IE. However the text just overflowed when it hit the bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/ Any help is greatly appreciated __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 Beta goes Public
On 2/1/06, Ingo Chao [EMAIL PROTECTED] wrote:
Nick Fitzsimons wrote:
However, they
haven't got all the bugs out, so conditional comments are going to be
necessary - I'm still seeing whitespace between li items, which I
had been fixing with a * html li { height: 1%; }...now that doesn't
work.
This is a fundamental problem with the Holly hack (sorry, Holly :-)
I think the more fundamental problem is that IE7b2 still shows the list
whitespace bug, as Eric Shepherd reported. Confirmed here.
So what sense makes reporting bugs to MS that are already reported for a
long, long time?
(zoom does not validate, and does not serve IE5, so you need a CC to fix
that bug)
Thanks Nick for the tip. Just what I was looking for.
As for bug reporting, I think it is worth doing because they've
basically not worked on the render engine for 4 years, and here
finally we have a dev team who seem pretty keen to get things right. I
don't evny them the task they've had, or are looking at now with a
flood of bug reports. Four years' work in a few months! I doubt
they'll be looking for old bugs now, unless we jog their memories.
Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form Layout - better table or CSS for this one?
(Taking it back onto the list, as others might be interested) I don't know if you tried your first example in Firefox, but it worked just fine. IE sometimes goes haywire on all-floated layouts, however, and putting each line inside a block element was a pretty good cure. The inputs don't need to be floated, however, and the number of divs can be slimmed down a bit, like this: html body divlabel style=width: 120px; float: left; clear: left;Label 1:/label input style=width: 210px; type=text id=input1 //div divlabel style=width: 120px; float: left; clear: left;Label 2:/label input style=width: 210px; type=text id=input2 //div /body /html Chris On 1/30/06, Paul Kahl [EMAIL PROTECTED] wrote: Actually, ignore my first email. This solution works great: html body div style=clear: both; padding: 0px; div style=width: 120px; float: left;Label 1:/div div style=width: 210px; float: left;input type=text id=input1 value=1//div /div div style=clear: both; padding: 0px; div style=width: 120px; float: left;Label 2:/div div style=width: 210px; float: left;input type=text id=input2 value=2//div /div /body /html On 1/30/06, Paul Kahl [EMAIL PROTECTED] wrote: How would you go about doing this? I haven't used the Clear property before, and I've always had issues with Float. I tried this: html body div style=width: 120px; float: left; clear: left;Label 1:/div div style=width: 210px; float: left;input type=text id=input1//div div style=width: 120px; float: left; clear: left;Label 2:/div div style=width: 210px; float: left;input type=text id=input2//div /body /html but I wound up with Label and both input fields on one line, and Label2 on the next line. How would I set that up, without having to do absolute positioning, just with float and clear, so that Label and Label 2, and their respective inputs, were on a total of two lines, like: Label: input1 Label2: input2 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form Layout - better table or CSS for this one?
Looks completely do-able in CSS to me. The first page I'd divide into two main DIVs, floating the first one left. Inside the first block, labels with a set width (could be in ems though if a fluid layout is required) floated left and cleared left, so that the input fields sit neatly next to them. A cleared heading for the 'Types of Cases' bit. Then the checkboxes in two groups, the first group floated left... And so on. Footer clearing both blocks. The main trick I use for CSS forms is to use a fixed width for floated labels etc, so that they simulate a table-like layout. Traditional right-aligned labels work in exactly the same way. You can also be sure then that your containing blocks are the right width to hold all that's in them. And the left-floated elements must clear the previous left-floated element above. Enclosing a label/input pair in a div or other block-level element makes it easier to keep them horizontally aligned, but shouldn't strictly be necessary. (I'd be interested in hearing of a bulletproof method for this.) Hope this gives you some encouragement. Chris On 1/29/06, Les Mizzell [EMAIL PROTECTED] wrote: I thought I was getting pretty good at accessible CSS driven form layouts, but I might have met my match this time (meaning - amount of time needed for table layout verses CSS). Here's Photoshop mock ups of two of the form pages. http://www.cyndustries.com/formTEST.cfm This is an 8 multi-page form, and stuff is all over the place on every page. Layouts for these *ain't* gonna change no matter what, so they've got to be done like these... Just wondering, would you folks go with tables on these for layout, or stick to your guns and work through the CSS? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index with flash in firefox
There are many broswr/flash player bugs associated with wmode=opaque or transparent, so test thoroughly. On 1/28/06, Michael Hulse [EMAIL PROTECTED] wrote: On Jan 27, 2006, at 1:06 PM, Tanya Renne wrote: can someone diagnose a fix for that? Z-index is still baffling to me. I suggest using wmode=opaque. www.communitymx.com article pertaining to Flash, DHTML Menus and Accessibility: http://snipurl.com/m08r __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using display: inline; for navigation lists
On 1/26/06, Matt Dawson [EMAIL PROTECTED] wrote: What's the benefit of displaying the list as inline if floating each li element left within the containing block could accomplish the same effect? Are there any examples where you *have* to use the display: inline rule to acheive the intended effect of taking a list of li elements and making them align horizontally. In looking at a bunch of different examples from across the web, I see that this style is used pretty consistently for this kind of use. I just can't figure out *why.* I just ran into one of those situations today, funnily enough. I am in the habit of giving my navgation li elements display:inline, so I did this with a nav I was making with a 'tabbed' look (achieved with background images). The tabs had to be a fixed size, and as I struggled to achieve this I realised that inline elements can't receive width. So floated elements it had to be. (Floats are automatically block elements, so they can be given a fixed width.) In fact, I had to position the link text absolutely within the li, which meant making the inner a elements block as well. Conversely, for menu items of variable size, inline would be a more natural choice. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Broken border in IE and Mac browser check
I found it on a bittorrent site - probably torrentspy.com - after hearing it had been leaked. If you can't find it I could probably turf up the link. I *thought* peekaboo had been killed in b1, but this form of it (if it is) had certainly survived into b2. Chris On 1/24/06, Martin Heiden [EMAIL PROTECTED] wrote: Chris, on Tuesday, January 24, 2006 at 15:13 Chris Ovenden wrote: However, I just tried it in IE7 b2 and the same thing is happening - and that bug is meant to have been fixed. How could you do this? AFAIK IE7b2 isn't out yet, just beta1 and AFAIR in b1 the peek-a-boo bug is still alive... regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page layout in a container
Alternatively, make the #container expand enclose its floated contents. This shows one way of doing it: www.positioniseverything.net/easyclearing.html Chris On 1/25/06, Roger Roelofs [EMAIL PROTECTED] wrote: Mike, On Jan 24, 2006, at 8:41 PM, Mike Tuller wrote: I am trying to design a page that has a set container that adjusts when you change the size of the page. I am using float, and I am having a problem where the background does not show up when you use a table. In my case, for a form. Can someone explai to me why the background is not white as I have set in the container? Why is it that if I change float to relative for the form does the background then work? A url is much better than pasted in code. In your case, I'm betting that everything in #container is floated. When this is the case, #container no longer has any content, so it collapses to a hieght of 0, ergo, no background-color. Either float the container or unfloat some of the contents. -- Roger Roelofs Remember, if you're headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] all-css menu elements hover behavior doesn't work in IE
I haven't gone through your CSS, but you should be aware that IE only
allows :hover on a tags. Also it doesn't like anything downstream' of
a :hover, eg
a:hover ul { display:visible } //work work in IE as it is
To make a rule like this latter type work, you will need to make some
trivial change to the hovered element itself; eg
a:hover { color:black } //or whatever it was already
a:hover ul { display:visible } //now seen by IE
as well as your desired change. This seems to make IE 'see' the hover.
Chris
On 1/25/06, Studio Express [EMAIL PROTECTED] wrote:
Hi all,
I have an all-css dropdown/flyout menu on my site. The menu works
beautifully in Safari FF, but not in IE. I used an htc file to
append element hover behavior in IE.
The page is here: http://www.xasperformance.com/project
The CSS is here: http://www.xasperformance.com/project/styles.css
Htc file found here: http://www.xs4all.nl/~peterned/csshover.html
The internal menu CSS is in the document source, but I also pasted it below:
Thanks in advance, Everyone!
style type=text/css
!--BEGIN VERTICAL MENU--
#menu {
width: 100%;
background: #00;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 5px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu h2:hover {
color: #fff;
background: #ff5900;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #fff;
background: #ff5900;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul
{display: none;}
div#menu ul li:hover ul
{display: block;}
div#menu ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul li:hover ul
{display: block;}
!--END VERTICAL MENU--
!--BEGIN HORIZONTAL MENU--
#global {
width: 100%;
background: #eee;
float: left;
}
#global ul {
list-style: none;
margin: 0;
padding: 0;
width: 83px;
float: left;
}
#global a, #global h2, #global h6 {
font: bold 11px/16x arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
}
#global h2 {
color: #999;
background: #000;
text-transform: uppercase;
}
#global h2:hover {
color: #fff;
background: #000;
}
#global h6 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#global h6:hover {
color: #fff;
background: #000;
}
#global a {
color: #000;
background: #efefef;
text-decoration: none;
}
#global a:hover {
color: #fff;
background: #ff5900;
}
#global li {position: relative;}
#global ul ul {
position: absolute;
z-index: 500;
}
#global ul ul ul {
top: 0%;
left: 100%;
}
div#global ul ul,
div#global ul li:hover ul ul,
div#global ul ul li:hover ul ul
{display: none;}
div#global ul li:hover ul,
div#global ul ul li:hover ul,
div#global ul ul ul li:hover ul
{display: block;}
!--END Horizontal Menu--
!--[if IE]
style type=text/css media=screen
body {
behavior: url(http://www.xasperformance.com/project/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
#global ul li {float: left; width: 100%; height: auto}
#global ul li a {height: 0%;}
#global a, #global h2, #global h6 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
/style
![endif]--
/style
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS wildcards
I am continually scripting CSS, because for one of the main sites I work on the images are coming out of a CMS, so I need to write a references asp.net whenever I want a background-image. Colours are also dynamic in some parts of the site. However, over two years of hardcore CSS work, I have found myself scripting less and less. At one time we were using a navigation system which required dynamically writing special rules for each element, and adding an extra line of CSS to each page to indicate which page was being visited. Then I realised all that was needed was a special class written into the html for the navigation of the current page. It is often the case that re-framing the problem leads to a simple, static solution, as others have already pointed out. I have been working on an AJAX project of late, but am avoiding the temptations of adding new CSS rules by javascript. IMO that way madness lies. If js sets classes and ids, these are all the hooks my static CSS needs. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Broken border in IE and Mac browser check
Just (re)joined the group, so apologies if this has been said before, but it looks to me like a manifestation of the peekaboo bug. The broken-upness changes as you scroll... However, I just tried it in IE7 b2 and the same thing is happening - and that bug is meant to have been fixed. Chris On 1/24/06, Christine Cé [EMAIL PROTECTED] wrote: Thanks to everyone who responded. I still have the problem though... :-( I hope someone can help! :-) To remind you: on this page: http://tinyurl.com/9me7n* http://www.eastlondonprintmakers.co.uk/beta/artists.htm the left border of the content div is broken in IE, and when scrolling up and down, further bits of the border disappear. I have a similar border on this page: http://tinyurl.com/cxr4x http://www.eastlondonprintmakers.co.uk/beta/alcock/1.htm but there is no problem with this border in IE. I have checked paddings and margins on the thumbnail divs and it seems fine, no overlapping. It's really puzzling me, I have been on it for days now with no progress. Is it something to do with IE, and therefore, something I can't do anything about, or something to do with my code and I'm not seeing? Thank you all in advance. Christine __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pushing up the bottom of a table cell background
Can't log in to your site, so I can't tell what's what... On 6/1/05, Andrew Mason [EMAIL PROTECTED] wrote: Hi folks, Our art director is having a hissy fit because the images on our product listing pages don't line up with the information box. The problem is that the bottom of the image has a shadow, and the information box extends to the bottom of the shadow so it looks like it's too big. You can see what I'm talking about in this image: http://www.pandamouth.org/bin/horizontal.jpg Is there a way to push up the bottom of those information boxes 7 or 8 pixels? You can see the actual site here: l/p: mitea/rlammm http://www.mitea.com/index.php?main_page=indexcPath=1_9 Thanks for your time! Andrew __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Website check please - problems on windows?
On 5/27/05, Luca Balboni [EMAIL PROTECTED] wrote: Hi all, I am completing a website and I am not able to check it on Windows configurations. It seems to work fine on Mac, but on windows IE6 seems to lose the white background of the main container,. Also, thewho we are menu on the top seem to stretch all the width of the page when active. Can anyone please confirm this? The address is: http://www.worldadventurer.net Nice site. Did the background-as-divider thing not work? C __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best CSS Editor?
On 5/26/05, Pactum web services [EMAIL PROTECTED] wrote: - Original Message - From: Mickey Slater [EMAIL PROTECTED] Have you ever noticed that this problem mostly occurs when you are editing a CSS or JS file that you didn't create from scratch? That's because dreamweaver adds its own little tags to first line of the file. For example. For a JS doc... // JavaScript Document For a css doc /* CSS Document */ Now. I don't really know why it would make a differnce.. It won't. Those are just comments. Hmm, have you checked? DW does have a few quirks. I must say I use DW MX2004 to edit CSS all the time, mainly because it has excellent code hints. I always delete that initial comment when DW makes a new CSS file, but that doesn't mean it has no relevance to crashing. (I haven't discerned any pattern to when DW crashes on me, but I'll be alert to the possibility now.) I also use JEdit quite a bit, and there is a plugin which gives quite good CSS support (but no code hints). Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best CSS Editor?
Oh, and I second the use of Firefox' Web Developer toolbar. Edit CSS is grand, plus I use the View Style Information and various Outline options to figure out what's going on in quirky layouts. If only there were a similar tool for IE. C __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help - CSS styled divider in between items on a page not working properly
On 5/26/05, Luca Balboni [EMAIL PROTECTED] wrote:
Hi Peter,
I was thinking not to use hr/ as a divider because I am using an
image as a background and for what I know IE and Opera show a border
around the image. Is this correct?
Is anyone aware of any workaround?
Thanks,
Luca
You can kill the borders on images using CSS:
img { border-width:0 }
Even better than using an HR - which is not strictly structural markup
- perhaps you can add a bottom border to the DIV or P which precedes
it; eg:
style media=screen type=text/css
p.last { padding-bottom:24px; border-bottom:8px solid black; }
/style
pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio
nisl, placerat ut, semper dictum, facilisis sed, purus. Praesent sit
amet sem id tellus consequat molestie. Class aptent taciti
sociosqu./p
p class=lastLorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed odio nisl, placerat ut, semper dictum, facilisis sed, purus.
Praesent sit amet sem id tellus consequat molestie. Class aptent
taciti sociosqu./p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio
nisl, placerat ut, semper dictum, facilisis sed, purus. Praesent sit
amet sem id tellus consequat molestie. Class aptent taciti
sociosqu./p
You can do this kind of thing even though you're using an image for
your divider:
p.last { padding-bottom:24px; background-image:url(dividerpic.jpg);
background-position:bottom; background-repeat:no-repeat; }
Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating and not wrapping images
On 5/25/05, Scott Haneda [EMAIL PROTECTED] wrote:
http://www.newgeo.com/web/css/float.html
I have been at this too long, I just need a solution :-(
I can not have the body copy text wrapping around the image, I more or less
want 2 columns, and do not want to resort to a table, though I am about to,
as 4 hours to get this far and 5 minutes with tables
This will stop your text from wrapping:
.prodWrapper h1 {
clear:both
}
Hope I understood you correctly.
Chris
I need they grey and yellow boxes on the right to auto collpase as they are
now. This more or less repeats records out of a database, but the data is
slightly variable.
thanks
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS list numbering - non-contiguous lists in XHTML 1. 1
On 5/24/05, Michael Wilson [EMAIL PROTECTED] wrote: David Balch wrote: Unfortunately, this is not valid XHTML as p isn't allowed inside ol. p as a child of ol is not valid, however, p as a child of li is perfectly valid. For a moment I thought there was an easy solution when I was looking for a difficult one ;-) I've used the following on several occasions without issue or a guilty conscience: http://www.iqmax.com/downloads/mike/css-examples/list-item-notes/ Conceptually one doesn't find paragraphs in lists - only list-items. One could argue that something that isn't a list-item within a list should be treated as if it weren't in the list, regards formatting at least. In contrast, one argument in favor of block-level content within list items may be that just because something is a list item doesn't necessarily mean that it doesn't warrant further elaboration or structure. A complex set of step-by-step instructions, for example, may require more than a few words wrapped in li to properly convey meaning. I believe this is the reason the spec allows for block level content within list items. If the content in question isn't an integral part of a list item, then it should be placed outside the list; perhaps before as an introduction or after as a footnote. At the end of the day, I don't think you will be committing semantic hara-kiri by using this method to structure your list. Nicely answered, Michael. The original Berners-Lee HTML specification was (almost) about pure structure. Of course you can have paragraphs within a list item. I was starting to get worried that with the advent of xhtml we'd thrown a tomato out with the radishes. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Guillotine Bug
Really helpful post - thanks!
Chris
On 5/10/05, Ingo Chao [EMAIL PROTECTED] wrote:
Liverpoolmom schrieb:
I think I've got it but don't understand the fix, where the fix goes in the
styles or what to place in the html. Can someone help me, please. I'm new
to this list and am just completing a six-week course at IWA/HTML Guild.
http://www.liverpoolmomsbnp.com/css-intermediate-class/chef.html
Welcome to the list, Cathy.
I don't see a guillotine as demoized in [1]
(please let me know if I am missing something obvious), but a similar
mechanism:
When I hover the Syracuse American Culinary Federation-link, the
div.content expands by a few pixel.
The trigger is: a:hover with a background's change in combination with a
percentage padding of the containing div.content:
a:hover { background-color: white; ... }
.content { border: ...; margin: 0.5em 2em 0.5em 0.3em; padding: 1%;
width: 70%; float: right; ...}
On page load or reload, the percentage padding is calculated correctly
with respect to the width of the viewport/body.
On hover, the percentage padding is re-calculated with respect to the
.content's width itself (introversion).
Because the content has a width of 70%, the padding:1% varies depending
on the hover-state: the padding shrinks on hover, and the text gets wider.
The use of percentages on padding and margins is a good idea in general
for fluid designs. But: this is the wonderful world of IE6's bugs.
- I would suggest to use padding:0.5em; instead.
(The dilemma is that there is no CSS fix known to me in this situation.
There are javasript fixes or fixes that change the rendering mode of the
page [2, but this read is confusing], or you could nest this link in
another div with a width.)
---
Another IE6 bug you encountered is the duplication of the right margin
of .content (compared with Firefox): approx. 4em instead of the defined
2em; The bug is duplicating the right margin of right floats, and the
left margin of left floats [3].
- The fix is: apply display:inline to the float.
This is illogical, but it works.
---
.content { border: ...; margin: 0.5em 2em 0.5em 0.3em; padding:
0.5em; width: 70%; float: right; ... display: inline;}
regards, Ingo
---
[1] http://www.positioniseverything.net/explorer/guillotine.html
[2] http://www.positioniseverything.net/explorer/percentages.html
[3] http://www.positioniseverything.net/explorer/doubled-margin.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it kosher...
On 5/6/05, Peter O. [EMAIL PROTECTED] wrote: ... to add a style block to the html body? I've read that it isn't, but it seems to work. Is there any standards-related or logical reason why this is not a good idea? IMO it's a bit of a hack, but preferable to a whole load of inline styles. Thoughts, people? I'm not that experienced with browsers and how they parse incoming tagsoup, but I thought the idea was to get the style rules before the content so the page can be displayed as soon as part of the content has downloaded, _but with your style rules already applied_. Then again, I could also understand downloading the HTML first so the page can be displayed inmediately :S I thought everyone would say it's invalid, but it is occasionally very useful (and I don't see why it should be thought of any differently than inline styling - a hack that works). The case in point was a series of pages where the CMS puts an HTML block (made by the content creators) inside a certain div. But one particular page is styled differently. I could (and probably will eventually) move the CSS for that special page into the site stylesheet, but it works for now as a style block at the start of the HTML block. I used to rely on this more when I was first starting to use CSS, but now I use an ID for each type of page, so it's much easier to single out a particular element on a particular page - so a site can have three or four different stylings of H2, say, depending on context. Just wondered what people though of this practise. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Is it kosher...
... to add a style block to the html body? I've read that it isn't, but it seems to work. Is there any standards-related or logical reason why this is not a good idea? IMO it's a bit of a hack, but preferable to a whole load of inline styles. Thoughts, people? Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] order of content
On 5/4/05, Neal Watkins [EMAIL PROTECTED] wrote: DO many people value the order of their content - for accessibility reasons or SEO reasons I do prefer floats - so I have done some 2 column layouts with the float right sideber neccessarily to come before the content. Is this overconcern ? I believe negative margins can fix this problem is it worth it - ? i do not like to overuse absolute postitioning to take content out of the flow... thanks Neal I am currently wrestling with float vs aboslute positioning, and am currently coming down on the side of absolute positioning. Box order is one reason; another is the detritus that floats usually produce - unneccessay, semantic-free clearing elements. Can't help feeling, though, that there must be a better way than both. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] firefox background-repeat
On 5/4/05, victor NOAGBODJI [EMAIL PROTECTED] wrote:
Hi all
I'm having some problem with this piece of code; firefox is not expanding the
background,
IE sure does.
body {
margin: 0;
padding: 0;
font-family: verdana, helvetica, arial, geneva, sans-serif;
font-size: 8pt;
color: black;
background: url(../images/wrapback.png) repeat-y;
}
Obviously I can't see your background, but Firefox will only make the
body container as big as it needs to be. If you need to see the
complete image, give body a min-height equal to the image height. (You
can fake min-height in IE - not supported - by using an IE hack like
this:
* html body { height:450px } /* or whatever */
Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
