Re: [css-d] anyway to style tag?

[Angela French]

I would be happy just applying a background color as the latest version of 
Chrome renders the player seemingly not in a container.

From: Brian Kardell [mailto:bkard...@gmail.com]
Sent: Tuesday, March 14, 2017 7:49 PM
To: Angela French
Cc: CSS Discussion Group
Subject: Re: [css-d] anyway to style  tag?



On Mar 14, 2017 6:36 PM, "Angela French" 
mailto:afre...@sbctc.edu>> wrote:
Hello,
I am experimenting with using the  tag.  I see it looks very different 
across browsers.  Is there any way to consistently style it across browsers?  
Everything I see from Google is years old.

Thanks,



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu><mailto:afre...@sbctc.edu<mailto:afre...@sbctc.edu>>
www.sbctc.edu<http://www.sbctc.edu><http://www.sbctc.edu/>



What exactly are you looking to style? The player controls?


__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
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] anyway to style tag?

[Angela French]

Hello,
I am experimenting with using the  tag.  I see it looks very different 
across browsers.  Is there any way to consistently style it across browsers?  
Everything I see from Google is years old.

Thanks,



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] help with image opacity (?)

[Angela French]

Hello,
I have a .png graphic that is white and gold on a transparent background.  It 
is set over divs with a blue and a black background color.  I cannot figure out 
what is
"dulling down" the .png logo.  It looks like an opacity issue, but there is no 
opacity set on it.

Here is the page:  http://www.dev.sbctc.edu/default-test-new-logo.aspx .  It is 
the 50th anniversary logo in the upper left hand corner of the page.

Here is the html:



Here is the css:

.greyHeaderLeft {
width:44%;
float:left;
display:block;

}
.greyHeaderLeft img {
float:left;
margin: 0;
}


Thank you for any advice.

Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] help getting my under by

[Angela French]

Thank you all.  I got it using a clear:both on the .   I realized I 
don't have a good understanding of the clear property values for example 
clear:both  vs clear:left or clear:right;

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
Sent: Tuesday, November 29, 2016 10:58 AM
To: Angela French; Philippe Wittenbergh
Cc: CSS-D
Subject: Re: [css-d] help getting my  under by 

The issue appears to be at line 1725 of sbctc.css.  Is floating every image in 
the main container the desired behavior? If so, you'll have to explicitly reset 
for either all  within a  element or use a class.  You'll need to 
be more specific with your declaration than what you've done here:

@media (min-width: 992px) {
  main img {
...
float: left;
  }
}




On Tue, Nov 29, 2016 at 1:03 PM Angela French  wrote:

>
>
> Well based on your example (good & correct HTML, no need for more), 
> the caption is exactly where you want it to be - given the code above. 
> So what exactly is your issue?
>
> Notes:
> 1. you don’t need the `clear:both` on the figcaption, position: 
> absolute takes care of that.
> 2. there is lots of white space at the bottom of the image (inside / 
> part of the image) 3. tip for debugging: use bright borders and 
> backgrounds to see where those are, how they are sized (the developper 
> tools in your favourite browser should do that as well…)
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
> I found an example online to try to model mine after:
> http://html5doctor.com/the-figure-figcaption-elements/
>
> I got it to work by a simple .  
> However, if I remove the clear:left from the inline declaration and put it in 
> the
> style sheet, it doesn't work, even with !important.   I can't figure out
> what is playing on it in the css.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
>
>
> __
> 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-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-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] help getting my under by

[Angela French]

Well based on your example (good & correct HTML, no need for more), the caption 
is exactly where you want it to be - given the code above. So what exactly is 
your issue?

Notes:
1. you don’t need the `clear:both` on the figcaption, position: absolute takes 
care of that.
2. there is lots of white space at the bottom of the image (inside / part of 
the image) 3. tip for debugging: use bright borders and backgrounds to see 
where those are, how they are sized (the developper tools in your favourite 
browser should do that as well…)

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/


I found an example online to try to model mine after:  
http://html5doctor.com/the-figure-figcaption-elements/ 

I got it to work by a simple .  However, if I 
remove the clear:left from the inline declaration and put it in the style 
sheet, it doesn't work, even with !important.   I can't figure out what is 
playing on it in the css.

http://www.dev.sbctc.edu/_testing/figure-caption.aspx 



__
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] help getting my under by

[Angela French]

I'm having a heck of a time getting my figure caption text to be underneath my 
figure.  Thank you for any advice.

http://www.dev.sbctc.edu/_testing/figure-caption.aspx

This is my html:


this is my caption










This is my  CSS:

figure {
position:relative;
}

figure img {
display:block;
}

figcaption {

clear: both;
position:absolute;
bottom:0;
left:0;

}











Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] worthwhile article: Thoughtful CSS Architecture

[Angela French]

Passing along a recent article worth reading:  
https://seesparkbox.com/foundry/thoughtful_css_architecture?utm_source=CSS-Weekly&utm_campaign=Issue-235&utm_medium=email



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] trouble with responsive background banner

[Angela French]

Hello,
I have a banner I am trying to run across the entire page and have it get 
smaller as the device gets smaller.  My plan is to make a different background 
image when I get down to cell phone size.

I had no problems accomplishing what I want when I was using an  tag, but 
now that it is a background image I cannot get the image to render unless I put 
an explicit height on it.

Here is my current css:

#surveylinkbar {

background-image: 
url('/_resources/images/websurvey-banner4.gif') ;
background-repeat:no-repeat;
background-size:contain;
background-position:center;

}

Here is my development link: 
http://www.dev.sbctc.edu/_testing/test-survey-bar-4.aspx . Greatly appreciate 
any advice.


Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] Help with false positive?

[Angela French]

Hello,
I am using this website validator<http://achecker.ca/checker/index.php> to 
check this page<http://www.dev.sbctc.edu/a-to-z.aspx>.  The validator set to 
WCAG 2.0 (Level AA) is interpreting my CSS in a way that fails the color 
contrast check between background and foreground links.  The visual examples it 
gives of the failures is not what is happening on the actual site.  I can't 
find what is causing this in the css.

Thank you for any suggestions.



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] align 4 divs horizontally

[Angela French]

Is bootstrap an option?

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Larry Martell
Sent: Tuesday, March 29, 2016 3:08 PM
To: CSS Discuss
Subject: [css-d] align 4 divs horizontally

I am trying to align 4 divs horizontally. I know I've successfully done this 
before with either display: inline-block or position: static or something. But 
no matter what I've tried with this case I always get 2 divs lined up 
horizontally and then 2 divs below those.

This is big ugly app I didn't write and there's a lot of inherited CSS. These 
divs contain charts, and the app was displaying 2 charts next to each other. 
Now they want 4 charts all next to each other. The
2 charts fit in the window, but the 4 will not and the user will have to scroll 
horizontally. There is a horizontal scroll bar on the window.

I think something is deciding that the window can't get wider, but I don't know 
what that would be. Any ideas on what can I set on these 4 divs to get them to 
line up horizontally?
__
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-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] 3 columns with expanding middle

[Angela French]

Well, after all your help, it turns out my Communications dept. has decided 
they don’t want to go forward on the direction I was taking.  Oh, well.  I did 
learn a few things in the process , so thank you all.

Angela French

From: Chris Rockwell [mailto:ch...@chrisrockwell.com]
Sent: Monday, March 28, 2016 12:40 PM
To: Tom Livingston; Angela French
Cc: CSS-Discuss Listserv (css-d@lists.css-discuss.org)
Subject: Re: [css-d] 3 columns with expanding middle

Or flex: https://jsfiddle.net/gc1dgrsb.

On Mon, Mar 28, 2016 at 3:01 PM Tom Livingston 
mailto:tom...@gmail.com>> wrote:
You could try using calc, if the browser support is ok (
http://caniuse.com/#search=calc).

.centerdiv{width: calc(100% - 68px};/* 68 is width of two outer divs */

On Mon, Mar 28, 2016 at 2:21 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:

> I am trying to create a visual box on a page where the top part looks like
> a spiral notebook ring.  I am no css wizard but I'm thinking I should be
> able to do this with 3 divs next to each other .  The left and right divs
> will have a background image with a rounded corner and a single spiral
> loop. The center will have a repeating image of a single loop so that the
> box can expand to fit different size device windows.  I have set the divs
> to float:left and set the left and right divs to the width of my background
> image.  What I can't figure out is the width to set on the center so that
> the entire "row" fills the width of its parent.
>
>
> This is my CSS.  I am not able to provide a link at this time.
>
> left
> center
> right
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu<mailto:afre...@sbctc.edu><mailto:afre...@sbctc.edu<mailto:afre...@sbctc.edu>>
> www.sbctc.edu<http://www.sbctc.edu><http://www.sbctc.edu/>
>
> __
> css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
> http://www.evolt.org/help_support_evolt/
>



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com<http://medialogic.com>


#663399
__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/
__
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] 3 columns with expanding middle

[Angela French]

I am trying to create a visual box on a page where the top part looks like a 
spiral notebook ring.  I am no css wizard but I'm thinking I should be able to 
do this with 3 divs next to each other .  The left and right divs will have a 
background image with a rounded corner and a single spiral loop. The center 
will have a repeating image of a single loop so that the box can expand to fit 
different size device windows.  I have set the divs to float:left and set the 
left and right divs to the width of my background image.  What I can't figure 
out is the width to set on the center so that the entire "row" fills the width 
of its parent.


This is my CSS.  I am not able to provide a link at this time.

left
center
right


Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] syntax: attribute selector on linked image

[Angela French]

It is not in an iframe.  I'm wondering if the css coming from Trumba (their JS 
code is embedded into my page) comes later in the page lifecycle and is thus 
overwriting mine.  Is this possible?

Angela French


-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
Sent: Friday, March 25, 2016 7:29 PM
To: Karl DeSaulniers; CSS-D
Subject: Re: [css-d] syntax: attribute selector on linked image

Is this in an iFrame?  Have you inspected the element with developer tools to 
see what styles are being applied to it? Maybe yours are simply not specific 
enough.

Here is an example using your original that shows the margin works just
fine: https://jsfiddle.net/wnzfh6c4/

On Fri, Mar 25, 2016 at 9:29 PM Karl DeSaulniers 
wrote:

