Re: [css-d] Site Revision
Lighten up a little, organize it, and make it readable-- or you'll put I don't understand you comment: Lighten up a little I think he means simply that your page is dark. Contrast your beige patterned backgrounds (which look remarkably like my office wallpaper, btw) with his solid white. ---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/
Re: [css-d] Span Style Inside Div with PHP Code
I am using this approach (rather than just change the registercolright class) because each page where that class is used requires some adjustment and I'd prefer, if possible, not to create a large number of similar classes. Then don't Apply multiple classes instead. div class=registercolright lotsOfSpace div class=registercolright littleSpace div class=registercolright oodlesOSpace The point here is that your registercolright class stays the same and gets called everywhere, and then you apply a second class to the div that applies varying amounts of whitespace. You do have lots of very similar classes, (they're all margin-top: something), but they're also very small. ---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/
Re: [css-d] Span Style Inside Div with PHP Code
Thanks, Tim. Yes, you are quire right about the proliferation of classes,
and I did not know about applying a second class. This has been the
result of learn as I go and it seemed easier (at the time) to simply
copy a class and make a few adjustment.
We all learn as we go. Just some of us have been going longer. :) I learned
that trick on this very list a few years ago. It's come in handy quite a few
times since.
Not only can you apply multiple classes to elements, you can also select
elements with both classes and apply styles to only things with both.
For example:
.column {width: 48%}
.left {float: left}
.left.column {
border-right: 1px solid #333;
padding-right: 1em;
}
Note the lack of a space in the last selector.
This code will make anything labeled as a column have a 48% width, and anything
labeled as left float left. So class=left column will be 48% and floated
left. But that last style will also give left columns a bit of white space and
a border for a column rule effect.
The possibilities are pretty nifty when you get into it.
---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/
Re: [css-d] Outlook 2007 and DL/DD tag
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Albert van der Veen Sent: Wednesday, December 01, 2010 8:46 AM To: CSS Discuss Subject: [css-d] Outlook 2007 and DL/DD tag Hi all, I'm setting up an HTML newsletter and come across a problem in Outlook 2007 on Windows. The images in the left column are wrapped in a DL tag with the image in a DT and the caption in a DD tag. In Outlook there is a left margin present in the DD, although I defined that as 0, both in the inline style as well as the styles in the HEAD. See the screenshot here: http://www.depont.nl/depont.gif Other mailclients and browsers are ok, see: http://www.depont.nl/index.php?id=342 It looks like a default style cannot be overruled. Anyone know how to solve this (without changing the markup)? I don't have a helpful answer, but I would recommend that HTML emails be as simple and dark ages as you can make them for the widest support. Some email readers (Thunderbird, for example) use actual browsers to render the HTML and it looks wonderful. However, many more have half-assed, or non-existent CSS support. Outlook, for example, renders HTML using MS Word (really). Gmail strips out lots of CSS - including, I think, anything in style tags. ---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/
Re: [css-d] H tags and style
And an inside page might be...?
p.tagline {font-size: 100% } /*source document title: solid bricks*/
h1{font-size: 125%} /*sub: solid colored bricks*/
h2 {font-size: 150%}/*sub: solid umber colored bricks*/
h3 {font-size: 150%}/*sub: solid burnt sienna colored bricks*/
h4 {font-size: 150%}/*sub: solid sienna colored bricks*/
h5 {font-size: 150%}/*sub: solid dark ochre colored bricks*/
h6 {font-size: 150%}/*sub: solid ochre colored bricks*/
Best,
Vincent
It seems to me that this would be:
p.tagline {font-size: 100% } /*source document title: solid bricks*/
h1{font-size: 125%} /*sub: solid colored bricks*/
h2 {font-size: 150%}/*sub: solid umber colored bricks*/
h2 {font-size: 150%}/*sub: solid burnt sienna colored bricks*/
h2 {font-size: 150%}/*sub: solid sienna colored bricks*/
h2 {font-size: 150%}/*sub: solid dark ochre colored bricks*/
h2 {font-size: 150%}/*sub: solid ochre colored bricks*/
unless I'm just not good at color, and burnt sienna is a shade of umber.
---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/
Re: [css-d] [+] Re: OK to insert block-level tag inside div?
I don't know why that image is stretched vertically; it's well- behaved on my local drive. Because of height: 100%. If you change that to height: auto; or take out the height property completely, it behaves just fine. But height 100% means Make this image 100% of the height of its parent container (div.portfolio). ---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] text-indent
I've just noticed an unexpected behavior with text-indent, and I'm wondering if
it's a bug, or if I'm just misunderstanding the spec (my guess is the latter).
I have the following, for an FAQ:
dl class=qanda
dtWhat is the first question?/dt
dd
pThis is the first paragraph of a long answer./p
pThis is the second paragraph of a long answer./p
/dd
/dl
With CSS like so:
.qanda dt:before {
content: Q: ;
}
.qanda dd:before {
content: A: ;
margin-left: 1.5em;
text-indent: -1.5em;
}
Which results in the following output:
Q: What is the first question?
A: This is the first paragraph
of a long answer.
This is the second paragraph
of a long answer.
and, of course, what I was expecting was:
Q: What is the first question?
A: This is the first paragraph
of a long answer.
This is the second paragraph
of a long answer.
The spec says:
This property specifies the indentation of the first line of text in a block.
More precisely,
it specifies the indentation of the first box that flows into the block's
first line box. The
box is indented with respect to the left (or right, for right-to-left layout)
edge of the line
box. User agents should render this indentation as blank space.
In my mind, this should then apply to the first line of text in the dd, but
it appears to apply to the first line of text in the p's... Why?
---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/
Re: [css-d] text-indent
In my mind, this should then apply to the first line of text in the dd,
but it appears to apply to the first line of text in the p's... Why?
Nevermind, everyone. I figured it out... Text-indent is inherited. Adding a
dd p {text-indent: 0} gives me the expected behavior.
---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/
Re: [css-d] text-indent
Nevermind, everyone. I figured it out... Text-indent is inherited.
Adding a dd p {text-indent: 0} gives me the expected behavior.
Oh, no it doesn't... grr.
But using dd p + p as a selector works well.
---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/
Re: [css-d] [+] Re: [css-d Is this proper use of div tags?
The red box *and* the document have nothing to do with the offset of that box. Not entirely true. Yes, the blue box is offset in relation to where it would be without position. But where the blue box would be depends directly on other elements (previous siblings and parents, i.e, the red box, and the document). and since we're only changing the left position, the only thing that affects that is the document, making the offset in relation to the document a fair statement. The thing that's missing, and should have been pointed out, is that if we added an older sibling, the blue box would not be in the same place. Although, since this article appears to assume that we're working with non-floated block elements, it would only move down, and not over. Actually, now that I think about it, if there were a floated sibling, it wouldn't have any effect on the flow, since floats are out of the flow... which means that the only way to make the box move further to the left is by moving the document further to the left (with either position or margin). Thus the box still ends up in relationship to the document. It only breaks down when you use a top offset. ---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/
Re: [css-d] Is this proper use of div tags?
you don't need anything around the image or the paragraph...
.outer img {float:left;}
.outer p {float: right;}
If you want white space, you can apply margins, padding, borders, etc, just
like you would if they were a div. But you can apply them directly to the img
and p elements without needing any parent container.
---Tim
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of John
Sent: Wednesday, November 17, 2010 2:54 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Is this proper use of div tags?
On Nov 17, 2010, at 11:25 AM, G.Sørtun wrote:
Your example looks like a clear case of divitis - meaningless
overuse of divs.
The following...
div class=outer
h3Title/h3
img src=image_1.jpg
pdescriptive text/p
/div
...would be a better and more meaningful source-code, and the use
of
class=outer instead of ID is more correct for repeated blocks in
same page. No problem with ID on outer if you're creating a new
page
for each such block though.
Heh..divitus...I was afraid of that! Well, in your example then, would
I need to throw a tag around the img src tag to indicate image
position (float, etc) and I guess my p would also need that, as I want
to control where these things sit. Basically, I want to control the space
around both image and text, plus make my image top- align with that
text.
I haven't played around with your suggestion yet, but I am about to..I
wanted to send off this question right away.
Many thanks!
John
__
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-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] Simple (I hope) styling question
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of John Deighan
Sent: Tuesday, November 09, 2010 1:51 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Simple (I hope) styling question
I think there's something here that I don't understand - though I have
done a lot of reading about how CSS works. Fortunately, I have a very
simple example below. I have tried this in both Firefox
3.6.12 and IE8 and the behavior is the same.
In the HTML file below, I'm expecting the label on the submit button to
be red, 11px text. My reasoning is that even though the 2nd rule is
more specific, and therefore would take precedence over the 1st rule,
since the 2nd rule doesn't set the color, font-size and font-family
attributes, the submit button (an input element) should inherit
those settings from the 1st rule.
If I move the color, font-size and font-family attributes from the 1st
rule to the 2nd rule, the label is, in fact, red and 11px.
(While composing this e-mail, I tried simply removing the 2nd rule
below entirely. When I did, the label of the submit button was still not
red nor 11px, so I conclude that the more specific 2nd rule isn't
responsible for hiding the attributes in the 1st rule)
html
head
style type=text/css
div.buttonmenu table {
background: #BFBFBF;
color: red;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
div.buttonmenu table input {
margin: 0px;
padding: 0px 2px 0px 2px;
width: 100%;
}
/style
/head
The first rule affects text in the table, but only if there is no default
styling for a subelement. For example, making the color red on the table
doesn't change that links in the table are blue, because a rule that targets
table does not target a.
The default styling for a submit button (in firefox 4.0b) is:
button, input[type=reset], input[type=button], input[type=submit] {
-moz-appearance: button;
-moz-binding: none;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: buttonface;
border: 2px outset buttonface;
color: buttontext;
cursor: default;
font: -moz-button;
line-height: normal !important;
padding: 0 6px;
text-align: center;
text-shadow: none;
white-space: pre;
}
It appears that buttontext is a synonym for black and that -moz-button is
13.px MS Shell Dlg.
If you want the submit button to take the properties, you can use:
div.buttonmenu table input {
margin: 0px;
padding: 0px 2px;
width: 100%;
font: inherit;
color: inherit;
}
---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/
Re: [css-d] Noob: relative URL specification in CSS
url(bg.gif) That's looking at http://localhost/kcpage/css/bg.gif. url(/images/bg.gif) This one is trying http://localhost/images/bg.gif. url(./images/bg.gif) This one tries http://localhost/kcpage/css/images/bg.gif. url(httPL//localhost/kcpage/images/bg.gif) This one you've mistyped http:, so it's trying http://localhost/kcpage/css/httPL//localhost/kcpage/images/bg.gif. Assuming you typed it correctly in the sheet the first time, it should have worked. url(//localhost/kcpage/images/bg.gif) This one is using http://localhost/kcpage/css//localhost/kcpage/images/bg.gif As Tim Snadden wrote, ../images/bg.gif will work. As will http://localhost/kcpage/images/bg.gif. ---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/
Re: [css-d] Noob: relative URL specification in CSS
In messing with it, if I modify the body tag in the html, then this
works:
body style=background-image: url(images/bg.gif);
When you include it here, the path is relative to the HTML page, so that works.
Since I include the css sheet in the same level, I would have thought
the CSS should resolve similarly and that
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/bg.gif);
When you include it here, the path is relative to the CSS file (NOT the HTML
page), so it does not work.
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #001040;
margin: 0px;
color: #202060;
}
Should work, but that was a fail as well.
__
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] Background bullet for paragraphs
p.imageBullets { background: url('Image_files/image003.gif') no-
repeat
top left; padding-left: 16px;}
Thanks. That is a start. But, since the image is a background, it does
not push the text over. Instead, the image is behind the text. Should
I just add nbsp; to the beginning of the string of the contents of the
paragraph to make sure that the text starts to the right of the image?
Or is there another way to only move the text of the paragraph to the
right and still have the image to the left? (i.e. padding for the text and
not for the image)
I'm confused... That's what the padding-left: 16px; is for...
p.imageBullets {
background: url('Image_files/image003.gif') no-repeat top left;
padding-left: 16px;
}
note that it's applied to the P, not the IMG. So the image is a background
image to the text. The padding applies to the text, and pushes it over. If
you need more padding, increase the value.
---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/
Re: [css-d] Background bullet for paragraphs
For instance, in the img tag, you are able to control the width and the height of the image. How do you do this in the CSS? For background images, you can't. You have to do it by opening the image file and changing its size, and then saving it. ---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/
Re: [css-d] [+] Re: Clearing a float
I don't think inherit is a proper value for clear. it is: http://www.w3.org/TR/CSS21/visuren.html#flow-control It's interesting though. This new value came in now that authors use clear even less than before as they now contain floats more than they clear them. Does it do anything though? If you clear the parent left, and then the children inherit it, isn't the behavior the same as if they don't have clear set at all? Since the parent is already below all the floats, the child would also be below all the floats and clear would be redundant... Or is there some example for this that I'm just not seeing? ---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/
Re: [css-d] Cross Browser Compatibility while using asp.net Server Control - DropDownList
The Problem: -- A DropDownList rendered by ASP.Net is displayed correctly in IE8. But, it appears as enlarged, boxed DropDownList in FireFox(Latest version). It happens only when this DropDownList is the First control on the WebPage. All other DropDownLists appearing as subsequent controls on same web page, appear correctly. The Help Needed What CSS shall I use to have correct rendering of DropDownList in both the browsers. URL? It's hard to have any idea without some code. ---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/
Re: [css-d] Can i vertically centre a UL?
I'm a bit late and maybe wet behind the ears, but would making the container display: table; and the UL display: table-cell; work? Perhaps with a spot of JavaScript to turn them into an HTML table for poor old IE 7 and older? I think there'd have to be a third element in there to set as display: table-row. ---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/
Re: [css-d] Can i vertically centre a UL?
I have got over my fear of sending a ink to the site so you can see that
it's level 3, from the websites drop down that could be improved by
centering vertically.
http://blakeys.com/
/* this is the box that actually lays out the interior of level 2. It was hard
to find through all the extra stuff. */
.group-box2 {
overflow: hidden; /* this makes the div have the height of the internal box
(all the contents are floated, so it has no height by default. */
position: relative; /* this makes it the parent for the level3 absolute
positioning */
}
.level3 {
position: absolute; /* position relative to group-box2 */
top: 50%; /* top goes in the middle of the group-box2 */
margin-top: -2.8em; /* since the ul is 4 lines of text, this is half the
height of the ul (assuming no vertical margins or padding, and a default
line-height of 1.2em) */
width: 41%; /* makes the highlight go to the edge of the box -- needs some
tweaking */
}
Also, it looks like you have a whole lot of really useless divs in here. I
don't see the point of groupboxes 3, 4, or 5, or hoverboxes 2, 3, or 4. And
this solution makes div.sub useless as well.
---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/
Re: [css-d] Can i vertically centre a UL?
I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? As far as I know, not with anything with a dynamic height. You can do it with javascript, but that's off-topic for the list. And you can do it with CSS if the height is fixed. But I think that's it. *the lists been kinda quiet recently Maybe we've done our job and everyone knows everything about CSS... ;) ---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/
Re: [css-d] Can i vertically centre a UL?
-Original Message-
From: Claude Needham [mailto:gxx...@gmail.com]
Sent: Tuesday, September 14, 2010 5:04 PM
To: Climis, Tim
Cc: Chris Blake; css discuss discuss
Subject: Re: [css-d] Can i vertically centre a UL?
On Tue, Sep 14, 2010 at 1:47 PM, Climis, Tim tcli...@indiana.edu
wrote:
I'd like it to sit right in the middle both vertically and
horizontally without using padding or anything like that because it's
dynamically fed.
is there such a way using CSS?
As far as I know, not with anything with a dynamic height. You can do
it with javascript, but that's off-topic for the list. And you can do it with
CSS if the height is fixed. But I think that's it.
---Tim
Could you give a pointer on how to do this given fixed height ul?
The only method I know of requires that both the containing element
and the ul have fixed height. If there is a way to do this with dynamic
containing element and fixed height ul that would be great.
Maybe I'm too tired.
Given:
divul/ul/div
I think
div {position: relative};
ul {
position: absolute;
top: 50%;
height: 5em;
margin-top: -2.5em;
}
does it. Or does the div need a height too? Okay, in this case it would,
since there's nothing *in* the div, but in a similar case, where the div has
other contents to give it an implicit height.
---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/
Re: [css-d] Type sizes?
I have vague memories of doing this because the percentage handled a glitch in one browser or another. There was an IE bug handling sizing in ems that the 100% rule fixed, as I recall. Perhaps this one with text-resizing? http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/EM-font-resizing-bug.html ---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/
Re: [css-d] 100% height for table
Does anyone have any idea about this? Can I truly not create a table that is 100% the height of the browser window? I've tried adding a min- height to the table too but it doesn't seem to make any difference. I'm confused... What are you trying to do? You have height=100% set on your table. And your table has a height of 100%. (or so it seems. Scroll down a little bit, and notice how the background stops before the end of the table) But the you have also set your page height to 100%. Everything overflows, because you have margins, and padding, and borders, and an iframe, and also a table that's 100%. And because it overflows, there's a scroll. Notice how the center column is at the bottom of the screen. That's because the page has a 100% height. The scroll is because the left column is longer than that. If you want your 100% page to not scroll, and have everything below the bottom of the screen hidden and inaccessible (I don't know why you'd want that), you can add overflow: hidden to your body styles. ---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/
Re: [css-d] Adjacent Sibling Selectors in Reverse?
Something like this perhaps?
h2+p {
}
But that affects p tags that fall AFTER h2's, not before, no?
Yes, that's correct. I don't think there's a way to do this without Javascript.
What about styling the h2 instead of the p? I don't know what your use case
is, but if, for example, you wanted extra bottom margin on the last paragraph
in the section, you could put extra top-margin on the h2 instead.
Perhaps something like:
h2 {margin-top: 2em}
h2:first-of-type {margin-top: 1em} /* makes the margin smaller for the first h2
on the page */
---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/
Re: [css-d] drop cap - some characters cut off
span.drop {
line-height: .7em;
}
Your line-height is less than 1em. That means that it's smaller than the
current font size. If you set your line-height to 1 (unitless) or even 1.2,
then your letters aren't chopped off.
---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/
Re: [css-d] drop cap - some characters cut off
Thanks for your reply. I'm not sure if I reply directly to your email here,
or not.
Usually you reply to list, so others can chime in.
Yes I did change that. But if you look at the change now (second blog
entry), why does it add more spacing above the letter Q,d despite my
padding: 3px?
My guess is that it's a quirk of the font. That the Q (and probably the O) are
smaller than T, P, R, etc.
Sorry, when I added line-height 1em, you will note it also introduces
another problem: the text does not wrap well underneath. It leaves a gap
below the drop cap. I would prefer the text to flow below the drop cap, if
possible without such a gap.
Then you'll need to adjust your padding and font-size (and paragraph
line-height) so that the height of the letter is the same as an exact number of
lines of text...
span.drop-cap {
background: #797979;
border: 1px solid #333;
color: white;
float: left;
font: 3em/1.2 Georgia, 'Times New Roman', Times, serif;
margin: 4px 8px 0px 0px;
padding: 0px 3px;
}
3em would be three lines. 2em would be 2 lines. 2.5em, unfortunately, is 2.5
lines, hence the space between the cap and the line.
On your Q example, this is going to look off-center, because it is. The tail
on the Q is a descender: it goes below the line. But an H is going to look
nice and centered. There's nothing you can do about that.
---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/
Re: [css-d] :after and :before psedo elements.
I think maybe CSS shouldn't change the Dom.
They're not really changing the DOM (at least not IMO). You can't add tags and
structure to the HTML with CSS - you can only change the value of text nodes
(and then, only by adding to them).
Just trying to understand why they are there.
So you can put presentational characters in your display. For example, perhaps
you have a table full of financial data. And on one page, you want negative
numbers to be displayed with a - sign, but in another page, you want the same
numbers displayed in parentheses. Data hasn't changed - just the presentation.
span class=negative200/span
With css for one page
.negative:before {content: '-'}
And for the other page,
.negative:before {content: '(';}
.negative:after {content: ')';}
---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/
Re: [css-d] Forcing horizontal scroll instead of wrap.
Can somebody clue me in to a CSS (or whatever) trick that forces a div
scroll instead of wrapping?
Perhaps
div {white-space: no-wrap}
---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/
Re: [css-d] Forcing horizontal scroll instead of wrap.
Can somebody clue me in to a CSS (or whatever) trick that forces a div
scroll instead of wrapping?
Perhaps
div {white-space: no-wrap}
Oops. That should be nowrap.
---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] Playing with CSS3 transitions
In a comment on Gabrielle's blog posting a couple weeks ago about whether or not animation belongs in CSS, I came up with a use case for CSS dropdown menus. Basically, my idea was that you might want to make your menu drop down with a wipe. I finally got around to playing with that idea this weekend, and I'm discovering that it's not as intuitive as one might like. My original code just used display: none, changed to display: block on hover, which of course can't be transitioned. My new idea, after looking at a couple examples online was to use height instead. Height: 0 expanding to height: auto. I tried it without the transition first, just to make sure it resulted in what I wanted. This worked fine, so I tried to apply a transition to it. That didn't work. I checked out the spec, and we can only transition length and percentage heights. Auto is out. So, now I ask the list: Is there a way (excluding id-ing every menu heading, and setting a fixed height for each one) to transition a variable height dropdown? (My current play code in on my local machine, so not web accessible. I don't think that's really an issue, since this is mostly a theoretical question, but if people want some base code to play with, I can put it someplace public.) ---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/
Re: [css-d] Playing with CSS3 transitions
Promising, I think... Near the bottom of the page he has a fairly recent example of a CSS3 transition slide-down... http://www.gethifi.com/blog/nicer-navigation-with-css-transitions That's pretty much the effect I'm going for (sans the opacity transition). But a quick look at that code, and it's setting the height on that to 30px. And we all know how flexible that is... Perhaps that's the only way to do it though. ---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/
Re: [css-d] Floating images - understanding the details
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
The width is the width of whatever element you're applying the CSS to. Could
be the image, but as Marcio pointed out, you didn't include the selector, so we
don't know.
Second, I especially don't understand how he has illustrated margin.
Why do '1' and '1em' and '1em' follow each other that way, and what
are they accomplishing.
That's not valid CSS. All non-zero measures need to have a unit. So I'm not
sure what
margin: 1 1em 1em would do exactly. But in general, it applies a margin of 1
(whatever that means) to the top margin, 1em to the right (and left) margin,
and 1em to the bottom.
margin: 1em; applies 1em to the top (and the bottom, and the right, and the
left)
margin: 1em 2em; applies 1em to the top (and the bottom), and 2em to the
right (and the left).
margin: 1em 2em 3em; applies 1em to the top, 2em to the right (and the left),
and 3em to the bottom.
margin: 1em 2em 3em 4em; applies 1em to the top, 2em to the right, 3em to the
bottom, and 4em to the left.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
Padding is like margin, except that it's inside the border (so background
colors apply to it), and it doesn't collapse. So, if you had a border around
your image, but you wanted some space between the image and the border, use
padding. Or if you wanted a margin, but you wanted it to be green, you could
use padding for that too. Or if you wanted the margins to not overlap on
adjoining elements, you can use padding for that as well. Or if you need an
inside margin and an outside margin, padding is the inside, and margin is the
outside. (see below)
Finally, I need the images to indent 140 pixels like the text. Easy?
Depends on your HTML. If all your images are in a container, you could put a
padding-left: 140px on that, and it would do the trick. There are also other
ways to do it. A link would help.
---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/
Re: [css-d] CSS3 animations considered harmful
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of david
Sent: Wednesday, August 11, 2010 3:12 PM
To: css-d
Subject: Re: [css-d] CSS3 animations considered harmful
tedd wrote:
At 9:19 PM -0400 8/10/10, David Laakso wrote:
Gabriele Romanato wrote:
Hi!
need some responses and criticisms about my opinions expressed
right
here:
http://onwebdev.blogspot.com/2010/08/css3-animations-
considered-harm
ful.html
HTH ^^/
Gabriele Romanato
CSS is a programming language: albeit, a very simple one. It copes
with look and feel. Expanding CSS to include more than that is
scary. But therein may, or may not, lie the future. /Push the
envelope./
Best,
~d
I agree and was very close to responding as such. However, I didn't
think my contribution would amount to anything in that forum.
In any event, people who say that CSS is not a programming language
must have a better understanding of programming than me -- after
all,
I only wrote my first line of code 45 years ago and still haven't
mastered it.
CSS isn't a programming language. No control constructs like
IF/THEN/ELSEIF, SWITCH, etc. No variables. The only programming
language presence really are the MS extensions (Javascript functions).
I wish there were variables. Even variables of the macro kind for defining a
color palette would be really great. MAIN_COLOR = #123456;
border-color: MAIN_COLOR;
color: MAIN_COLOR;
Want to change your main color from green to blue? Change one line! How
awesome would that be? But anyway...
I think the lack of control structures is a little erroneous... the entire
language is a giant switch statement. If there's an element that matches such
and such, apply these properties...
Switch (element) {
Case 'p': margin: 1em;
}
We just leave the switch() case: out for brevity. :P
Also, isn't it instructions for a computer? Isn't that the definition of a
programming language? I can understand HTML not being a language, as it
doesn't, by itself, cause anything to happen to the text (default styling is
CSS, after all). But CSS actually does stuff.
---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/
Re: [css-d] drop shadows
Is there a good way to get a drop shadow on text using css? You're using it. I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Actually, it works in Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+, on all platforms. Only IE doesn't play ball. ---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/
Re: [css-d] new website - critics welcome
i'd be more than greatful for any kind of ctiticism. It'd be nice if there was some kind of clue that there are links on the first page. I don't know that most people will discover that a few random letters produce hover effects. ---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/
Re: [css-d] background color of a with class
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of Tim Arnold
Sent: Thursday, July 15, 2010 8:51 AM
To: Thijs Hakkenberg
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] background color of a with class
On Jul 15, 2010, at 7:37 AM, Thijs Hakkenberg
th...@hakkenberg.com wrote:
Dear List,
I made an menu based on ul's and li's
(http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked the a element turns into a
class=active.
I want to change the background color and should work with the
following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
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/
If you copy/pasted into you message, the problem is that there is a
space between a and .active. It should be a.active not a .active
- Tim
Or, it could be that you mean a:active -- not sure, since we don't hvace code
to know if you have an active class.
--- Different 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/
Re: [css-d] browser reports please [blakeys]
-Original Message-
From: David Laakso [mailto:da...@chelseacreekstudio.com]
Sent: Tuesday, July 13, 2010 12:17 PM
To: Philip Taylor (Webmaster, Ret'd)
Cc: css-d; Climis, Tim
Subject: Re: [css-d] browser reports please [blakeys]
Philip Taylor (Webmaster, Ret'd) wrote:
David Laakso wrote:
Yes, there is a slight scroll bar. There is also a slight scroll bar
in any browser with a minimum font-size set in the prefs at 16px.
As,
for example, on this end in:
Mac OS X 10.4; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6.
OK, I get a slight scroll bar (circa 5%) at zero zoom; after six
zooms, the scroll bar is greater than 50%.
The image has nothing to do with the problem.
The fast and dirty correction may be:
div.menus ul {
/*box-shadow: 3px 6px 6px black;
-moz-box-shadow: 3px 6px 6px black;
-webkit-box-shadow: 3px 6px 6px black;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;*/ }
Best,
~d
The box-shadow specifically is the problem there. Gecko doesn't chop shadows
that expand beyond the window, as Webkit does, so because of the shadow,
there's a horizontal scroll there. Can't do anything about it, without
changing the width of my navbar to less than 100%. When I looked into this (a
while ago) I believe the conclusion was that Webkit was following the spec, but
Gecko would need to do some pretty hefty reworking to fix that, so it would
take a while.
Also, the point was to demonstrate an elastic CSS dropdown menu. The shadow is
superfluous to that anyway.
---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/
Re: [css-d] Tool to tell me where a rule is used
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Ellen Herzfeld Sent: Thursday, July 08, 2010 2:17 PM To: css-d@lists.css-discuss.org Cc: jta...@rocketmail.com Subject: Re: [css-d] Tool to tell me where a rule is used On 8 Jul 2010, at 19:00, Jay Tanna wrote: The only way I can think of is to to do a search for class name or ID name. Notepad is pretty good doing this. Try Edit, Find. Then you can use Find Next to go to the next occurence. For ID you will have only one item on the page so that is not the problem. hth As I said in my post, though obviously not clearly, I use very few classes and ids. I'm on a Mac and have powerful text editors that can search through many files quickly, even using regular expressions. But with mostly descendant selectors, I think it would be mostly useless. Quick thought that could be totally useless... I've never used jQuery (which is why this might be useless), but it's my understanding that it allows you to select dom elements via css syntax. Perhaps you could do an onload script that uses any rules that you're wondering about, and then email you the page name if the rule matches something. Then you'd have to do something to load every page in your site, which can probably be done with some script or another. But it certainly seems like there ought to be an easier way. ---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/
Re: [css-d] Is this even possible with blockquote?
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Claude Needham Sent: Monday, June 28, 2010 12:24 PM To: CSS Discuss List Subject: [css-d] Is this even possible with blockquote? On the following page I have a div floating to the left with a blockquote wrapping it on the right. http://www.imag3.com/test/ Is there a way to style the blockquote and/or the floating div such that the left margin of the blockquote comes into play for the text along side the div? If I put the h1, p, and blockquote inside another context then everything will behave as expected. But then I lose the word wrap effect. I am thinking there is either I am overlooking an extremely easy and painfully obvious means of doing this, or, it isn't really possible to accomplish until a future version of css. I think the problem is that the blockquote box doesn't change shape. It's still a rectangle. So the margin (or padding - I tried that too) is behind the pink div. It doesn't get pushed to the side with the text. Adding a border makes this easy to see. The border gets hidden behind the block, instead of going around it. So I'm currently leaning toward impossible, but someone may show me up. You might try googling for lists, which would also have this problem. I know I've seen that discussed on this list before. ---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/
Re: [css-d] floating right class not going all the way to the right
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Stuart King Sent: Thursday, June 24, 2010 8:51 AM To: css discuss Subject: [css-d] floating right class not going all the way to the right Hi CSS-Der's: URL: http://www.clarksburgwineco.com/pages/contact.html floating right class not going all the way to the right (.mc_66r). I am trying to get it to line up with the right edge of the page, justified with the footer. help! The #mainContent div is floated left. That makes it shrink wrap its contents, shrinking the width to 850px, instead of your specified 960px. The solution is to specify a width: 100%; on mainContent, and everything should behave itself. ---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/
Re: [css-d] centered nav over an image /?
I believe the url in the original post leads us to the only sample for the page. http://ecoitsf.com/test.html Ah. Missed that. And even though the method used is display: inline, overflow: hidden still appears to be the solution. When I tested it out (on either the div or the ul) it gives it height so that assigning a background color becomes useful. ---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/
Re: [css-d] web page help
Can you point to a page that demonstrates the sticky footer working? I'm not seeing it on the url given. The image with the browser icons is using it on that page. ---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/
Re: [css-d] web page help
-Original Message- From: Claude Needham [mailto:gxx...@gmail.com] On Wed, Jun 23, 2010 at 11:00 AM, Climis, Tim tcli...@indiana.edu wrote: The image with the browser icons is using it on that page. When looking at http://ryanfait.com/sticky-footer/ I don't see a sticky footer. Is there a personal browser setting that could be responsible? The code on http://stackoverflow.com/questions/146659/how-do-i- get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie- 6/147152#147152 definitely shows a sticky footer. But I just don't see what I understand a sticky footer to be with the ryanfait.com page. I think the problem is in the understanding of what a sticky footer is. The sticky footer on ryanfait.com behaves as a sticky footer, as opposed to a stuck footer. If the page is shorter than the window (fits without vertical scrolling), then the footer is at the bottom of the window. If the page is longer than the window (creates vertical scroll), then the footer is at the bottom of the page. If you check out the CSS-D wiki [http://css-discuss.incutio.com/wiki/Footer_Info], the stackoverflow solution is an example of the first type of footer, while the ryanfait solution is an example of the second. ---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/
Re: [css-d] Tests on HTML5 video and CSS
just finished to do these: http://onwebdev.blogspot.com/2010/06/tests-on-html5-video-and- css.html Just FYI, Chrome Dev branch (6.0.437.3) autoplayed every one of those videos, so it appears that the Webkit nightlies must have support. ---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/
Re: [css-d] An Image On Top Of an Image
How do I place an image on top of another image? Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. For example: do you want the bottom image to be visible under the top image (translucent)? Are the images the same size or is one going to frame the other? Or are you looking for a scattered photographs effect? All of these would have significantly different solutions, but all fall under one image on top of another. ---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/
Re: [css-d] An Image On Top Of an Image
snip a bunch of HTML Can you send us a link to your live page instead of all this code? It's a lot easier to debug things that way. If not, we can try and work with what we've got, but a link is always more helpful. ---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/
Re: [css-d] nav placement issue - ff and chrome great, ie not so great
Matthew P. Johnson wrote: Who in the world has Century Gothic on their computer? My computer has it. I think it's included with MS Office - because I've only installed a few other fonts and that wasn't one of them. Which means that a pretty fair number of people have it, probably. (I wouldn't use it, because I think it's ugly as sin, but to each his own.) ---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/
Re: [css-d] Problem with menu bar
so, is the remedy to ammend the code on that page, or is a 1279 pixel wide image just plain ridiculous? In marsB.css, line 27 Delete the width: 600px; (or change to min-width: 600px). That will let the paragraph expand to fit your image, which will in turn make the page expand to fit the paragraph, and your menu go all the way to the edge. As it stands, your image is hanging off the edge of the page, and you can only see the whole thing because the browser is being nice to you. ---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/
Re: [css-d] Top Menus and Positioning Bookmarks
Hi everyone I have a mobile device version of a web based product that has a div which appears across the top of the page with a menu in it. Currently, if the user clicks on a hyperlink in a page which goes to a bookmark in that or another page, the bookmark by default appears at the top of the page, which will, of course, be hidden under the menu. In fact the menu hides the first two lines of any page but only when it is scrolled upwards. The page is normally displayed as starting immediately below the menu. Does anyone have any thoughts as to how the top of the page might be shifted down by the depth of the div area? Dixie Dean Dixie, we actually just had a long discussion on this exact issue the over the weekend. So, provided that you're not new to the list, go check out the thread entitled Anchor Offset. ---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/
Re: [css-d] Elements that create new block formatting contexts
display: block. http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo That table is about computed value, what I quoted was related to a declaration (at least that's the way I read it): In my rule, the float is styled with display:inline and I expect it to be a flow Root. Is the above assumption correct or wrong? The point is that you can't have something that is both floated and inline. Since your element is floated, that over-rules the display:inline and it has display: block in spite of you. So it would be able to be a flow root since it's display isn't inline. ---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/
Re: [css-d] roots tree
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Bob Meetin
Sent: Monday, May 03, 2010 11:21 AM
To: CSS-D
Subject: [css-d] roots tree
I have a task to create a roots type family tree.
Recommendations please?
Well, if you're looking for a non-table solution, you can find an example here
[1] that you might be able to adapt.
But if you're set on tables, you'll just need the following:
table {
border-collapse: collapse; /* share borders between cells */
}
and then variations on
td {
border-left (or right, or top, or bottom): 1px solid black;
}
You can have the middle lines (instead of top or bottom) if you do a
rowspan=2 for your content cells.
[1]: http://www.indiana.edu/~intlserv/ois/org_chart.php
__
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] Where is the CSS2 spec?
When I go to W3C and get the CSS specs, I can only get 1, 2.1 and 3. What happened to 2? Is there an alternate source? (The reason here is that I'm using Coldfusion's PDF creation, which supports CSS1 and CSS2 and page-break-after is in the list of supported properties, but always doesn't seem to be doing anything, so I wanted to see if it was an acceptable value in the CSS2 spec.) ---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/
Re: [css-d] Where is the CSS2 spec?
What happened to 2? Nevermind. I found it. A link was buried in the 2.1 references. http://www.w3.org/TR/2008/REC-CSS2-20080411/ ---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/
Re: [css-d] Where is the CSS2 spec?
See *previous versions:* Previous versions: http://www.w3.org/TR/2009/CR-CSS2-20090423 http://www.w3.org/TR/2008/REC-CSS2-20080411 Yeah, I kept clicking on the top one and after getting 5 or 6 versions of the 2.1 spec, I gave up. But it was especially confusing since http://www.w3.org/TR/CSS2 used to point to the 20080411 draft, while http://www.w3.org/TR/CSS21 pointed to the latest. ---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/
Re: [css-d] Drop downs behind content
There is no flash. Of course there is. The Youtube video is flash. Direct from your page: embed src=http://www.youtube.com/v/l26of6Qm9CUamp;hl=en_USamp;fs=1amp;; type=application/x-shockwave-flash allowscriptaccess=always allowfullscreen=true width=410 height=280 (Note the application/x-shockwave-flash part). ---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/
Re: [css-d] height and margin: auto 0
If I instead set a height on the same div, and then set margin: auto 0; it
does not center horizontally.
I'm going to assume that you really meant vertically.
Why? why why why?
Because the definition of auto states that if auto is the same for
margin-left and margin-right, then they will be equal. It doesn't specify the
same rule for margin-top and margin-bottom, so auto really ends up just acting
as the default.
Would the block center vertically if the containing block had a declared
height, or does that not matter either?
It would not.
Thoughts?
If you're in a position be able to specify height on both the block and it's
container, then this is pretty easy to accomplish. If you can't do that, then
the only ways to do it are resorting to tables or javascript.
div class=middling parent
div class=middling child/div
/div
.middling.parent {
position: relative; /* create a position context */
height: 10em; /* need to specify a height */
}
.middling.child {
position: absolute;
top: 50%; /* puts top in the middle of parent - requires that the parent has
a height */
height: 3em; /* give the child height */
margin-top: -1.5em; /* negative top margin of half child height to move it
back up to centered */
}
---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/
Re: [css-d] Making a simple form look identical across the main browsers
Couldn't you technically declare your own font size in px and avoid this issue of browser default font size? I am not saying it's a good idea to use px based fonts, but it is doable and with the zoom functionality of newer browsers you'd avoid breaking layouts. It depends on whether or not the user has changed the default minimum font size. If you set your font size to 16px, but the user has a minimum of 32 set, then you still have the same issue. ---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/
Re: [css-d] Making a simple form look identical across the main browsers
I am using firefox 3.6. When I set the zoom option to zoom text only i can increase all fonts with command + or command - (i am on a mac so substitute control for PC) But, changing the default font size in the browser settings does not increase or decrease fonts that have been set in pixels. Ah... we misunderstood, sort of. That is correct behavior. The same will hold true for any other units not based on the font size (pt, mm, cm, in, etc). The bug in IE we mentioned keeps the text from resizing with the +/- commands as well. But that still doesn't take into account the min-font-size setting. Many of the people that reset their default font size also increase the minimum font size so that they can read things, no matter what. and that will still break any carefully crafted pixel-based layouts. ---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/
Re: [css-d] Unbelievable CSS Trick
I just want to make a div with css applied to it to get a background colour appear at 50%. Any ideas? What's happening is that everything has an opacity of 50%. You can't apply it to just the background, afaik, but you can fake it. Set the opacity to 50% on the parent, like you've got, and then reset the opacity to 100% on all the children. I believe that does the trick, but I haven't played with opacity in a while. ---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/
Re: [css-d] How to handle cached styles...
Hi all, I wanted to get some collective input on how you all handle updating styles that are cached. Double clicking the refresh button will usually do the trick. There's also private browsing mode, which will keep things from caching. ---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/
Re: [css-d] How to handle cached styles...
Right, I'm speaking more for the site users, how they can get updated styles with as minimal disturbance as possible. Eg, a site visitor doesn't know necessarily when you have pushed some css for design changes. It will look broken for them. Oh. That's a far more interesting problem that I don't have a solution for, but I'd also be interested in learning one... ---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/
Re: [css-d] Divitus?
I'm not familiar with the '8 div flexy box'. Could someone provide a URI? That's not it's official name, and I'm not sure what is, but you can see an example I did a few weeks ago here: http://sunapsis.iu.edu/ Essentially, you have a relatively positioned content box (my #container), and then 8 decorative, empty, absolutely positioned divs (my .border divs), for a page that can stretch in both directions. Top, bottom, left, right, and the four corners. It doesn't work in IE6 particularly well, I think because that browser doesn't handle the bottom and right properties, but I don't recall exactly. Ooh. Checking through this though, I apparently forgot to put in an inline-block fix for ie7. Ah well. ---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/
Re: [css-d] Safari on Mac and PC?
Is Safari on windows and safari on Mac same? will my web page will look similar in them? Also does FF on PC and on Mac renders the web page UI in same way? I can't say yes because it's not entirely true, so the answer is Mostly. Pages look the same across browsers and operating systems, as long as they use the same rendering engine. For instance, Safari and Google Chrome both use the Webkit Engine (regardless of operating system), and so pages will (mostly) look identical in Chrome for Windows and Safari for Mac. All platforms of Firefox use the Gecko engine, and all platforms of Opera use Presto. There are occasion differences, but they aren't common, and I don't happen to know any of them off the top of my head, other than the font rendering, which is done by the operating system, and not the browser. ---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/
Re: [css-d] More new to css questions
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Lineberger, Scott
Sent: Tuesday, March 30, 2010 4:21 PM
To: 'css-d@lists.css-discuss.org'
Subject: [css-d] More new to css questions
Ok,
I am beginning to warm up to using div's, but perhaps I am being impatient. I
was using tables to line up 4 sections horizontally, with sections 2, 3, and
4, each containing a form. How do you do that with div?
Check this out for a good laugh (or cry?)...
http://www.coastalind.com/test2.html
1. As Bill and MB have been shooting back and forth all day, beware of
divitis. You've got a bad case of it right here. If there's only one thing in
your div, there's a 99% chance that the div is unnecessary. For example, the
ones around your forms can all be thrown away without a backward glance.
2. To answer the question at hand, there's lots of ways. The most common is
floats, but you could also use absolute positioning, or display:table.
Going with floats though, as those are the most straightforward, these make
things beneath them float up the page.
In your case, for example, after I got rid of those divs, I would put in a rule
that's something like this:
form {
width: 22%;
margin: 1em;
float: left;
}
That will make all your forms 22% of the page width, give them a nice margin so
they aren't running into each other, and then make them float up next to each
other.
I'm pressed for time at the moment, so I'll leave you with that, but I might
add more later tonight.
---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/
Re: [css-d] CSS3 Please code and Explorer support
Those Microsoft filters only work when the element they are applied to has layout.[1] Try adding zoom: 1; to the ruleset for the filter... I understood 'zoom' to be a Microsoft proprietary CSS property which does not validate. I would set a height or width value instead which achieves the same purpose. It is, but then, so is filter. When we're targeting IE specifically to get its other proprietary CSS properties to work, I see no problem triggering hasLayout with a different MS proprietary property. ---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/
Re: [css-d] New to css
Experiment with left/center/right alignments of the legend headings and the
buttons;
Add a background image to each form within the table.
Can it be done?
Yes.
I'm presuming that you want each form to be different, right? So you need to
give each one a way to select it. Either a class or an id.
Ex:
form id=track
...
/form
form id=account
...
/form
form id=order
...
/form
And then you can be more specific in your CSS.
#track { /* the element with id=track (in this case a form) */
background-image: url('relative/path/to/image/file.jpg');
}
#track legend { /* the legend tag inside the form with id=track */
text-align: left;
}
Voila!
If you use class names (form class=track) instead of id's then put in a dot
(.) instead of a hash (#).
---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/
Re: [css-d] fix border on some list items?
and li don't need display: inline, because display default value for li is inline. No it isn't! The default display for li is list-item. Which is closer to block than it is to inline. If it were inline, your lists would look like: 1. Thing one 2. Thing two 3. Thing three Instead of: 1. thing one 2. thing two 3. thing three. ---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/
Re: [css-d] Die focus, die!
1. Is it considered proper to put the reply after the quote? I personally much prefer the reply first. If I'm reading a thread, I have the quote already in mind, and like it when I don't have to manually scroll down to see the reply. But if manners suggest quote first, I can do that. It's a list policy (although not as militantly enforced here as on some other lists) that the quoted text comes before. As I understand it, this is mostly for archive purposes. If you come in the middle of the thread, having to start at the bottom and work your way up is a little odd. Also, it facilitates inline responses to multiple questions. ---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/
Re: [css-d] a:hover
I'd like to make a:hover maroon and underlined, I tried it in the way I wrote
it below but it doesn't work, I'd appreciate it if you have any tips...
a:hover
{color:Maroon;}
a:hover
{text-decoration: underline;}
That should do it. Or for efficiency:
a:hover {
color: maroon;
text-decoration: underline;
}
But that's got a pretty low specificity. Any rule with a class, an id, or
another tag in the selector will over-rule it, and it won't be applied.
For example:
#content a {
text-decoration: none;
}
will result in the first rule not ever being applied to any link inside the
element with id=content. That's probably your problem, but without seeing
the rest of the page, we don't know how your other CSS would be effecting
anything.
---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/
Re: [css-d] div not floating in FF
I have a break with a clear equals all below the outer div. Clear: all is not a valid value. Are you looking for clear: both? ---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/
Re: [css-d] 2 small css problems
And if anyone knows the reason why I have the other problem with my
thumbnail_grid div's position, please let me know! That's on this
#thumbnail_grid {
position: relative;
float: left;
overflow: hidden;
/* border: 1px solid red; */
width: 100%;
}
Claude Needham already answered that one, but here's a repeat.
That width: 100% is throwing it off. That says that it needs to take up ALL
of the width of its parent, which means that it can't go next to anything,
since that wouldn't allow it to have ALL the width. You need to set the width
to something else, and keep shrinking it until it fits in there. The best way
to do that is to set your nav column with percents too, and have the two of
them add up to something close to 100%. (20 and 75, for instance - to give
some wiggle room for margins, padding, and rounding errors)
And your grid is off because your images are different heights. If you make
them all the same height, it'll align itself.
---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/
Re: [css-d] In HTML CSS vs. Separate style sheet CSS
100%px isn't valid, unless my programming mind is tying to make too much sense. I think that's the problem... His template is putting in 'px' even though he doesn't want one. And he wants to have a width of 100% in spite of it. Stylesheets should never overwrite a style defined in the actual tag (Unless it's on the user's side). On the other hand, that gave me an idea that may work (completely untested mind you): Invalid styles should be ignored. So, if you specify width: 100%px in the inline style, and then width: 100% in the style sheet, it might actually get applied. It would be among the ugliest hacks I've ever seen though. ---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/
Re: [css-d] content in table won't align vertically
Any clues? Default top and bottom margins of 1em on H1 elements? It looks like it's top aligning to me in Firefox, IE8, and Chrome. The only space I see is the margin on the H1 which you didn't cancel out. ---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/
Re: [css-d] FF 2.0 rendering issues - blank content
Thus far I have looked at Doctors page in 6 browsers on 2 different operating systems. Just pointing out that the browser in question is in the subject (i.e. Firefox 2) I don't happen to have a copy so I can't help, but it should save some other people some time. ---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/
Re: [css-d] Combining :only-of-type with :before?
The other thing i missed was the need to use double colons, like ::before - I tried only ':before'. What's the reason? :before is CSS2. ::before is CSS3. In CSS3, double colons go before pseudo-elements (first-line, first-letter, before, after), while single colons go before pseudo-classes (first-child, only-of-type, nth-child, etc). Since only-of-type is a CSS3 pseudo class, it's enforcing the CSS3 syntax. The spec: http://www.w3.org/TR/2009/WD-css3-selectors-20090310/#pseudo-elements (pseudo-classes are the ---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/
Re: [css-d] help with single level drop down menu
My issue is that that, while the drop down menu appears when hovering over
top level list item, when the user moves OFF of that list item to move into
the drop down sublist, the sublist disappears.
My immediate guess, without getting to see the page, is that you need to add a
sublist:hover rule so that when you move off of the toplistitem, there's still
a rule making the sublist show up.
Like:
div#navbar li.toplistitem ul:hover { /* lists nested under hovered list items */
display: block;
}
__
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 Important is CSS Validation?
What is the general consensus with regards to CSS validation? I'm really inclined to leave the opacity effect in. Validation of CSS is great for finding misspelled properties, bad values, missing semi-colons, etc, but hacks, proprietary properties, and CSS 3 stuff is fine (or even necessary) to have even though it, by definition, will not validate. Invalid CSS is not nearly as much of a problem child as invalid markup. ---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] Floats at the beginning of lists
Take a look at this page: http://www.indiana.edu/~intlserv/orientation/arrival_housing.php, and scroll down to the cab company list. In Firefox 3.6, the bullets appear correctly. However, that's the only place it's right. The problem, I believe, is that I've floated the first thing in the list. Because in Webkit (Chrome, and Safari, and Arora) the bullet shows up in front of the first non-floated element. In Opera, it shows up twice- once in front of the float, and once in front of the non-float. And in IE, there's no bullet at all. And of course, in IE6/7, the bullet's in the wrong place, AND the non-float is on a new line. I don't think I'm looking for a solution, actually, because this is the umpteenth problem I've run into with this structure. So I think I might just give up and re-work it. But it thought it might amuse you all to see something this screwed up. ---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/
Re: [css-d] Inflexible table
Any help and/or suggestions are GREATLY appreciated I have discovered that the margin-right on #aelbibDisplayLayout is causing this. If you set that margin to 0 (instead of 200px) that fixes it. I have no idea why though.] Also, it appears that you have two identical selectors in your CSS file, both of which set the right margin on that table. Line 260 set it to 205px. And then line 264 over-rules that and sets it to 200px. ---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/
Re: [css-d] Trick for centering menu
Trying to center bottom navigation menu in footer of webpage. There are lots of centering methods, most of which depend on the particular page structure. A link would be really helpful. ---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/
Re: [css-d] Trick for centering menu
Unfortunately, I am having to work off my local drive with no access to upload anything at this point. New job, working with little resources at this point while waiting for server access and more software. Hoping things will be worked out next week. Bummer. Well, shots in the dark I guess then. If your menu has a container, if you give it left and right margins of auto, that should center it. Or you could give the container text-align:center, and the menu items display:inline-block (but only if IE doesn't matter. Otherwise, you'll need a hasLayout hack. Google will turn that up for you) Hopefully those can help you out. ---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/
Re: [css-d] Deprecations in recent versions of HTML cause C SS problems
In HTML you can put nbsp;nbsp; plus an ordinary space after each sentence, but that's awfully presentational markup. Actually, that would be three spaces. Two would be nbsp; . ---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/
Re: [css-d] Deprecations in recent versions of HTML cause CSS problems
On-topically: the only way to emulate double spaces with CSS which I can
think of would be to wrap every sentence in a span class=sentence and
style that with a 2em right padding.
Any other?
I think 2em right padding would be the wrong way to do it. Em is the *height*
of a character, not the *width*. You'd end up with something like 5 spaces
between sentences that way. I think (if you were going to do this with CSS,
which I find a ridiculous premise to begin with) that it'd be better to do it
as:
.sentence:after {content: \A0 ;}
It's actually inserting the non-breaking space, but presentationally.
but that's awfully presentational markup.
I'm also going to argue that /characters/ cannot be mark-up or
presentational. The markup is tags. The stuff in the tags is /content/.
Just because it's a character that needs to be specially encoded in HTML does
not make it markup, any more than fianceacute;e would be markup.
$0.02
---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/
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] Float not working in IE 7
I'm not sure why this isn't working. It's fine in all our standard-compliant friends, but IE 6/7 won't play nice. The h3s (for Date, Time, etc) are floated left, but the following paragraphs aren't floating up. Any insight is appreciated. Oh, almost forgot a link! http://www.indiana.edu/~intlserv/ic/weekly_news.php ---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/
Re: [css-d] Float not working in IE 7
Hmmm... not sure I've come up against this specific problem before, but a
'clear' fix to ensure the list items are containing the headings and
paragraphs does the trick:
.event_details li { overflow: hidden; }
Indeed it does! That makes a certain amount of crazy sense, but I wouldn't
have gotten it in a million years. Thanks!
---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/
Re: [css-d] Issues with padding
Take a look at your page with the Firebug extension for Firefox, and you'll see what's up. What you think is mainContentPad and what actually is, are two entirely different things. Fixing it will take some mark up changes, which means that I can't just test it quite as easily as CSS. But I think that if you set #innerwrapper to have overflow:hidden; and put #mainContentPad inside either #innerwrapper or #twoColSpread_brd, things will start to come together. Also, I'd consider using text-indent:5em instead of all the spaces at the front of your paragraph, and padding: 15px, instead of spelling out all of the paddings individually. ---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/
Re: [css-d] horizontal, variable height nav bar. Doable with display: table?
Alas, the issue is that while the LIs are all the same height, the actual anchor tags are only as high as the text. I'd like it so that all of the anchor tags (as well as the LIs) are all the same height so that each link has the same size target to click on. Is that doable with just CSS? Or will this also be a task for javascript? Setting the links to display: block is the first step. It might be the only one. You might need a height: 100% too. But that might try to make them the height of the page. My brain's not working well today, so I'm not sure. But it is doable with just CSS. ---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/
Re: [css-d] Synchronized paragraphs in adjacent columns
I hope that someone will have a suggestion for me.
Brace yourself...
I actually think that this could be argued to be a legitimate use of tables to
display tabular data. It's certainly not tabular data in the tradition
spreadsheet sense, but it is data that corresponds to other data arranged
logically in columns and rows.
But, it is pretty easy to do this with CSS.
Styled something like:
p[lang=en_US] {
clear: both;
float: left;
width: 49%;
}
p[lang=fr] {
float: right;
width: 49%;
}
---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/
Re: [css-d] public websites with faulty CSS-s
There's always the Acid 2 test. It looks the same in all the major browsers now, but in IE6 and 7 it's a pretty stellar disaster. The other thing to check is if MS makes the Compatibility View list public. If it does, that would give you a list of sites that look good in IE7 that don't look good in IE8. And generally, if it doesn't look good in IE8, it probably doesn't look good in anything else either. Once MS fixed their box-model and margin-doubling bugs though, things got pretty uniform. Another thing to keep in mind when doing this though, is that the public facing site may be fine, but only through the use of conditional comments and/or CSS hacks. ---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/
Re: [css-d] Synchronized paragraphs in adjacent columns
This may be a crazy suggestion, but in my mind a definition list (dl, dt, dd) wouldn't be out of the question You'd either have to avoid paragraph tags, etc, or damn the standards. I had the same thought, but decided not to damn the standards. So I suggested the paragraph solution instead. ---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/
Re: [css-d] Navigation
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of e...@copywritecolombia.com Sent: Thursday, January 28, 2010 4:00 PM To: css-d Subject: [css-d] Navigation The top navigation should be right up against the top of the screen. How I can change it? Take the width off of #navigation ul. If you want it over on the right, then change the float: left on #navigation to float: right. It'll still break if you make your window narrow enough, so you might want to put a min-width on body. Also a max-width so that the page doesn't get too long to read on large monitors. ---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/
Re: [css-d] Navigation
Thanks Troy and Tim, the navigation is now up against the top of the page, but now it is on the wrong side. I have floated both the navigation and logo left but it is showing the logo on the right not on the left-why is that?: http://www.copywritecolombia.com/mediabuying.htm You missed my part about floating the navigation right. If you float it right, it'll butt up against the right side of the page instead of the left. Change div id=navigation style=float:left to div id=navigation style=float: right, and you should get something closer to what you wanted. ---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/
Re: [css-d] Fraction bar
I took Alan's sample and expanded on it to provide a horizontal line. I haven't extensively tested it but it works well for me on FF3.5. It does look good in FF3.5. But it doesn't look nearly as nice in any other browser. The spacing between the numbers and the bar is too big in everything else, and IE8 chokes all over it. Apparently, it doesn't like setting color to transparent. ---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/
Re: [css-d] strange problem with float
However, in IE6 (haven't tried ealier versions), the right sidebar (localsidebarpanel) is off in never land and its color is completely wrong and can't be changed (weird!). I tested with IE 7 and 8 based on output from http://ipinfo.info/netrenderer/ and the layout is even worse, and still same color problem. - The color problem is a typo. Actually, a couple of them. First, your conditional comment should read [if lte ie7] (no space). That's why the ie style_sheet is being applied to ie8. Second, the line you have in there is background-color: rgb(142,42,242). What you have in the other sheet is rgb(242,242,242). IE shouldn't have any trouble with that color declaration, so you could just leave it out of the IE sheet entirely, and things should stop being purple, and go back to being gray. ---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/
Re: [css-d] strange problem with float
Not sure yet what the fix is. Or, if you know of a free CSS exploration tool *for IE* like the (awesome!) javascript console that comes with Chrome, I could try using such a tool to figure it out. Well, there's the IE Developer toolbar. It's only good for IE7 (although IE8 comes with it built in). http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038displaylang=en#Requirements It's not as awesome as Firebug, or the Webkit Console, but it's significantly better than nothing, and it's what let me find your color issue so quickly. ---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/
Re: [css-d] u/u - why did it have to die?
A reply that went to me, but probably should have gone to the entire list, or at least the OP... [my lengthy reply on semantic markup] Another reason is that usability-wise, only something that is a link is supposed to be underlined on the web. For a bibliographic reference, perhaps bolding the text instead of underlining it would be a good alternative. Otherwise, you might have people clicking the heck out of an underlined bit of text. Theresa Rather than bold, italics would be a more appropriate alternative. APA (and MLA, and Chicago) style were for the most part designed with typewriters in mind. It was impossible to italicize titles on a typewriter without changing all your keys, so they went with underline instead. But computers don't have that limitation. And, by visiting the APA site, it appears that the style guide finds italicized titles a legitimate and proper substitute for underlining. This would lead to a similar complaint about the removal of i, I'm sure. But the semantic argument still applies. ---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/
Re: [css-d] font-size smaller on IE 8 [error correction]
Adventuring on the EM land surely deserves quite of organization on the font side of things. I will pay better attention on the future (so I believe). Yes it does, sort of. Font size shouldn't vary too much on a page though. tons of different font sizes tend to make things messy and hard to read. But one thing I've found that helps on organizing the font sizes was in an A List Apart article last year (?). The idea was to have 3 style sheets: one for fonts, one for colors, and one for layout related stuff (positioning, borders, margins, etc). There's a bit of extra page weight involved, since you end up declaring the same selectors a few times, but I've found that it does make keeping track of your styles easier. Fewer things get lost. ---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/
Re: [css-d] NOT restarting numbered lists after h1 element
After inserting the h1 I find I cannot continue with my second list item as 2; the list starts over at 1. Can I do that using CSS? I've got the other sub-items to style correctly using CSS, so this is my only problem. There's two answers: There is the start attribute of ol (ol start=2) which apparently is deprecated (just learned that now) And then there's counter reset, which is the CSS replacement. I'm not sure how it works yet, but I found this page: http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html ---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/
