Re: [css-d] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
On Tue, Dec 20, 2011 at 1:00 PM, Elli Vizcaino wrote: >>Hello Gang, > >>I'm using a custom font for the input values of a newsletter sign-up form >>(found in the sidebar) and the top of the font gets cut off, despite the fact >>that I've declared the box-sizing to border-box. If I use the default >>content-box value and adjust the height to accommodate the padding it still >>gets cut off, though less in FF3.6. The other thing I notice, is that I get >>different results in different browsers. it doesn't push the text down to >>where I want it (in Chrome and FF), I'd like the text to sit somewhat in the >>middle of the input field's vertical space. But in IE9 it pushes it down to >>the bottom border of the background image. I've never encounter this issue >>before with padding but I'm guessing it's due to the input element itself? I >>did declare the element to display: block. http://www.e7flux.com/clients/sof/ Chrome / Mac it's cut off on the bottom. Firefox / Mac it's cut off on the top. In both cases removing the height fixes the problem in both cases. Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sibling + child combinator
On Mon, Nov 14, 2011 at 8:46 PM, Paceaux wrote:
> thank you, Philippe. That answers my question.
>
> I was "hoping" that the combinator could go upward in the document tree, but
> my experiments with that weren't working. It was an off-the-wall bet that
> I could change styles based on whether another element were present in a
> neighboring document tree. Ultimately,this confirms that the sibling
> combinator doesn't work as an "aunt" or "uncle" combinator.
Given your original code snippet:
It appears that .address and .newsletter are indeed siblings. So, could you:
.address {margin: 0; /* or whatever you need*/}
.address + .newsletter {margin-top: 14px;}
Instead of trying to add to the bottom of .address, just add to the
top of .newsletter if it follows .address.
Of course, if other elements are possible between them you'd need the
indirect selector. Assuming, of course, I've understood you question
correctly.
Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Preventing page breaks
On Thu, Sep 22, 2011 at 12:21 PM, Del Wegener wrote: > This is for print styles: > Is there a CSS method to prevent a page break inside and img, table, or > ? > I seems that page-break-inside:avoid is supported only by Opera and maybe IE > 8&9. As far as I know that is the method, and that is the support. Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] better way to write border tag?
On Tue, Jul 12, 2011 at 8:08 PM, Philippe Wittenbergh wrote:
>
> E {
> border: 1px solid black;
> border-width: 1px 0;
> }
>
> 6 characters less :-)
> (you /could/ omit the 'color' as well, if all you want is a border the same
> color as the text color)
>
> Philippe
You can even cut 5 more characters if you want to:
E {
border: solid #000;
border-width: 1px 0;
}
Or, you could just go with:
E {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text near bottom of div?
On Wed, Jun 22, 2011 at 5:01 PM, Koen van der Drift
wrote:
> Hi,
>
> I have a background image for my header (banner), and would like to
> put some text in the bottom right corner of the image. I can't figure
> out how to align the text near the bottom of the picture (or header
> div).
>
> See below for the html and css I am using now.
>
>
>
> My website
> Isn't it awesome?
>
>
> #header
> {
> background:url('my_banner.jpg') no-repeat;
> }
>
> # header h1 h2
> {
> text-align: right;
> }
Try something like this:
My website
Isn't it awesome?
#header {position: relative;}
#tag {position: absolute; right: 0; bottom: 0;}
~Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to retain CSS rounded corner during hover
On Fri, May 20, 2011 at 2:12 PM, Keith Purtell
wrote:
> On the top right of the draft version of a page, the Contact link is
> supposed to retain its rounded corner during hover. However, it's
> reverting to a rectangle, and I'm not sure why.
>
1) Move your background-color:#A6D7A6; off of .nav_man li to .nav_main li a
2) Add
#trnd a {
border-top-right-radius: 20px;
}
By the way, you only need the 'border-radius' property now as Webkit,
FF 4, Opera and IE 9 all support the standard syntax.
Tim W
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] three problems with my CSS code
See below...
On Sun, Feb 20, 2011 at 6:45 PM, Zachary Uram wrote:
> First problem:
> In my vertical menu I would like there to be a small space between
> each menubox's border (between the rows), right now the border of the
> bottom of one row and the top of the next row touch each other.
Simple enough, add top/bottom margin to your list items. You can
simplify your code to
ul.menu li {
border: 1px solid #6F3E04;
margin: .5em 0
}
And adjust the ul.menu styles as needed (remove the border, change the
background, etc.)
> Second problem:
> I want the menu centered vertically so it will appear in the middle of
> the page (on the left hand margin). Right now it is on the left margin
> but not centered.
>
Sorry, probably a JavaScript solution will be needed. CSS doesn't
really do vertical centering.
> Third problem:
> I want the left border of my box to be pushed so it
> is say 40px justified to the right of my menu box. Right now the
> vertical plane of the end of my menu box and the vertical plane of the
> beginning of my div box are on the same point. So I wish to change
> this behaviour:
First off, I'd suggest changing your margins from % to px or ems.
Percents are weird because they are based on the width of the box, so
if you box changes width, so will the margins.
But, to have enough space between your content and menu is fairly
straight forward, you just need a large enough left margin. Something
like this:
#content {margin: 1em 1em 1em 140px; padding: .5em; border: 2px solid #af6f65;
background: white ;}
(The margin value shorthand breaks down to -- margin: [top] [right]
[bottom] [left])
That will only get you part of the way though. For the rest you will
need a) JavaScript to vertically center you menu, b) float your menu
left c) position the boxes
Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] issue with blockqoute
On Sun, Jan 30, 2011 at 11:47 PM, Matthew P. Johnson wrote: > Interesting. It puts a space after the opening line as well. I may just have > to use an image eh? > Well, this works -- at least in my 2 minute test. Add the following 2 lines to your span.close rule: top: -.2em; vertical-align: top; It may not scale well, so test it out under various conditions. Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer on odd pages only
On Wed, Dec 22, 2010 at 2:02 AM, david wrote: > David Hucklesby wrote: >> >> On 12/20/10 3:40 PM, Evan Panagiotopoulos wrote: >>> >>> I create a string of html documents using php. Each document prints >>> one sheet of paper. I would like to have the documents that form the >>> odd sheets to have a footer where the even documents to have none. What you need are the @page rules; unfortunately they aren't support by most browsers. http://www.w3.org/TR/CSS21/page.html They have provisions for :left and :right pages, which do work in Opera. I haven't found any way to generate content using them yet though. Anyone know a) if that's possible b) the state of @page development? Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the box that clears float can't have margin?
On Fri, Dec 17, 2010 at 9:39 AM, sweepslate wrote: > I have two floats, one next to the other, content and side. There is a third > box under them, the footer. I'd like the footer to have some margin-top, but > I can't manage that, even with clear:both. > Per the spec: "Then the amount of clearance is set to the greater of: 1. The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared. 2. The amount necessary to place the top border edge of the block at its hypothetical position. " http://www.w3.org/TR/CSS2/visuren.html#flow-control So, if you put clear:both on your footer it will be pushed down just far enough to clear the floats; and thus no 'extra' margin. To get the space you want, try adding margin-bottom: 10px to your content. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
On Thu, Oct 28, 2010 at 2:32 AM, Michal Čizmazia wrote:
> Thank you all for your responses. To clarify, I want to have a label
> and an input form element along with another label and a select form
> element _in one row_.
Try this:
body, input, select {
font-family:Helvetica,Arial,sans-serif;
font-size: 12px;
}
select, input {
vertical-align: bottom;
border: 1px solid gray;
}
label {
display: inline-block; /* you may not need this depending on what you
want to do */
}
A couple of notes:
1) you don't need padding / margin on the select and input because
they don't have any by default
2) Change the label so it only wraps around the text, not text and input.
3) You may or may not need the display: inline-block.
Labels and inputs are all inline elements, so they will naturally sit
next to each other horizontally. About the only thing you need to do
is deal with vertical-align on the select/input. If you need / want to
size the input element, then inline-block will allow you to add box
model properties while keeping it in a horizontal line.
Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how can I align input and select elements
On Wed, Oct 27, 2010 at 5:24 AM, Michal Čizmazia wrote: > How can I align the input and select form elements in my test case, so > that their horizontal borders are aligned and all text including > labels is aligned to the baseline? What exactly do you want to do? Do you want the fields stacked on top of each other? Then put each in a (or other block-level element like ). SexSex Date of Birth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Possible webkit bug with overflow and width
Hrm. Using your original code but removing overflow: hidden proves
just as interesting. I'm getting 4 different behaviors -- FF, Webit,
Opera and IE.
On Wed, Oct 13, 2010 at 10:39 AM, Jan Limpens wrote:
> it seems to stem from floats inside of floats and becomes only visible if
> overflow:hidden, I suppose. An updated sample:
> (This is already a filed bug at webkit, I just wonder how people patch this
> behaviour right now...)
>
>
>
>
> float & width
>
>
>
>
> div {
>
> float: left;
>
> height: 50px;
> }
>
>
> div.section {
> background-color: green;
>
> }
>
> div.section div.content {
>
> background-color: red;
>
> overflow: hidden;
>
> }
>
> p {
> clear: both;
>
> }
>
>
>
>
> width: 0 => Bug
>
>
>
> some content that should
> not affect this div's width.
>
> width: 1px => good
>
>
>
> some content that should
> not affect this div's width.
>
>
>
>
> You are right, that it is the parent's width that's buggy. Yo do not
> see any red and only green...
>
> This seems so basic to me, I wonder what I could do...
>
> - Show quoted text -
>
> On Wed, Oct 13, 2010 at 12:19 AM, Thierry Koblentz wrote:
>
>> > This markup shows my problem:
>> > Webkit browsers seem to create an erroneous width on overflow:hidden
>> > elements inside of overflow:hidden elements, when their width is set to
>> > 0.
>>
>> Interesting bug. But I see it differently.
>> Webkit creates an erroneous width for the parent, not for the element with
>> a
>> 0 width.
>> The DIV shows as green, right? Not as red (background color of the nested
>> DIVs).
>> Also, try to reduce the test case and you'll see that overflow:hidden does
>> not have anything to do with this.
>>
>>
>> --
>> Regards,
>> Thierry
>> www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
>>
>>
>
>
> --
> Jan
>
> On Wed, Oct 13, 2010 at 12:19 AM, Thierry Koblentz wrote:
>
>> > This markup shows my problem:
>> > Webkit browsers seem to create an erroneous width on overflow:hidden
>> > elements inside of overflow:hidden elements, when their width is set to
>> > 0.
>>
>> Interesting bug. But I see it differently.
>> Webkit creates an erroneous width for the parent, not for the element with
>> a
>> 0 width.
>> The DIV shows as green, right? Not as red (background color of the nested
>> DIVs).
>> Also, try to reduce the test case and you'll see that overflow:hidden does
>> not have anything to do with this.
>>
>>
>> --
>> Regards,
>> Thierry
>> www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
>>
>>
>
>
> --
> Jan
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling form elements
On Tue, Sep 21, 2010 at 10:31 AM, Thierry Koblentz wrote: >> Hope this might be useful for beginners: >> >> http://onwebdev.blogspot.com/2010/09/css-styling-form-elements.html > > I don't think using a UL for this makes sense. > If you want to wrap every label/input pair then why not using DIVs? Isn't > what they are for? I use to style forms in a similar fashion, but now that all browsers support display: inline-block, I find that much easier to use for labels vs. floating them all. Has anyone else been using inline-block? Discovered any problems with it? Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
> I like this. Hut shouldn't the expansion also work when the menu item is
> selected by keyboard? I tried adding
> #navigation li a:active {
> -webkit-transform: scale(1.5);
> -moz-transform: scale(1.5);
> -o-transform: scale(1.5);
> }
>
> But it did not have the effect I expected. Why not?
I've updated my example with :focus and :active. I also tossed in an
Easter Egg...
For browsers that don't support the transform, I added some good old
color to the link text. Ideally I'd change the icon color as well, but
I'm not a graphics person.
Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
> On 16/06/2010, at 5:44 AM, tedd wrote: > > While it's neat, but it's a misnomer. That's not a fisheye, it's just > a magnification. > > Hmmm, you're right but you can't blame him Yes, I realize that, but as Chris points out, I didn't name it, Gabrielle (original post) did. And I suspect she got the name from somewhere else. > I messed with this style for ages a long time ago and never got the results > I wanted unless I used flash so I gave up. I like this technique but can you > get it to magnify from the centre point of the image outwards? Yes, at least a bit. Look for the line 'tranform-origin' and alter the values (horz vert). My version has the zoom focused at the top center. You could easily change that to 50% 50% to zoom from the center of the box (it won't be the center of the image in this case). > However what i really wanted was that > they all stayed in the width of their containing div, expanded from the > centre point outwards, and depending on how close you were to the centre, > how much the image expanded. Hmm, I don't know about changing the amount of expansion based on proximity to center. I'm sure someone wiser than me could do something with JavaScript. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
On Tue, Jun 15, 2010 at 5:49 PM, Paul Novitski wrote: > All this stuff is good to know and I'm glad for the discussion. > > However, for the case at hand, it seems like an awful lot of > complicated, proprietary fuss merely in order to use background > images in the menu. The CSS isn't proprietary, merely vendor prefixes. It is, as someone else pointed out, avant-garde. The effect comes from the CSS3 and isn't finalized, hence the vendor prefixes. Once the spec is finalized, the prefixes can be removed. For example, we have been able to use -moz-border-radius and -webkit-border-radius for a couple of years now; my understanding is that the spec is 'complete' and the next version of browsers (including Opera and IE9) will all support the simpler border-radius. >May I ask, why not simply use foreground icon > images and change their height or width on hover? That would be > cross-browser-compatible for anything that can parse CSS. This is cross-browser compatible. For browsers that do not support the transform, nothing happens but they still get the text and image. Of course, there could be other changes, such as color and image swapping, going on in addition to the transform that those browsers would implement. > I don't see > that having the icon in the foreground is any more of an issue than, > say, having a foreground thumbnail image in a gallery be the link to > its larger counterpart. Isn't this a case where one could argue both > sides of the question, "Is it content or is it presentation"? Yes, this would fall into a semantic debate (see Thierry's reply). But for the CSS I used it doesn't matter if the image is foreground, background or not there. The transform effects the element. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
> Hi all! > I'm pretty inspired this time: > > http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html > Gabriele Or, we can do it with just one image and a little bit of CSS3 magic: http://tjameswhite.com/demos/fisheye/ My demo uses Gabriele's original code, minus all the extra background images and heights. Instead, I've added CSS transition and transform to replicate the fisheye. Yes, this requires vendor prefixes. It should work in the latest versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I didn't bother making a fall back for IE, which could be done easy enough. Enjoy, Tim tjameswhite.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling forms with CSS
On Mon, Mar 22, 2010 at 3:22 PM, David Hucklesby wrote: > BTW - I notice that tabbing through the form, I cannot reach the radio > buttons... On the Mac you have to specifically enable it to tab to radio buttons. If I recall, it's under system preferences (sorry, don't have a Mac handy at the moment). __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to replace this table row in CSS-only ???
On Fri, Feb 5, 2010 at 6:09 PM, Mike Schleif wrote:
> OK, I have two (2) elements sitting on an , one left justified and
> the other right justified:
>
> Abe Lincoln Biographical Info
> -
>
> NOTE: The left text is larger (e.g., ) than right text; but, BOTH
> must share same baseline.
HTML:
Abe Lincoln
Biographical Info
CSS:
h1 {margin: 0; font-size: 2em;}
hr {margin: 0;}
#head {
position: relative;
height: 2.5em;
}
#head h1, #head span {position: absolute; bottom: 0; line-height: 1;}
#head h1 {left: 0;}
#head span {right: 0;}
I would probably use a border-bottom on the #head element instead of a .
Note that you will need something like height to keep the containing
box open since the positioned elements are removed from the normal
flow.
A couple of keys to getting your baseline are the line-height and
margin on .
~ Tim W.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: counter-reset and counters() in Opera and Konqueror
>> Believe it or not:
>>
>> li:before { content: counters(list, ".") ". " }
Interesting-- works for me just fine in Opera (9.63), but it fails in Chrome.
I thought the idea of 'counters' was for nested lists, which this test
case doesn't have. I created my own quick nested version:
one
two
point-one
point-two
three
with
ol {counter-reset: list; list-style: none;}
li:before {
counter-increment: list;
content: counters(list, ".") " ";
}
Which worked just fine in all browsers (that generate content).
Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Before & after
On Mon, Feb 23, 2009 at 2:48 PM, Jørgen Farum Jensen wrote: > Various places I've seen these pseudo-elements > ::before and ::after. > What's the difference between these and > :before and :after? The double colon is a change for CSS 3 pseudo-elements http://www.w3.org/TR/css3-selectors/#changesFromCSS2 Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Default Media Attribute
On Tue, Apr 1, 2008 at 7:29 PM, 5h4rk @ gmail <[EMAIL PROTECTED]> wrote: > > can anyone tell me what is the default value for the media attribute > for the stylesheet element? That is, when you don't set the media > attribute. The default is "all". ~~ Tim __ 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] start an ordered list at a number > 1
On Feb 7, 2008 7:57 PM, Jim Nannery <[EMAIL PROTECTED]> wrote: > > So much for going off list. *doh* wrong button. Mea culpa. > To be clear, attributes and html tags that are deprecated should only > validate under HTML *Transitional* and XHTML *Transitional* Doctypes. > With > an HTML 4.01 *Strict* Doctype, deprecated tags and attributes will not > be > valid. > Thank you for clarifying Trans vs Strict. tim __ 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] start an ordered list at a number > 1
On Thu, 07 Feb 2008 09:50:56 -0800 (PST) > [EMAIL PROTECTED] wrote: > > > Hi > > > > Is there a way to start an ordered list at anything > > other than 1? > > > This is really an HTML question, not CSS so I'm replying off list. You can use (whatever number you need) to start a list at a new number. Or, you can use to skip numbering within a list. Both attributes are deprecated, so they are only valid under HTML 4.01 or XHTML 1.0 Transitional. Tim __ 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] Help in blockquote font
Mario,
On Jan 19, 2008 6:59 AM, Mário Gamito <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I have this blog - http://www.absinto.org - and have blockquote defined
> as:
>
> blockquote {
> font-family:"Times New Roman", "Times", serif;
> background: url(images/start_quote.png) top left no-repeat;
> }
>
>
> The quotation doesn't appear in Times New Roman or the others defined in
> the blockquote.
>
The font-family isn't showing up because you have .entrybody p defining the
font-family as Verdana (about 3 different times). This rule has a higher
specificity (0,0,1,1) than the blockquote rule (0,0,0,1), so the blockquote
font-family never gets applied.[1]
You should be able to simplify your entire stylesheet by removing most
instances of font-family, leaving only your body {font:;} rules. Since
you have font declared on body, most other elements will inherit that style.
Hope that helps,
Tim
[1] Specificity: http://www.w3.org/TR/CSS21/cascade.html
(PS: now I have to try to translate your entry on Marillion!)
__
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] Dont Understand This
>If you look at this in FF or IE the select fields are shorter then the
>text
>fields, while in Opera they are correct.
>
>What I don't understand is they are all the same length.. 134px..
Exactly, they are all 134px and the content inside is longer than that, so
Firefox truncates the text. Notice in Opera the option boxes are wider.
Try adding:
select option {width: 12em;} /* may need to alter the width number */
In a quick test that worked in FF; you'll need to test it everywhere.
~ Tim
tjameswhite.com'>http://www.tjameswhite.com";>tjameswhite.com
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.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] Styling Valid xhtml Tables
>I have two tables ... To make them accessible >I've added IDs to each header and headers to each row. >The problem is because both tables contain the same unique IDs the >page >will not validate as xhtml 1 transitional. > >Is it ok to use classes instead in this situation? Or what else would >you advise? I don't believe so. The system you are using is a header/id pairing. Assistive technologies will be looking for matching ids and headers. So, you either need to use unique ids for each table, or you could use scope="col" (and/or scope="row"). Since you have fairly simple tables, using scope would be my recommendation. Of course, those with more accessibility knowledge than me, please correct. ~ Tim tjameswhite.com'>http://www.tjameswhite.com";>tjameswhite.com __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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] Float problem
>I¹m trying to make the text (textdiv) appear next to the image (like >in the >example.) >But, I don¹t want to give the div that contains the texts a width. If >i >remove the width, the textdiv appears under the picture. That's because you have the textdiv floated:left. Remove the float and the text will be fine. Of course... >I putted the text a div because text may not wrap around the image. You don't want the text to wrap under the image (if present)? Then you need the margin or width. I may not be understanding exactly what you want to do. Pages with image need to have the "left column" clear, pages without images text should be flush left (no "left column")? Tim __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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] navigation height expanding!
Jeff said:
>
>#mainNav a {
>float: left;
>}
>
>
>my problem is that ie6 (i'm starting with this ie) is expanding the
>links so
>that they are not floating right next to eachother. they float left
>but it
>looks like steps going down tus expanding the height of the box.
Try changing
#mainNav a
to
#mainNav li.
In a quick test that seemed to do the trick.
~ Tim
tjameswhite.com'>http://www.tjameswhite.com";>tjameswhite.com
Never Miss an Email
Stay connected with Yahoo! Mail on your mobile. Get started!
http://mobile.yahoo.com/services?promote=mail
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can't assign links specific styles
Do you have a URL we can look at?
~ Tim
tjameswhite.com'>http://www.tjameswhite.com";>tjameswhite.com
- Original Message
From: Skip Evans <[EMAIL PROTECTED]>
To: Fora <[EMAIL PROTECTED]>
Cc: CSS Mailinglist
Sent: Saturday, January 13, 2007 7:59:31 PM
Subject: Re: [css-d] Can't assign links specific styles
Hey Fora,
I tried what you have below and got the same results.
Any other ideas?
Thanks!
Skip
Fora wrote:
> Hi Skip,
>
> I'm not quite sure, but it looks to me like you're missing a specification
> in your a:visited.
>
> Now you have .shoplogo a, a:visited {
> stuff
> }
>
> The .shoplogo is not inherited so your a:visited is refering to ALL
> a:visited anchors.
>
> Try with
>
> .shoplogo a, .shoplogo a:visited {
> stuff
> }
>
> .pagelink a, .pagelink a:visited {
> stuff
> }
>
>
> I'm sure people will correct me if I'm wrong, or add when there's more to
> it.
>
>
> HTH,
>
> A.
>
>
>
> __
> 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/
>
--
Skip Evans
Big Sky Penguin, LLC
61 W Broadway
Butte, Montana 59701
406-782-2240
=-=-=-=-=-=-=-=-=-=-=
Check out PHPenguin, a lightweight and versatile
PHP/MySQL development framework.
http://phpenguin.bigskypenguin.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/
Have a burning question?
Go to www.Answers.yahoo.com and get answers from real people who know.
__
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 and IE6 coexisting
Don't forget the stand alone installations: http://browsers.evolt.org/?ie/32bit/standalone Everything from v3 to v6. ~ Tim tjameswhite.com - Original Message From: Chris Williams <[EMAIL PROTECTED]> To: Stephen Walter <[EMAIL PROTECTED]>; css-d@lists.css-discuss.org Sent: Monday, December 11, 2006 12:49:40 AM Subject: Re: [css-d] IE7 and IE6 coexisting Yep, MS is now supporting it. See this: http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-sin gle-machine.aspx -Original Message- From: Stephen Walter Subject: [css-d] IE7 and IE6 coexisting Anyone got some clues as to how I can have both installed on the same machine? __ 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/ Have a burning question? Go to www.Answers.yahoo.com and get answers from real people who know. __ 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 Positioning problems
Your .date is on an inline element () -- margins don't work particularly
well on inline elements.
You could either set the .date element as a block (either .date {display:
block;} or change the do a ) OR you could set padding-top: 10px on
#details.
~ Tim
tjameswhite.com
- Original Message
From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Thursday, December 7, 2006 5:21:29 PM
Subject: [css-d] CSS Positioning problems
Hi
I am trying to create a design from a photoshop mockup in CSS but at present
I m having some major problems for example the date text should be 10 pixels
down but it stays in the same place so it seems if it ignoring the
margin-top: 10px; part?
Any ideas?
#details
{
float: right;
width: 160px;
}
.date
{
margin-top: 10px;
margin: 0px;
padding: 0px;
font-weight:bold;
}
Sunday November 19th
Do you Yahoo!?
Everyone is raving about the all-new Yahoo! Mail beta.
http://new.mail.yahoo.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] Need Horz Scroll in IE
We have a page that contains a series of nested lists -- standards and sub-standards and sub-sub-standards, etc. Each sub level is indented from it's parent. The problem I have is that there could be something like 8 or 10 sub levels, which can push the content wider than the browser. (Or alternately, if the browser is resized, the content can be wider than the shrunken viewport.) Firefox correctly adds horizontal scrolling. IE, however, does not -- it opts for chopping off the content. The site is built on ems, and the list items are positioned: relative to create the needed indenting. I've tried adding various widths to the container , as well as overflow: rules, but no luck. Has anyone encountered this? I suspect the positioning is the problem as the other elements on the page flow nicely when the page or browser is resized. (Sorry I don't have an example. The pages are on an internal development server. They are also rather complex.) ~ Tim www.tjameswhite.com __ 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/