> Link?
>
> Best,
> Karl
>
> Sent from losPhone
>
> > On Mar 25, 2016, at 5:52 PM, Angela French  wrote:
> >
> > Have tried all 3 suggestions (plus a few of my own) and none work.
> There must be some other factor at play here.  I think I will talk to 
> support at Trumba.
> > /* Classes to override styles in Trumba calendar */ a[title="Back to 
> > Previous View"] img{
> >display:block;
> >margin-top:20px;
> >outline: 3px solid red;
> > }
> >
> > span.ImageLink a{
> >border:3px solid black;
> >margin-left:50px!important;
> > }
> >
> > .twEDFooter {
> >margin-bottom:20px;
> > }
> >
> > -Original Message-
> > From: Philippe Wittenbergh [mailto:e...@l-c-n.com]
> > Sent: Thursday, March 24, 2016 5:48 PM
> > To: CSS-D
> > Cc: Angela French
> > Subject: Re: [css-d] syntax: attribute selector on linked image
> >
> >
> >> On Mar 25, 2016, at 01:56, Angela French  wrote:
> >>
> >> I am trying to write CSS that will apply top margin on an image 
> >> that is
> used as a back arrow button. The generated html is as follows:
> >> 
> >> 
> >>  href="javascript:controller.navigateBack();">
> >> http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f
> ">
> >>
> >> I tried writing the CSS as:
> >>
> >> a[title="Back to Previous View"] img{
> >> display:block;
> >> margin-top:20px;
> >> background-color:pink;  /*test*/ }
> >>
> >> Unfortunately, I'm seeing no effect.  Is my syntax incorrect, or am 
> >> I
> trying to do something that is not possible?
> >
> > Your syntax is correct (given the HTML markup you quoted). If you 
> > see no
> effect:
> >
> > 1/ is your image transparent? otherwise you won’t see the
> background-color.The  `outline` property is your friend for debugging 
> purposes.
> >
> > img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any 
> > of
> those highly visible colours  are very useful */
> >
> > 2/ your image, although set to `display:block`, is nested inside 
> > inline
> elements, inside a `td`. The margin may have no visible effect due to 
> that – depending on how the other elements are styled.
> >
> > 3/ anything in the stylesheet that could possibly override your styling?
> check with the developer tools in your browser what styling is 
> actually applied.
> >
> >
> >> I also tried targeting the  the image is in and applying 
> >> padding to
> the cell  like this:
> >>
> >> td < a[title="Back to Previous View"] img{
> >
> > there is no such thing a '<' selector.
> >
> > Philippe
> > --
> > Philippe Wittenbergh
> > http://l-c-n.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-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-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-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] syntax: attribute selector on linked image

[Angela French]

http://www.dev.sbctc.edu/calendar.aspx.  Click on any link under the Event 
column to display the event details. It is here that you will see a "BACK TO 
PREVIOUS VIEW" link directly underneath the month navigation bar.  This is the 
item I am trying to put space above and below to make it stand out a little 
more.

Angela French 

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Karl DeSaulniers
Sent: Friday, March 25, 2016 6:30 PM
To: CSS-D
Subject: Re: [css-d] syntax: attribute selector on linked image

Link?

Best,
Karl

Sent from losPhone

> On Mar 25, 2016, at 5:52 PM, Angela French  wrote:
> 
> Have tried all 3 suggestions (plus a few of my own) and none work.  There 
> must be some other factor at play here.  I think I will talk to support at 
> Trumba.
> /* Classes to override styles in Trumba calendar */ a[title="Back to 
> Previous View"] img{
>display:block;
>margin-top:20px;
>outline: 3px solid red;
> }
> 
> span.ImageLink a{
>border:3px solid black;
>margin-left:50px!important;
> }
> 
> .twEDFooter {
>margin-bottom:20px;
> }
> 
> -Original Message-
> From: Philippe Wittenbergh [mailto:e...@l-c-n.com]
> Sent: Thursday, March 24, 2016 5:48 PM
> To: CSS-D
> Cc: Angela French
> Subject: Re: [css-d] syntax: attribute selector on linked image
> 
> 
>> On Mar 25, 2016, at 01:56, Angela French  wrote:
>> 
>> I am trying to write CSS that will apply top margin on an image that is used 
>> as a back arrow button. The generated html is as follows:
>> 
>> 
>> > href="javascript:controller.navigateBack();">
>> > src="http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308
>> 799f">
>> 
>> I tried writing the CSS as:
>> 
>> a[title="Back to Previous View"] img{
>> display:block;
>> margin-top:20px;
>> background-color:pink;  /*test*/
>> }
>> 
>> Unfortunately, I'm seeing no effect.  Is my syntax incorrect, or am I trying 
>> to do something that is not possible?
> 
> Your syntax is correct (given the HTML markup you quoted). If you see no 
> effect: 
> 
> 1/ is your image transparent? otherwise you won’t see the 
> background-color.The  `outline` property is your friend for debugging 
> purposes.
> 
> img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any of 
> those highly visible colours  are very useful */
> 
> 2/ your image, although set to `display:block`, is nested inside inline 
> elements, inside a `td`. The margin may have no visible effect due to that – 
> depending on how the other elements are styled.
> 
> 3/ anything in the stylesheet that could possibly override your styling? 
> check with the developer tools in your browser what styling is actually 
> applied.
> 
> 
>> I also tried targeting the  the image is in and applying padding to the 
>> cell  like this:
>> 
>> td < a[title="Back to Previous View"] img{
> 
> there is no such thing a '<' selector.
> 
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.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-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-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] syntax: attribute selector on linked image

[Angela French]

 Have tried all 3 suggestions (plus a few of my own) and none work.  There must 
be some other factor at play here.  I think I will talk to support at Trumba.
/* Classes to override styles in Trumba calendar */
 a[title="Back to Previous View"] img{
display:block;
margin-top:20px;
outline: 3px solid red; 
}

span.ImageLink a{
border:3px solid black;
margin-left:50px!important;
}

.twEDFooter {
margin-bottom:20px;
}

-Original Message-
From: Philippe Wittenbergh [mailto:e...@l-c-n.com] 
Sent: Thursday, March 24, 2016 5:48 PM
To: CSS-D
Cc: Angela French
Subject: Re: [css-d] syntax: attribute selector on linked image


> On Mar 25, 2016, at 01:56, Angela French  wrote:
> 
> I am trying to write CSS that will apply top margin on an image that is used 
> as a back arrow button. The generated html is as follows:
> 
> 
> 
>  src="http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f";>
> 
> I tried writing the CSS as:
> 
> a[title="Back to Previous View"] img{
>  display:block;
>  margin-top:20px;
>  background-color:pink;  /*test*/
> }
> 
> Unfortunately, I'm seeing no effect.  Is my syntax incorrect, or am I trying 
> to do something that is not possible?

Your syntax is correct (given the HTML markup you quoted). If you see no 
effect: 

1/ is your image transparent? otherwise you won’t see the background-color.The  
`outline` property is your friend for debugging purposes.

img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any of those 
highly visible colours  are very useful */

2/ your image, although set to `display:block`, is nested inside inline 
elements, inside a `td`. The margin may have no visible effect due to that – 
depending on how the other elements are styled.

3/ anything in the stylesheet that could possibly override your styling? check 
with the developer tools in your browser what styling is actually applied.


> I also tried targeting the  the image is in and applying padding to the 
> cell  like this:
> 
> td < a[title="Back to Previous View"] img{

there is no such thing a '<' selector.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] syntax: attribute selector on linked image

[Angela French]

Hello,
I am trying to write CSS that will apply top margin on an image that is used as 
a back arrow button.  The generated html is as follows:



http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f";>

I tried writing the CSS as:

a[title="Back to Previous View"] img{
  display:block;
  margin-top:20px;
  background-color:pink;  /*test*/
}

Unfortunately, I'm seeing no effect.  Is my syntax incorrect, or am I trying to 
do something that is not possible?  I also tried targeting the  the image 
is in and applying padding to the cell  like this:

td < a[title="Back to Previous View"] img{
/*display:block;*/
padding-top:200px; /* big for test */
background-color:pink; /*test*/
}

and this (removed img):

td < a[title="Back to Previous View"] {
/*display:block;*/
padding-top:200px; /* big for test */
background-color:pink; /*test*/
}



Thank you for any advice.

Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] [ADMIN] Hello, my friends, hello

[Angela French]

I missed it.  I posted a few times over the last few months but didn't know 
what the issue was.  I have always appreciated the vast experience of the 
people on this list.  More than once someone helped me out of a pickle.  In 
addition, I would often read threads that didn't necessarily have any 
connection to a current issue I was fretting over, but the subject line caught 
my attention as something worth reading.  This list has definitely contributed 
to my cSS knowledge over the years.  I hope it keeps going.

Angela French 
WA State Board for Community and Technical Colleges

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Eric A. Meyer
Sent: Wednesday, December 23, 2015 12:35 PM
To: CSS-D Discuss
Subject: [css-d] [ADMIN] Hello, my friends, hello

Hi, everyone,

So apparently the list software died back in October, and none of us really 
noticed until this month.  Or, if people noticed, nobody mentioned it until 
this month.  It took a while to get in touch with someone who could get the 
software restarted, but I'm told it's back up. 
  If you're reading this, then yes, it's back up.
This hiatus and its lack of observance has led me to wonder about the 
utility of css-discuss, and whether it needs to continue.  There are a lot of 
other venues for discussing CSS these days, and most of the reason for this 
list existing-- to help people figure out how CSS worked, and fix problems-- is 
covered much more compellingly by sites like StackOverflow.  The resources that 
used to support css-d, like the public archive and the wiki, have fallen into 
disuse or disrepair over the years.  In general, there's a faded feeling here, 
at least for me.
Thus, I'm now pondering three courses of action:

1. Shut down the list.  To all good things, etc.  This obviously abandons 
those who still prize having a mailing list, but that number seems very small.  
Almost all the discussion in the months leading up to the hiatus was conducted 
between a small number of subscribers.  Of course, a new list could be started 
by someone else.
2. Hand the list off to someone else, to guide as they see fit.  
This involves the very difficult task of finding someone who's interested, and 
making a good choice.  This is the least appealing of the three, honestly, 
because of the possibility of getting things wrong.
3. Convert the list from "Practical discussions of CSS and its use" 
to more general discussion about anything CSS-related.  That would include 
theoretical musings, discussion of what CSS should or shouldn't be, where it 
should go in the future, the general theory of CSS, and so on.  I'm less 
inclined to go this route, as there are other places to grapple with the deeper 
issues of CSS (like www-style, not to mention blogs and social media).

At this point, perhaps due to pride and ego but perhaps simply due to feeling 
that the time has come, I'm leaning toward option 1.  January 24, 2016, will be 
the 14th anniversary of the list.  That leaves a month to either settle on a 
different course of action, or else to plan a shutdown.
If anyone has strong feelings that it should be one of the other two 
options, or a fourth option I didn't list, feel free to let me know off-list.  
I may not be able to respond to every message, but I will read them all.  I 
expect to make a final decision on or before January 10, 2016.  Whatever I 
decide, I'll announce it here.

--
Eric A. Meyer - http://meyerweb.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-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] trouble with background-image in p::after

[Angela French]

That was the key Philippe.  It is showing now!  Thank you.  I just need to 
position it a bit.  It is a circle graphic and the right edge of the circle is 
flush with the last letter.  It didn't really put it after - it put it at the 
end.

-Original Message-
From: Philippe Wittenbergh [mailto:e...@l-c-n.com] 
Sent: Tuesday, September 29, 2015 4:57 PM
To: Angela French
Cc: CSS-D
Subject: Re: [css-d] trouble with background-image in p::after


> On Sep 30, 2015, at 08:39, Angela French  wrote:
> 
> I have the CSS and html below , but it is not displaying the image in the 
> rendered page.  The path to the image is correct and the image is there.  Is 
> my syntax correct in the use of the ::after?
> 
> …
> 
> p.studentredirect::after{
>
> background-image:url("/_resources/images/circlearrow.gif") right 
> no-repeat; }


For the ::after pseudo-element to do anything (that is: to appear) you need as 
a minimum to specify the `content` property:
E::after {
content: '';
}
With that you'll have an ::after element that is still empty and sized to 0 x 
0px but it 'exists' as far as your CSS is concerned. Give it some width and 
height, specify the display property (`inline` being the initial value).


as it is, your `p.studentredirect::after` is empty and doesn't exist.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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/

Re: [css-d] trouble with background-image in p::after

[Angela French]

That didn’t work.  When I look at in IE developer tool (F12) it is showing a 
strikethrough on that style.  I don’t understand why though.

From: Tom Livingston [mailto:tom...@gmail.com]
Sent: Tuesday, September 29, 2015 4:43 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] trouble with background-image in p::after

Try changing

background-image:url("/_resources/images/circlearrow.gif") right no-repeat;
to


background:url("/_resources/images/circlearrow.gif") right no-repeat;


On Tue, Sep 29, 2015 at 7:39 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
I have the CSS and html below , but it is not displaying the image in the 
rendered page.  The path to the image is correct and the image is there.  Is my 
syntax correct in the use of the ::after?

p.studentredirect {
font-size:.8em;

}

p.studentredirect::after{
background-image:url("/_resources/images/circlearrow.gif") 
right no-repeat;
}

