Re: [css-d] blog: centering multiple line content with css
Roger Keays wrote:
Hi All,
I've just finished a blog on centering multiline content (horizontally
and vertically):
http://www.sunburnt.com.au/publications/design/center-multiple-lines-with-css
The method used is display: table/table-cell for standards browsers, and
a javascript expression to position the content for IE.
Hope it helps someone!
Roger
Hi Roger
Making it work and all so simple, but is it wise to use the star hack as you
have as it causes parsing errors in the CSS and IE6 and IE7 can be targeted
independently and be valid with
* html #test a, *+html #test a {display: block;position: relative;}
The later selector targeting IE7 alone.
Kind Regards, Alan
http://css-class.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] Reliable Opera-only filter?
Micky Hulse wrote:
I would prefer to use a filter for the latest version of Opera that will
be a good long-term fix. Basically, Opera gives a few extra pixels of
top-padding, on a form input, that I would like to compensate for... I
can live with how it is now, but thought I would ask ya'll before I
scratch it off of my to-do list. :)
Thanks!
Cheers,
Micky
Rare is the day Opera gets it wrong.
@media screen and (min-width: 0px){
#foo { padding: ... ;}
}
And mind the last brace.
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] clearfix tweak needed on IE7
Hi guys. Normally I use the following CSS code for clearfix.
For exemple the following code does not clear properly on IE7:
div class=clearfix
div style=width:50px; height:50px: background-image:url(image.png)
no-repeat 0 0; float:left
/div
p
blablabla blablablabla blablabla blablablabla blablabla
blablablabla
blablabla blablablabla blablabla blablablabla blablabla
blablablabla
blablabla blablablabla blablabla blablablabla blablabla
blablablabla
/p
/div
.clearfix:after{
content:.;
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix{
height:1%;
}
Thanks,
Phillip
__
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] Reliable Opera-only filter?
On Oct 6, 2007, at 10:15 PM, David Laakso wrote:
@media screen and (min-width: 0px){
#foo { padding: ... ;}
}
And mind the last brace.
Unreliable. That will also target Safari 3 and newer, Konqueror 4
(afaik).
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearfix tweak needed on IE7
On Oct 6, 2007, at 10:27 PM, Phillip Cavaco wrote:
Normally I use the following CSS code for clearfix.
For exemple the following code does not clear properly on IE7:
[...]
.clearfix:after{
content:.;
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix{
height:1%;
}
Assuming your document is in strict, standard compliant mode, IE 7
doesn't see any of your clearing techniques.
*] no support for generated content
*] * html hack is not supported.
You could add
*+html .clearfix {zoom:1} /* haslayout trigger */
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Reliable Opera-only filter?
Rare is the day Opera gets it wrong.
@media screen and (min-width: 0px){
#foo { padding: ... ;}
}
This is hardly a long term fix.
Safari 3 (due for release along with the next version of OS X within
the next couple of weeks) will support media queries. To exclude it
(and other browsers using a recent version of WebKit which already do
- iPhone *cough*), you'd need to do:
@media screen and (min-width: 0px){
#foo { padding: ... ;}
:root #foo { padding: original_value ;} /* reset Safari 3 */
}
But note, even this will break the moment that either Opera supports
:root or the Gecko engine supports media queries. Both of these
outcomes are hardly unlikely.
Opera 8 also supports media queries. Your question said you only
wanted to target the latest version (though whether you mean 9.5a or
9.23 you didn't specify). But Opera 8 certainly isn't the latest
version and would be targeted.
The only hack I know that's been found to distinguish between 8 and 9
is this one
http://thomas.tanreisoftware.com/?p=11#op9
(though he's unaware of the :root hack above)
So revisiting the code snippet, we now have:
@media all and (min-width:0px){
head~body #foo { padding: ... ; } /* Opera 9 */
:root head~body #foo { padding: original_value ; } /* reset Safari 3 */
}
The same caveats apply though.
It might be more useful to you to actually post the problematic html
and css (or better a link to a page to a page containing it). There
might be a better solution than patching Opera and crossing your
fingers...
__
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] Reliable Opera-only filter?
You could check at this page http://www.webdevout.net/css-hacks#in_css-selectors Micky Hulse wrote: I would prefer to use a filter for the latest version of Opera that will be a good long-term fix. Basically, Opera gives a few extra pixels of top-padding, on a form input, that I would like to compensate for... I can live with how it is now, but thought I would ask ya'll before I scratch it off of my to-do list. :) Thanks! Cheers, Micky __ 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] Safari Overflow:Auto Issue?
I see, so the element using overflow (#cast) is caught up in the float as well,
and part of its height is hidden by the floated element (in this case the
#marquee div). Does that sound right?
Since the #cast element is the only one that uses overflow:auto, I simply
cleared it with clear:both. Please let me know if this has improved the page:
http://monna-vanna.com/cast/
Chris
From: [EMAIL PROTECTED]
Date: Sat, 6 Oct 2007 10:14:52 +0900
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Safari Overflow:Auto Issue?
On Oct 6, 2007, at 8:22 AM, Chris Davis wrote:
On a newly developed site I recently got an email saying that the
content on one page of the site only took up 10% of the screen: far
too little to see! The page makes use of overflow:auto and the user
is browsing with Safari on a Mac. Can anyone else see the problem
and suggest fixes?
The page is here: http://monna-vanna.com/cast/
Yes, that is a known bug in Safari 2.0.0.x, and fixed in Webkit
nightly builds /Safari3beta.
it is cause by the overflow on the element (#cast), nested in a block
with clear:both.
Fix: Use something like the easy clearing technique [1], or add a
clearing element before #content:
#marquee {zoom:1} /* !-- for iExploder */
#marquee::after {clear:both; content:'[.]'; display:block;
visibility:hidden; height:0;}
#content {
/* clear:both;*/ /* !-- remove */
}
[1] http://www.positioniseverything.net/easyclearing.html
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
_
Peek-a-boo FREE Tricks Treats for You!
http://www.reallivemoms.com?ocid=TXT_TAGHMloc=us
__
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] blog: centering multiple line content with css
Roger Keays wrote: http://www.sunburnt.com.au/publications/design/center-multiple-lines-with-css http://www.gunlaug.no/contents/wd_additions_20.html If only I had found that yesterday! Options are always nice to have. Since your source-code construction is far from valid, and the CSS quite complicated and relying on non-valid hacks, I thought a redo was in place. Only the IE-expression itself is non-valid... http://www.gunlaug.no/tos/alien/rk/css-centering-shared.html I just changed your 'top: expression' to a 'margin-top: expression', which made absolute-positioning unnecessary. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari Overflow:Auto Issue?
On Oct 6, 2007, at 11:33 PM, Chris Davis wrote:
I see, so the element using overflow (#cast) is caught up in the
float as well, and part of its height is hidden by the floated
element (in this case the #marquee div). Does that sound right?
No, the width of that element collapses to near 0.
This is caused by the 'clear:both' rule on the parent (#content )
Since the #cast element is the only one that uses overflow:auto, I
simply cleared it with clear:both. Please let me know if this has
improved the page: http://monna-vanna.com/cast/
No changes.
The changes I suggested in my previous message do fix the issue:
* move the 'clear:both' away from #content
* clear inside the top block (#marquee)
#marquee {zoom:1} /* !-- for iExploder - hasLayout trigger to
contain the floats */
#marquee::after {clear:both; content:'[.]'; display:block;
visibility:hidden; height:0;}
#content {
/* clear:both;*/ /* !-- remove */
}
PS - please use bottom posting when replying on this mailing list.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari Overflow:Auto Issue?
At 9:33 AM -0500 10/6/07, Chris Davis wrote:
I see, so the element using overflow (#cast) is caught up in the
float as well, and part of its height is hidden by the floated
element (in this case the #marquee div). Does that sound right?
Since the #cast element is the only one that uses overflow:auto, I
simply cleared it with clear:both. Please let me know if this has
improved the page: http://monna-vanna.com/cast/
Chris
It fails not only with Safari for the Mac, but also FireFox. In FF,
the scroll bar is about 1em to the right of the scroll box.
Perhaps setting a class width for textarea might work.
textarea.bios
{
width: 50em;
height: 20em;
}
I do that commonly and never encounter such problems.
Cheers,
tedd
--
---
http://sperling.com http://ancientstones.com http://earthstones.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] repeating a header style
On Fri, 5 Oct 2007 17:32:00 +0100, Donna Watch wrote:
[...]
I am trying to achieve:
the html has the text for, say, H1 and then using css, to obtain the result of
image left, H1 as defined in html text, image right followed by an image
underneath
all in the same class? i.e the style and images in the css so if I need to
change them
site wide I can?
I want a repeat look for all headers without repeatedly placing the graphics
round a
simple css defined H1 in an external sheet.
If these images are decoration, you could use background images.
Until more browsers support CSS3 though, you cannot put more than
one background image in one element.
If you add extra markup to the H1 (surrounding DIVs, maybe a SPAN
inside) to add the necessary hooks for adding the images, then what
you ask for is certainly possible.
HTML:
div id=header
h1spanThis is some heading text/span/h1
/div
CSS:
#header {
height: ???px: /* tall enough to show the image */
background: #336 url(/images/head-bottom.jpg) no-repeat center bottom;
}
/* assuming you only have one H1 per page: */
h1 {
margin: 0; padding: 1em;
line-height: ???px; /* tall enough to hold the images */
color: #fff;
background: #000 url(/images/left-image.jpg) no-repeat top left;
}
h1 span {
background: url(/images/right-image.jpg) no-repeat top right;
}
I may be missing some declarations, but I hope you get the gist.
Cordially,
David
--
__
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] clearfix tweak needed on IE7
On Oct 6, 2007, at 10:27 PM, Phillip Cavaco wrote:
Normally I use the following CSS code for clearfix. For exemple the
following code
does not clear properly on IE7:
[...]
.clearfix:after{
content:.;
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix{
height:1%;
}
On Sat, 6 Oct 2007 22:46:42 +0900, Philippe Wittenbergh replied:
Assuming your document is in strict, standard compliant mode, IE 7 doesn't
see any of
your clearing techniques. *] no support for generated content *] * html hack
is not
supported.
You could add
*+html .clearfix {zoom:1} /* haslayout trigger */
Of course, you could simply use:
.clearfix {zoom: 1;}
since only IE 5/6/7 Win recognize zoom.
Won't fix IE 5.01 Win though. You will still need the height: 1%;
if you care about that browser.
(Thanks, Philippe, for the IE7 filter. I did not know about that.)
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS to eliminate dotted borders on hyperlink clicks
I remember reading somewhere about CSS you can add, so that links won't get the dotted border around them when you click on the links , but I cannot remember what it is. Can anyone refresh my memory? This may be just a Firefox thing. -- ::Bruce:: __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS to eliminate dotted borders on hyperlink clicks
I guess you're talking about outline. Bruce Gilbert wrote: I remember reading somewhere about CSS you can add, so that links won't get the dotted border around them when you click on the links , but I cannot remember what it is. Can anyone refresh my memory? This may be just a Firefox thing. __ 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] Validation problems
On 06/10/2007, Tim Offenstein [EMAIL PROTECTED] wrote: I am reviewing a page for a client (www.physics.uiuc.edu) that uses a hover class and some events. On lines 178, 194, and 202 in the HTML a call for onmouseover, onfocus, onmouseout, and onblur events occurs. You're trying to apply onblur and onfocus to a div. Since divs in HTML 4 (or any other markup language standard) cannot hold the focus, these events can never fire, so the attributes are not in the list of allowed attributes for the div element. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting width on items in a row
Gunlaug Sørtun on 03/10/07 01:45, wrote: Adam Hardy wrote: I'm looking for a simple solution to a width problem on a page showing rows of items with various other bits of info for each row. http://www.gargantus.com/sylvie/list.html In the first block on this page, I use a div per row and I can't find a way of setting width. The second block is a table. Are you thinking along these lines...? http://www.gunlaug.no/tos/alien/ah/test_07_1003.html I made no attempt to fine-tune anything, since I didn't want to change the source-code itself. Styles added in page-head. A class for each column (or selectors that IE6 doesn't support), will improve things. Yes I am thinking along those lines - and your solution is tantalisingly close, if only it behaved itself in IE6, which annoyingly drops the right-most inline box down to the next line for some reason. I was totally ignorant of the effect the overflow:hidden property here! You've managed some sort of vertical alignment on the row, which comes out nicely despite using the float attribute. My attempts with float:left caused the vertical-alignment of the imgs to disappear and I struggled with it for ages. How did you do that? Maybe I'm relying too much on the CSS as applied by firebug - I'm not completely confident about its capacity. I've put my page up at the same address as above - why isn't CSS applying the same vertical-align: middle to those imgs? I don't see a reason when comparing it with yours (also above) Regards Adam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting width on items in a row
Adam Hardy wrote:
Gunlaug Sørtun on 03/10/07 01:45, wrote:
Are you thinking along these lines...?
http://www.gunlaug.no/tos/alien/ah/test_07_1003.html
Yes I am thinking along those lines - and your solution is
tantalisingly close, if only it behaved itself in IE6, which
annoyingly drops the right-most inline box down to the next line for
some reason. I was totally ignorant of the effect the overflow:hidden
property here!
The drop happens in all browsers at narrow windows. That's how floats
behave when they run out of space. Can be prevented by providing a
'min-width' - and a workaround for old IE6.
'overflow: hidden' contains floats - as long as it isn't restricted by
given dimensions. Quite buggy effect in some browsers.
You've managed some sort of vertical alignment on the row, which
comes out nicely despite using the float attribute. My attempts with
float:left caused the vertical-alignment of the imgs to disappear and
I struggled with it for ages. How did you do that?
You can modify appearance more or less as you want with CSS, only
limited by imagination and browser-support.
Example: http://www.gunlaug.no/tos/alien/ah/test_07_1007.html
...which is still far from optimized and I've done nothing to simulate
proper CSS support ('min-width' etc.) in IE6.
Maybe I'm relying too much on the CSS as applied by firebug - I'm not
completely confident about its capacity.
Don't know, as I don't have much experience with firebug. I have the
whole set of tools/extensions in Firefox, but find it easier and faster
to debug and work on html, CSS and script in dedicated and fine-tuned
authoring-software and extension-free browsers.
I've put my page up at the same address as above - why isn't CSS
applying the same vertical-align: middle to those imgs? I don't see a
reason when comparing it with yours (also above)
Notice that you have 103 validation errors in your page...
http://validator.w3.org/check?uri=http://www.gargantus.com/sylvie/list.html
...while I have 0 - zero - in live copies of the very same page.
Notice also that I use the correct - and strict - doctype that reflects
the source-code I serve.
You OTOH are using the wrong - and transitional - doctype.
Don't do that...
http://www.gunlaug.no/contents/wd_additions_25.html
Transitional means almost standard in Firefox and other non-IE
browsers. That almost standard means non-standard treatment of images
that are not aligned with real text in an element, which tends to give
one appearance in non-IE browsers and another in IE.
BTW: if you have tabular data and want them to appear as tabular data,
why not use HTML table? After all; that's what HTML tables are for.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearfix tweak needed on IE7
At 11:00 AM -0700 on 10/6/07, David Hucklesby wrote about Re: [css-d]
clearfix tweak needed on IE7:
Of course, you could simply use:
.clearfix {zoom: 1;}
since only IE 5/6/7 Win recognize zoom.
Won't fix IE 5.01 Win though. You will still need the height: 1%;
if you care about that browser.
You can support IE5 with an IF IE5 clause with IE6/7 getting its
clearfix via another IF that only checks for IE6+.
--
Bob Rosenberg
RockMUG Webmaster
[EMAIL PROTECTED]
www.RockMUG.org
__
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/
