Re: [css-d] Deprecations in recent versions of HTML cause CSS problems?
-Original Message As a learner when it comes to HTML/CSS I am a little confused about (apparently) recent changes to HTML, moving functionality to CSS. For example: given an in-line citation such as (McConnell, 2002) in an academic/scientific paper, the bibliographic reference might be: McConnell, S. (July, 2002) The Business of Software Improvement. IEEE Software pp. 5-7 Since was deprecated in HTML, apparently because it was considered to be a presentation issue rather than one of content, this formatting in validated HTML 4.01 becomes clumsy. [Dewey Williams] Add classes to your style sheet to accommodate the parts of your cites with different styling and include those styles for each part. It is more typing, but no more than styling cites with deprecated HTML tags. An underline is an underline. The default style for an anchor/link is to underline and color the text blue. This should not mean that we cannot use an underline when it is needed. Dewey Williams Webdesignsig.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
I'm not familiar with the rotating post plugin, does it use frames? If not, WordPress doesn't use frames. It uses PHP to dynamically create pages. Also, it looks like you're using the default theme since you have div id=content class=narrowcolumn. Narrowcolumn is an element in the default theme's stylesheet, so you may get your desired result from changing the width there. Dashboard-Appearance-Editor-style.css __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
I caught on to that after sending the email. The plugin author was using the
Kubrik theme as an example tis why it didn't work on my theme.
I don't think it uses frames and the author provided a stylesheet to modify,
I just can't seem to make this basic changes to get this to fit in with my
theme. I've left a message but have yet
CSS Stylesheet:
div#rp_frame
{
margin: 30px 0 0 0;
padding: 5px;
border: solid 1px #000;
}
div.rp_post
{
}
div.rp_post h2
{
margin: 0;
}
div.rp_post_title
{
}
div.rp_post_time_author
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
color: #777;
margin: 0 0 5px 0;
}
div.rp_post_content
{
height: 125px;
margin: 0;
padding: 0;
overflow: hidden;
}
div.rp_post_content p
{
padding: 0 0 10px 0;
margin: 0;
line-height: normal;
}
div.rp_post p.rp_post_metadata
{
color: #777;
margin: 0;
padding: 0;
}
div#rp_nav
{
margin: 10px 0 0 0;
padding: 0 0 3px 0;
}
div#rp_nav a
{
cursor: pointer;
text-decoration: none;
}
div#rp_nav #rp_nav_arrows
{
padding: 0 15px 0 0;
}
div#rp_nav #rp_nav_arrows a.rp_nav_button:hover
{
/*color: #b85b5a;*/
}
div#rp_nav #rp_nav_arrows a#rp_nav_left
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause
{
}
div#rp_nav #rp_nav_arrows img
{
}
div#rp_nav #rp_nav_arrows span.rp_nav_arrow_text
{
padding: 2px 5px 2px 5px;
border: solid 1px #000;
}
div#rp_nav #rp_nav_arrows span.rp_nav_arrow_text:hover
{
background-color: #b85b5a;
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause img#rp_nav_pause_normal
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause img#rp_nav_pause_pressed
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause span#rp_nav_pause_normal
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause span#rp_nav_pause_pressed
{
/*color: #b85b5a;*/
background-color: #ddd;
}
div#rp_nav #rp_nav_arrows a#rp_nav_right
{
}
div#rp_nav #rp_nav_thumbnails
{
}
div#rp_nav #rp_nav_thumbnails a.rp_nav_thumbnail
{
}
div#rp_nav #rp_nav_thumbnails img
{
margin: 0 5px 0 0;
border: solid 1px #000;
}
div#rp_nav #rp_nav_thumbnails img.rp_nav_thumbnail_on
{
}
div#rp_nav #rp_nav_thumbnails img.rp_nav_thumbnail_off
{
opacity: 0.2;
filter: alpha(opacity=20);
}
div#rp_nav #rp_nav_thumbnails img.rp_nav_thumbnail_off:hover
{
opacity: 0.5;
filter: alpha(opacity=50);
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_on
{
padding: 2px 5px 2px 5px;
border: solid 1px #000;
background-color: #ddd;
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_on:hover
{
background-color: #b85b5a;
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_off
{
padding: 2px 5px 2px 5px;
border: solid 1px #000;
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_off:hover
{
background-color: #b85b5a;
}
On Wed, Feb 10, 2010 at 9:30 AM, Troy Harshman tmha...@gmail.com wrote:
I'm not familiar with the rotating post plugin, does it use frames? If
not, WordPress doesn't use frames. It uses PHP to dynamically create
pages. Also, it looks like you're using the default theme since you
have div id=content class=narrowcolumn. Narrowcolumn is an
element in the default theme's stylesheet, so you may get your desired
result from changing the width there.
Dashboard-Appearance-Editor-style.css
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause C SS problems
--- On Wed, 2/10/10, fred dagg rickdu...@hotmail.co.nz wrote:
For example: given an in-line citation such as (McConnell,
2002) in an academic/scientific paper, the bibliographic
reference might be:
McConnell, S. (July, 2002) The Business of Software
Improvement. IEEE Software pp. 5-7
Note that, in the one line, part (the title) is to be
underlined, part (the journal title) to be itallicized and
the remainder in normal face font.
I can't see any way to perform the process using CSS.
Perhaps someone can help with that. Thanks.
No-one's really addressed the original issue - that of the markup - possibly
because it didn't come through cleanly in your post, Fred. Maybe you can try
again (and ensure you're posting in plain text).
There are - broadly speaking - 3 options that I can think of:
Presentational markup:
McConnell, S. (July, 2002) uThe Business of Software Improvement/u. iIEEE
Software/i pp. 5-7
This has all the disadvantages associated with presentational markup that have
led to the W3C discouraging these kinds of elements.
Semantic markup using specific elements:
McConnell, S. (July, 2002) strongThe Business of Software
Improvement/strong. emIEEE Software/em pp. 5-7
And targeting them via CSS (e.g. strong { font-weight: normal; text-decoration:
underline; } em { font-style: italic; }) - presumably the entire citation would
sit in an element with its own class (quite possibly a list item if this is in
a references section at the foot of the document) which should be included in
those selectors. Alternatively, you could use class names on the individual
strong/em elements, in a very similar way to:
Semantic markup using generic elements:
McConnell, S. (July, 2002) span class=article-titleThe Business of Software
Improvement/span. span class=journal-titleIEEE Software/span pp. 5-7
This is, indeed, quite a bit more typing than the presentational approach, but
the associated downsides depend on how you're entering this data in the first
place. If you're using a CMS, rather than marking-up your documents by hand,
the time taken to type those extra characters should be mitigated.
Do any of those approaches work for you?
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
MarvinC wrote: I caught on to that after sending the email. The plugin author was using the Kubrik theme as an example tis why it didn't work on my theme. I don't think it uses frames and the author provided a stylesheet to modify, I just can't seem to make this basic changes to get this to fit in with my theme. Put your page on a public server and provide a clickable link to it in your post. ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
The best way to tackle this would be to view the source for the page from your browser. Note all of the elements involved in the trouble area and go through your styles and see what's going on with each of them. Keep in mind that WordPress also dynamically assigns classes as well, so you'll want to look at those. There are quite a few pieces involved in a WP theme, so you're going to have to work your way through them. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
http://www.nusolutions.biz/demos/dg/gfa/ The top system is the one I'm trying to customize. Basically what I'm trying to do is decrease the width to match that of my other two boxes and add a heading? for the title and a different one for the buttons. So the title heading may be a red background and a black background for the buttons. @Troy: Looking through the page source and adjusted the border. Thanks On Wed, Feb 10, 2010 at 10:23 AM, David Laakso da...@chelseacreekstudio.com wrote: MarvinC wrote: I caught on to that after sending the email. The plugin author was using the Kubrik theme as an example tis why it didn't work on my theme. I don't think it uses frames and the author provided a stylesheet to modify, I just can't seem to make this basic changes to get this to fit in with my theme. Put your page on a public server and provide a clickable link to it in your post. ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
what I'm trying to do is decrease the width to match that of my other two
boxes
You're not setting a width anywhere. If you want to make the container the
same width as the others, you need to either specify a width or margins on
#rp_frame.
But also, you have 4 boxes in the column on that page, and none of them are the
same size as any of the others. So I'm not entirely sure what you want this to
be the same size as.
#rp_frame {
margin: 25px auto 0;
width: 400px;
}
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 whitespace in list
Problem: This problem is from a drupal (content management system) site. Note the top nav and left nav. The left nav has the top nav elements (the parents) in it but I want to hide them with CSS. This works great in firefox but not in IE6 which I must support. Screenshots of each are below. zen_bbs.css line 408 is where the hiding if parent items occurs. Adding float:left; and clear:left seem to help shrink the whitespace but I've tried a lot of things to get rid of it with no luck. I know there are a lot of css files at work here to display the entire page but when it comes to styling the left nav it is only a few declarations. Help and ideas are appreciated ie6: http://dl.dropbox.com/u/407115/nisl-magna/ie6.png ff: http://dl.dropbox.com/u/407115/nisl-magna/ff.png URL: http://dl.dropbox.com/u/407115/nisl-magna/nisl-magna.htm __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause C SS problems
On 2/10/10 6:50 AM, Bobby Jack wrote:
--- On Wed, 2/10/10, fred daggrickdu...@hotmail.co.nz wrote:
For example: given an in-line citation such as (McConnell, 2002) in
an academic/scientific paper, the bibliographic reference might
be:
McConnell, S. (July, 2002) The Business of Software Improvement.
IEEE Software pp. 5-7
Note that, in the one line, part (the title) is to be underlined,
part (the journal title) to be itallicized and the remainder in
normal face font.
Semantic markup using generic elements:
McConnell, S. (July, 2002)span class=article-titleThe Business of
Software Improvement/span.span class=journal-titleIEEE
Software/span pp. 5-7
Umm. Wouldn't the cite element be more semantic?
To bring this back to CSS, I have noticed that most browsers style
cite with italics, but I came across at least one that did not. (Can't
remember which.)
So I suggest adding this rule to your style sheet:
cite { font-style: italic; }
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
On 2/10/10 8:09 AM, MarvinC wrote: http://www.nusolutions.biz/demos/dg/gfa/ The top system is the one I'm trying to customize. Basically what I'm trying to do is decrease the width to match that of my other two boxes and add a heading? for the title and a different one for the buttons. So the title heading may be a red background and a black background for the buttons. Are you actively working on tha page, Marvin? Here's what I am seeing in Safari 4 (Mac) this end. It messes up even more on larger text sizes: http://www.hucklesby.com/temp/demos-dg-gfa.png Validator reports 10 XHTML errors as well... Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List width mystery
This is a small thing but I do like to understand why styles behave the way they do. Here is a sample page in question: http://boisestate.edu/webcenter/bestpractice/accessibility.shtml Stylesheets are here: http://boisestate.edu/webcenter/styles/main.css http://boisestate.edu/webcenter/styles/bestpractice.css The mystery has to do with line length in the navigation box on the right (not the left). Specifically, I have a width specified for the list items in that menu. I shouldn't have to, but if I remove the width statement, the lines word wrap about halfway across the box. There's plenty of room for the words, but they wrap and I cannot figure out why. I messed about with a variety of settings and finally have strong-armed it by setting a width on the li tag, but that feels like a kludge. The way you see it now is with kludge. I tried to append an image of what it looks like without, but the list rejected it because the image was too big. Sorry! You can take my word for it, the words wrap at about 50% of the box width. You'll see the kludge, it's on line 90 of the secondary stylesheet, bestpractice.css 1. Can someone explain why, with no width on the li, the words wrap the way they do 2. Can someone offer a better solution to the problem than the one I'm employing? Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List width mystery
On Feb 11, 2010, at 12:39 PM, Skip Knox wrote:
This is a small thing but I do like to understand why styles behave the way
they do. Here is a sample page in question:
http://boisestate.edu/webcenter/bestpractice/accessibility.shtml
Stylesheets are here:
http://boisestate.edu/webcenter/styles/main.css
http://boisestate.edu/webcenter/styles/bestpractice.css
The mystery has to do with line length in the navigation box on the right
(not the left). Specifically, I have a width specified for the list items in
that menu. I shouldn't have to, but if I remove the width statement, the
lines word wrap about halfway across the box.
1. Can someone explain why, with no width on the li, the words wrap the way
they do
because of this:
#content p, li {
margin-right: 11em;
}
which select _all_ li element on the page
you probably wanted to say:
#content p, #content li { /* --- note the change */
margin-right: 11em;
}
When you then specify a width on those list-items it overrides that margin
because the whole construction becomes over-constrained.
2. Can someone offer a better solution to the problem than the one I'm
employing?
see above ?
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List width mystery
On 11 February 2010 14:39, Skip Knox sk...@boisestate.edu wrote: 1. Can someone explain why, with no width on the li, the words wrap the way they do I suspect that this is to do with the 11em right margin on line 5 of the bestpractice stylesheet. 2. Can someone offer a better solution to the problem than the one I'm employing? Remove the 11em margin and it should all come back into line. Hope this helps. Cheers, Seona. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List width mystery
Color me *duh* If it's not too much trouble, could you say how you detected that? I looked for width statements, so I was obviously focused on the wrong thing. When led you to the right margin business? Was it a tool? Logic? Intuition? Just curious. (the question goes to both Seona and Philippe, with thanks for their quick help). Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List width mystery
On 11 February 2010 15:04, Skip Knox sk...@boisestate.edu wrote: Color me *duh* If it's not too much trouble, could you say how you detected that? I looked for width statements, so I was obviously focused on the wrong thing. When led you to the right margin business? Was it a tool? Logic? Intuition? Just curious. (the question goes to both Seona and Philippe, with thanks for their quick help). Don't know about Phillipe, but I used Firebug. Hovering over each node in the DOM lets you see the space it's taking up itself, plus its margins and paddings (all nicely colour coded) and clicking on a node shows you all of the style rules affecting that node along with which stylesheet they're in and what line they're on. I started at the UL, thinking that it may have had a width or margin on it that was causing the problem, and worked down from there. When I thought I'd found the culprit, I changed the values in Firebug's panel for an in-situ look at what effect they'd have. I loves me my Firebug. :) Cheers, Seona. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List width mystery
On Feb 11, 2010, at 1:04 PM, Skip Knox wrote: f it's not too much trouble, could you say how you detected that? I looked for width statements, so I was obviously focused on the wrong thing. When led you to the right margin business? Was it a tool? Logic? Intuition? The Firebug extension for Firefox, or the WebKitInspector (built in with Safari/Chrome), or the Developer Tools that ship with Opera are all very useful to debug things. Simply reading the stylesheet was enough for your page. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