.greyOrangeBkg {
background-color:#e6e7e8;
border-left:#f15c16 solid 7pt;
padding: 20px;
line-height: 1.25em;
margin:15px 0;
}
The html is:


Transfer information for students



Angela French
Internet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu><mailto:afre...@sbctc.edu<mailto:afre...@sbctc.edu>>
www.checkoutacollege.com<http://www.checkoutacollege.com><http://www.checkoutacollege.com/>
www.sbctc.edu<http://www.sbctc.edu><http://www.sbctc.edu/>

__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com<http://medialogic.com>


#663399
__
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] trouble with background-image in p::after

[Angela French]

I have the CSS and html below , but it is not displaying the image in the 
rendered page.  The path to the image is correct and the image is there.  Is my 
syntax correct in the use of the ::after?

p.studentredirect {
font-size:.8em;

}

p.studentredirect::after{
background-image:url("/_resources/images/circlearrow.gif") 
right no-repeat;
}

.greyOrangeBkg {
background-color:#e6e7e8;
border-left:#f15c16 solid 7pt;
padding: 20px;
line-height: 1.25em;
margin:15px 0;
}
The html is:


Transfer information for students



Angela French
Internet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com/>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] make unbulleted list items align left

[Angela French]

Hello,
Usually to create non-bulleted list items that align left I would user 
list-style-type:none; padding-left:0;

However, I'm working in a CMS where when I grab the list items it applies my 
style to the s  and not the  and though there are no bullets showing, 
the items are not aligned left.  Is there some other CSS approach I can take?

Thanks,

Angela French
Internet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com/>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] help with lineheight

[Angela French]

I am trying to tweak some lineheight in a specific div class.  I want the space 
between  tags to be the default for the site.  But if the content in the  
tag wraps to a second line I want the space between theose lines to be a little 
less.  I thought I could achieve that with lineheight but it's not working.  
it's affecting the space between the  also.


Thanks for any help.


Angela French
__
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] vertical-align baseline issue?

[Angela French]

Thank you. This helps.

-Original Message-
From: Philippe Wittenbergh [mailto:e...@l-c-n.com] 
Sent: Wednesday, July 29, 2015 5:57 PM
To: Angela French
Cc: CSS-D
Subject: Re: [css-d] vertical-align baseline issue?


> On Jul 30, 2015, at 03:33, Angela French  wrote:
> 
> I have an h1 with a span applied to the first three words to make them 
> smaller. I want the bottom of the text to line up those with the rest of the 
> heading and it is not.
> 
> Html:  SBCTC Policy 
> Manual Chapter 4: Instructional Program and Course 
> Development
> 
> 
> CSS:
> h1 span.policyManualFirstLine
> {
>font-size:.65em;
>vertical-align:baseline!important; /* tried this, no effect */
>padding-bottom:0;  /* tried this, no effect */ }
> 
> Is what I'm looking for possible? Am I not doing it right?

Can you provide a test case illustrating your problem? Failing that, you'll 
need to provide more context…

By default your span *should* rest on the baseline of its parent element, 
unless there are rules somewhere that prevents it.

Look at this test case, the span rests on the baseline:
http://dev.l-c-n.com/_junk/cssd-af.html

(the red line indicates the baseline)

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] vertical-align baseline issue?

[Angela French]

Hello,
I have an h1 with a span applied to the first three words to make them smaller. 
I want the bottom of the text to line up those with the rest of the heading and 
it is not.

Html:  SBCTC Policy Manual 
Chapter 4: Instructional Program and Course Development


CSS:
 h1 span.policyManualFirstLine
{
font-size:.65em;
vertical-align:baseline!important; /* tried this, no effect */
padding-bottom:0;  /* tried this, no effect */
}

Is what I'm looking for possible? Am I not doing it right?


Thanks for any ideas.

Angela French
Internet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com/>
www.sbctc.edu<http://www.sbctc.edu/>

__
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] table design woes

[Angela French]

Got it to work with:  border-spacing:2px;
border-collapse:separate;

-Original Message-
From: Tom Livingston [mailto:tom...@gmail.com] 
Sent: Monday, July 13, 2015 12:19 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] table design woes

Without looking too long, the one table that shows what you are after has 
border-spacing of 2px. The other has 0.

HTH

On Mon, Jul 13, 2015 at 3:03 PM, Angela French  wrote:
> I have always styled tables with a background color and padding on the s 
> so that the background color of the table looks like a border around each 
> cell. Here is an example on our current site:  
> http://www.sbctc.edu/general/policymanual/_a-policymanual_1.10.aspx .
>
> I'm trying to recreate this on a new site, but it's not working. I can't 
> figure out why. In this test I have set up the s with the green 
> background just so I could see what's going on, but they will be a white 
> background in the end. The background color of the cells is not shrinking to 
> allow the background color of the table to show through and look like the 
> border.
>
> http://dev.sbctc.edu/colleges-staff/policies-rules/policy-manual/1.10.
> aspx
>
> Thanks for taking a look.
>
>
>
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu<mailto:afre...@sbctc.edu>
> www.checkoutacollege.com<http://www.checkoutacollege.com>
> www.sbctc.edu<http://www.sbctc.edu>
>
> __
> 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 Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] table design woes

[Angela French]

Where did you see that border-spacing applied? I just applied it to the new 
table (2px) but it had no effect./ 

-Original Message-
From: Tom Livingston [mailto:tom...@gmail.com] 
Sent: Monday, July 13, 2015 12:19 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] table design woes

Without looking too long, the one table that shows what you are after has 
border-spacing of 2px. The other has 0.

HTH

On Mon, Jul 13, 2015 at 3:03 PM, Angela French  wrote:
> I have always styled tables with a background color and padding on the s 
> so that the background color of the table looks like a border around each 
> cell. Here is an example on our current site:  
> http://www.sbctc.edu/general/policymanual/_a-policymanual_1.10.aspx .
>
> I'm trying to recreate this on a new site, but it's not working. I can't 
> figure out why. In this test I have set up the s with the green 
> background just so I could see what's going on, but they will be a white 
> background in the end. The background color of the cells is not shrinking to 
> allow the background color of the table to show through and look like the 
> border.
>
> http://dev.sbctc.edu/colleges-staff/policies-rules/policy-manual/1.10.
> aspx
>
> Thanks for taking a look.
>
>
>
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu<mailto:afre...@sbctc.edu>
> www.checkoutacollege.com<http://www.checkoutacollege.com>
> www.sbctc.edu<http://www.sbctc.edu>
>
> __
> 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 Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] table design woes

[Angela French]

I have always styled tables with a background color and padding on the s so 
that the background color of the table looks like a border around each cell. 
Here is an example on our current site:  
http://www.sbctc.edu/general/policymanual/_a-policymanual_1.10.aspx .

I'm trying to recreate this on a new site, but it's not working. I can't figure 
out why. In this test I have set up the s with the green background just so 
I could see what's going on, but they will be a white background in the end. 
The background color of the cells is not shrinking to allow the background 
color of the table to show through and look like the border.

http://dev.sbctc.edu/colleges-staff/policies-rules/policy-manual/1.10.aspx

Thanks for taking a look.






Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com>
www.sbctc.edu<http://www.sbctc.edu>

__
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] Putting an image before list item text

[Angela French]

I'm trying to put a recycle bin icon before the text "Recycle Bin" on a 
SharePoint menu list item.   Is there a way to conditionally put the icon when 
the list item text is "Recycle Bin"?




Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com>
www.sbctc.edu<http://www.sbctc.edu>

__
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] footer won't stay put

[Angela French]

Hello,
I have that I'm trying to add a footer to.  The issue is that it won't stay at 
the bottom once the page has enough content to require scrolling.  Then it is 
positioned over the content  about 1/3 up the page.

My CSS is as follows:

#s4-workspace { /* parent container of #footer */

position:relative;
min-height:100%;
padding-bottom:3em;


}

#footer {
height:3em;
margin-top:-3em;
background-color:#a4c8de;
color:#000;
position:absolute!important;
bottom:0!important;
left:0;
width:100%;
padding:20px;
clear:both;

}

Any ideas on what to look for would be appreciated.  I've tried a number of 
things that are supposed to work, but still it doesn't. Wish I could provide a 
link, but it's an internal SharePoint site I'm trying to build.

Thanks,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com>
www.sbctc.edu<http://www.sbctc.edu>

__
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] Form does not appear in IE8

[Angela French]

Maybe you need to put a few form elements in it.

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of J.C. Berry
Sent: Monday, November 24, 2014 3:47 PM
To: CSS-D
Subject: [css-d] Form does not appear in IE8

Hello all,

On this page
http://promotions.xifin.com/Total-Cost-of-Billing_WP.html

The form inside this HTML

   

   


Does not appear in IE8. Could you take a look? My IE dev toolbar is not working 
correctly and I've been working on it for hours.

--
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. 
?? 2510-2521 and is legally privileged. This information is confidential 
information and is intended only for the use of the individual or entity named 
above. If the reader of this message is not the intended recipient, you are 
hereby notified that any dissemination, distribution or copying of this 
communication is strictly prohibited.

__
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-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] Responsive Images

[Angela French]

This discussion on responsive images is making me wonder how modern CMSs that 
support content editors inserting an image onto a page are handling the fact 
that they might need to upload three images ?  Any ideas?

Angela French

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
Sent: Thursday, November 06, 2014 6:35 PM
To: Tom Livingston
Cc: Karl DeSaulniers; CSS-Discuss
Subject: Re: [css-d] Responsive Images

@media is what you recommend for changing images based on browser size, correct 
?

Christpher ?

> Crest Christopher <mailto:crestchristop...@gmail.com>
> Thursday, November 06, 2014 9:11 PM
> Basically the web is becoming a billboard, if I want to design for 5K 
> I'd need a 5K image, from there I scale it down, or up because I'll be 
> designing for mobile first, then I adjust the page and graphics 
> accordingly for desktop.
>
> Christopher
>
> Tom Livingston <mailto:tom...@gmail.com> Thursday, November 06, 2014 
> 7:41 PM
>
>
>
> That does make sense to build simpler first then go desktop after,
> I just may follow this logic !
>
>
> Not necessarily. Most of the time I can use just three images.
> Each image can span more than one breakpoint. My base
> (mobile/phone) images usually get me up to my 600px breakpoint,
> for example.
>
> Let me understand, you typically keep your images up to 600px in
> size regardless if the screen size is 2K or heck even up to 4K ? I
> assume you do the 2x / 3x for Retina displays ?
>
>
>
> I have used images for 2x displays. I dont worry about it for 
> photographs. Logos mostly.
>
> see picturefill.js
>
> http://scottjehl.github.io/picturefill/
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 
> <http://medialogic.com>
>
>
> #663399
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Thursday, November 06, 2014 7:32 PM
> That does make sense to build simpler first then go desktop after, I 
> just may follow this logic !
>
>
> Not necessarily. Most of the time I can use just three images. Each 
> image can span more than one breakpoint. My base (mobile/phone) images 
> usually get me up to my 600px breakpoint, for example.
>
> Let me understand, you typically keep your images up to 600px in size 
> regardless if the screen size is 2K or heck even up to 4K ? I assume 
> you do the 2x / 3x for Retina displays ?
>
> See my second reply above. I'll also add that you will be hard pressed 
> to get perfection in a web page compared to a psd.
>
> I don't understand ?
> Tom Livingston <mailto:tom...@gmail.com> Thursday, November 06, 2014 
> 7:17 PM
>
>
> Sent from my iPhone
>
> On Nov 6, 2014, at 6:38 PM, Crest Christopher 
> mailto:crestchristop...@gmail.com>> wrote:
>
>> Why do you recommend building mobile first ?
>
> Aside from being best practice, it is much harder and requires more 
> code to achieve a mobile layout from a desktop first build because it 
> requires you to "undo" a great deal of the desktop layout. It is less 
> code and work to build mobile first as it is a simpler, additive 
> process. I can tell you from experience that desktop first is a 
> nightmare.
>
>>
>> There is a pro and a con with swapping images, the pro, you can use 
>> bitmap images, the con, you have to have, as I mentioned earlier, 
>> maybe up to six different resolutions for your images.  The CSS may 
>> be the easiest to do, the hardest will be managing your image
>
> Not necessarily. Most of the time I can use just three images. Each 
> image can span more than one breakpoint. My base (mobile/phone) images 
> usually get me up to my 600px breakpoint, for example.
>
>>
>>
>> If you don't go the swap images route as suggested by Tom :) You have 
>> to design all in vector.  I ask because, unlike previous web 
>> development experiences, I want to export my image assets perfectly, 
>> focus more on markup and styles and hopefully have an end result that 
>> plays well on most, if not all mobile phones and tablets and last but 
>> not least, desktops / laptops.
>>
>
> See my second reply above. I'll also add that you will be hard pressed 
> to get perfection in a web page compared to a psd.
>
>
>>>
> Crest Christopher <mailto:crestchristop...@gmail.com>
> Thursday, November 06, 2014 6:38 PM
> Why do you recommend building mobile first ?
>
> There is a pro and a con with swapping images, the pro, y

