Re: [css-d] Changing Visibility on Just One Element

[Joergen Lang]

I think the mistake lies in your selector.

#cart-contents is very likely nested *inside* the form, not surrounding 
it - at least according to your html. So


  #cart-contents form

... will probably not work as expected.

Try #cart-contents legend { visibility: hidden; } or { display: none; 
}and see if it works.


display: none; gets rid of the gap in the border surrounding your fieldset.

Otherwise a look at the 'real' code would be of help.

Hope this helps,

Jørgen

Am 17.12.14 um 21:24 schrieb Gates, Jeff:


I only want to hide one headline. Here is the code for that headline:
fieldset id=cart-contents
legend accesskey=yYour Shopping Cart/legend
/fieldset

But I want these headlines to remain visible. Here is the code for these
other headlines:

fieldset id=billing-address
legend accesskey=bBilling Information/legend
/fieldset

fieldset id=payment-tabs
legend accesskey=pPayment Information/legend
/fieldset


fieldset id=comments
legend accesskey=cAdditional Comments to Museum Staff/legend
/fieldset


I¹ve tried this to hide only ³Your Shopping Cart²:

#cart-contents form fieldset legend {visibility:hidden;}

But this does nothing. It doesn¹t hide ³Your Shopping Cart².

Considering I don¹t have access to the page itself as it¹s ³hardcoded² by
the shopping cart vendor and I can only change CSS, can anyone tell me how
I can hide the first headline without hiding all the others?


__
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] Two classes, two conflicting rules, which wins ?

[Joergen Lang]

I tend to agree. Since .c2 is defined after .c1 it takes precendence 
over the first declaration. AFAIK the order in which the classes are 
defined within the attribute do not influence.


Far more than anyone could ever ask for is here:

http://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css

Jørgen Lang

Am 01.10.13 20:45, schrieb Chris Rockwell:

http://www.w3.org/TR/CSS2/cascade.html#cascading-order

In your example, width is 30em;


On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:


Consider :

 .c1 {width: 20em}
 .c2 {width: 30em}

 DIV id=i1 class=c1 c2.../DIV
 DIV id=i2 class=c2 c1.../DIV

What widths do i1 and i2 have, and why ?  Answers by reference
to the relevant W3C specification(s), please, not by experiment
or guesswork !


__
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] Label Wrap

[Joergen Lang]

Here's one way:

form {
  display: table;
}

input, label {  
  display: table-cell;
}

Here's another:

form {
  position: relative;
}

label {
  position: absolute;
  left: 2em;
}

In these examples I'm using the form itself for context 
(table/positioning). If this collides with other elements in the form, 
consider surrounding your checkbox with an extra div.


Hope this helps,

Jørgen

Am 13.08.13 01:16, schrieb Karl DeSaulniers:

So this check box is in a responsive layout and when the page is
shrunk width wise, the text wraps. This is good, except the text
wraps under the check box. I want it to be flush with the right side
of the check box and not to go under it.


Karl DeSaulniers Design Drumm http://designdrumm.com



On Aug 12, 2013, at 6:14 PM, Karl DeSaulniers wrote:


Sure.. sry.

input id=terms type=checkbox /label for=termsnbsp;I
wkerjle lkejlweljljgguu poopgpjaljtlek lksskskkjglsl
alkejehhwgkejlwjtj wllkjelkjwljjt llwllwlelwlrjlwkelke
wllkewlkelkjjlkjrtjtjwiiirein pgapogd./label


__
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] Label Wrap

[Joergen Lang]

Could we see some code, please?

Jørgen

Am 13.08.13 01:05, schrieb Karl DeSaulniers:

Hello all, I have a input check box and a label to the right of it. I
want it so that the text in the label does not wrap below the check
box but still wraps to the side. How can I do this? TIA.

Best,


__
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] Safari re-resize problem: floats and media queries

[Joergen Lang]

Am 26.01.13 06:24, schrieb David Laakso:

On Fri, Jan 25, 2013 at 4:56 AM, Joergen Lang joergen_l...@gmx.de wrote:


Safari (6.02) appears to have an issue with resizing an image in a floated
list after encountering a media query breakpoint.



   http://www.joergen-lang.de/testing/resize.html



Any hints, ideas, workarounds welcome.



Jørgen Lang



Jørgen.
Try...
from:
#slideshow li  img{width:100%;max-width:100%}
to:
#slideshow li  img dislplay:block;width:100%;max-width:100%}


Thanks, David,

Tried. No change. Image scales down properly. When scaling up, image 
only 'grows' to media query breakpoint.


This is Safari 6.02 under OS X 10.7.5.
Could anyone replicate/verify?

Best regards,

Jørgen



__
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] Safari re-resize problem: floats and media queries

[Joergen Lang]

Hello everyone,

Safari (6.02) appears to have an issue with resizing an image in a 
floated list after encountering a media query breakpoint.


Test case here:

  http://www.joergen-lang.de/testing/resize.html
  (see below for code)

