Re: [css-d] after pseudo-class and link
Yes, that's exactly what I'm doing.
I was afraid this would be the answer. I was hoping to avoid modifying the php,
but I guess I'll have to go that route. Thanks.
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
On Sep 18, 2014, at 9:35 AM, css-d-requ...@lists.css-discuss.org wrote:
> I assume you're adding this as a background-image, is that correct?
> Something like:
> div:after {
> content: " ";
> background-image: url('');
> }
>
> You can't add tags to an :after. If this is something you *need* to link
> to, I would suggest adding it to the markup proper (wp template) as that is
> where it belongs.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] after pseudo-class and link
Is it possible to add a link to the :after? I'm adding an image via :after, and I want to make it clickable. Is this possible? Using WP, and it's not possible to add the image without hacking the template. However, it's easy to add it to the css, that's why the convoluted solution. Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] responsive css
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
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] IE 9 and floats
Tom,
That did it. I thought I had tried a width there earlier, but evidently not.
Everything else respects the width of the , but I guess IE just figures the
:after isn't bound by the because, well, it's after, so it goes as wide as
it can. The funny thing is that it only effected the first list, and not the
second.
Thanks
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
On Sep 27, 2012, at 9:49 AM, Tom Livingston wrote:
> Dave,
>
> Seems to me that w/o a width on the content you are adding with
> nav li:hover::after, is... well... after the which is the only
> place you have a width declared (that I saw). Or am I not thinking
> about :after correctly?
>
> HTH
>
>
> On Wed, Sep 26, 2012 at 10:59 PM, Dave Solko wrote:
>> I'm stuck with a weird problem with IE9 and floats.
>>
>> In every browser (so far) other than IE9, everything works fine, and the
>> page renders properly. However, in IE9, the top 4 nav items force the nag to
>> full width when you roll over them. I've narrowed it down to the FLOAT. I've
>> got no idea on how to fix this and would appreciate any solutions. I need
>> the float:right on the rollover to force the hover to appear at the right
>> edge of the navigation and not butted against the text. I've tried adding a
>> width to the hover, but that's didn't fix things. (Yes, there are some
>> wrapping issues in the nav, but those aren't important here.)
>>
>> The offending code:
>> nav li:hover:after {
>>content: "\2192";
>>float: right;
>>padding-right: 10px;
>> }
>>
>> The site in question: http://new.vintageposterbank.com/CodeIgniter/
>>
>>
>>
>> Dave Solko
>> Pixel Alchemy
>> d...@pixelalchemy.com
>> 513.300.2165
>>
>>
>>
>> __
>> 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/
>
>
>
> --
>
> Tom Livingston | Senior Interactive Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 9 and floats
I'm stuck with a weird problem with IE9 and floats.
In every browser (so far) other than IE9, everything works fine, and the page
renders properly. However, in IE9, the top 4 nav items force the nag to full
width when you roll over them. I've narrowed it down to the FLOAT. I've got no
idea on how to fix this and would appreciate any solutions. I need the
float:right on the rollover to force the hover to appear at the right edge of
the navigation and not butted against the text. I've tried adding a width to
the hover, but that's didn't fix things. (Yes, there are some wrapping issues
in the nav, but those aren't important here.)
The offending code:
nav li:hover:after {
content: "\2192";
float: right;
padding-right: 10px;
}
The site in question: http://new.vintageposterbank.com/CodeIgniter/
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css drop shadow on border
I have a 1px tool line at the bottom of a div. Is it possible to make a narrow drop shadow using 'box-shadow'? Everything I've been able to come up with is the height of the div. Ideally, I'd like something about 5px tall with the blur. TIA Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 __ 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] first-child pseudo-class on a class-level
On Dec 5, 2010, at 11:18 PM, Philippe Wittenbergh wrote:
On Dec 6, 2010, at 12:59 PM, Dave Solko wrote:
I'm trying to apply :first-child to an element with a class. It
only needs to work in safari (intranet). I'm using Joomla, so
changing the html isn't really an option. Can it be done?
I've been trying variations on:
.leading:first-child {
border-top: 1px solid #ccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
...
resources
foo
lorem ipsum dolor sit amet...
bar
lorem ipsum dolor sit amet...
In your case, the div with class .leading is definitely not the
first-child (it is the second, third, ... child of div.content).
And remember: those structural pseudo-classes count *elements*, then
checks if they have a class, etc.
Given the document structure above, maybe .description + .leading
{ background: red } ?
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
Then perhaps I should rephrase the question. Is there any way, given
the existing HTML to address the first
independently of the others? (in reality, there's 4 'leadings')
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] first-child pseudo-class on a class-level
I'm trying to apply :first-child to an element with a class. It only
needs to work in safari (intranet). I'm using Joomla, so changing the
html isn't really an option. Can it be done?
I've been trying variations on:
.leading:first-child {
border-top: 1px solid #ccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
...
resources
foo
lorem ipsum dolor sit amet...
bar
lorem ipsum dolor sit amet...
...
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] address element with classes
I'm trying to address an LI which has two classes (it's part of the nav): Is there any way to address the li ONLY when it has both these classes? On other pages, it has a different combination of classes. The page in question is http://clients.pixelalchemy.com/rsl2/?page_id=7 The client wants the sub-nav for the portfolio section to only show after you are in one of the sub-pages (yes, stupid, but they insist). The site is in wordpress, so I don't have great control over the html. Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] highlighting an input button
I'm not sure this is something which can be done via css, or if I need to resort to javascript. I have a form, and the client wants the submit button to highlight as part of tabbing to it. The catch is that the submit button is an image. I can change the state with a mouse, but this needs to be a tab. Is this even possible with css? Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css for print
I'm having a few problems with trying to format a print version of a page with css and was hoping for some help here. I'm using a separate stylesheet with media="print". 1. Is there a reliable way to rotate the page to landscape format for print without using activex? I need this to be cross platform. 2. Is there a reliable way to force page breaks? I've tried ' page- break-before: auto;' with mixed results. I'm guessing it's just not well supported. 3. How do I suppress the date, URL, page number and page title which is generated by web browsers when I print the page? Dave Solko Pixel Alchemy [EMAIL PROTECTED] 513.300.2165 __ 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] align 2 groups of text
I'm trying to align two groups of text so they butt up against each other, similar to decimal alignment. I want something that looks like: foo: bar hi: mom something: everything john: yaya eleven: some longish text ... about amplifiers but, I've been unable to do it without the html looking like: foo: hi: something: john: eleven: bar mom everything yaya some longish text... And I would like to avoid that if possible so it degrades gracefully. __ 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] stumped x 3
Thanks to those who responded.
At 7:57 AM -0400 4/18/06, Design Groups wrote:
>>>I cannot seem to get rid of the border around the 'close window' image. <<
>
>1) img {border:none;}
Of course that worked. I thought I had tried that one without
success. I guess that's what happens when trying to debug after all
day and nite in front of the screen.
>
>>>How should I go about trying put a 4px shadow around the white
>>>content area? <<
>
>I've done this before. This is a fixed-width site, so it's quite
>easy. Bascially, you need to create 3 images: a top, middle and
>bottom. The top and bottom should have a 1px strip of white (you
>background color for the content area) that's the width of your
>content area, and add your shadow to it at the top. Same with the
>bottom, only move the shadow to the bottom :) The middle should only
>be 1 pixel wide, and again - the same width of your content + the
>8px shadow color. Then do somethign like the following:
>
>HTML:
>
>
>
>stuff here
>
>
>
>
>
>CSS:
>
>#container {
>background-image:url{"top_shadow");
>background-repeat:no-repeat;
>}
>#content {
>background-image:url("middle_shadow");
>margin-top:1px;
>}
>#footer {
>background-image:url("bottom_shadow");
>background-repeat:no-repeat;
>background-position:left bottom;
>}
>
>You may have to play with that a bit, but it basically sets your top
>and bottom shadows, and the middle will expand as the content of
>your site expands. Works pretty well :)
I tried what you mentioned, but always wind up with a similar issue,
gaps between the backgrounds
http://www.pixelalchemy.com/clients/vibe/foo.html I've tried other
variations (border, margin, background-position), but all either have
the gaps, or the top and bottom disappear. Thoughts?
>>>It works/looks fine on a Mac, but horrendous on Windows. <<
As has been pointed out by several, it looks fine on firefox and
other windows browsers. I should have said "Looks horrible in ie."
So, any hints on how to fix that? I don't need ie5 compatibility.
Relevant links:
page in question: http://www.pixelalchemy.com/clients/vibe/test2.html
css: http://www.pixelalchemy.com/clients/css/test.css
should look like: http://pixelalchemy.com/clients/vibe/master.gif
__
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-d] stumped x 3
I have a three (most likely simple) CSS issues which are stumping me, and I would be grateful for some help. At http://www.pixelalchemy.com/clients/vibe/sample.html (css at http://www.pixelalchemy.com/clients/css/sample.css) I cannot seem to get rid of the border around the 'close window' image. Things look fine in Safari, but not in Firefox. How should I go about trying put a 4px shadow around the white content area? As you can see, the existing shadow (a background-image with repeat-y) has some banding issues. I also haven't been able to get the top or bottom shadows to tuck in nicely -- there's always a large, ugly gap. A mokup can be found at http://www.pixelalchemy.com/clients/vibe/sample.jpg One last one while I'm asking. I tried modifying MaxDesign's floattutorial 8 to create my navigation at http://www.pixelalchemy.com/clients/vibe/test2.html (ignore the ugly coloured borders). It works/looks fine on a Mac, but horrendous on Windows. How should I go about making a vertical navigation with an image to the right? I'm shooting for something which looks like http://pixelalchemy.com/clients/vibe/master.gif Please cc me, I'm on digest mode. TIA for any help. I'll return to lurking. __ 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/