Re: [css-d] Why is child wider than parent?

[Angela French]

Thanks!  I don't code enough anymore.  :-(

-Original Message-
From: David Laakso [mailto:laakso.davi...@gmail.com] 
Sent: Thursday, November 06, 2014 2:44 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] Why is child wider than parent?

On Thu, Nov 6, 2014 at 5:29 PM, Angela French  wrote:
> Hello,
> Can anyone please tell me why the child (#band) is wider than the boundary of 
> its parent (#outcontainer)?  I set width:100% on the child to make sure it 
> took up the entire width of the parent, but it went wider.  Can't figure out 
> what I'm missing here. It may be the concurrent use of display:table but I'm 
> not sure why setting width still wouldn't work.  If I set the width to 98% it 
> almost fits inside the parent.
>
> http://www.sbctc.edu/OAAInstruction.html


Angela,

Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
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] Why is child wider than parent?

[Angela French]

Darn box model!

Thanks.

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
Sent: Thursday, November 06, 2014 2:40 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why is child wider than parent?

You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.

regards
 Georg

__
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-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] Why is child wider than parent?

[Angela French]

Hello,
Can anyone please tell me why the child (#band) is wider than the boundary of 
its parent (#outcontainer)?  I set width:100% on the child to make sure it took 
up the entire width of the parent, but it went wider.  Can't figure out what 
I'm missing here. It may be the concurrent use of display:table but I'm not 
sure why setting width still wouldn't work.  If I set the width to 98% it 
almost fits inside the parent.

http://www.sbctc.edu/OAAInstruction.html


body {background-color:#EDEBE0;}
#outercontainer {margin:0 20px 20px 
20px;height:100%;background-color:#CC3366;padding-top:5px;}
#band {height: 52px; 
background-color:#013E7D;padding-right:20px;text-align:right;vertical-align:middle;display:table;width:100%;}
#main {width:90%; min-height:80%;;margin:auto;margin-top:30px;}
h1 {color:#FF;font: 1.4em Arial, Helvetica, 
sans-serif;margin:0;display:table-cell;vertical-align:middle;}
p {font: .75em Arial, Helvetica, sans-serif;}



Thanks for any help.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
www.checkoutacollege.com<http://www.checkoutacollege.com>
www.sbctc.edu<http://www.sbctc.edu>

__
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 use CSS to define width of Google search input box

[Angela French]

I figured it out.  I had to discover how google was referencing the input.

div#Header_search input.gsc-input {
width:260px!important;
height:20px;
margin-left:105px !important;
color:#3A6E83;

}

-Original Message-
From: Philip Taylor [mailto:p.tay...@rhul.ac.uk] 
Sent: Saturday, December 14, 2013 1:22 PM
To: Angela French
Cc: CSS Discuss
Subject: Re: [css-d] trying to use CSS to define width of Google search input 
box

I think you will have to explain what "[t]he Google javascript is inside a div" 
means.  Even if it physically appears there (horrible thought but possible, I 
suppose), any  element that it creates won't necessarily be parented 
there.
Let us see the code and we may be able to help.  Your inline CSS will never 
work, I am afraid; what you are attempting with it is logically impossible.

Philip Taylor.

P.S.  What a joy to see both "affect" and "effect" used correctly as verbs in 
the same message :-)

Angela French wrote:

> I am implementing a google custom search engine.  The Google 
> javascript is inside a div with id="header_search".  I am trying to 
> affect the width of the input box with css in the div tag.  I tried 
> the CSS below which had no effect.  Even the display:none test did not 
> work.
> 
> So now I am trying to write it inline to see if I can effect a change 
> there.  This is where I am uncertain how the syntax needed to specify
> the width of the input field.   Something along the lines of :
> 
> 
__
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] trying to use CSS to define width of Google search input box

[Angela French]

I am implementing a google custom search engine.  The Google javascript is 
inside a div with id="header_search".  I am trying to affect the width of the 
input box with css in the div tag.  I tried the CSS below which had no effect.  
Even the display:none test did not work.

Re: [css-d] can last child be spec'd?

[Angela French]

>
>Let's say you have N-number of paragraphs in an article, and you want the last
>paragraph to have some different attributes as the other , such as a greater
>margin-bottom.
>
>Is there a way to describe that in css?
>
>Thank you!
>
>John

You mean like this:

 p:last-child
 {
 background:#ff;
 }

__
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] accents on e in Resume

[Angela French]

>
>And that is not a surprise. The 'Apple Gothic' font does not contain glyphs for
>those characters. Browsers then look up further down the chain, find Futura and
>use that for rendering the character. All perfectly normal.
>
>Why did you choose 'Apple Gothic' in the first place? That is an (old) font for
>Chinese characters that only has a subset of 'Western' glyphs. (and it doesn't
>have a 'bold' weight, fwiw, thus bold is rendered synthetically if at all.)
>
>I suggest your drop that completely and use a real western font. 'Helvetica
>Neue' would do fine. Or maybe use @font-face for more consistency across all
>platforms.
>
Redesigning and old website and grabbed the same fonts as on the old one.  Will 
take a second look. Thanks.
>
>


__
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] accents on e in Resume

[Angela French]

Hello ,
You know the little accents over the e's in the word résumé?
I have coded them two different ways:

Résumé Writing
Résumé  Writing

The font family is: font-family: "Century Gothic","Apple 
Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;



In every desktop browser I test in, it renders fine.  But on my iPad, the e's 
render extra bold.  Is there some way to control this with CSS or some other 
way to code it that would make it not do that?

Thank you


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/
http://www.sbctc.edu

__
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] weirdest wrapping issue

[Angela French]

I've got the weirdest wrapping issue going on at this page: 
http://168.156.9.250:8080/academy05-06.aspx .
Currently it is rendering fine, but if I swap out the code blocks for Mari and 
Randy (put Randy in position 5) the last photo in the group will not render in 
the left most position.  I know that sounds very weird, but I experimented to 
kingdom come with this thing and it all seems to boil down to "randy".  I can't 
figure out why.  This page is one of many made from the same template and this 
is the only page on which I experienced this strange issue.  The only reason I 
discovered this is because I'd like to put the people in alpha order which puts 
Randy in the 5th position. I had to swap him out with Mary Ellen to get it to 
work correctly.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/
http://www.sbctc.edu

__
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] linear-gradient

[Angela French]

Seems like (top bottom, red, yellow)  would make more sense, top being the 
start and bottom being the finish.

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of John D
>Sent: Thursday, June 06, 2013 9:23 AM
>To: Angela French; css-d@lists.css-discuss.org
>Subject: Re: [css-d] linear-gradient
>
>
>
>
>> So in my syntax, what is the "to" doing?
>>
>
>> >> background-image: linear-gradient(to bottom, red, yellow);
>> >>
>
>It basically means that the gradient is going from the top to bottom starting 
>red
>and finishing yellow.
>
>You could also have something like this:
>
>linear-gradient( to left top, blue, red);
>
>/* A gradient going from the bottom to the top left starting blue and
>   finishing red  */
>
>_
>_
>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-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] linear-gradient

[Angela French]

So in my syntax, what is the "to" doing?

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Ben Henick
>Sent: Wednesday, June 05, 2013 5:38 PM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] linear-gradient
>
>
>
>On 6/5/13 4:57 PM, Angela French wrote:
>
>> background-image: linear-gradient(to bottom, red, yellow);
>>
>
>...What Barney C. said.  But if you're a glutton for punishment, the value 
>syntax
>is as follows:
>
>linear-gradient(angle|keyword, color1 stop1, color2 stop2, ...);
>
>Angles are provided in the form {int}deg and 0deg = 12 o'clock (top to
>bottom) unless it's part of -webkit-linear-gradient, in which case 0deg = 3
>o'clock.
>
>Only one keyword is needed; the gradient will travel across the affected 
>element
>from there.  If two (space-separated) keywords are provided, they should be on
>different axes by way of indicating a corner.
>
>Any valid color value will do, as will any valid length value for the 
>locations of
>the stops.  If stop lengths are omitted, the first color will be on the left 
>edge, the
>last on the right, and the other colors will be evenly spaced along the 
>gradient.
>
>If a CSS property with more verbose values (that aren't data URIs) exists, I
>haven't found it yet.
>
>
>--
>Ben Henick  lurker...@henick.net
>Sitebuilder At-Larget:@bhenick
>+1 785 856 1863
>_
>_
>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-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] linear-gradient

[Angela French]

Hello,
I am using to make sense of some background-image: linear-gradient.  My code is 
 as follows:

background-image: linear-gradient(to bottom, red, yellow);

I thought the "to" as the first parameter must have been a typo and that it 
should be "top" as in "top to bottom" on the gradient.  But if I change the 
syntax to "top" the gradient doesn't work.  Can anyone explain please?

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/
http://www.sbctc.edu

__
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] trouble aligning text at bottom of container

[Angela French]

Hello,
I am trying to line up some text to the right bottom of a small photo. Here is 
a link to my test page: http://168.156.9.250/WELA/board.aspx

I have two issues I can't figure out. First off my image is 70px tall, yet I 
had to make the parent container in which it sits 78px to look as tall (I have 
colored the background yellow so the parent container can be seen for this 
example. What accounts for the 8px different?

Second, I can't get my text to align to the bottom of the container. The only 
way I can force it down is to give a negative value to the bottom of the  
tag.  Right now it is bottom:0px;  As there is not padding-bottom on the 
container I can't figure out why the text won't go to the bottom.  Thanks for 
any help.

div.boardcontainer {
   height:77px;
   position:relative;
   padding-bottom:0;
   margin-top:15px;
   margin-bottom:25px;
   background-color:Yellow;
}

div.boardcontainer img {
   float:left;
   margin-right:15px;
   padding: 3px;
   border: 1px solid #ccc;
   background-color:#fff;
   max-width:70px;height:auto; /* something in the css was not allowing IE9 
to scale my images to the scale
specified in the  tag; I can't find it so I forced it here. */
}

div.boardcontainer p {
   position:absolute;
   bottom:0;
   left:95px;
}




Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/
http://www.sbctc.edu

__
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 remove outline off of image map areas

[Angela French]

>
>It seems that IE 10 has dropped support to the proprietary hidefocus
>attribute, in all modes. Strange.
>
>Even more strange, although the CSS code above (which is correct syntax)
>does not work on IE 10, and although the simple
>
>area { outline: none; }
>
>does not work on it either, the CSS rule
>
>* { outline: none; }
>
>seems to work. I cannot imagine why.
>
>(Removing the outline can be a usability and accessibility problem rather than
>a solution to anything, but I suppose there are special situations where it can
>be useful. Anyway, the technical issue is mysterious. Using area { outline:
>none; }, Developer Tools in IE 10 show
>outline-style: none as being applied to the area element, but still the dotted
>outline appears. Perhaps IE 10 draws the outline around some mystical
>pseudoelement?)
>
>Yucca
>
>
>
If I could get a dotted outline that I could style a light gray, I'd be happy.  
In fact, for accessibility reasons, there needs to be some indication when the 
image has focus.  But I'm getting a solid black line in IE (very ugly on my 
polygon shape on my white background)  and no outline at all in the other 
browsers.  Argh.