When I reduce the window width the images scales down properly.
When I enlarge the width the image only scales up to the width set in 
the media query. To fill the entire width I have to reload.


The problem goes away when there are:

- no floats involved
- no rules in the media queriy
- I use 'width' instead of 'max-width' in the media query

I tried to replicate the problem in a recent Chrome and Firefox. No 
problems there. I suspect this to be Safari (6.02?) specific.


Any hints, ideas, workarounds welcome.

Jørgen Lang


HTML:

ul id=slideshow class=cycle-slideshow
  liimg src=image.jpg alt=slide //li
/ul

CSS:

#slideshow {
  float: left;
}

#slideshow li  img {
  width: 100%;
  max-width: 100%;
}

@media screen and ( max-width: 1050px ) {
  /* empty rule is enough to trigger the issue */
  body {}
}

__
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] image width in CSS?

[Joergen Lang]

Hi Jan-Erik,

there are ways to do that. They are called attribute selectors and 
adjacent sibling combinators.


Your structure:

figure
  img src=2012-12-15_13-01-21_14364.jpg width=1024
   height=681 alt=
  figcaptionBla bla bla bla bla/figcaption
/figure

So if wanted a special style for your figcaption you could write 
something like this:


img[width=1024] + figcaption {
  border: 1px solid black;
}

The first part of the selector checks for an 'img' element with a 
'width' attribute with the value of '1024' (even if the actual width is 
different!). The second part looks for an 'adjacent sibling element' in 
this case 'figcaption' to which the style should be applied.


There's a good article about attribute selectors here:
  http://css-tricks.com/attribute-selectors/

Adjacent siblings (and some more stuff) is explained here:
  http://css-tricks.com/child-and-sibling-selectors/

Hope this helps,

Jørgen


Am 17.12.12 08:54, schrieb Jan Erik Moström:

Since I like photography much of my dabbling in CSS is about showing
my photos in various ways. One thing I've always wanted to do is to
get the image width so I can use it in my declaration but I've never
found a CSS-only solution.

For example, assume some HTML code along these lines

figure img src=2012-12-15_13-01-21_14364.jpg width=1024
height=681 alt= figcaptionBla bla bla bla bla/figcaption
/figure

Now I would like a parts of my figcaption and figure styled based on
the photo width (not same for all figures/figcaptions)

Is this possible without using javascript or some server-side
scripting. So far I've done this using server-side scripting but I
would like to know if there is a way to do it using CSS only (I
haven't found a way in my searches).

__
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] Equal length columns?

[Joergen Lang]

Am 22.10.12 20:13, schrieb Al Sparber:

[...]


I would like to extend one column of our site all the way to the
bottom of the varying middle column (first column always same length).


[...]


CSS-only methods would essentially be hacks like negative padding or
using borders.


The 'padding' property does not take negative values [1].
Did you mean 'margin'?

In which way are borders neccessary for the construction of equal height
columns?

[...]


Our home page, as well as most of our new products all use EHC and there
are no crashes. Try these page:

http://www.projectseven.com/
http://www.projectseven.com/products/templates/pagepacks/adaptations/examples/layout-01.htm


Not sure if advertising commercial products on this list is a good idea...

Just my 2 cents.

Jørgen

[1] http://www.w3.org/wiki/CSS/Properties/padding



__
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] Equal length columns?

[Joergen Lang]

Google is your friend. :o)

A search for css equal height columns should bring up some good results.

This article IMHO is a good starting point:


http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

hth,

Jørgen



Am 22.10.12 19:59, schrieb J.C. Berry:

Hello all,
I would like to extend one column of our site all the way to the bottom of
the varying middle column (first column always same length). I had a JS
that someone recommended, but it seems to be crashing IE (using P7EHC
script). Is there a CSS-only way to do this or better script?





__
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] Equal length columns?

[Joergen Lang]

Am 23.10.12 18:29, schrieb Al Sparber:

[...]


All CSS methods, except for all-natural CSS 3 methods, are hacks that
come with potential consequences such as the inability to support
same-page links or design limitations.


Your statements appear to be a little gernal. Could you please elaborate 
on your statements.



Faux columns are usually the safest method for beginner-to-intermediate
level designers.


[snip JS stuff]


Google can be your friend too ;-)


Only if you're a stockholder - otherwise it's a tool :-)


Hmmm

Jørgen Lang

__
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] Equal length columns?

[Joergen Lang]

Am 23.10.12 18:29, schrieb Al Sparber:

[...]


All CSS methods, except for all-natural CSS 3 methods, are hacks that
come with potential consequences such as the inability to support
same-page links or design limitations.


Your statements appear to be a little gernal. Could you please elaborate 
on your statements.



Faux columns are usually the safest method for beginner-to-intermediate
level designers.


[snip JS stuff]


Google can be your friend too ;-)


Only if you're a stockholder - otherwise it's a tool :-)


Hmmm

Jørgen Lang

__
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/