Re: [css-d] Wrong Selector?
You can be assured that Bootstrap covers every browser that you need to be
concerning yourself with :-).
On Mon, Oct 12, 2015 at 12:56 PM, Theophan Dort
wrote:
> Many thanks to you both!
>
> It’s been a long while since I’ve dealt with HTML and CSS, and HTML 5 is
> new to me, as is the Bootstrap thing (though I like it a lot), and I’m
> almost wholly unfamiliar with CSS 3. I’m a cautious somewhat elderly guy,
> and I’m more than a little nervous about whether there may be a lot of
> folks using old enough browsers that some of this stuff won’t work well,
> but I’m hoping that Bootstrap has taken that into account. I have several
> pages that seem close to ready for prime time.
>
> I may wind up leaving the headers alone, anyway, but it was frustrating me
> that I couldn’t figure out why I couldn’t change the font color. Thanks
> again!
>
> Theophan
>
>
> > On Oct 12, 2015, at 10:54 AM, Tom Livingston wrote:
> >
> > That rule would then become *extremely* hard to over-ride should the
> > need arise. IIRC, even an inline style would get trumped by this rule.
> >
> > On Mon, Oct 12, 2015 at 9:08 AM, Theophan Dort
> wrote:
> >> Many thanks!
> >>
> >> I tried “.navbar a” and it didn’t work, but it worked when I added
> "!important", so I figured there must be Bootstrap rules that are a lot
> more specific so they’re being used. So I removed the “!important” and
> tried “.navbar ul.navbar-nav li a” and that seemed to work for most of it,
> and “.navbar a.navbar-brand” for the “Brand.” It looks like I have a lot
> more selectors to find and use, but at least now I think I know how to
> proceed.
> >>
> >> Would there be a disadvantage to just using the
> >>
> >>.navbar a {
> >>color:white !important;
> >>}
> >> though? Sure would be easy.
> >>
> >> Thanks again!
> >>
> >> Theophan
> >>
> >>
> >>> On Oct 12, 2015, at 8:43 AM, Ryan Reese
> wrote:
> >>>
> >>> You need to add the color:#FFF to your anchor rules. It's using #777
> from
> >>> your other styles.
> >>>
> >>> On Mon, Oct 12, 2015 at 8:19 AM, Theophan Dort
> >>> wrote:
> >>>
> >>>> I’m trying to build a very small web site for my church’s capital
> >>>> campaign, using Bootstrap, and I can’t change the color of the font
> in the
> >>>> header. I put a style in the section that changes the
> background
> >>>> color fine, but the same selector doesn’t change the font color:
> >>>>
> >>>> .navbar {
> >>>> background-color:#BB2F00;
> >>>> color:white;
> >>>> }
> >>>>
> >>>> I’m not very good navigating my way through the tools, but when I
> tried to
> >>>> see, using Firefox Developer Edition, what was actually going on, it
> really
> >>>> looked to me as though the rule that was being followed was indeed
> that the
> >>>> color was FFF, but my eye says it’s still the gray that Bootstrap
> specifies.
> >>>>
> >>>> Here’s the test page: http://raisingthecross.org/navColorTest.html
> >>>>
> >>>> Thanks!
> >>>>
> >>>> Theophan
> >>>> __
> >>>> 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/
> >>>
> >>>
> >>>
> >>>
> >>> --
> >>> Ryan Reese
> >>> __
> >>> 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.in
Re: [css-d] Wrong Selector?
Yes, the only thing that can override !important is another !important.
On Mon, Oct 12, 2015 at 10:54 AM, Tom Livingston wrote:
> That rule would then become *extremely* hard to over-ride should the
> need arise. IIRC, even an inline style would get trumped by this rule.
>
> On Mon, Oct 12, 2015 at 9:08 AM, Theophan Dort
> wrote:
> > Many thanks!
> >
> > I tried “.navbar a” and it didn’t work, but it worked when I added
> "!important", so I figured there must be Bootstrap rules that are a lot
> more specific so they’re being used. So I removed the “!important” and
> tried “.navbar ul.navbar-nav li a” and that seemed to work for most of it,
> and “.navbar a.navbar-brand” for the “Brand.” It looks like I have a lot
> more selectors to find and use, but at least now I think I know how to
> proceed.
> >
> > Would there be a disadvantage to just using the
> >
> > .navbar a {
> > color:white !important;
> > }
> > though? Sure would be easy.
> >
> > Thanks again!
> >
> > Theophan
> >
> >
> >> On Oct 12, 2015, at 8:43 AM, Ryan Reese
> wrote:
> >>
> >> You need to add the color:#FFF to your anchor rules. It's using #777
> from
> >> your other styles.
> >>
> >> On Mon, Oct 12, 2015 at 8:19 AM, Theophan Dort
> >> wrote:
> >>
> >>> I’m trying to build a very small web site for my church’s capital
> >>> campaign, using Bootstrap, and I can’t change the color of the font in
> the
> >>> header. I put a style in the section that changes the
> background
> >>> color fine, but the same selector doesn’t change the font color:
> >>>
> >>>.navbar {
> >>>background-color:#BB2F00;
> >>>color:white;
> >>>}
> >>>
> >>> I’m not very good navigating my way through the tools, but when I
> tried to
> >>> see, using Firefox Developer Edition, what was actually going on, it
> really
> >>> looked to me as though the rule that was being followed was indeed
> that the
> >>> color was FFF, but my eye says it’s still the gray that Bootstrap
> specifies.
> >>>
> >>> Here’s the test page: http://raisingthecross.org/navColorTest.html
> >>>
> >>> Thanks!
> >>>
> >>> Theophan
> >>> __
> >>> 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/
> >>
> >>
> >>
> >>
> >> --
> >> Ryan Reese
> >> __
> >> 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/
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>
--
Ryan Reese
__
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] Wrong Selector?
You need to add the color:#FFF to your anchor rules. It's using #777 from
your other styles.
On Mon, Oct 12, 2015 at 8:19 AM, Theophan Dort
wrote:
> I’m trying to build a very small web site for my church’s capital
> campaign, using Bootstrap, and I can’t change the color of the font in the
> header. I put a style in the section that changes the background
> color fine, but the same selector doesn’t change the font color:
>
> .navbar {
> background-color:#BB2F00;
> color:white;
> }
>
> I’m not very good navigating my way through the tools, but when I tried to
> see, using Firefox Developer Edition, what was actually going on, it really
> looked to me as though the rule that was being followed was indeed that the
> color was FFF, but my eye says it’s still the gray that Bootstrap specifies.
>
> Here’s the test page: http://raisingthecross.org/navColorTest.html
>
> Thanks!
>
> Theophan
> __
> 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/
--
Ryan Reese
__
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] css validation error
The validator basically doesn't know that it's valid CSS. It's not updated.
Ignore the error :).
On Tue, Jun 30, 2015 at 1:59 PM, Mike Manley wrote:
> I need a little help understanding this error.
>
> All css validates except this part.
> "css error = Unknown pseudo-element or pseudo-class :required"
>
>
> I have this html in a table for a contact form and all html validates.
> required="required" />
>
> In the css I have this
> input:required, textarea:required{add styles}
>
> From all the information I have been able to find (which is mostly a
> couple of years old) what I have in the css is the correct way of doing
> this. So either my information is wrong or I have misunderstood it.
>
> TIA
> Mike
>
> __
> 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/
>
--
Ryan Reese
__
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 do I get this gap at the top of the page ?
You have a classic margin collapse. Look at "div#pananim". That element has
a 51pxtop margin that is pushing through the parent. Add a 1px top padding
to #outer.
I'm not sure hte overall look you are going for; but it is a margin
collapse.
On Sat, Jun 6, 2015 at 9:40 AM, Tim Dawson wrote:
> I'm working on a web site which has a menu bar at the top, with a large
> banner image below.
> http://holidaymullandiona.com
>
> The menu bar () stays in place as the page is scrolled up (courtesy
> of jQuery). It is positioned absolutely wrt a div.outer. The banner has six
> images which are rotated (also with jQuery). The images, with overlying
> text, are each contained in a which is absolutely positioned wrt a
> containing . That div is given height by using JQuery to
> clone one of the divs after loading and make its position static. That all
> works satisfactorily.
>
> But the entire page is displaying with a 51px gap at the top. The HTML
> after loading follows this outline. I have shown the relevant CSS beside
> each element:
>
>
> {position: relative;}
> {position: absolute; wrt .outer}
> nav stuff here
>
>{position: relative; margin-top: 51px;}
> {position: static;}
> image and text in each div
>
> {position: absolute; wrt #pananim}
> image and text in each div
>
>
> five more similar divs...
>
>
>
>
> home page content...
>
>
>
>
>
>
> To see this outline you'll need to be able to view the generated source.
>
> The has a height of 51px (50px image plus 1px border-bottom), so to
> get the absolutely positioned divs that are inside div#pananim to display
> in the right place I've given div#pananim a margin-top of 51px. So far so
> good, but the whole page has now acquired a gap at the top (occupied only
> by HTML), and I can't work out why.
>
> My understanding is that absolute positioning is with respect to the
> BORDER position (if there were one), that's to say it's outside the
> padding, but inside any margin. Hence the {margin-top: 51px}.
>
> I can get rid of the gap by taking the {position: relative;} OFF
> div.outer, but that leaves the positioned with respect to the body,
> which I suppose is OK but not what I'd like.
>
> In the hope of clarifying a bit, I've put a RED outline on the body and
> GREEN on the div.outer.
> This is the large screen version. The same happens on small screens, but
> the menu is hidden until the green icon is clicked (prodded).
>
> I think the gap must come about because I've got confused with my
> {position: relative} and {position: absolute;}. Can anyone offer some
> guidance, please ?
>
> Tested in Firefox and Chrome and briefly in IE11.
>
> Regards,
>
> Tim Dawson
>
>
> --
> Tim Dawson
> Maolbhuidhe
> Fionnphort
> Isle of Mull PA66 6BP
>
> 01681 700718
> ______
> 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/
>
--
Ryan Reese
__
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 & Horizontal Center ?
Chris, in order for the top/right/bottom/left:0 trick and margin:auto; to work, that element needs a width/height (width to horizontally center, and a height to vertically center). Not ideal for a couple reasons - situations that truly call for position:absolute are rare, and also setting a fixed width/height, most of the time, is a poor choice to make. On Thu, Jun 4, 2015 at 3:20 AM, Erik Visser wrote: > Erik Visser schreef op 04-06-15 om 03:00: > >> This is what i remember too. >> > > Excuses for bloating the list with a not quite helpful contribution. > > It was 3 am. But that's not a very good excuse. > > Luckily the real experts came in and helped you out. > > erik > > > > > __ > 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/ > -- Ryan Reese __ 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 & Horizontal Center ?
Display table/table-cell replicates the table counterparts. You certainly don't need to know a tables height to center it. It's no different in CSS...As my example shows. On Wed, Jun 3, 2015 at 9:04 PM, Ryan Reese wrote: > http://codepen.io/ryanreese09/pen/NqpMYa > > On Wed, Jun 3, 2015 at 9:02 PM, Roger Blanton wrote: > >> Because the table approach only works when you know the height of the >> elements. Flex will work no matter what >> >> Hope that clarifies. >> >> — >> Sent from Mailbox <https://www.dropbox.com/mailbox> >> >> >> On Wed, Jun 3, 2015 at 9:01 PM, Ryan Reese >> wrote: >> >>> I'm confused. You say if you can't use flex, you can't do it. Then you >>> acknowledge the table/table-cell approach exists. So why not use >>> table/table-cell?! >>> >>> On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser >>> wrote: >>> >>> > Roger Blanton schreef op 04-06-15 om 02:26: >>> > >>> >> Without knowing the height of the element or parent container I don't >>> >> think it is possible without using a flex layout with just CSS. >>> >> >>> >> >>> > This is what i remember too. >>> > >>> > >>> > __ >>> > 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/ >>> > >>> >>> >>> >>> -- >>> Ryan Reese >>> __ >>> 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/ >>> >> >> > > > -- > Ryan Reese > -- Ryan Reese __ 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 & Horizontal Center ?
http://codepen.io/ryanreese09/pen/NqpMYa On Wed, Jun 3, 2015 at 9:02 PM, Roger Blanton wrote: > Because the table approach only works when you know the height of the > elements. Flex will work no matter what > > Hope that clarifies. > > — > Sent from Mailbox <https://www.dropbox.com/mailbox> > > > On Wed, Jun 3, 2015 at 9:01 PM, Ryan Reese > wrote: > >> I'm confused. You say if you can't use flex, you can't do it. Then you >> acknowledge the table/table-cell approach exists. So why not use >> table/table-cell?! >> >> On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser wrote: >> >> > Roger Blanton schreef op 04-06-15 om 02:26: >> > >> >> Without knowing the height of the element or parent container I don't >> >> think it is possible without using a flex layout with just CSS. >> >> >> >> >> > This is what i remember too. >> > >> > >> > __ >> > 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/ >> > >> >> >> >> -- >> Ryan Reese >> __ >> 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/ >> > > -- Ryan Reese __ 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 & Horizontal Center ?
I'm confused. You say if you can't use flex, you can't do it. Then you acknowledge the table/table-cell approach exists. So why not use table/table-cell?! On Wed, Jun 3, 2015 at 9:00 PM, Erik Visser wrote: > Roger Blanton schreef op 04-06-15 om 02:26: > >> Without knowing the height of the element or parent container I don't >> think it is possible without using a flex layout with just CSS. >> >> > This is what i remember too. > > > __ > 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/ > -- Ryan Reese __ 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] Selecting text in element
Not possible unless you use a span approach like described above or undo the styles in the inner div. On Wed, Apr 22, 2015 at 6:54 PM, Tom Livingston wrote: > I'd suggest wrapping the text you want to target in a span and target that. > > On Wednesday, April 22, 2015, J.C. Berry wrote: > > > Hi all, > > Is it possible to select text inside an element but leave other items > > alone? > > > > MY TEXT MY OTHER TEXT > > > > Possible to select the first text above, but not the image or div? > > > > -- > > 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/ > > > > > -- > > 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/ > -- Ryan Reese __ 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] Set widths create different height buttons at different screen widths.
Setting the to display:table and the 's to table-cell allows equal heights. Do you know of that method? On Tue, Apr 14, 2015 at 1:02 PM, Tom Livingston wrote: > On Tue, Apr 14, 2015 at 12:37 PM J.C. Berry > wrote: > > > Reduced screen widths causes > > > > http://xifin.com/solutions/xifin-technology/portals > > > > middle-page nav buttons (blue bar) to be different heights. Can this be > > fixed and how would I even fix it? > > > > > > > I added a min-height to the s. Quick fix. Probably a better fix out > there. > __ > 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/ > -- Ryan Reese __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer won't stay put
Are you looking for a fixed footer? If so, you are going about it wrong.
http://www.codefundamentals.com/demos/fixed-footer
Here is also a sticky footer - I don't think this is what you want but you
want one or hte other...I'm betting on fixed footer.
http://www.codefundamentals.com/demos/ultimate-sticky-footer
On Wed, Apr 8, 2015 at 10:46 AM, Angela French wrote:
> 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/
>
--
Ryan Reese
__
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] FOUC on homepage
Sorry, you did a double negative. I misunderstood. AFAIK this problem no longer exists but there are still articles on this which give solutions. I suggest you google some. On Fri, Mar 20, 2015 at 1:46 PM, J.C. Berry wrote: > I was not aware Reese that this problem no longer exists in web dev...? > > I have read on various fixes, but I think this is peculiar to my specific > case. > > On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese > wrote: > >> Flash Of Unstyled Content. Man I haven't heard about that in years. >> >> Have you tried Googling for solutions? I'm bombarded by hundreds of links >> all describing methods that can help. >> >> On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor >> wrote: >> >>> I would be more inclined to try to help if you glossed "FOUC" rather >>> than requiring me (and perhaps others) to research it for myself >>> (theirselves). >>> >>> Philip Taylor >>> >>> J.C. Berry wrote: >>> >>> Hello all, can you shed any light on how to fix a FOUC on our homepages? >>>> http://www.xifin.com >>>> http://www.xifin.com/radiology (maybe not bad?) >>>> >>>> Thanks in advance! >>>> >>>> __ >>> 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/ >>> >> >> >> >> -- >> Ryan Reese >> > > > > -- > 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. > > > -- Ryan Reese __ 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] FOUC on homepage
I was not aware either. I had to remember what FOUC was since I hadn't heard of that term in years. I was sure that this issue is not around today. Granted, I couldn't get the issue to appear on my end. On Fri, Mar 20, 2015 at 1:46 PM, J.C. Berry wrote: > I was not aware Reese that this problem no longer exists in web dev...? > > I have read on various fixes, but I think this is peculiar to my specific > case. > > On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese > wrote: > >> Flash Of Unstyled Content. Man I haven't heard about that in years. >> >> Have you tried Googling for solutions? I'm bombarded by hundreds of links >> all describing methods that can help. >> >> On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor >> wrote: >> >>> I would be more inclined to try to help if you glossed "FOUC" rather >>> than requiring me (and perhaps others) to research it for myself >>> (theirselves). >>> >>> Philip Taylor >>> >>> J.C. Berry wrote: >>> >>> Hello all, can you shed any light on how to fix a FOUC on our homepages? >>>> http://www.xifin.com >>>> http://www.xifin.com/radiology (maybe not bad?) >>>> >>>> Thanks in advance! >>>> >>>> __ >>> 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/ >>> >> >> >> >> -- >> Ryan Reese >> > > > > -- > 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. > > > -- Ryan Reese __ 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] FOUC on homepage
Flash Of Unstyled Content. Man I haven't heard about that in years. Have you tried Googling for solutions? I'm bombarded by hundreds of links all describing methods that can help. On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor wrote: > I would be more inclined to try to help if you glossed "FOUC" rather than > requiring me (and perhaps others) to research it for myself (theirselves). > > Philip Taylor > > J.C. Berry wrote: > > Hello all, can you shed any light on how to fix a FOUC on our homepages? >> http://www.xifin.com >> http://www.xifin.com/radiology (maybe not bad?) >> >> Thanks in advance! >> >> __ > 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/ > -- Ryan Reese __ 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] horizontally aligning icons
That requires a width/height to get it working. Otherwise it will simply
span 100% width/height. I know of that method but centering a menu most
definitely needs to be in the document flow and is not really suitable for
this case.
There are other ways to center which I left out since it doesn't pertain to
the OPs issues.
On Mon, Mar 16, 2015 at 10:27 PM, Karl DeSaulniers
wrote:
> On Mar 16, 2015, at 7:43 PM, John wrote:
>
> >> On Mar 16, 2015, at 5:41 PM, Ryan Reese
> wrote:
> >>
> >> Text-align:center is a fine way to center list items. Noone will scorn
> you or your centering method. I assume that the list items are
> inline-block? inline?
> >>
> >> http://codepen.io/ryanreese09/pen/ZYmaxa <
> http://codepen.io/ryanreese09/pen/ZYmaxa>
> >>
> >> That's the optimal way to center in this scenario. Obviously there are
> more than one ways to center items but it just depends on your situation.
> You can breathe easy. Text-align:center; is the easiest way to center
> inline/inline-block elements.
> >
> > OK..thanks..heh..that answers and soothes my concern..thank you for that
> codepen, too.
> >
> > J
>
> You can also do the non-inline method.
>
> .Absolute-Center {
> margin: auto;
> position: absolute;
> top: 0;
> left: 0;
> bottom: 0;
> right: 0;
> }
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.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/
>
--
Ryan Reese
__
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] horizontally aligning icons
Text-align:center is a fine way to center list items. Noone will scorn you or your centering method. I assume that the list items are inline-block? inline? http://codepen.io/ryanreese09/pen/ZYmaxa That's the optimal way to center in this scenario. Obviously there are more than one ways to center items but it just depends on your situation. You can breathe easy. Text-align:center; is the easiest way to center inline/inline-block elements. On Mon, Mar 16, 2015 at 8:38 PM, John wrote: > On Mar 16, 2015, at 5:36 PM, Ryan Reese > wrote: > > Semantics is purely in the HTML. Get the right HTML element for the job > and you are all set. > > CSS does the presentation. It has no effect on the semantics of your > webpage. Get the correct HTML for semantics. CSS for style and presentation. > > > Thank you, Ryan..I do get what HTML does and what CSS is for, but my > question is: tho using a class specifying text-align:center; may work > functionally, is it a correct method to center non-text list items? > > John > -- Ryan Reese __ 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] horizontally aligning icons
Semantics is purely in the HTML. Get the right HTML element for the job and you are all set. CSS does the presentation. It has no effect on the semantics of your webpage. Get the correct HTML for semantics. CSS for style and presentation. On Mon, Mar 16, 2015 at 8:22 PM, John wrote: > is it ok to use > > text-align:center; > > on a ul where the list items are NOT text, but icons instead? > > Yeah, it works, but does this disrespect semantics, and therefore, invite > problems or scorn? > > Thank you! > > John > __ > 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/ > -- Ryan Reese __ 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] :after not working in FF or IE but fine in Chrome and Safari
Apologies for the second message. Firefox does consider what you had to be
invalid CSS. Tested it to confirm.
However you'll probably also need to give width/height in your CSS to allow
dimensions for the balloons after you apply the fixes in my previous e-mail.
I'm out! Sorry again.
On Tue, Mar 3, 2015 at 12:48 PM, Ryan Reese
wrote:
> Why are you not just doing content:''; and then setting it as a background
> image?
>
> Content is not the same as a background image. It looks like you meant
> this.
> .responsive-tabs-wrapper:after {
> content:'';
> background: url(images/build/tabs-home-balloons.jpg) right top
> no-repeat;
> position: absolute;
> right: 30px;
> top: -54px;
> }
>
> On Tue, Mar 3, 2015 at 12:46 PM, Philip Taylor
> wrote:
>
>>
>>
>>
>> Debbie Campbell wrote:
>>
>> Don't know what I'm doing wrong here...
>>>
>>
>> 17 HTML errors would cause me to look at my HTML before wondering why my
>> CSS does not work as intended.
>>
>> 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/
>>
>
>
>
> --
> Ryan Reese
>
--
Ryan Reese
__
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] :after not working in FF or IE but fine in Chrome and Safari
Why are you not just doing content:''; and then setting it as a background
image?
Content is not the same as a background image. It looks like you meant this.
.responsive-tabs-wrapper:after {
content:'';
background: url(images/build/tabs-home-balloons.jpg) right top no-repeat;
position: absolute;
right: 30px;
top: -54px;
}
On Tue, Mar 3, 2015 at 12:46 PM, Philip Taylor wrote:
>
>
>
> Debbie Campbell wrote:
>
> Don't know what I'm doing wrong here...
>>
>
> 17 HTML errors would cause me to look at my HTML before wondering why my
> CSS does not work as intended.
>
> 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/
>
--
Ryan Reese
__
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/