Angela French

__
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] trying to remove outline off of image map areas

[Angela French]

Hello,
Shouldn't the following work to remove the focus outline from an image map's 
areas? It does not work in IE. It works in other browsers.

map area:focus, map area:active
{outline:none;
   border:0;

}

Thank you,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] something overwriting my css?

[Angela French]

Thank you.  It's tricky working in this huge file and trying to style for the 
full menu and the collapsed menus simultaneously.

From: Sarah Forst [mailto:sarah.plowri...@gmail.com]
Sent: Wednesday, March 20, 2013 12:54 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] something overwriting my css?

You have a:

.nav-collapse .dropdown-menu a {
1.  [ ]color: White!important;
}

That is causing the link text to be white. I'd avoid using '!important' - it 
tends to cause issues like this.

On Wed, Mar 20, 2013 at 3:51 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
Hello,
I've got a dropdown menu where the text for the menu items is supposed to be a 
dark gray but  is coming up white on a white background. I can't find what is 
making the color declaration not work. I'd be grateful for any assistance.

The site is here: http://168.156.9.250/WELA/

The issue is found on the drop down menus (for example, under About WELA).

Below is the css for that element.  I can make other tweeks such as changing 
the padding and the effect is immediately seen, but I can't get that color to 
behave.  The ONLY way I could get it black was to put the style inline on the 
 like this: Academy 
Overview


.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #33!important;
  white-space: nowrap;
}


It is located in the bootstrap.css file at line 4820. You can see from my 
declaration, that using !important didn't get it to work. I don't find anything 
in the cascade of style sheets that overwrites it, not is there anything inline.

Thank you for any assistance.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
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] something overwriting my css?

[Angela French]

Hello,
I've got a dropdown menu where the text for the menu items is supposed to be a 
dark gray but  is coming up white on a white background. I can't find what is 
making the color declaration not work. I'd be grateful for any assistance.

The site is here: http://168.156.9.250/WELA/

The issue is found on the drop down menus (for example, under About WELA).

Below is the css for that element.  I can make other tweeks such as changing 
the padding and the effect is immediately seen, but I can't get that color to 
behave.  The ONLY way I could get it black was to put the style inline on the 
 like this: Academy 
Overview


.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #33!important;
  white-space: nowrap;
}


It is located in the bootstrap.css file at line 4820. You can see from my 
declaration, that using !important didn't get it to work. I don't find anything 
in the cascade of style sheets that overwrites it, not is there anything inline.

Thank you for any assistance.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] gap between image and background

[Angela French]

>After much trying I could finally reproduce it in Chrome dev channel (not in
>Safari). I think it is a side effect of the scaling of the image that happens 
>at
>smaller sizes. Why don't you make it completely transparent ?
>
>> I also see in Safari that the colour used in my image does not match the
>background color of the div even though they are both  # c7b619.
>
>I don't see that mismatch on my side, however the image appears to have a
>sRGB profile. Removing it should fix it. In general the image could be better
>optimised (Imageoptim does wonders - it slashed about 30% out of the file
>size; the sRGB colour profile accounts for about 5k)
>
>Philippe
>--

Philippe, thank for your suggestions.  The removal of the sRGB profile was not 
successful across all browsers, but the removal of the background color layer 
in Photoshop before saving the .png was.  Thank you for pointing out the 
obvious!  

Angela French


__
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] gap between image and background

[Angela French]

I'm working on my first Twitter Bootstrap site.  Here is my link:  
http://168.156.9.250/WELA/ .
At full viewport everything is fine, but at around 906px a light colored line 
appears at the bottom edge of the colored background area of the image where it 
meets the background color of the div that the image is in (they are both the 
same color.   The bottom area of the png is transparent so that the leaf 
appears to be floating over the nav bar below it.  This line appears in IE 9, 
FF 19.0, Chrome 25, Safari.  I also see in Safari that the color used in my 
image does not match the background color of the div even though they are both  
# c7b619.

Any ideas as to the origin of the line and how to get rid of it?

Thank you


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] trouble getting email icon to display with attribute selector

[Angela French]

Thank Jukka, that was it.

>> On Wed, Feb 27, 2013 at 7:17 PM, Angela French 
>wrote:
>>
>>> Am I correct that this selector does NOT work in IE 7 ? IE9 in
>>> compatibility mode isn't displaying the icon.
>>
>>
>> No, attribute selectors are supported in IE7 (CSS 2.1) -
>> http://caniuse.com/#feat=css-sel2
>>
>> Maybe there is another syntax issue?
>
>Yes, it is. The page
>
>http://www.sbctc.edu/testEmailNEW.html
>
>now contains the declaration
>
>background:url('/imgs/layout/icon_emailTEST.jpg')center right  no-repeat;
>
>which is OK except that there should be a space after ")". At least when
>testing on IE 10, the background image is not shown when the Document
>Mode is set to IE 7 or IE 8, but it is if the space is added:
>
>background:url('/imgs/layout/icon_emailTEST.jpg') center right  no-repeat;
>
>I'm not that good at CSS low-level syntax, which has varied over time.
>The W3C CSS Validator does not flag the declaration as erroneous when the
>space is not there, but the good/dusty old, mostly CSS 1 level checker
>http://www.htmlhelp.com/tools/csscheck/ says:
>"Error: Multiple values should be separated by whitespace."
>
>In any case, it is safer (and it makes the CSS code more readable) to separate
>the values with spaces.
>
>Yucca
>
>___
>___
>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-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] trouble getting email icon to display with attribute selector

[Angela French]

Am I correct that this selector does NOT work in IE 7 ? IE9 in compatibility 
mode isn't displaying the icon.

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Jon Reece
>Sent: Wednesday, February 27, 2013 4:04 PM
>To: Angela French
>Cc: css-d (css-d@lists.css-discuss.org)
>Subject: Re: [css-d] trouble getting email icon to display with attribute 
>selector
>
>(Keep inadvertently replying to OP instead of reply all... so sorry for 
>duplicate
>Angela.)
>
>You are using shorthand values for a non-shorthand property "background-
>image:"
>
>Change to "background:" and you should be good.
>
>--
>Jon Reece
>jon.re...@gmail.com
>
>
>
>On Wed, Feb 27, 2013 at 6:38 PM, Angela French  wrote:
>
>> It seems like it should be pretty simple, but my icon isn't showing up:
>> http://www.sbctc.edu/testEmailNEW.html , so I'm probably just
>overlooking
>> something simple.  I've tested in IE 9, FF 18, and Opera 11, but no go.
>>  Grateful for any help.
>>
>> 
>>
>> a[href ^="<a  rel="nofollow" href="mailto:"">mailto:"</a>;]
>> {
>> background-image:url('/imgs/layout/icon_emailTEST.jpg')0 0 no-repeat;
>> margin-right: 10px;
>> padding-left:20px;
>> line-height:13px;
>> height: 13px;
>> }
>>
>> 
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.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-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-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] trouble getting email icon to display with attribute selector

[Angela French]

This is the winning reply!  Thanks Jon and everybody that took a look.

From: Jon Reece [mailto:jon.re...@gmail.com]
Sent: Wednesday, February 27, 2013 3:55 PM
To: Angela French
Subject: Re: [css-d] trouble getting email icon to display with attribute 
selector

Y
ou are using shorthand syntax for your values with the background-image: 
property, which is not shorthand ;) Change to background: and you should be 
good.


--
Jon Reece
jon.re...@gmail.com<mailto:jon.re...@gmail.com>


On Wed, Feb 27, 2013 at 6:38 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
It seems like it should be pretty simple, but my icon isn't showing up:  
http://www.sbctc.edu/testEmailNEW.html , so I'm probably just overlooking 
something simple.  I've tested in IE 9, FF 18, and Opera 11, but no go.  
Grateful for any help.



a[href ^="<a  rel="nofollow" href="mailto:"">mailto:"</a>;]
{
background-image:url('/imgs/layout/icon_emailTEST.jpg')0 0 no-repeat;
margin-right: 10px;
padding-left:20px;
line-height:13px;
height: 13px;
}





Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
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] trouble getting email icon to display with attribute selector

[Angela French]

I looked in my CSS files and I have it both ways (single/double quote) in other 
instances and it works either way.

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Philip TAYLOR
>Sent: Wednesday, February 27, 2013 3:41 PM
>To: Angela French; css-d (css-d@lists.css-discuss.org)
>Subject: Re: [css-d] trouble getting email icon to display with attribute 
>selector
>
>Are you sure there are supposed to be single quotes around the  ?
>
>Philip Taylor.
>
>Angela French wrote:
>> It seems like it should be pretty simple, but my icon isn't showing up:
>http://www.sbctc.edu/testEmailNEW.html , so I'm probably just overlooking
>something simple.  I've tested in IE 9, FF 18, and Opera 11, but no go.  
>Grateful
>for any help.
>>
>> 
>>
>> a[href ^="<a  rel="nofollow" href="mailto:"">mailto:"</a>;]
>> {
>> background-image:url('/imgs/layout/icon_emailTEST.jpg')0 0 no-repeat;
>> margin-right: 10px;
>> padding-left:20px;
>> line-height:13px;
>> height: 13px;
>> }
>>
>> 
>___
>___
>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-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] trouble getting email icon to display with attribute selector

[Angela French]

It seems like it should be pretty simple, but my icon isn't showing up:  
http://www.sbctc.edu/testEmailNEW.html , so I'm probably just overlooking 
something simple.  I've tested in IE 9, FF 18, and Opera 11, but no go.  
Grateful for any help.



a[href ^="<a  rel="nofollow" href="mailto:"">mailto:"</a>;]
{
background-image:url('/imgs/layout/icon_emailTEST.jpg')0 0 no-repeat;
margin-right: 10px;
padding-left:20px;
line-height:13px;
height: 13px;
}





Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] what is h1 small syntax?

[Angela French]

>What puzzles me more is 24.5px. Apart from the issue whether it is a good
>ideas to size fonts in pixels, the question arises why one would use fractions
>of a pixel, in 24.5px, which might get rounded to 24px or 25px (or dealt with 
>in
>some other way).
>
>Yucca

The code came from twitter.bootstrap.  

__
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] what is h1 small syntax?

[Angela French]

Could someone please explain the "small" in the example below:

h1 small {
  font-size: 24.5px;
}

I would understand h1.small,  but am confused by the syntax "h1 small"

Thanks,



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] multi decimal places in percentages

[Angela French]

The properties below are from twitter.bootstrap.  How would one even figure out 
such percentages, let alone a browser supporting them?

margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] [class*="span"]

[Angela French]

Can someone please explain this to me - what it does, and maybe a practical 
example?  Thank you.

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] Font units question

[Angela French]

No please respond on list.  We had this come up in an application development 
review this morning.

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Tom Livingston
>Sent: Thursday, December 20, 2012 1:17 PM
>To: CSS Discussion Group
>Subject: [css-d] Font units question
>
>It's been quite a while now since i've seen this topic discussed. I'm aware 
>that
>it used to be Holy War territory, but I have what I *think* is a legitimate
>questions on the topic. . .
>
>Is sizing text in pixels **still** considered a no-no? I've seen sites recently
>that used px for font units and even in Chrome (latest Mac and PC) the text
>did not scale when font sizes were increased from default. Is this becoming
>the norm because of zoom?
>
>I ask because of a recent run-in with a layout that would make
>accommodating font-scaling difficult.
>
>Reply off-list please, so as not to upset list moms.
>
>Thanks!
>
>--
>
>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-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] explain positioning of this tag

[Angela French]

On this page: 
http://wet-boew.github.com/wet-boew/demos/footnotes/footnotes-eng.html#fnb2 the 
example of the footnotes at the bottom has the link back to the original 
footnote appear first, but in the linear order of the code the  tag in which 
the link resides appears last.  This is great for a screen reader user.  I 
can't figure out how they did it though.  The css shows display:inline-block 
applied. But there must me more to it. That didn't work for me.

Thanks for any help.

The html:


  Example of a footnote containing multiple paragraphs (first 
paragraph).
  Example of a footnote containing multiple paragraphs (second 
paragraph).
  Example of a footnote containing multiple paragraphs (third 
paragraph).
  Return to footnote 3 
referrer
   



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] way to style list item number?

[Angela French]

Everyone - Thanks for all the ideas.  I'll play around with them!

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Jukka K. Korpela
>Sent: Tuesday, October 30, 2012 10:19 AM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] way to style list item number?
>
>2012-10-30 18:36, Angela French wrote:
>
>> Is there a way (excluding using images for bullets) to style the
>> bullet when it is a number or a letter?
>
>Yes. The simplest solution is to wrap it inside a  element. Of course,
>you cannot do that if you use  to generate the list, but as soon as we stop
>thinking that we *must* use list markup for anything that looks like a list to
>someone, the solution is obvious.
>
>
>   1) item text
>   [...]
>
>
>This means that the numbers are part of the document data, not browser-
>generated. But why not? In order to flexible maintain a list, automatic
>numbering is useful, but it can usually be done server side.
>
>Using  or  markup, things get more difficult, since the ideas about
>styling their markers haven't come to any conclusion. In some cases, you can
>use auxiliary markup, e.g.
>
>item text
>
>Then you could set e.g. a red color on the  element, black color on the
>contained  element, with the net effect of making the bullet red.
>
>You could also suppress the normal bullets (list-style-type: none) and
>generate your own bullets, using generated content.
>
> > I'd like to try to make the number stand out and actually even wrap  > it in
>an  tag if possible to link it back to the footnote  > reference in the 
>above
>text.
>
>Well, if it needs to be a link, it needs to be an element, a real element (not
>pseudoelement). So the obvious solution appears to be the only solution
>then:
>
>
>   1) item text
>   [...]
>
>
>Yucca
>
>
>__
>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-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] way to style list item number?

[Angela French]

Hello,
Is there a way (excluding using images for bullets) to style the bullet when it 
is a number or a letter?  I'm trying to apply css to some footnotes I'm 
building.  The notes themselves appear in a list at the bottom of my page where 
each list number (an ) corresponds to the footnote number.  I'd like to try 
to make the number stand out and actually even wrap it in an  tag if 
possible to link it back to the footnote reference in the above text.

Thank you for any ideas.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] What's the official/technical name of...

[Angela French]

I prefer fluid.
Fluid: something  that is capable of flowing and that changes its shape at a 
steady rate when acted upon by a force tending to change its shape.
Liquid: state of matter with a definite volume but no fixed shape.

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Norman Fournier
>Sent: Wednesday, October 17, 2012 2:51 PM
>To: Micky Hulse
>Cc: CSS Discuss
>Subject: Re: [css-d] What's the official/technical name of...
>
>There is a difference of meaning between fluid and liquid. Fluid is a better
>descriptor for this in my opinion.
>
>On 2012-10-16, at 1:45 PM, Micky Hulse wrote:
>
>> Thanks for the reply David, I really appreciate the help. :)
>>
>> On Tue, Oct 16, 2012 at 1:21 PM, David Laakso 
>wrote:
>>> The names given to the various layouts on this site makes sense [1].
>>> I have mo idea whatsoever regarding an "official" definition...
>>
>> Thanks!
>>
>> This is pretty much the layout I'm talking about (visually):
>>
>> 
>>
>> I'm just looking for a way to classify some CSS that I'm working on.
>> Liquid seems to be what most people call it (at least, liquid is in
>> the name).
>>
>> Much appreciated!
>>
>> Cheers,
>> Micky
>>
>> --
>> http://hulse.me
>>
>
>__
>> 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/
>
>---
>www: http://www.normanfournier.com
>facebook: http://www.facebook.com/normanfournierdotcom
>linkedin: http://www.linkedin.com/profile/view?id=18127460
>youtube: http://www.youtube.com/user/normanfournier
>
>
>
>__
>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-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] odd space appearing in IE8

[Angela French]

I wanted to share this article I found that helped me understand the concepts:  
http://reference.sitepoint.com/css/collapsingmargins .  It has some good 
examples too.

>
> > This is a very special case of margin-collapsing in that the affected  > div
>has a min-height specified. As I noted in my first reply, this  > calls for a 
>more
>complex behaviour. And it is in this very special  > case that browsers don't
>really agree on what to do with the bottom  > margin of that .
> >
> > Here is a minimal testcase illustrating what is going on:
> > http://dev.l-c-n.com/_temp/min-height_margin-b.html
>
>But what for behaviour does the specification call, Philippe, in your opinion ?
>
>Philip Taylor
__
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] odd space appearing in IE8

[Angela French]

What I don't understand is why there is collapsing margins at all.  What is the 
rationale?

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Philippe Wittenbergh
>Sent: Thursday, August 09, 2012 4:51 AM
>To: CSS-D
>Cc: Philip TAYLOR
>Subject: Re: [css-d] odd space appearing in IE8
>
>
>Le 9 août 2012 à 20:06, Philip TAYLOR a écrit :
>
>> But what for behaviour does the specification call, Philippe, in your
>> opinion ?
>
>Back in time - somewhere in 2007 or so - when we first discussed and
>investigated this, the Gecko behavior was correct. But the spec text was
>different. Since then, the CSS WG discussed that issue and modified the spec
>text (quoted below); see the links provided by Alan. But I find the text much
>more ambiguous than it was then. The behavior as shown by WebKit, Presto,
>Trident is much more intuitive, although - I think - not correct by the spec.
>
>Obviously, all 3 implementations haven't found it necessary to modify their
>behavior (4years later.)
>
>see http://www.w3.org/TR/CSS21/box.html#collapsing-margins
>> A box's own margins collapse if the 'min-height' property is zero, and it has
>neither top or bottom borders nor top or bottom padding, and it has a
>'height' of either 0 or 'auto', and it does not contain a line box, and all of 
>its
>in-flow children's margins (if any) collapse.
>
>BTW - I updated my test case with some more examples that illustrates the
>ambiguous behaviour.
>http://dev.l-c-n.com/_temp/min-height_margin-b.html
>
>Philippe
>--
>Philippe Wittenbergh
>http://l-c-n.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-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] odd space appearing in IE8

[Angela French]

David and Phillippe,
The div#layout_AdBox p { margin-bottom: 0; } takes care of the problem.  What I 
don't understand is that it appears that my blue  is the object with the 
margin-bottom as the gap that appears is on the outside of the blue div.  How 
does the margin-bottom:10px; on my  tags make a gap outside of the div?

Angela

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of David Hucklesby
>Sent: Tuesday, August 07, 2012 6:56 PM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] odd space appearing in IE8
>
>On 8/7/12 4:05 PM, Angela French wrote:
>> http://sbctc.edu/indexTESTAD.aspx
>>
>> There is an odd gap under the blue div that has the text in it that reads
>> "One System. 34 Colleges." You can see the grid image that is a
>> background image for the content grid.  I can fix it by dropping the
>> same gradient that is in my blue div in the content div also, but I'd
>> rather figure out what is causing the gap.  It does not appear in IE7
>> or other browsers.
>>
>
>Yes. Webkit only AFAICT.
>
>The gap is the margin-bottom of 10px on the  that's poking through.
>
>You have several options:
>
>1. Add div#layout_AdBox { overflow: hidden; } 2. Add div#layout_AdBox {
>padding-bottom: 1px; } 3. Add div#layout_AdBox p { margin-bottom: 0; }
>
>Explanations:
>1. Overflow other than the default "visible" makes it a new block-formatting
>context. This behaves somewhat similarly to old IE "has Layout" property that
>your min-height declaration gives IE 7.
>
>2. The extra padding acts as a "fence" to contain the margin.
>
>3. This should be obvious. :)
>
>P.S. You can use other properties than "overflow" for #1:
>  <http://www.css-101.org/block-formatting-contexts/index.php>
>--
>Cordially,
>David
>
>__
>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-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] odd space appearing in IE8

[Angela French]

David - Can you please tell me where you find the  that's " poking through" 
with the margin-bottom:10px?
Thanks,
Angela French


>The gap is the margin-bottom of 10px on the  that's poking through.
>
>You have several options:
>
>1. Add div#layout_AdBox { overflow: hidden; } 2. Add div#layout_AdBox {
>padding-bottom: 1px; } 3. Add div#layout_AdBox p { margin-bottom: 0; }
>
>Explanations:
>1. Overflow other than the default "visible" makes it a new block-formatting
>context. This behaves somewhat similarly to old IE "has Layout" property that
>your min-height declaration gives IE 7.
>
>2. The extra padding acts as a "fence" to contain the margin.
>
>3. This should be obvious. :)
>
>P.S. You can use other properties than "overflow" for #1:
>  <http://www.css-101.org/block-formatting-contexts/index.php>
>--
>Cordially,
>David
>
>__
>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-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] odd space appearing in IE8

[Angela French]

http://sbctc.edu/indexTESTAD.aspx

There is an odd gap under the blue div that has the text in it that reads "One 
System. 34 Colleges." You can see the grid image that is a background 
image for the content grid.  I can fix it by dropping the same gradient that is 
in my blue div in the content div also, but I'd rather figure out what is 
causing the gap.  It does not appear in IE7 or other browsers.

Thank you for your help.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] Pixels won't increase in IE

[Angela French]

Silly me.  Thank you!

>-Original Message-
>From: Tim Arnold [mailto:tim.arn...@gmail.com]
>Sent: Tuesday, August 07, 2012 11:32 AM
>To: Angela French
>Cc: css-d (css-d@lists.css-discuss.org)
>Subject: Re: [css-d] Pixels won't increase in IE
>
>On Tue, Aug 7, 2012 at 2:23 PM, Angela French  wrote:
>> Hello,
>> I have encountered a circumstance where IE 8 will not increase text size of
>the pixels in one area of my page.
>>
>> http://sbctc.edu/indexTESTAD.aspx
>>
>> The area with the issue is the div with the block of text that begins  "One
>System. 34 Colleges"
>>
>> In IE8 when I try View >  Text Size  (select any other size than medium) the
>text in this div does not change size. Also, my background gradient image
>doesn't show either.
>
>Hey Angela,
>
>You have defined the font size in pixels instead of a relative font size (% or
>em).  Other text on that page is sized using ems.  Switch it up and you should
>be good to go.
>
>-Tim
>
>--
>
>tim.arn...@gmail.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] Pixels won't increase in IE

[Angela French]

Hello,
I have encountered a circumstance where IE 8 will not increase text size of the 
pixels in one area of my page.

http://sbctc.edu/indexTESTAD.aspx

The area with the issue is the div with the block of text that begins  "One 
System. 34 Colleges"

In IE8 when I try View >  Text Size  (select any other size than medium) the 
text in this div does not change size. Also, my background gradient image 
doesn't show either.

The css is below. Thank you for any advice.

div#layout_AdBox {

background-image:url(/imgs/Homepg/AdGradient.jpg) repeat-y;
background-color:#3a6e83;
margin-top:-1px;
padding-top:11px;
padding-left:16px;
padding-right:16px;
min-height:115px;
}

div#layout_AdBox h1 {
font-family:Arial, Helvetica, sans-serif;
color:#FF;
font-weight:bold;
font-size:21px;
}

div#layout_AdBox p {
color:#FF;
font-size:18px;
margin-left:0;
margin-top:8px;
        }



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] nav wraps in native IE9

[Angela French]

>It happens in all browsers on my MacBook. I do suggest not making the font-
>size any smaller though - it's already hard to read on a small laptop screen.
>
>Perhaps you could take out the ctcLink item that seems to appear another
>two times on that page - and is not on the inner pages AFAICT.
>--
>Cordially,
>David

David - can you tell me what the difference is with Macs that would do that?  I 
don't have any macs to test on.
Regarding the ctcLink in the left hand menu and the same in the top na v- this 
menu system is pulled from a single .xml file.  The dropdown from the top nav 
menu (the blue bar) is exactly the same as what it appears in the local nav 
menu on the left (the green bar).  I can't change that, so ctcLink appears 
twice. I'm sorry, but what is AFAICT?
__
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] nav wraps in native IE9

[Angela French]

Hello List,

I have dropped a font size down on my top navigation bar .05em and IE9 is 
wrapping the list items to the next line.  This is not happening in 
IE8/IE7compatability, or any other browser I tested.  Can anyone tell me what 
the issue might be?
The nav bar in question reads  "Education SvcsGroups" and it is the 
Groups list item that wraps to the next line.

http://sbctc.edu/college/_i-ctclinkNEW.aspx

Thank you!

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] problem with positioning

[Angela French]

LOVE your answer Tim!

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Tim Arnold
>Sent: Saturday, March 31, 2012 8:28 AM
>To: Lisa Frost
>Cc: David Laakso; css-d@lists.css-discuss.org
>Subject: Re: [css-d] problem with positioning
>
>On Sat, Mar 31, 2012 at 5:42 AM, Lisa Frost  wrote:
>>>
>> Thanks that works a treat, but i do not understand why i have to put a
>> relative position on my container div and then why my bee image is
>> taking its values from the container div and not the div it is
>> contained in or the parent of that called masthead.
>>
>> Any explanation from anyone would be greatly received.
>> Thanks
>>
>> Birdie
>
>Hey Birdie,
>
>The deal it pretty simple once the lightbulb goes off (I remember it taking a
>while for me).  When you make an element "position:
>absolute;" it will look for what container it should position itself relative 
>to.
>That is, what element's top,left corner should it consider top: 0, left: 0.  If
>none of its parent, grandparent, or other elements have any positioning on it
>then it uses the  container.  If it does find a parent with "position:
>something" on it, then it's all, like "cool, I'll position myself based on 
>you."
>
>So, your Bee trots up the HTML structure asking each container that it is
>inside of, in turn: "Are you my mother?"  If the container has no position,
>then the little Bee marches up to the next container it is inside of and asks
>"Are you my mother?" until it gets the answer, "yes little Birdie, I have
>position too, I am your mother."
>
>Tim
>
>
>
>--
>
>tim.arn...@gmail.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-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] style help on defintion lists

[Angela French]

I'm trying to style definition lists to look as follows, where the  
displays "inline" with theand then wraps under the .  Is this 
possible?


Term: definition blah blah blah
Blah blah blah blah

Term: definition blah blah blah
Blah blah blah blah




Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] IE9 rendering issue when in compatability mode

[Angela French]

I have a co-worker with IE9 who is experiencing a bizarre rendering issue with 
IE9 while in compatibility mode. This issue goes away when he refreshes.  This 
is the page: http://sbctc.edu/ .  The two lines of text (just the white text) 
in the footer renders to the right top of the page layout. When he refreshes, 
it drops back down into the footer space.   I've reviewed the html (validates) 
and the css and can't find anything that would do this.  I always get 
suspicious of browser bugs when issues are corrected with a refresh.

Thank you for any ideas.




Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] trouble with bullets in IE8 compatability mode

[Angela French]

Hello,
I am having trouble with IE8 in compatibility mode (IE7) - the list bullets 
won't show.  I've played around with margins, padding, list-position, etc.  In 
addition, in order not to have the heading which follows the list to appear in 
the position of the last list item in the right column, I put in .  The margin-top works in IE8, but 
nowhere else.  I don't really want to put that margin-top on the heading as 
that heading could change in the future.  Grateful for any ideas. (the html 
does validate)

This is my test page:  
http://sbctc.edu/college/_e-wkforceworkfirsttrainingresourcesNEW.aspx .  It is 
the 2-column list I am referring to.

Here is the css:

ul.two_column_list
{width:520px;

}

ul.two_column_list li {
float:left;
margin: 10px 0 0 0;
padding: 0 10px 0 0;
width:250px;


}

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] position problem with

[Angela French]

Hello,
Today I am working on a Skip To Content link added to may page.  At first I had 
it in a div (this list helped with an opacity issue I was having). But, due to 
a change in approach, I needed to take it out of a div so I could affect change 
upon a:focus.   (I'm positioning it off page until focus has been brought to 
it).

Now the problem is that the addition of the , absolutely positioned at the 
top of the page (even a negative top measurement) has produced a gap between 
the top of the outer page container and the browser edge.  Ugh.  This must have 
something to do with the  being a block element, but applying a negative 
margin-bottom to it didn't fix it.  I did not have this issue when I added the 
prior div into the page and it's a block element too.

I'm sorry I can't provide a link to see it.  Is there anything about a  that 
is causing that space at the top, whereas the div did not?

The  is absolutely positioned, just like my div was.

Thank you


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] problem with opacity

[Angela French]

I have taken the  out of the  and absolutely positioned it so it LOOKS 
like a child but it’s not.  This works, but I realized that resizing the 
browsers messes up the position of both elements, so I’ve got to think a bit 
more….

From: Tim Arnold [mailto:tim.arn...@gmail.com]
Sent: Thursday, February 16, 2012 11:45 AM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] problem with opacity


On Thu, Feb 16, 2012 at 2:38 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
  It appears that this background color is inheriting the opacity of the div it 
lives in as the white background-color seems to have no effect. I have even 
reset the opacity of this  by setting it to 100.

Yes, the opacity css property is inherited by anything inside that container.  
There is no way that i know of to get around that when using "opacity."  What 
you can do, however is use RBGa background instead.

Check out: http://css-tricks.com/rgba-browser-support/  and.or 
http://www.css3.info/preview/rgba/

If you want it to work in IE browsers older than IE9, you might want to use PIE 
(http://css3pie.com/) which is my favorite way to beat dumb browsers in to 
shape.

-Tim

--

tim.arn...@gmail.com<mailto:tim.arn...@gmail.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] problem with opacity

[Angela French]

Hello,
I am wanting to achieve the following effect:

A div with a white background color with a 40% opacity.  This div is absolutely 
positioned over a picture so that that picture comes through the div because of 
its opacity setting.  This part works fine.

Then in that div I want to use a  tag with a background color of white.  
This is the part that is not working so well.  It appears that this background 
color is inheriting the opacity of the div it lives in as the white 
background-color seems to have no effect. I have even reset the opacity of this 
 by setting it to 100.

I'm sorry I can't provide a link, but here is my CSS  and code.  Hoping someone 
can set me straight.

div.skiptomain
{
   position:absolute;
   height:35px;
   width:145px;
   top:0;left:380px;
   border-bottom-left-radius:8px 8px;
   background-color:#fff;
   opacity:0.4;
   filter:alpha(opacity=40);

}
div.skiptomain  p
{

   font-weight:bold;
   background-color:#ff !important;
   opacity:1.0;
   filter:alpha(opacity=100);
}




 Skip to main content
 


Thank you!


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] using image in background of h1 heading

[Angela French]

Hello,
I am trying to make an image as a background on an h1.  Here is my test page: 
http://sbctc.edu/college/_i-ctclinkTEST.aspx .

It works fine, but is there some way to make the text display if images are 
off?  Right now it is positioned off the page.   I wish there c

Here is the css:

h1.headerReplacement {
text-indent: -px;
width: 135px;
height: 40px;
background: url('/imgs/it/ctcLink.jpg') no-repeat;
}

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] Way to start an ol at a specific number/letter?

[Angela French]

Counter-reset isn't supported in IE 7.  Naturally.  :-(

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Chris Morton
>Sent: Wednesday, November 16, 2011 3:29 PM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] Way to start an ol at a specific number/letter?
>
>http://timmychristensen.com/css-ordered-list-numbering-examples.html
>
>On Wed, Nov 16, 2011 at 3:23 PM, Angela French  wrote:
>
>> Oh, the days of html 4.0 transitional when we could set the start
>> number for a list right in the html!  Is there a way to do this in CSS?  I 
>> would
>> need to write it inline on the 
>>
>> Thanks!
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.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-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-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] Way to start an ol at a specific number/letter?

[Angela French]

Thanks!  I got it to work with list-style-type decimal, but not alpha.  Any way 
to make it start on a particular letter?

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Chris Morton
>Sent: Wednesday, November 16, 2011 3:29 PM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] Way to start an ol at a specific number/letter?
>
>http://timmychristensen.com/css-ordered-list-numbering-examples.html
>
>On Wed, Nov 16, 2011 at 3:23 PM, Angela French  wrote:
>
>> Oh, the days of html 4.0 transitional when we could set the start
>> number for a list right in the html!  Is there a way to do this in CSS?  I 
>> would
>> need to write it inline on the 
>>
>> Thanks!
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.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-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-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] Way to start an ol at a specific number/letter?

[Angela French]

Oh, the days of html 4.0 transitional when we could set the start number for a 
list right in the html!  Is there a way to do this in CSS?  I would need to 
write it inline on the 

Thanks!


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] help targeting a nested list

[Angela French]

So I wrote this style, and it works for the nesting level indicated, but I need 
a style to work at any nesting level for li.ListNumber. Isn't that possible?
And no matter what I still can't get IE8/IE7 to render the decimals.

div#Content_box ul ol li.ListNumber
{
font-size: 1.25em;
list-style-type:decimal!important;

}




>-Original Message-
>From: Tim Climis [mailto:tim.cli...@gmail.com]
>Sent: Wednesday, November 16, 2011 10:19 AM
>To: Angela French; 'css-d'
>Subject: RE: [css-d] help targeting a nested list
>
>> Is there some way to target the li that doesn't care what level of
>> nesting
>it is in?
>
>Yes, and your example is it.  "li" selects any list item.  "li li" selects 
>second,
>third, etc level list items.
>
>The problem is that there's a rule div#Content_box ol that sets the font-size
>to .8em on the whole list so if you want your text to be the same size as
>everything else, you'll have to blow it up again.  1.25em (the reciprocal of 
>.8)
>should do the trick.
>
>---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/

[css-d] help targeting a nested list

[Angela French]

Good Morning.  I need some help styling s in nested lists.

This is my test page: 
http://168.156.9.142/college/_f-tuitionwaivers_childofdisableddeceasedpowNEW.aspx
 . Half way down the page, under Changes in 2008, my nested list is supposed to 
be numbered and the font should be the same as elsewhere.  It isn't working.  
My CSS needs to target the  as our CMS doesn't not support styling lists, 
but only list items.

This is my css for the numbered list items:
div#Content_box ol li.ListNumber
{
font-size: 1em;
margin: 5px 0px 5px 5px;
list-style-type:decimal;
}

It is working fine elsewhere, but on a nested list it is not working in IE. In 
FF, it renders as numbered, but the font is still tiny.

I also tried removing the list type from the style declaration as below, but 
that doesn't work either.  Is there some way to target the li that doesn't care 
what level of nesting it is in?

div#Content_box li.ListNumber
{
font-size: 1em;
margin: 5px 0px 5px 5px;
list-style-type:decimal;
}


Thank you!

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] can't get margin-bottom on to take effect

[Angela French]

I must be doing something wrong, but I sure can't see what!

Here is an example page:   http://sbctc.edu/college/f_accounting.aspx . I'm 
trying to put a bit of margin-bottom on the "Get help downloading files" .  If 
I try some other style, say a border-bottom, it takes, so there must be 
something I'm not understanding about margin-bottom on block elements.

Here is the html and the css:

Get help 
downloading files.

Here is the css:

p a.downloadhelp
{
margin-bottom:20px!important;


}

p a.downloadhelp img
{
text-decoration: none;
border: 0 none;
margin-right:5px;

}

As always, thank you.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] how to center "some" table columns

[Angela French]

Thank you for all the suggestions. 

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Jukka K. Korpela
>Sent: Tuesday, November 08, 2011 10:07 AM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] how to center "some" table columns
>
>11/8/2011 3:29 AM, Philippe Wittenbergh wrote:
>
> >> In the table linked to below, I would like to center  >> the third, fourth,
>and fifth columns of data.
>[...]
> >> http://www.sbctc.ctc.edu/college/_f-
>tuitionwaivers_runningstartNEW.aspx
> >
> > td:first-child + td + td,
> > td:first-child + td + td + td,
> > td:first-child + td + td + td + td {text-align: center;} [1]
>
>That's how to do it using general techniques, but in special cases, we can cut
>down the stylesheet by applying negative thinking:
>
>td { text-align: center; }
>td:first-child, td:first-child + td { text-align:left; }
>
>That is, declare all cells as centered, then handle those (here, 1st and 2nd
>column) that shouldn't be centerd.
>
> > Yeah, I know HTML4 allows for the 'align' attribute on ,  > but except
>for IE in quirks mode, it doesn't work anywhere.
>
>It's still a useful precaution, since older versions of IE are not yet 
>extinct. It's
>simple to specify
>
>
>
>
>
>
>
>and it has no known drawbacks (when used to complement the CSS way, not
>instead of it).
>
>But there's quite challenge on the page mentioned. The fourth column
>contains numbers with one or two digits. I don't think centering is desirable
>here, as numbers should be right-aligned to be easily comparable. (In the 3rd
>column, this does not matter, as numbers are all of the x.xx pattern.) So what
>should you do if you want the numbers right-aligned with respect to each
>other but centered horizontally within the cells?
>
>In practice, setting text-align: right; padding-right: 2em might work
>sufficiently well, but it's really not a clean solution. I cannot figure out an
>approach that does not use added markup (or scripting).
>
>Besides, there's an entry of "10*", i.e. a number with an asterisk after it.
>Normal typography rules say that the expression should be positioned so
>that the "0" aligns with the last digit of other integers in the column. Thus 
>is
>something we cannot do any direct way in CSS. Notations like "10*" just don't
>fit into the simple models. (Making the number a link instead would be a
>more "www-like" approach, but it would not work on paper.)
>
>(The trickery that crept into my mind is based on left-padding the numbers to
>the same width using FIGURE SPACE   for padding, and centering the
>cells with a suitable left padding. It works under favorable conditions but
>depends on font issues.)
>
>Yucca
>
>__
>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-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] how to center "some" table columns

[Angela French]

Normally, I would use colgroup to center the text in table cells, but this is a 
complex table with two rows of  and it is confusing me.  Perhaps it's not 
even possible (or maybe I'm just tired and not seeing the obvious?) .  In the 
table linked to below, I would like to center  the third, fourth, and fifth 
columns of data.  Can anyone suggest how I might do that please?

http://www.sbctc.ctc.edu/college/_f-tuitionwaivers_runningstartNEW.aspx

Thank you,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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 z-index

[Angela French]

Hello,
I just discovered on my site, that where a z-index of 10 kept my top nav drop 
downs readable, in IE 9 I had to bump up the z-index number.
Any ideas why that would be different in IE9?
http://sbctc.edu/college/e_index.aspx

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] browser specific hack

[Angela French]

I recently took over an approximately 6 year old site with LOTS of styles.  In 
validating the css for a page, I found something I'd never seen before, and I'm 
hoping one of you can tell me anything about this syntax.  A Google search 
didn't return anything on this specific usage.  I thought perhaps it was some 
old garbage left in there so I commented it out.  Good thing I didn't delete it 
because 2 days later I discovered what it does!

Here is a page for my site:
http://sbctc.edu/college/f_index.aspx

The style sheet is dropdown_nav.css

The style is:

div#Nav2_dropdown ul ul {

 top:1.4em !ie;

  }

It affects the positioning of the submenus that are revealed when you hover 
over any of the blue navigation items in the top horizontal menu bar.

Taking it out had no effect in IE 8, but did in IE 8 in compatibility mode.

Thank you for any info you can provide about this syntax.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] help with positioning text in bottom right corner of content area

[Angela French]

Hello,
I made the parent (div id="Content_box" style="position:relative;">.  But this 
had the unintended consequences of messing up the rendering of the drop down 
menus that display over the page content.

You can see it here:  http://sbctc.edu/college/test.aspx



From: Kevin A. Cameron [mailto:kevinacame...@gmail.com]
Sent: Friday, October 21, 2011 2:29 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] help with positioning text in bottom right corner of 
content area

Try making the parent element position relative, and the AF element position 
absolute, bottom:0, left:0.

Kevin

On Fri, Oct 21, 2011 at 2:15 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
I need to position a very small text item in the bottom right hand corner of my 
content area.
I've tried positioning it relative with bottom:0 and right:0, but that didn't 
work.  So then I just positioned it like so:

AF.

This does move it to the right, but not to the bottom of my page content area.  
I can't determine what is keeping it from sitting on the bottom.  Any advice 
appreciated.  Here is my test page:

http://sbctc.edu/college/test.aspx



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
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] help with positioning text in bottom right corner ofcontent area

[Angela French]

I tried that.  I think that div needs its parent to be relatively positioned.

>-Original Message-
>From: Jayesh T [mailto:xfs...@hotmail.com]
>Sent: Friday, October 21, 2011 2:50 PM
>To: Angela French; css-d@lists.css-discuss.org
>Subject: Re: [css-d] help with positioning text in bottom right corner
>ofcontent area
>
>You could put it in a DIv like this:
>
>
>AF .
>
>
>
>Then your CSS is like this:
>
>.mybottom {
>   position: absolute;
>   bottom: 0;
>   right: 0;
>   height: 50px;
>   background-color: blue;
>   color: yellow;
>}
>
>hth
>
>
>--
>From: "Angela French" 
>Sent: Friday, October 21, 2011 10:15 PM
>To: 
>Subject: [css-d] help with positioning text in bottom right corner ofcontent
>area
>
>> I need to position a very small text item in the bottom right hand
>> corner of my content area.
>> I've tried positioning it relative with bottom:0 and right:0, but that
>> didn't work.  So then I just positioned it like so:
>>
>> AF.
>>
>> This does move it to the right, but not to the bottom of my page
>> content area.  I can't determine what is keeping it from sitting on the
>bottom.
>> Any advice appreciated.  Here is my test page:
>>
>> http://sbctc.edu/college/test.aspx
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.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-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] help with positioning text in bottom right corner of content area

[Angela French]

I did try putting the  inside a < div>  that I positioned relative with the 
 positioned absolutely.  But I suppose what I need to do is set the content 
container to relative.  But I didn't write the layout CSS (happened before I 
got here) and there is something funky about the nested divs used to arrive at 
the content area.  I'm a little hesitant to mess with them. Any other 
possibilities?

From: Kevin A. Cameron [mailto:kevinacame...@gmail.com]
Sent: Friday, October 21, 2011 2:29 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] help with positioning text in bottom right corner of 
content area

Try making the parent element position relative, and the AF element position 
absolute, bottom:0, left:0.

Kevin

On Fri, Oct 21, 2011 at 2:15 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
I need to position a very small text item in the bottom right hand corner of my 
content area.
I've tried positioning it relative with bottom:0 and right:0, but that didn't 
work.  So then I just positioned it like so:

AF.

This does move it to the right, but not to the bottom of my page content area.  
I can't determine what is keeping it from sitting on the bottom.  Any advice 
appreciated.  Here is my test page:

http://sbctc.edu/college/test.aspx



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.org<mailto: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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
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] help with positioning text in bottom right corner of content area

[Angela French]

I need to position a very small text item in the bottom right hand corner of my 
content area.
I've tried positioning it relative with bottom:0 and right:0, but that didn't 
work.  So then I just positioned it like so:

AF.

This does move it to the right, but not to the bottom of my page content area.  
I can't determine what is keeping it from sitting on the bottom.  Any advice 
appreciated.  Here is my test page:

http://sbctc.edu/college/test.aspx



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] how to get rid of space between background images that are repeating vertically

[Angela French]

Test page:  http://sbctc.edu/college/fieldguide.aspx .  You can't really see 
the spaces because I "filled" them with an offwhite border-bottom.
>
>URL or URI ?
>
>Angela French wrote:
>> I have a background image that repeats vertically.  The weird thing is
>though, that it is rendering with a small space between each one. Can
>someone tell me what property I might try to get rid of that? Or why it is
>doing that?
>>
>>
>
>__
>> 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-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] how to get rid of space between background images that are repeating vertically

[Angela French]

I have a background image that repeats vertically.  The weird thing is though, 
that it is rendering with a small space between each one. Can someone tell me 
what property I might try to get rid of that? Or why it is doing that?

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] way to force every cell in column to be text-align:center?

[Angela French]

I tried colgroup, but that didn't work.  I suspect that my css is overriding 
the html, right?  So I added this to my style sheet, but it didn't work.

table.RunningStart colgroup.center
{

text-align:center;


}

Here is a link where I tried to apply this to the first table on the page: 
http://sbctc.edu/college/_g-barmentor.aspx  .  I am trying to center the 1st 
and 4th columns.

>Sure.  You can define  for formatting.  You can try this link for a
>quick over-view:
>
>
>
>

__
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] way to force every cell in column to be text-align:center?

[Angela French]

Is there a way to style a single column in a table with text-align:center  
without having to apply the class/style to every  in the column?

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/

Re: [css-d] seeting width on display:table-cell

[Angela French]

I screwed up in my last test (and posted bad code - forgot the width:50% which 
I had temporarily taken out on a test).  It works great now.  Thanks for your 
help.
Angela French

>-Original Message-
>From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
>discuss.org] On Behalf Of Jukka K. Korpela
>Sent: Monday, September 19, 2011 11:00 PM
>To: css-d@lists.css-discuss.org
>Subject: Re: [css-d] seeting width on display:table-cell
>
>20.9.2011 3:08, Angela French wrote:
>
>> If I only have one row, do I need to use the display:table-row
> > as a parent container, or can I just use the table-cells?
>
>Someone can surely come up with a theoretical answer, but I would simply
>wrap any cell inside a row and any row inside a table, e.g.
>
>
>cells
>
>.table { display: table; width: 100%; }
>.row { display: table-row; }
>.cell { display: table-cell; border: solid; width: 50%; }  class=table>  foo class=cell>bar  
>
>> Also, I have two cells and wand each a width of 50%, but the browser
> > is not rendering it as directed.
>
>Firefox 6 and IE 9 show the above with such widths. IE 7 and earlier don't
>support display: table-cell and relatives, so tabular formatting in CSS isn't
>practical on web pages yet, in most cases.
>
>I suppose you didn't set a width on an enclosing element. Without such a
>setting, width: 50% raises the question "50% of _what_?"
>
>--
>Yucca, http://www.cs.tut.fi/~jkorpela/
>
>__
>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-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/