Re: [css-d] Drop Menu failing on most Mobile Phones
At 20:02 -0600 on 11/28/2014, Karl DeSaulniers wrote about Re: [css-d] Drop Menu failing on most Mobile Phones: Yes. jQuery can make this work. Note that jQuery IS JS (under the covers) so the query of if JS is the only method that will work is answered since use of jQuery implies use of JS. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 28, 2014, at 2:13 PM, Crest Christopher crestchristop...@gmail.com wrote: Thanks David, the example you provided doesn't have the nice collapse effect ! Do you think jQuery could iron out any quirks that this menu has, or strictly JS will only work ? Christopher David Laakso mailto:laakso.davi...@gmail.com Friday, November 28, 2014 2:20 PM On Fri, Nov 28, 2014 at 10:58 AM, Crest Christopher You may need js [off-topic for this list] for that to collapse in mobile. And even with js transitions can be problematic for Android. This is a CSS only method that may? work for you with transitions and max-height: http://ccstudi.com/site/playpen/nav-1.html Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Friday, November 28, 2014 10:58 AM Hi, the following effect http://cssdeck.com/labs/navigation-dropdown-with-flip-effect is not collapsing on iPhone and it's not opening or collapsing on WP8.x. I can't say whether it works on Android as I didn't test on Android ? Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Re: Web fonts
At 08:02 -0400 on 07/31/2014, Chris Rockwell wrote about [css-d] Fwd:
Re: Web fonts:
-- Forwarded message --
From: Chris Rockwell ch...@chrisrockwell.com
Date: Jul 30, 2014 10:36 PM
Subject: Re: [css-d] Web fonts
To: Stuart King zinlo...@gmail.com
Cc:
Here is the culprit:
.column-content p {
font-family: Whitney A, Whitney B, sans-serif, Helvetica, Arial,
sans-serif;
line-height: 1.6em;
font-weight: 300;
color: #666;
}
I didn't check anything else for other declarations, so there could be more.
Note that with this declaration if Whitney A or Whitney B is not
available, the user's defined sans-serif font will be used. The
fallback to Helvetica or Arial will be short circuited by that first
sans-serif.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag can't be child of label ?: If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). The use of the for attribute allows the label to not need to wrap the input. It just references the id of the tag that wraps the input (if I remember correctly). __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
At 20:01 -0400 on 07/13/2014, Crest Christopher wrote about Re: [css-d] P tag can't be child of label ?: Do you mean form ? No I mean the for parm of label. See http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.9 and http://www.w3.org/TR/WCAG20-TECHS/H44.html Robert A. Rosenberg wrote: At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag can't be child of label ?: If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). The use of the for attribute allows the label to not need to wrap the input. It just references the id of the tag that wraps the input (if I remember correctly). __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-variant:small-caps;
At 14:01 -0500 on 06/16/2014, Richard Wendrock Forum wrote about Re: [css-d] font-variant:small-caps;: I used David's suggestion to solve the problem. Assuming Arial does not have small-caps variants, I switched to font-family: Verdana, Geneva, sans-serif; and that solved the problem. Thank you everyone! One warning - Even if you choose only families that have small-caps, it will not fix the problem UNLESS these families are universal (ie: Are on all your user's machines). Otherwise the selection will end up defaulting to the user's sans-serif default and the problem will still exist for that user. The only fix that will work is to use a downloadable font with small-caps. This, of course, assumes that the user's browser supports downloadable fonts g. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Will the unsemantic HTML elements B and I be soon phased out?
At 11:24 +0100 on 02/17/2014, Peter H. wrote about Re: [css-d] Will the unsemantic HTML elements B and I be so: It's also true that the browser by default draws an italic font for 'emphasis' and a bold font for 'strong' so the result is equally presentational. Dunno why they couldn't have left it well alone, stuck with 'i' and 'b' and not created another can of worms. The use of em and strong in lieu of i and b is aimed NOT at the visual presentation (ignoring screwing with the em-i and strong-b mappings via CSS) but at AUDIO (ie: Screen Reader) presentation. This way you can markup the text so the audio indicates the markup to these who listen as opposed to view the text. Of course, the text-to-speech mapping could in theory treat i the same way as it treats em, but that is a separate issue. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hiding things and bandwidth?
At 13:59 -0500 on 02/14/2014, Chris Williams wrote about Re: [css-d] hiding things and bandwidth?: AFAIK, there are but two choices: 1) A mobile version of the page/site, users get redirected there based on client and you only load as needed for each client. This has a number of issues: different user experiences, non-portable links, multiple sites to test, etc. but is the easiest way to handle this issue. 2) Have the client determine what is needed and download as necessary. That's lazy loading, that's Javascript, and while a worthwhile topic and a useful method used more and more lately, it's off-topic here. Solves several of the issues with separate sites, but adds another language, testing, and layer of complexity. Chris How about controlling the sending of the optional stuff via Server Side Scripting? So long as the server can tell the difference between a mobile and a non-mobile user the optional page contents can be sent only to the non-mobile user. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] child problems with li?
At 18:18 -0800 on 12/20/2013, John wrote about Re: [css-d] child problems with li?: On Dec 20, 2013, at 6:00 PM, John j...@coffeeonmars.com wrote: at this page: thinkplan.org the footer li nav appears to be being influenced by the header nav li CSS and I can not see whyany clues? think I solved it; put the top nav inside the header, renamed those header nav, header li and that broke the influence, but I still don¹t see why the footer nav and footer nav li would take their marching orders from the top nav am I right thinking this is an inheritance issue? While I have not looked at your page to try to see why you might be getting the results you are, I can point at one other reason aside from inheritance - CSS Sepecifity. This refers to the issue of what happens if more than one CSS rule matches some HTML. In that case the most specific match (or matches if the is more than one - each applying and being cascaded) is used. For example if you have a rule for nav li and one for ul li, both match a ul li enclosed in a nav and thus both will be applied in the order that occur in the CSS. If you do not want this to occur, you have to have some way of telling the difference in the two rules such as what the nav is enclosed in - IOW: Header Nav ... vs Footer Nav ... or something like that. By staring the rule with Header or Footer, you prevent a nav li rule from being applied to a nav ul, or other cases since only a header or footer section would be a match. Also a nav ol will override a nav li if one case is has the li enclosed in ul and the other in ol (the nav li would thus only apply to the ul case but not the ol one). thank you, John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two classes, two conflicting rules, which wins ?
At 20:17 +0100 on 10/01/2013, Philip Taylor wrote about Re: [css-d]
Two classes, two conflicting rules, which wins :
Chris Rockwell wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
Yes, the last example is clear; it was only the 'class=c1 c2'
about which I was uncertain.
Philip Taylor
So you are saying that in a 'class=c2 c1' case, it scans the CSS
defs, sees .c1 and applies it, keeps going and sees .c2 which
overrides the c1 width?
IOW: The order that you list the class in the HTML is ignored and
only the order that the classes are defined in the CSS defs counts.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Where do you cut-off your browser support?
At 10:51 -0400 on 09/22/2013, Tom Livingston wrote about Re: [css-d] Where do you cut-off your browser support?: But we recently had a client ask (tell) us to support IE7 as that's what they use internally still and, according to their own stats, have a significant user base on 7. Of course if they use it internally, they are going to show a significant user base on 7 - or are they talking about only external users and not counting their internal users? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] html email with css
At 14:52 +0100 on 09/06/2013, Philip Taylor wrote about Re: [css-d] html email with css: What I do think is pandering to the manufacturers is using inline styles because they are too lazy to parse styles found in the head region, repeating styles in inner elements because they are too lazy to implement inheritance properly, and so on. There is also the issue that you are forced to send bloated messages (slowing the reception) due to their failure to follow standards. A message that uses header styles is much smaller than the same message with in-line styling. It is also harder to generate the message text itself since you have to locate where each style is needed and add a copy of the style parm there. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] accents on e in Resume
At 23:17 +0100 on 06/20/2013, Philip Taylor wrote about Re: [css-d] accents on e in Resume: Incidentally, as you can type e-acute (é) in your e-mail, why not enter them the same way in your web page ? I assume you are working in UTF-8 and not ASCII/ISO-8859-1. This letter is part of the ISO-8859-1 character set (as shown by its code being between 160 and 255. Codes between 128 and 159 are control codes not glyphs unless your charset is Windows-1252 which replaces these useless/legacy codes with useful glyphs (which in Unicode end up on the 8xxx range). __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trumping bad proprietary code.
At 19:45 +0100 on 11/06/2012, =?UTF-8?B?U3VzYW5uZSBKw6RnZXI=?= wrote about Re: [css-d] Trumping bad proprietary code.: But all other methods have a real effect (and side effects), that may not fit in a special environment. zoom: 1; is wonderful meaningless, it does nothing (beside fixing a stupid old IE bug). The only real problem I see, is that you might miss an important validation error, when you get used to ignoring some. The fix for that is to update the W3C Validator to just issue a Warning for zoom:1 or even better to have a setting to ignore it totally. Note that in either case, it is ONLY zoom:1 that is special cased - Any other zoom (such as zoom:1.5 or zoom:2) would still get an error. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trumping bad proprietary code.
At 15:25 + on 11/06/2012, Philip TAYLOR wrote about [css-d]
Trumping bad proprietary code.:
Wishing (as always) to keep my sites 100% W3C standards compliant,
I am stuck with a bad property in proprietary code. The offending
rule reads :
.qmmc {position:relative;zoom:1;}
Just so you are aware, zoom:1 is a Windows/IE hack/fix to set
HasLayOut so the element displays correctly. Aside from making the
code display correctly in IE, it has no downside/effect with non-IE
browsers so you can ignore it (or consider it W3C compliant since its
purpose it to make IE act W3C compliant).
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] on html and css versions
At 16:57 -0400 on 08/01/2012, Tedd Sperling wrote about Re: [css-d] on html and css versions: What is wrong with using? !DOCTYPE html Sure it doesn't have a *real* DTD, but the W3C validator does somehow validate pages that have this DOCTYPE declaration, right? So, there must be some sort of *standards* it validates contents against, right? Where/what is that DTD? I think that would be an interesting thing to know. You are missing two points. First is that while browsers may not actually use the referenced DTD (the http... clause), they do parse the HTML based on the DOCTYPE html PUBLIC... clause and treat the HTML differently based on what you declare. Second is that just because the Validator approves of the supplied HTML5 HTML, that does not mean that a browser will not choke on it or display the code properly. This is not the case with pre-HTML5 DOCTYPES where if the Validator approves of the code, the browser will correctly parse, interpret, and display it. IOW: At the current time, !DOCTYPE html throws the browser into tag soup mode where it tries to figure out what it is being supplied with as opposed to knowing how to parse and handle it. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] non-English characters: omit accents when using text-transform:uppercase
At 14:11 +0300 on 07/22/2012, sweepslate wrote about [css-d] non-English characters: omit accents when using tex: I want to text-transform:uppercase a piece of text writen in Greek. The Greek language requires that: a. in lower case text, some letters need to have accents --and b. in full upper case text, LIKE THIS, have no accents at all My problem is: if I use the uppercase property I will end up with upper case accented text, which is a typographical error. I could write the text, inside the HTML, in lower case and omit the accents - but that would make it a typographical error when viewed without CSS. I could write the text using upper case characters, inside the HTML, and omit the accents - but using upper case in this webpage is a decision of style, not content, so I'd rather do it with CSS. Any ideas? How many blocks of Greek text is this needed for? Are the accented letters a different Unicode codepoint from the same letter unaccented or is it unaccented letter followed by the accent? If so, you can just use find/replace to do the conversion of the text in the HTML. One way that this may work is if you can duplicate the text in both lower and upper case and then just use span with class tags to mark each version. Use style=hide to not display the version you want. I may be misunderstanding your needs so this advice might not be what need. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-face declarations
At 11:53 -0400 on 06/29/2012, Tom Livingston wrote about [css-d]
font-face declarations:
I got the following from FontSquirrel:
@font-face {
font-family: 'AlegreyaRegular';
src: url('Alegreya-Regular-webfont.eot');
src: url('Alegreya-Regular-webfont.eot?#iefix')
format('embedded-opentype'),
url('Alegreya-Regular-webfont.woff') format('woff'),
url('Alegreya-Regular-webfont.ttf') format('truetype'),
url('Alegreya-Regular-webfont.svg#AlegreyaRegular') format('svg');
font-weight: normal;
font-style: normal;
[snip]
My question is, shouldn't the declaration for AlegreyaBold use
font-weight: bold; instead of 'normal'? And should AlegreyaItalic use
font-style: italic; - again, instead of 'normal'?
If so, why would FontSquirrel use 'normal' in these cases?
I think it is correct. Saying italic or bold asks the browser to
either select an italic/bold version of the roman font requested or
fake the style if there is no italic/bold of the font. Since you are
supplying a pre-formatted font you want to use it as-is so normal is
the correct setting.
To see what happens if you mix font-weight/style with an italic/bold
font, try asking for one that you have on your machine and the add a
style to it and compare with the same font with no style.
TIA!
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive Design Issue
At 23:41 +0200 on 04/24/2012, Gabriele Romanato wrote about Re: [css-d] Responsive Design Issue: Why should we get rid of a piece of design when you have a CSS3 property for that? Use background-size. It works. Maybe since use of background-size assumes/requires that the device's browser supports the property. Attempting to use it with a non-CSS3 Supporting Browser causes the background image to display. You need to use a solution that works with all browsers. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] question on media queries and full screen browsers
At 17:32 -0600 on 04/14/2012, Debbie Campbell wrote about [css-d] question on media queries and full screen browsers: I'm using media queries for desktop vs. tablet vs. smartphone on my site (and the media query code is taken directly from the developer of the Lynda.com adaptive design course). [snip] I don't know how to fix this, especially since I can't see it happening. Can someone help? I think the value of device-width (ie: The Current Window Width is available to PHP? If so, you might want to add some debugging code to supply it as a readable display on the page. That would show something for the user who is getting the wrong style sheet to report. Also put out a set of debugging comments on the page that report on which style sheet is being selected (in the style sheet have the lines marked as visibility:hidden except for the one that IDs THAT style sheet). You can also insert the two device-width values in each line if available. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to make a div fill the height of an iframe
At 08:32 + on 03/23/2012, Luis Cabral wrote about [css-d] How to make a div fill the height of an iframe: Hello, I have the following scenario: - An iframe that has fixed width and height and is absolutely positioned in the middle of the screen (simulating a modal pop up window)- The document inside that iframe contains 2 divs, both 100% width. The top one is variable height, and the bottom one should occupy the space left inside the iframe. If required, scrollbars should display in the bottom div, but not in the iframe itself. I made a diagram to try to make it clearer: +-iframe (fixed width and height)|+-div1||variable height|+---|+-div2||height should occupy the ||remaining space in the div, scrollbars show ||inside the div if required if its contents ||are bigger than the available space|+--+-- Note that this slightly different from the usual requirement, which is to dynamically resize the iframe accordingly to its contents. Is this possible to be done with just CSS? (assume the most recent browsers will be used i.e. Chrome, IE8+ etc) ThanksLuis __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ If you make the 2nd DIV a table would that work (ie: Show the scroll bars as needed but not affect the height of the iframe or add scroll bars to it)? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help! I need help!
Thanks to you all, for your commments that were sooo helpful in thinking this through. I kept thinking I know how to do this but had so little time. The page finally came together in the wee hours of the mornings when I had more time to think with out interruptions around me. Thanks to you all I really appreciate you all for your help.. robert I --- On Thu, 6/16/11, Robert rob...@angelsoflight.net wrote: From: Robert rob...@angelsoflight.net Subject: [css-d] Help! I need help! To: css-d@lists.css-discuss.org Date: Thursday, June 16, 2011, 7:30 AM Hi there. I hope someone can help me. I am trying to add include files in a website. On my computer the page looks fine. But when I upload the page by FTP to the server the page falls apart. I dont understand what i did wrong. Thanks for any help. robert __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help! I need help!
Hi there. I hope someone can help me. I am trying to add include files in a website. On my computer the page looks fine. But when I upload the page by FTP to the server the page falls apart. I dont understand what i did wrong. Thanks for any help. robert __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] test I need help!
__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
I'm now down to using the simplest html I can: html head link rel=stylesheet type=text/css href=css/style.css / titleTest page/title /head body - should be body img src=images/logo.gif alt=logo/ h2Hello Word/h2 Some text follows here. /body /html And I just can't make it work. Uh, is this a straight copy and paste? Have a look at your opening body tag, fix that and see if that fixes your problem. Sometimes the css isn't the problem :) Cheers, Rob __ 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] Safari Overflow property problem
Hi, the overflow property works fine in firefox and internetexplorer but Safari
displays a tiny vertical scroll bar even thoughI set the property to hidden. My
CSS is as follows:
div#MainContent div#LowerNav ul {overflow: hidden;}
I would appreciate anyones help.Thanks, Robert
_
Hotmail has tools for the New Busy. Search, chat and e-mail from your inbox.
http://www.windowslive.com/campaign/thenewbusy?ocid=PID28326::T:WLMTAGL:ON:WL:en-US:WM_HMP:042010_1
__
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 - image behaviour in Hybrid
Here is a clearer description of what I'm trying to do.
I'm wanting a header image to expand it's width as the browser window
expands from 800 pixels to 1024 or from a 4 X 3 monitor to a 16 x 9
monitor.
So in a smaller browser window, the right side of the image would
become cropped, but become visible as the browser window expands.
Is there a way of doing this by placing the image in the container
background field and using css to achieve this.
#header {
min-width: 640px;
width:80%;
background: url(path/to/img.png) no-repeat;
}
and having your image 1024px wide. If you leave out no-repeat then
you'll get nasty repeating of the image across the width of the page if
someone has a viewport wider than 1280px.. Using this you shouldn't need
to 'hack' much for IE 6 to behave unless the user's viewport is smaller
than 800px (because ie6 doesn't understand min-width).
Don't know how helpful I'm being :)
Cheers,
Rob
__
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] Fwd: Re: Help - image behaviour in Hybrid
#header {
min-width: 640px;
width:80%;
background: url(path/to/jpg); mistake on previous post, sorry...
}
and having your image 1024px wide. If you leave out no-repeat then
you'll get nasty repeating of the image across the width of the page if
someone has a viewport wider than 1280px.. Using this you shouldn't need
to 'hack' much for IE 6 to behave unless the user's viewport is smaller
than 800px (because ie6 doesn't understand min-width).
Don't know how helpful I'm being :)
Cheers,
Rob
__
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] PNG Image Position/ Size question - CSS
Oh you guys are just too funny! O:-) Yep, I just used a template to start this - but their stuff is so Abracadabra, Presto Chango! And I love that! I apologize, I really have gotten a little rusty at this and I mainly wanted to get pointed in the right direction. I didn't even know about the Wiki :-[ Thank you for that link. I am sure that is going to be very helpful And thank you all for your suggestions and help. __ 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] comment and request for feedback on a site at test
FIrst off — a word for the administrator, moderators, and contributors—
You answer questions help people learn, year in and year out, year after year.
You are generous with your time and knowledge. So please accept my deep
appreciation. I will keep that ball rolling. Thank you all.
Now to the issues at hand...
I seek feedback both broad and narrow.
I have just put up a test version of my site at www.stack212.com. I am not a
web designer, so l am unsure whether the choices I have made for general
structure are wise. For example, I wonder if the way I have all my content
aligned is too convoluted. The body is centered, then the main container is
aligned left, then the image container is centered and the paragraphs that
follow it are again aligned left. Is what I have done going in the right
direction? It seems there are so many ways to do the same thing.
Since this site emphasizes images rather than text, have I written I use
reasonable width instructions. I originally used ems to set all the widths, but
that got tricky as I started mixing in images measured in pixels. So I switched
to percentages. Seems to work, OK, but I only have a modern, compliant browser.
Maybe it looks horrible elsewhere. I don't know.
Also, I would like to have the captions below images set up so that the title
is flush left and bold, and the caption (both are P elements) is flush right
and on the same line as the title. Any thoughts on how to get them on the same
line? I have it set up like this:
XHTML—
div class=imageContainer
P id=titleTitle/P
p id=captionCaption/p
CSS—
.imageContainer #title {
text-align: left;
font-size: 75%;
font-weight: 600;
margin: 0 0 0 15%;
}
.imageContainer #caption {
text-align: right;
font-size: 75%;
font-weight: 300;
margin: 0 15% 0 0;
padding: 0;
}
Is there any virtue to putting images in a containing paragraph? I have seen it
done that way.
Sincerely,
Rob Stack
__
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] Please help. Why doesnt my heading show in mozilla?
Hi David.
I was about to give up too, lol but the code you provided worked.
Thanks so much for all your help.
To everyone for their help.
I really appreciate it.
As this was all new territory to me trying to add a video on a website,
and not really knowing css. lol
May I say, that sometimes a person can go on a forum for help and the
smart people are not very helpful to the newbies.
I am so grateful for the people on this forum.
Especially when I dont know what I am doing. lol
I will use the 3 browsers whenever I make changes.
Have a Great day to all.
R.
rob...@angelsoflight.net wrote:
All I need now is to learn how to center the video screen.
If anyone can tell me how to center it without the whole screen moving
around the page I would really appreciate it.
Can someone advise me please.
If this does not work for you, I give up:
body {
font-family: New Times Roman;
color: #FF;
background:url(images/top.jpg) no-repeat;
margin: 0 auto;border: 0;
float: right; :: delete
}
Change this from:
!--End Logo Heading--
table border=1 width=400 height=500 cellspacing=0
to:
!--End Logo Heading--
table border=1 width=400 height=500 cellspacing=0
style=margin: 0 auto;
Trying to fix do anything reasonably sensible when confronted with a
whacked and invalid table with inline styling structure is pretty much
an exercise in futility.
Your best bet is to start over with a clear head, a clean sheet, a
tableless CSS layout; and, frequent trips to the w3c validation service.
~d
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
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] Please help. Why doesnt my heading show in mozilla?
Thanks to everyone for the help. I have started over and used the code
David suggested below, and the Headlines are working!!! Thanks so much
David, and everyone For the responses.
I have just one more question or it may takes 2 weeks again to figure out
what I did before. lol
Please tell me how do I center the video and the background. It will only
move partially if I type in float: right; When I tried Center it went
back to the left. Please tell me where and what to write in to get the
video and background image to go the center like the logo heading and four
4 images on this page. thanks so much for all the help. I am so grateful
to get this finished .
rob...@angelsoflight.net wrote:
I dont know what else to do to make this page correct in Mozilla
Firefox.
body {
font-family: New Times Roman;
color: #FF;
background:url(vid_files/top0.jpg) no-repeat;
margin-left: 450px; :: delete
margin-top: 350px; :: delete
margin-right: ; :: delete
margin-bottom: 350px; :: delete
margin: 0; :: add
}
table {margin: 0 auto;border: 1px dashed red;} :: add
selector
td {text-align: center;} :: add selector
Validate.
~d
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
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] Please help. Why doesnt my heading show in mozilla?
Hi Theophan. I am really getting the hang of these different browsers now. Thanks so much for your input I really appreciate you and everyone else who has responded.. I downloaded the Safari Browser also and have been makeing changes according to the 3 browsers. Wow!! What a difference they make. All I need now is to learn how to center the video screen. If anyone can tell me how to center it without the whole screen moving around the page I would really appreciate it. Can someone advise me please. I'm not an expert, just a volunteer webmaster for a couple of churches. But in case it's useful, the site a moment ago looked subtly different on Safari and Firefox on the Mac. Here's a screen capture, Safari on the Right, Firefox on the left (the most recent versions of each): On Safari the seal icons above the video aren't centered, but on Firefox they are. I have no idea why. Interesting. fyi Theophan __ 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] Please help. Why doesnt my heading show in mozilla?
Someone please help. my site shows perfect in IE, but in Mozilla, It doesnt show my heading, it shows the center part of the page with the video and the bottom part is not centered, even though the source is Centered. I have tried w3.org, but it does not help with this problem. Please help. I dont know what else to do to make this page correct in Mozilla Firefox. www.thecomingcrisisinamerica.com/dev I am completely clueless as to what is wrong in Mozilla. Thanks for any help. __ 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] position an image outside of the DIV element containing it?
Hi, there, I am getting started on a long overdue overhaul of a static content site I've been maintaining for the last 7 years. The css is pretty crufty (I don't think I've changed it in the last 3 or 4 years). Fortunately, the static html pages were made with reasonably clean code, , so I should be able to use css to change the global look and feel But I encountered a problem. I have div.columnA and divcolumnB which is my main layout. In div.columnB I have an img element inside. However, I'm not quite sure I want this div.columnB. img actually to be located inside div.columnB. Maybe I want to put the image above both columnA and columnB. Maybe I want to put the image inside columnA instead of columnB. Is there any positioning css you can do to jam the columnB image inside of div.columnA. (Like setting a positioning value to negative?) I'm calling this negative positioning for lack of a better term. (Actually what is the phrase for what I am describing?) Also, are there big differences between how IE 8 and IE 7 handle these negative positioning tricks? (I upgraded to IE 7 and have no way to test IE 7 anymore). One thing I'm dealing with is that sometimes images are columnA; at other times they are in columnB. I want to be more consistent. Thanks for your help. -- Robert Nagle 12777 Ashford Point Dr #1417 Houston, Texas 77082 713 893 3424 htpt://www.robertnagle.info __ 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] position an image outside of the DIV element containing it?
Hi, Tim, Thanks for your reply. Unfortunately, the site is confidential, so I can't give a URL. (plus, there are other CSS issues which might distract people from the problem at hand). Seriously, it's been a few years since I've edited a CSS file. (I'm actually looking forward to it). Everything sounds vaguely familiar though; I'm at the stage where I just need a few terms to be able to google rj have div.columnA and divcolumnB which is my main layout. In div.columnB I have an img element inside. However, I'm not quite sure I want this div.columnB. img actually to be located inside div.columnB. You probably want to use absolute positioning. This will take the image outside of the document flow and there won't need to be a hole where the image would have been before moving it. This would be the case with negative margins or relative positioning. Remember that an absolutely positioned element is positioned in relation to its nearest positioned ancestor. That is to say an ancestor with position: absolute or position: relative. If there are no positioned ancestors it is positioned in relation to the body. It will be easier to help if you show us your code and show us what you want it to look like. -- Robert Nagle __ 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] IE8 rendering of text looks garbled at W3C and other sites
I just upgraded to IE8 and am noticing weird issue on many sites I visit. The W3C site is a case in point: http://www.w3.org/TR/CSS21/visudet.html#float-width When I open this in IE8 The text looks only partially rendered - faint - like you would see from an old style platen press where there wasn't enough ink. The text is all there but it is faint and the characters look broken - choppy, etc. This is the same if I choose IE7 mode or IE8 mode with the zoom at 100% and text size of medium. If I click the zoom and increase it to 125% or 150% the text looks normal. At 100% if I set the text size to larger it will also look correct. I have tried changing my display settings related to font smoothing and use of clear type and those do not seem to have an impact. Is there something we are going to need to do in our CSS styles to override this and make sure the text doesn't look hacked up in IE8? Anyone else seen this/figured out what is going on here? Thanks __ 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] Is List Working?
I have tried to submit a post about UL positioning and am not seeing it show up. I apologize for this post, it is a test. __ 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] formatting a Ul to not wrap around a floated image
I apologize if this is multiple posted (I have tried this a number of times but I am not seeing any of my earlier posts as having gone through). The issue page is here: www.lane-consulting.com/Tests/PRA/BIRC.php I have been fiddling with this page and I am at least getting consistent behavior from what I can see in IE 6/7/8 and FF3 But, the issue I have is this: * An unordered list starts about 2/3 of the way down alongside an image that floats left * The list has 8 items * Items 1-4 flow along the right side of the image * Items 5-8 are below the bottom edge of the image - so they flow to the left margin of the containing div below the image. Ideally I would like to have all the 8 bullets stay lined up in a straight line and leave white space below the image until the end of the UL bullet list items. Is there a way to do this using CSS? Basically my code is set up like this: h1 img / Some Heading Text /h1Note the img tag is inside the h1 tag h3 Some Heading Text /h3 p Some paragraph text /P h3 Some Heading Text /h3 ul li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li li List item 5 /li li List item 6 /li li List item 7 /li li List item 8 /li /ul The image tag is inside the h1 tag and then has styles of: margin: 0px 24px 0px 0px; display: block; float: left; height: 100% The UL has styles of: list-style-position: inside; list-style-type: square __ 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] UL wrapping around floated image - how do you not wrap?
I have a page at http://www.lane-consulting.com/Tests/PRA/BIRC.php It has: h1img class=img_left / Some headline text/h1 h3 Some more text/h3 pA paragraph of text/p h3 Another Headline/h3 And then an unordered list. ul id=brainpg class=notopspace liOccupational Therapy/li liPhysical Therapy /li liPsychotherapy/li liSpeech Therapy /li liVestibular Therapy /li liVision Therapy/li liVocational Rehabilitation /li liRehabilitation Medicine/li /ul Note the image tag is inside the h1 tag and the class .img_left floats the image left and applies a display: block to it. So the issue I have is that the unordered list wraps around the lower right corner of the image so that half the bullets are to the right of the picture and the rest of the list aligns below the image flush with the left margin. What I think I would like it to do, if possible, is to not break the list like that midway, but to keep all the bulleted lis in one straight line and leave white space under the image on the left until the end of the UL. Is that doable, and if so what style setting do I need to work with? Thanks! __ 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] UL List StairStep in IE7
I have a page here: http://www.lane-consulting.com/Tests/PRA/BIRC.php I floated an image to the left. I then have content to the right of the image flowing down the page. I have a bulleted list Professional Specialties that starts about even with the lower third of the picture. The list is about 4 bullets longer than the picture - so in FF 3.0.8 and in IE8 I get the list flowing straight down with no change in the left edge of the bullets. But in IE7 the lower four bullets are out dented to be even with the edge of the image. Is there an easier way to do this? Should I float the image like I did or what would be a better way to do this? Thanks! __ 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] Margin Collapsing down to the html element itself
Hi all, I've been working on a site and just at the stage of tidying up the CSS however I have a strange problem with margin collapsing. It looks like there is some unwanted margin on the HTML element itself which is really confusing me. I've been trying all sorts to fix this problem. Putting a border on the BODY tag made that border encroach into the unwanted margin at the bottom of the page but not remove it. I'm at a loss here. The page is at http://www.sanchothefat.com/dev/tc/ and the unwanted space is at the bottom of the page in the latest Firefox and Opera but not in Safari or Chrome. I'm still working on some IE fixes, it's the margin issue I want to eliminate in FF and Opera for now. Please help! -Rob __ 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] Margin Collapsing down to the html element itself
Els wrote:
Robert O'Rourke wrote:
I've been working on a site and just at the stage of tidying up the
CSS however I have a strange problem with margin collapsing. It
looks like there is some unwanted margin on the HTML element itself
which is really confusing me. I've been trying all sorts to fix
this problem. Putting a border on the BODY tag made that border
encroach into the unwanted margin at the bottom of the page but not
remove it. I'm at a loss here. The page is at
http://www.sanchothefat.com/dev/tc/ and the unwanted space is at
the bottom of the page in the latest Firefox and Opera but not in
Safari or Chrome. I'm still working on some IE fixes, it's the
margin issue I want to eliminate in FF and Opera for now.
Please help!
Some script is inserting an image below div#wrap:
img alt=Loading id=l
src=/dev/tc/wp-content/themes/treecarving/gfx/green-loady.gif/
This image has a style set too, on line 703 of your style.css:
#l {
left:-999px;
position:absolute;
}
Even though it's sitting 999px to the left of the screen, it's still
taking up its height.
If you also give it a negative top value, it wouldn't.
That will be it then! Thanks so much for your speedy help.
-Rob
__
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] Positioning Issues - how to center the middle float?
I am having some positioning problems over here: http://tinyurl.com/5kxvdb
I have a UL floating left - an image floating left - and a UL floating
right.
There is probably an easier way to do this. But basically I want the
image to be centered between the two UL floats. Centered in the page.
I tried margin: auto, but that is not getting me there.
The css I am trying is:
#bodylogo img{
margin: 0 auto !important;
padding: 40px 0 0 ;
float: left;
border: 1px dotted gray;
}
#pres ul, #vps ul {
margin: 0;
padding: 0;
}
#pres li, #vps li {
list-style-type: none;
float: left;
}
#vps li {
list-style-type: none;
float: right;
text-align: right;
}
Suggestions?
__
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] Div Positioning
Hello, I've got a stripped down version of my site's header here: http://www.rswilley.com/layout/index.html I'm having an issue with the navigation in IE7. If you take a look at it you will see that the nav buttons are too low. Why is there so much gap in IE7? If you look at it in Firefox it is basically where I want it. Am I going to have to use two different styles and set the top of the nav container or is it an issue with my code? Thanks, Robert __ 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] Div Overflow Issue
Hello, I've published the skeleton of my website. You can view the two pages below. Ex. A: http://www.rswilley.com/test/index.html Ex. B: http://www.rswilley.com/test/index2.html Basically what I'm trying to do is have #main always fill up the page even if the #content div does not have enough text in it to fill the page. If you look at example B you will see that this works until the content overflows. Since #main height is set to 95% it is not growing. If i take the height setting out (example A) it grows, but does not fill the page if there is not enough content. What am I doing wrong here? Is there any solution for this without having to write some javascript to do it? Thanks, Robert __ 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 Overflow Issue
Yes, that seems to have worked. Thanks!
On Thu, Jan 15, 2009 at 2:00 PM, Bill Brown macnim...@gmail.com wrote:
Robert Swilley wrote:
Ex. A: http://www.rswilley.com/test/index.html
Ex. B: http://www.rswilley.com/test/index2.html
If you look at example B you will see that this works until the content
overflows. Since #main height is set to 95% it is not growing.
This might help (more or less) in Example B:
#main {
/* height: 95%; --REMOVE */
min-height: 95%;/* --ADD */
}
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Password Field
MEM wrote:
AHH!
The password input field it's automatically shorter in IE.
If we put both input fields with the type: text. All works fine.
If We put two text fields, one with type: text. Another with type:password,
this one get's shorter.
Is there a way to stop IE from doing this mess?
Thanks a lot,
Márcio
Try using the 'size' attribute or setting the same width on both inputs
via CSS eg:
input { width: 14em; }
Also padding and border will affect the width of an input so make sure
those are consistent.
-Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] IE Password Field
MEM wrote:
-Original Message-
[EMAIL PROTECTED] On Behalf Of Robert O'Rourke
Sent: terça-feira, 9 de Dezembro de 2008 10:46
To: Luc on css-discuss
MEM wrote:
AHH!
The password input field it's automatically shorter in IE.
If we put both input fields with the type: text. All works fine.
If We put two text fields, one with type: text. Another with
type:password,
this one get's shorter.
Is there a way to stop IE from doing this mess?
Thanks a lot,
Márcio
Try using the 'size' attribute or setting the same width on both inputs
via CSS eg:
input { width: 14em; }
Also padding and border will affect the width of an input so make sure
those are consistent.
-Rob
Thanks Rob, we have post more or less at the same time. But I've chose pixel
units.
I will change the values to em instead of pixel.
No problem :)
The units you use are up to you, it's just important to know the
different advantages and disadvantages of each. Using ems is my personal
preference because of the way I style most of my forms with extra space
next to the inputs. I typically add a max-width in % aswell to stop the
inputs from poking out of my layout.
-Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] I give up with IE
Ray Pello wrote: Hullo, I have a problem. THis site : www.reginagarde.com looks OKAY to FF but when it comes to ie : when it gets to the product details page (such as : http://www.reginagarde.com/store/show/D231) The layout of the footer got screwed. ... Can anyone help? - Ray Ombilic Hi Ray, Check out a different technique: http://ryanfait.com/sticky-footer/ Position absolute doesn't always work as expected in IE6 :( -Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Lost in positioning masthead image
My example page is at: http://tinyurl.com/3r8rhu
I seem to be a bit rusty here and am struggling with positioning an
image and some text in the mast head.
I have a div named masthead. A div within that named content. In the
content div I want an image (yes I hate animated gifs too!) to the left
side of the masthead. Then I would like the Main Heading h1 LeChess
Club/h1 followed by the tag line of pA Society for Better Chess /p
So basically --- Image--- Heading
tag line
I may want to be able to play with the padding around the image for best
placement, But I want both lines of text to line up to the right of the
image rather than below it.
What is generally the best and/or easiest way to do this? Do I need to
use position, float, or what?
The Html is as follows: ( I have tried the image both in the H1 tag
and before the H1 tag. )
div id=masthead
div class=content
h1 img id=mast_img src=../Images/pawn_anm2.gif alt=LeChess
Club, A Society for Better Chess /
LeChess Club/h1
pA Society for Better Chess /p
/div
/div
The CSS that seems to effect things in this div is:
#masthead {
color: #f4a460;
background-color: #d2eff7;
padding: 0px;
margin: 0 0 36px 0;
}
#mast_img {display: block;
border: 1px solid red;}
#masthead .content {
padding: 10px 20px;
font-size: .8em;
letter-spacing: .5em;
}
Thanks for any suggestions!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Lost in positioning masthead image
Maybe I should be putting the gif in the background?
This looks sort of like what I am after: http://tinyurl.com/3ty2hs
--- do you think this is the best approach and will be stable across
browser?
Basically I just added some padding and text alignment on the heading
and tagline and put the image in the background with a little background
positioning and padding.
#masthead .content {
padding: 40px 120px;
text-align: left;
}
#masthead {
padding: 10px;
background-image: url(../Images/pawn_anm2.gif) ;
background-repeat: no-repeat;
background-position: 10px;
}
Robert Lane wrote:
My example page is at: http://tinyurl.com/3r8rhu
I seem to be a bit rusty here and am struggling with positioning an
image and some text in the mast head.
I have a div named masthead. A div within that named content. In the
content div I want an image (yes I hate animated gifs too!) to the
left side of the masthead. Then I would like the Main Heading h1
LeChess Club/h1 followed by the tag line of pA Society for Better
Chess /p
So basically --- Image--- Heading
tag line
I may want to be able to play with the padding around the image for
best placement, But I want both lines of text to line up to the right
of the image rather than below it.
What is generally the best and/or easiest way to do this? Do I need
to use position, float, or what?
The Html is as follows: ( I have tried the image both in the H1 tag
and before the H1 tag. )
div id=masthead
div class=contenth1 img id=mast_img
src=../Images/pawn_anm2.gif alt=LeChess Club, A Society for Better
Chess /
LeChess Club/h1
pA Society for Better Chess /p
/div
/div
The CSS that seems to effect things in this div is:
#masthead {
color: #f4a460;
background-color: #d2eff7;
padding: 0px;
margin: 0 0 36px 0;
}
#mast_img {display: block;
border: 1px solid red;}
#masthead .content {
padding: 10px 20px;
font-size: .8em;
letter-spacing: .5em;
}
Thanks for any suggestions!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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 name
Mário Gamito wrote: Hi, Does anyone know the font name that is used in this picture ? http://www.absinto.org/einstein.010.png I'd like to use it in a site, but I can't figure out what it is. Any help would be appreciated. Warm Regards, Mário Gamit If you cut out the bit of the image with the text and go to http://www.myfonts.com/WhatTheFont/ , you can upload it and it does a pretty good job of working out what font it is. -Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] styling for two monitors
On my 2 monitor setup, it works just fine. Just for reference it's a iMac 19 with a 19 sony trinitron external monitor with a hack to enable the desktop extension (Didn't come that way from the factory... Just desktop mirroring.) The only way I can reproduce what you are talking about is if I actually stretch the browser screen across both screens end to end... Which then it centers really well in the middle of both monitors which is what I would expect. Jason, thanks for looking at this for me. Is it possible to restrict the site to a single monitor? Or shall I tell my guy to just shrink his great big browser window? Sandy Argh! Clients! Sounds like he has his monitors set to be one big desktop and he has the browser maximised... Should be able to just set one monitor to be an extension of the desktop as opposed to part of it. If you get me. Point him to google if he still doesn't get it. You have my sympathy... Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Hey, I'm new to the list...
Jon Hughes wrote: I thought I'd say hi.. I'm Matt Lee, Campaigns Manager at the Free Software Foundation, and Chief Webmaster for the GNU Operating System. I've been using CSS now for about 3 or 4 years, and while I'm not really a designer, I'm extremely interested in seeing new examples of good CSS design. Cheers, matt Hi Matt, welcome to the list! There are all sorts of CSS galleries if you are interested in just seeing what else can be done. My first recommendation is always http://www.csszengarden.com/ through - Dave Shae has just started approving new designs (from a several-year lull) and there's some really creative stuff in there. Anyhow, enjoy your stay! - Jon Hi Matt and welcome, I'm not a fequent flyer on the list but I had to share this link, it came up on www.webcreme.com which is more of a design gallery than CSS gallery but nonetheless. The site in particular is http://www.volll.com, it's just beautifully done and a really good concept. Good luck with fsf.org Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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 Bottom - Lets Keep Them Apart
Ian Rutgers wrote: I have been charged with rewriting this www.aslslimited.org such that the top nav stays at the top of the page and the bottom nav stays at the bottom of the page and the content makes up the rest. In other words as the browser window is resized the content section of the site is the only fluid portion of the site. My preference is to write the code using divs but need some guidance on the positioning without using JavaScript (if that is possible as I am assuming that I would have to do some browser detection) . help what have I got myself into?! Ian Hi Ian, This link may help, make sure to read the limitations at the bottom then have a play with position: fixed; in modern browsers. http://divinentd.com/experiments/emulating-position-fixed.html It's worked well for me so far.but does require some IE hacks, depending on your design. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Margins above table cells
I'm displaying a elements with CSS like this:
a.button-style
{
display: table-cell;
width: 100px;
height: 70px;
background-color: blue;
vertical-align: middle;
margin-top: 20px;
}
Works great. However, the margin-top is ignored - I assume this is because
table-cell is not a block element. Is there another way to create the
equivalent of margins?
Also: Is there a way to display more than one of these on the same line?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Positioning an element - the limits
I'd like to position an element at the bottom of the screen. This is easy, using position: fixed and bottom: ...px. However, on screens higher than 600px, I'd like to fix it at 600px from the top. That is, if the screen is shorter than 600px, push it to the bottom of the screebn otherwise, push it down to 600px. Is there anyway to do this? Thank you. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] ordered lists in ie - is more than 10 items asking too much?
Hello, I didn't have much luck with google on this one so I've put together a demo page: http://www.sanchothefat.com/css/bugtests/ie/ol.html For some strange reason if you set 'list-style-position' to 'inside' on an ordered-list from the tenth list-item onwards the text-indent it creates for the bullet/number is lost. This is not the case for an unordered-list. I've tried a couple of hasLayout triggers like position: relative; and zoom:1; to no avail and also text-indenting the li but nowhere near a fix yet. Any ideas? I thought I'd bring this to your attention as a point of interest anyway even if no fix exists. Perhaps this is just one to avoid. Cheers, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] ordered lists in ie - is more than 10 items asking too much?
Just realised, it's not giving any extra room for the extra digit when you reach list-item number 10. Guess it's something I'll have to live with __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] ordered lists in ie - is more than 10 items asking too much?
Luc wrote:
Good afternoon Robert,
It was foretold that on 30/10/2007 @ 18:59:25 GMT+ (which was
15:59:25 where I live) Robert O'Rourke would write:
snipped a bit
For some strange reason if you set 'list-style-position' to 'inside'
on an ordered-list from the tenth list-item onwards the text-indent it
creates for the bullet/number is lost. This is not the case for an
unordered-list.
I've tried a couple of hasLayout triggers like position: relative;
and zoom:1; to no avail and also text-indenting the li but nowhere near
a fix yet. Any ideas?
decimal outside with padding seems to get IE in it's place:
ol {
list-style: decimal outside;
border-top: 1px dashed #ccc;
padding: 0 20px;
margin: 16px auto;
width: 90%;
}
http://www.dzinelabs.com/sandbox/list.html
Yeah that'll work, it would've been good though, I was using a
background image for list-items in ordered and unordered lists so the
list-style-position: inside looked nice.
Thanks for the link,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] ordered lists in ie - is more than 10 items asking too much?
Jens Brueckmann wrote:
Hi Robert,
Just realised, it's not giving any extra room for the extra digit when
you reach list-item number 10. Guess it's something I'll have to live
with
you may add whitespace between the list numbers and the first
character by adding left padding to the first letter, e.g.:
ol li:first-letter { padding: 0 0 0 1em;}
Cheers,
jens
Genious, thankyou very much Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Advanced CSS techniques book
I'd like to improve my CSS techniques. I'm comfortable with basic CSS, but there's a lot of advanced stuff out there which I'd like to leverage. (I especially have trouble with some of the advanced positioning.) Can anyone recommend a good book for the advanced techniques? I especially like things which tell it like-it-is, giving the details, as opposed to trying to suger coat it with mock simplicity. All recommendations appreicated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Transparencies and Overlays
Hi. I'm trying to understand how the transparencies and overlays (used in the various lightboxes) are done in CSS. I'm trying to make something looking similar to a lightbox, but on a page without any JavaScript. Two things that I need to do: 1. Show a gray, semi-transparent sheet over the entire page 2. Position another element - the lightbox - somewhere in the middle of the page I have some ideas for #2, but am a total loss for #1. Can anyone guide me in this? Is there a good resource which explain how these things work? Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Refactoring CSS tools
I'm working on a large project - a dynamic web app. Several groups of developers have worked on in different parts of it independently, and I'm now tasked with integrating the work together. The source control manager can show me who changed what when, but integrating all of the CSS is an arduos task. In software, there are what's known as Refactoring Tools, which can, for instance, let me change the name of a function in one file, and automatically change it everywhere else. Are there any similar tools for CSS? So I could, for instance, find out from a bunch of CSS files and a bunch of HTML files (templates) Which HTML files use this rule? . Or so that I could change the name of an element in a certain CSS file, and have the HTML changed as well (or vice versa). In short, tools to automate a lot of the manual searching involved in integrating a large CSS project. Can anyone give me some advice, either in terms of tools, scripts, or best practices? (Please cc me on all response if you can.) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Using YUI CSS to simplify a Web App
I'm trying to get a handle on a Web App which has gotten a bit tangled, with different parts of the app using different CSS. Fonts and colors are pretty straightforward - it's the positioning which gets messy. One idea we've come across is to rip out all of our custom positioning code (float, size, margin, etc.), and just a prepared toolkit like http://developer.yahoo.com/yui/grids/ . Being an internal web app, our needs are a bit different than standard web sites: * Cross browser compatability is _not_ a concern. We use Firefox only. * Layouts are more complicated than standard three column web pages. We have panels, panels within panels, toolbars, etc. What do the CSS experts say? It seems like moving to YUI Grids would greatly simplyify the CSS. Is there a downside? A better alternative? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Some positioning dilemmas
I've been developing a web site template, and I'm almost done with the recently requested changes except I'm having two issues. 1.) I tried to use the fixed width left column, fluid right column system as described at A List Apart, with negative margins. After I found out that the negative margins weren't doing anything, I removed them. The idea was to go with a fixed 220px column on the left, and a fluid right column. The problem is using margin-left on a container with 100% width seems to immediately tell Firefox that we're going to ignore that declaration. Consequently, the right container which has 100% width but a margin-left request of 230px, doesn't adhere to the margin. It sits pushed below the left column in its own little space, and needs to come up. 2.) The menu needs to come up to hang out on the same line with the background. I've used clearing divs and it doesn't seem to do the trick. The site is http://zwisp.owningthedot.net The CSS file: http://zwisp.owningthedot.net/style.css Thanks in advance. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] li second line outdenting, how do you get it flush left?
I put a list together for a staff directory and one of them has a much
too long title.
I decided to use a br to move the title to the second line but now it
outdents it
I have it coded like this:
ul id=staff1 class=nobullet
listrongAdmin
Staff/strong/li
liChuck Lindley,
Administrator/li
liJoanne Beasley, Comptroller/li
liKathy de Domingo, br
Director of Performance
Improvement/li
/ul
The style is set for:
ul.nobullet { margin: 0; list-style: none inside}
Is there some selector to get rid of the outdenting?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] at import loading
Gate Wizard wrote: question How does a browser handle @import? Example: in HEAD we have: link rel=stylesheet href=main.css type=text/css / - main.css /* ![CDATA[ */ @import url(global.css); @import url(structure.css); @import url(theme.css); /* ]] */ Does the browser load the imported CSS before it starts rendering the page, or after? I've looked here, but it doesn't seem to answer my question: http://www.w3.org/TR/css3-cascade/#at-import Thanks to all replies in advance. http://archivist.incutio.com/viewlist/css-discuss/76444 That thread may help but also says at the bottom it's off-topic for css-d. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why does this display differently in a div? Link attached.
The paragraph styling in this page displays correctly when the page's URL is directly viewed. When visited from the drop-down menu, it displays in a smaller font and is differently colored. Why this difference? The function to open a page in a certain div displays all my other files correctly. Example: http://home.cfl.rr.com/rtgroup/display-css-problem.html Thanks for the help, Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why does font-size not work?
I have the following page:
html
head
style
p { color: white; font-size: large; }
/style
/head
body
div style=color: white; font-size: large;
pSample text of a large size./p
/div
/body
/html
The sample text does not display in large size. If a style is applied to the
inner paragraph (p style=font-size: large;) it does display large.
Why doesn't the font-size apply from the definition at the beginning?
Thanks, Bob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems with Firefox and horizontal menu
On 8/3/07, Terri Houston [EMAIL PROTECTED] wrote:
Sucker Tree Horizontal Menu
www.ttcollectiblegifts.com/dynamicdrive.html
I'm satisfied with the way my menu looks in IE browser, but not in Firefox.
As I hover on a top level list item, the background shortens, making the next
top list item overlap the top of the top link. Any ideas on why this is
happening?
The problem is that the designer of your menu didn't take into account
the possibility of the vertical padding of the a tag at the top
level overflowing the bounds of the containing ul/li. IE gladly
expands container elements to wrap around floating elements, even when
it's not supposed (as in this case).
You can fix this by changing the rule on .suckertreemenu ul li a to
include display: block;
Also, in Firefox, my menu is not nearly as wide as it looks in IE. How can I
change this?
The above fix should significantly widen your menu. You will probably
need to play with the width: 100px or else the top menu boxes are
likely to wrap in any small display. Also, be aware that once you
have display: block, having both width and left/right padding is
inconsistent (not to mention redundant with text-align: center) and
going to get you inconsistent results across browsers, either remove
the fixed width (so that each menu with expand to fit its text) or
change the padding to padding: 5px 0px
But you also have a very strange rule:
ul..suckertreemenu {
width: 820em;
margin: auto;
}
--
replace that with something like
.suckertreemenu {
width: 820px;
margin: 0px auto;
}
note the px instead of em, if any browsers even managed to parse that
selector, it would have made your menu 820 times as wide as an M in
your browser's font. That can't be what you want. Then again, you do
have it set to be 5300 pixels high, so what's 8200+ pixels wide!
(820px won't work either because the parent elements force it to 808px
(at least in firefox) which is too small to handle the 816px that it
wants to be with 1px borders around 100px boxes, it does work on its
own though).
I would love to be able to center the menu on my webpages, and not have to
worry about placing it. Can I do this?
The margin: 0px auto; will give you 0px of vertical margin and
horizontally center the entire div. Although, you'll need to consider
the conflicts that such loose positioning will have with all the very
strict relative positioning you have on the other elements of the page
(as with my note on width above).
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RFC: printing backgrounds by default
You raise a good point about cascading for more involved background
uses. Then I suppose my next question is, how much do you think
people have _relied_ on the knowledge that gecko based browsers would
not print their backgrounds in order to avoid the effort of adding a
print stylesheet just to remove them (essentially doing what you've
already done for them) versus how much people unknowingly run into the
problem or alternatively never even realize that there is an issue?
I for one would imagine that a large majority are completely oblivious
to the fact that backgrounds don't get printed because any backgrounds
that they might have are not essential to the site (especially if you
do modify light colored text to read better). I would then venture to
guess that those same people have not nor will they ever bother
creating a print stylesheet. That only leaves one possible problem
which may be what your reviewer was getting at and that is, how many
CMS's and WYSIWYG editors include an empty print stylesheet if you
don't specify any print styles? I don't know the answer but the more
I think about it the more likely it seems that some would do that.
Or can you have a special exception for stylesheets that don't contain
any valid rules?
Rob
On 8/9/07, fantasai [EMAIL PROTECTED] wrote:
Robert Van Dam wrote:
I don't see anything confusing in it*. I suppose it might catch a few
developers off guard at first but going forward, I would imagine the
existing method is far more confusing to anyone unfamiliar with this
problem. What's more confusing, I said show a background for printed
versions of the page and so you printed it or I said show a
background for printed versions of the page and so you ignored me?
* caveat: After rereading what you wrote I realized that I
misinterpreted your plan. My above comment would apply if and only if
the background was specified in the print style sheet. That would
seem to indicate to me that a developer knows what they want (as in
your opera example). Printing a background specified elsewhere just
because there is a print style sheet could easily catch a lot more
developers off guard and be more confusing (though probably still less
surprising/confusing than failing silently).
Would it be reasonable to be that specific about when to print or not
to print a background?
Well, 1. it would be a lot more difficult to implement, but 2. I think
authors should be able to rely on the cascade working properly. For example,
a page might have a light-colored background, and use backgrounds for
accents e.g. on headings or table headers. I want to get rid of the
overall light-colored background in favor of black on white, but I want
all the accents to show up, too. If the cascade is working normally, all
I need to do is specify a print stylesheet with
body { background: white; color: black; }
If the browser is being selective and only honoring backgrounds inside
print-specific style sheets, then I'd need to duplicate all of my background
and color settings in the print style sheet.
Depending on how the CSS was authored, the combination of rules in the
non-print-specific and print-specific sheets could result in a rather
broken design if all the non-print-specific rules were suddenly ignored.
When we disable all backgrounds, we know the background is always white
and we can compensate by darkening the text colors if they are too light.
~fantasai
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] maintaining site proportions across screen resolution -NOT Quite
I don't have safari to test on but konqueror 3.5.5 has the same problem until you remove position: relative from the #outer rule. Fortunately the only effect that seems to have in firefox is to lengthen the relative height of both #inner and its contents which is reasonably accounted for by adjusting #inner's height. Your original link seems to have done basically that since it looks the same in firefox and konqueror to me. I've seen complaints about position: relative in safari before but this is quite a dramatic failure since the majority of the remaining css is completely ignored (although strangely some of it is still being used). Rob On 8/7/07, Ian Young [EMAIL PROTECTED] wrote: Subject: Re: [css-d] maintaining site proportions across screen resolution -NOT Quite On Aug 7, 2007, at 8:55 PM, Ian Young wrote: Pity really as it was beginning to look quite good across various screen resolutions. Looks as if Safari PC not too keen on position:absolute See http://www.iyesolutions.co.uk/templates/trossachs/index-4.html Any thoughts, folks? I have prepared a simplified version at: http://www.iyesolutions.co.uk/templates/trossachs/height-test.html The style rules are in the header. And it seems that it is the position:relative in the outer div which is the start of the issue for Safari I don't know which display you consider 'correct'. Latest Webkit build (post Safari 3.03b) and Opera 9.22 display exactly the same. If you wrap your 'Hello moto' in a p, then Fx 2.0, Opera, Webkit, Safari 3.0 and Minefield (FX 3 alpha) all agree. Thanks Philippe. In Safari PC, the script doesn't work at all, see http://www.iyesolutions.co.uk/templates/trossachs/safari.jpg Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.8/940 - Release Date: 06/08/2007 16:53 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looks fine on my IE6 but not others
On 8/8/07, Tim Offenstein [EMAIL PROTECTED] wrote: I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. Relevant CSS is http://www.rst.uiuc.edu/css/fonts.css and base.css. Any help is greatly appreciated. Looks fine in FF linux, even at 800x600. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
Just play around a little bit with the image sizes that you have.
This worked for me using images of size 340x250.
dl {float:left;text-align:center;}
dt,dd {width:35em;float:left;}
dt {margin-bottom:4em;}/* vertical space between the images */
dd {margin:250px 0 0 -35em;}
img {vertical-align:bottom;border:0;}
em { display: block; font-weight: bold; margin-bottom: 5px; }
Note
- the margin on dd should be the height of your images (if they're of
different sizes, the maximum height among all of them).
- the width on dt,dd and the negative margin dd should be large
enough to be bigger than the widest of your images.
Unfortunately, because you're images are so much larger than the
original example, if you use ems (as I've done above) and then
increase the font size, the dds will get so large, they'll be off the
page to the right. So in your case, you might consider using a pixel
size, say 365px and then just live with the fact that it isn't quite
as scalable anymore. In this case, that's really not that big a deal
because most resolutions won't fit more than 3 365px images (with
spacing) side by side anyway.
Rob
On 8/8/07, Malcolm N [EMAIL PROTECTED] wrote:
On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt
[EMAIL PROTECTED] wrote:
I will tinker with it later when I get a chance, but really don't you
think 340 by 250 is humungous for a thumbnail? Perhaps you are not
really looking for thumbnail page styling?
--
Yes - humungus is the word. ;-)
No - I was rather looking for better way to display a small photo
album - say a page with 10 images about that size and not use
thumbnails.
Up until now I have been giving each photo a div - floated left
div class=leftimg img src=/img/x.jpg alt=xxx width=xxx
height=xxx border=0 /
p class=photolegendxxx/p
/div
keeping to keep the text photo legend within the same width as the
photo I have had to use a selection of css rules or determine the size
with php - but as I say this must be inefficient / bloated etc.
I thought your idea rather better -
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] indenting text not in a tag.
On 8/8/07, Ross Hulford [EMAIL PROTECTED] wrote:
I have a news page like this
div id=container
span class=headingArchive News 1/span
span class=sub_headingitem 1/span
This is ny news item
span class=headingArchive News 2/span
span class=sub_headingItem 2/span
This is another news item
span class=headingArchive News 3/span
span class=sub_headingItem 3/span
This is another news item
/div
This goes on forever. I need to indent all the text but when I use
#container {
text-indent :30px;
}
the two spans indent but the ordinary text does not indent. Is there a way
other than wrapping in P tags to get them to indent. This page is very long
so adding p tags would take ages.
Would something as simple as this work?
#container {
text-indent: 30px;
}
#container span {
text-indent: 0px;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RFC: printing backgrounds by default
On 8/4/07, fantasai [EMAIL PROTECTED] wrote: Hello! I'm a Mozilla developer, and I have a slightly off-topic question for the members of css-discuss. As I'm sure many of you have noticed, browsers don't print backgrounds by default. As David Dorward notes [1], this is in large part to avoid wasting ink printing pages that weren't designed to be printed. We'd like to make it possible for designers who /do/ take the time to consider printing to use backgrounds and have them printed by default. My suggestion was to automatically allow background printing for any pages that import an explicit 'print' style sheet, the logic being that if you've taken the trouble to provide a dedicated style sheet for print, then we should trust that you are not going to abuse the printer and allow you use of its ink for your backgrounds. (This is similar to how Opera employs lots of heuristics to tweak layouts for display on cell phones, but gives the designer full control if he or she has specified a style sheet explicitly for 'handheld'.) My superreviewer David Baron is concerned that this kind of switch would be confusing to web authors. E.g. importing an empty print style sheet would suddenly cause all backgrounds to print. So we want to know what you think: would a switch like this be confusing? Is there a better way to handle this kind of switch? What are your thoughts on this problem? For those who want more details, the bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=381466 ~fantasai I don't see anything confusing in it*. I suppose it might catch a few developers off guard at first but going forward, I would imagine the existing method is far more confusing to anyone unfamiliar with this problem. What's more confusing, I said show a background for printed versions of the page and so you printed it or I said show a background for printed versions of the page and so you ignored me? * caveat: After rereading what you wrote I realized that I misinterpreted your plan. My above comment would apply if and only if the background was specified in the print style sheet. That would seem to indicate to me that a developer knows what they want (as in your opera example). Printing a background specified elsewhere just because there is a print style sheet could easily catch a lot more developers off guard and be more confusing (though probably still less surprising/confusing than failing silently). Would it be reasonable to be that specific about when to print or not to print a background? Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] strange gecko (firefox/mozilla) appendchild behavior
Take a look at these and tell me why the first one acts funny in firefox/mozilla: http://rvandam.com/test_appendchild.html http://rvandam.com/test_appendchild2.html I have a table (of actual raw data) that is being generated dynamically but is relatively expensive to generate. I wanted to make it possible to sort the rows by clicking on the column header but without going back to the server or requiring me to cache the entire page. So I dynamically generate js objects containing all the relevant data and I got sorting working very cleaning using mytable.appendChild(myrow) to rearrange the rows after I had resorted them. That all worked great, but here's the problem: After the _second_ time you sort, firefox (2.0 on linux and 1.5 on windows) and mozilla (1.7) mysteriously lose the borders on all of the newly rearranged cells (plus some of the header ones that didn't move). I finally tracked down (thanks to firefox's dom inspector) that I was generating a new tbody each time (because otherwise ie doesn't show any of the rows) and for some reason firefox/mozilla don't seem to apply stylesheet rules of the form table td to dynamically generated rows that are in the third or later tbody. However, it works fine in konqueror and ie (6 and 7). Since I've already fixed it I don't know if anyone will bother responding but the why still has me perplexed. Anyone have any clues? I'm not getting anything useful out of google at the moment. (After a little more experimentation, it is only dynamically generated tbodies that have this problem, a table with several static tbodies has css applied just fine). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange gecko (firefox/mozilla) appendchild behavior
http://www.w3.org/TR/html401/struct/tables.html#edef-TBODY
When present, each THEAD, TFOOT, and TBODY contains a row group. Each
row group must contain at least one row, defined by the TR element.
So it looks like an empty tbody isn't valid so mozilla/firefox is just
being less forgiving than the others.
Rob
On 7/25/07, Robert Van Dam [EMAIL PROTECTED] wrote:
Update:
The problem seems to be specifically that an empty tbody breaks the
border-collapse: collapse; algorithm.
I should have realized that border-collapse was part of the problem
because the other css was still working.
Try this in your favorite gecko based browser
style type=text/css
table, td { border-collapse: collapse; border: 1px solid black; }
/style
table
tbodytrtd1/tdtd2/td/tr/tbody
tbody/tbody
tbodytrtd3/tdtd4/td/tr/tbody
/table
On 7/25/07, Robert Van Dam [EMAIL PROTECTED] wrote:
Take a look at these and tell me why the first one acts funny in
firefox/mozilla:
http://rvandam.com/test_appendchild.html
http://rvandam.com/test_appendchild2.html
I have a table (of actual raw data) that is being generated
dynamically but is relatively expensive to generate. I wanted to make
it possible to sort the rows by clicking on the column header but
without going back to the server or requiring me to cache the entire
page.
So I dynamically generate js objects containing all the relevant data
and I got sorting working very cleaning using
mytable.appendChild(myrow) to rearrange the rows after I had resorted
them. That all worked great, but here's the problem:
After the _second_ time you sort, firefox (2.0 on linux and 1.5 on
windows) and mozilla (1.7) mysteriously lose the borders on all of the
newly rearranged cells (plus some of the header ones that didn't
move).
I finally tracked down (thanks to firefox's dom inspector) that I was
generating a new tbody each time (because otherwise ie doesn't show
any of the rows) and for some reason firefox/mozilla don't seem to
apply stylesheet rules of the form table td to dynamically generated
rows that are in the third or later tbody. However, it works fine in
konqueror and ie (6 and 7).
Since I've already fixed it I don't know if anyone will bother
responding but the why still has me perplexed. Anyone have any
clues? I'm not getting anything useful out of google at the moment.
(After a little more experimentation, it is only dynamically generated
tbodies that have this problem, a table with several static tbodies
has css applied just fine).
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange gecko (firefox/mozilla) appendchild behavior
Update:
The problem seems to be specifically that an empty tbody breaks the
border-collapse: collapse; algorithm.
I should have realized that border-collapse was part of the problem
because the other css was still working.
Try this in your favorite gecko based browser
style type=text/css
table, td { border-collapse: collapse; border: 1px solid black; }
/style
table
tbodytrtd1/tdtd2/td/tr/tbody
tbody/tbody
tbodytrtd3/tdtd4/td/tr/tbody
/table
On 7/25/07, Robert Van Dam [EMAIL PROTECTED] wrote:
Take a look at these and tell me why the first one acts funny in
firefox/mozilla:
http://rvandam.com/test_appendchild.html
http://rvandam.com/test_appendchild2.html
I have a table (of actual raw data) that is being generated
dynamically but is relatively expensive to generate. I wanted to make
it possible to sort the rows by clicking on the column header but
without going back to the server or requiring me to cache the entire
page.
So I dynamically generate js objects containing all the relevant data
and I got sorting working very cleaning using
mytable.appendChild(myrow) to rearrange the rows after I had resorted
them. That all worked great, but here's the problem:
After the _second_ time you sort, firefox (2.0 on linux and 1.5 on
windows) and mozilla (1.7) mysteriously lose the borders on all of the
newly rearranged cells (plus some of the header ones that didn't
move).
I finally tracked down (thanks to firefox's dom inspector) that I was
generating a new tbody each time (because otherwise ie doesn't show
any of the rows) and for some reason firefox/mozilla don't seem to
apply stylesheet rules of the form table td to dynamically generated
rows that are in the third or later tbody. However, it works fine in
konqueror and ie (6 and 7).
Since I've already fixed it I don't know if anyone will bother
responding but the why still has me perplexed. Anyone have any
clues? I'm not getting anything useful out of google at the moment.
(After a little more experimentation, it is only dynamically generated
tbodies that have this problem, a table with several static tbodies
has css applied just fine).
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hidden IFRAMEs using CSS and plugins
I need to have Acrobat embedded in an IFRAME (to print something out), but not visible. I can hide the IFRAME using CSS, or even by setting width and height to 1. But, it seems Firefox won't load the embedded plugin, until the contents of the IFRAME become visible. Any solution to this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] double border-style in IE7
On 7/10/07, Brian Crescimanno [EMAIL PROTECTED] wrote:
On 7/10/07, Jukka K. Korpela [EMAIL PROTECTED] wrote:
In your case, it seems that there is a simple way: wrap the element div
id=main.../div inside an outer div, and set the outer div's
background color to the desired value (white, in this case).
An alternative solution (also using nested divs) would be to set the
border of your current div to 1px solid, add an inner div with a
transparent background, 2px margins, and a 1px solid border as well.
I'm not sure which method is preferable--I had actually typed my
method above before Jukka's email arrived in my inbox. I think
Jukka's might win out simply because available (inner) size and
occupied space would not change from what you'd expect using a double
border.
Thanks also for pointing out that the specs had no clarification on
which method is considered correct.
I was just running into a related problem and wanted to point out that
the specs do clarify (but it's not very easy to find). Specifically:
All borders are drawn on top of the box's background.
which can be found at http://www.w3.org/TR/REC-CSS2/box.html#8.5.3
In my case I had something like the following (extremely simplified
for this example):
table {
border-collapse: collapse;
border: 3px double black;
}
th {
border-collapse: collapse;
background-color: blue;
}
td {
border-collapse: collapse;
background-color:red;
}
which caused the table cells background colors to bleed into the
border to the right.
So what the op is seeing is technically correct CSS, per the specs,
just not what I imagine most of us would consider expected behavior.
Which means that the the two suggestions above are the only ways to
avoid bleeding background colors when using a double border.
While I'm at it, I'll point out that although Jukka's solution does
preserve inner space as Brian points out, Brian's method is the only
sure fire way to have what will appear to be a double border with an
even number of pixels in firefox without running into the
still-lingering rounding bug.
In my case, I decided that it looked enough like monitor bleed and was
subtle enough that I just left it as is.
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Valid(?) document not validating
Greetings CSS experts, I have a page ( http://www.sitkamusicfestival.org/1-sitka_valid.html ) that validates just fine in Homesite, but fails the validation at http://validator.w3.org because w3 thinks the final /div element is closing a div that was never opened. The page has nested div's, but I've checked and double-checked them and they look good to me. The div id=content in line 77 closes in line 192. I've added !-- End div id=content -- to remind me what it's doing. The validator doesn't like that last /div in line 192. If you need the style sheet, it's at http://www.sitkamusicfestival.org/2-basic.css Can anyone tell me what I'm missing? BTW, this page is still under development and much of its CSS is inline. I'll move the CSS to the style sheet once I get the page ironed out. Comments about any part of the page would be welcome, too. Thank you, Bob Sitka, Alaska __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering images
First post!!! I'm wanting to center my images yet be able have the text set to the right OR left of the images. One look at the page and you'll see what I'm going for... http://www.9worldstudios.com/portfolio/galleryBlockPrints.htm I'm reasonably certain that this is the wrong approach, but it approximates the intended look. here's the css I tried http://www.9worldstudios.com/portfolio/galleryStyleNew.css Thanks, Folks! Robert - Yahoo! oneSearch: Finally, mobile search that gives answers, not web links. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering images
And I see that it's jumbled in IE---Hopefully you can check it in Firefox to see what I'm going for...Thanks Robert - Need a vacation? Get great deals to amazing places on Yahoo! Travel. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Having an Anchor span block level elements
I'd like to have an entire DIV, including H2's, be a hyperlink (A). (Why? Imagine a web app with various panels with can be clicked on). Now, this is illegal in HTML. I'm also getting weird behavior where the click seems to be ignored sometimes. What is the proper way to achieve this - that is, making a hyperlink cover block elements? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Having an Anchor span block level elements
On 7/1/07, Mark Kelly [EMAIL PROTECTED] wrote: Hi. On Sunday 01 July 2007 21:50, Robert James wrote: I'd like to have an entire DIV, including H2's, be a hyperlink (A). (Why? Imagine a web app with various panels with can be clicked on). Now, this is illegal in HTML. I'm also getting weird behavior where the click seems to be ignored sometimes. What is the proper way to achieve this - that is, making a hyperlink cover block elements? Have you considered the button form element rather than using a div? Interesting approach... is it possible to do this without a form - with a simple href? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Having an Anchor span block level elements
On 7/1/07, Mark Kelly [EMAIL PROTECTED] wrote: On Sunday 01 July 2007 21:50, Robert James wrote: I'd like to have an entire DIV, including H2's, be a hyperlink (A). (Why? Imagine a web app with various panels with can be clicked on). Have you considered the button form element rather than using a div? Is there a way to set an href for an element other than an anchor (a)? So that clicking on it follows it? In general, is there a way to make a block element act as linked? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote:
I'm working on my very first WP theme.
Everything is inside a #wrapper which is underneath the body tag
Then I have the following structure:
#header
body{
top: 0;
margin: 0;
font-family:Arial, Helvetica, sans-serif
font-size:10px;
}
#header{
display:inline;
position:fixed;
z-index: 100;
left:0px;
width: 100%;
top:0px;
background:url(images/background.png);
background-color: #000;
-moz-opacity:0.9;
filter:alpha(opacity=90);
/* line-height: 1.2em; */
}
#container{
position:absolute;
top: 125px;
left: 280px;
width: 550px;
}
#sidebar1{
position:absolute;
float:left;
left: 0;
top: 125px;
}
#footer{
padding: 0;
width: 100%;
clear: both;
}
I plan to add another sidebar for a three-column layout, and widgetize the
sidebars, but haven't added the second sidebar yet.
What I'm having trouble with right now is the footer which is the last div
in the html, goes all the way to the top. I'm not sure I understand how to
get that footer to rest at the very bottom.
Please help.
Thanks,
ByteDreams
Hello,
The problem is you've used absolute positioning and a float. You
have to choose whether to use floats or absolute positioning for the
main layout because they won't play together in the way you're
attempting. You can either absolutely position the footer to the bottom
of the page or you can get rid of position absolute on #container and
#sidebar1 altogether to allow that clear: both; to work.
It'd be easier to explain if you have a test page uploaded somewhere
or if you can provide the html outline...
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote: Thank you. I've temporarily loaded the theme on my site. It's now worse than it was - than it appeared offline. For instance I had gotten the dock menu working and in the middle, now its back on the left. I don't know what happened now. I can't see straight anymore. I have the fixed header set to a percentage of the transparency so I could see if anything was hiding underneath, and sure enough, my footer is there at the top. Whats the url of your site? (forgetting to inlcude it happens to the best of us =] ) Try not to worry about it. What you're going to learn now is how positioning and floats work. I'll try and start simple with the concepts, *document flow:* this is the default flow of an html document, by that i mean the way block elements like div and p stack under each other and inline elements like span or strong wrap part of a line of text. By the use of floats and position: absolute we remove an element from this 'normal flow'. *floats:* these put an element into the 'float flow' which can still affect the 'normal flow'. Elements in the 'normal flow' will flow around floated elements. The typical example is floating an image so that text wraps to the side and underneath it. *position: absolute:* this completely removes an item from the 'normal flow'. Elements outside of this item will not be affected by its size or position. This is why you cannot use position absolute and floats on the same element. You can position these relative to their containing element. So if you have a div under the body and position it absolutely it will be positioned relative to the body. If you apply position relative to an element and have an absolutely positioned element inside that then it will be positioned relative to that element and not the body. There's a lot more to it but I hope that helps to explain some things. David Laakso sent you a link to some layouts that you can use to make your own and get started. There are some tricks to float layouts. This tutorial will explain a simple two-column one and helped me get started: http://www.alistapart.com/articles/negativemargins/ When you can understand that google for '3 column float layout' or something to that effect and read up a bit on what comes up. The concepts and techniques will eventually start to click you just have to stick at it. Also if you can get an ftp client then set yourself up a sandbox folder on your website for testing layouts and so on before trying them out your site. Hope that's some help Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Any consensus on reset css?
David Hucklesby wrote: On Wed, 20 Jun 2007 23:04:55 -0400, Scott Glasgow wrote: There seems to be a good deal of contention, or at least spirited discussion, on the value or advisability of using reset stylesheets (http://www.webmasterworld.com/css/3329010.htm). I'm just getting back into this and I'm curious if there is any consensus here on the advisability of using this method, and if so, whether the YUI or the Meyer (or some other) approach is considered best. Personal preference I guess, one approach might suit you better. Eric Meyer's is more of a 2-step process I think whereas the YUI one gives you a fresh set of defaults similar to browser defaults (as far as I know, I don't use YUI stuff). Also, if one were to adopt this method and use an externally linked reset stylesheet along with the custom stylesheet for a site, how would the linking be handled? If you're importing the stylesheet you can add an @import rule to the top of the stylesheet to include this, depends on which method you need to use. Whichever way you link to it it should come first before the other stylesheets. Hi Scott, My reading of Eric Meyer's universal reset is rather different. I believe he uses this neutralizing CSS to make sure that all required properties are added back later. This way, no element winds up with browser-applied properties, any of which may differ from browser to browser. If I understand this correctly, you would take out the reset styles when done, leaving you with a document with no style left to the whim of a particular browser. I thought it was a means of giving yourself a starting point, if you took it out later wouldn't it throw a bunch of things out of line between browsers? Say in IE it's default font-sizes for headings are bigger than in Mozilla, if you're setting that font-size relative to the reset stylesheet... Form controls spring to mind aswell, those things are a pain in the backside cross-browser. You raise a good point though. It'll be an interesting experiment to remove the reset stylesheet from my next project after it's done. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Ideas for handling text with CSS
[EMAIL PROTECTED] wrote: Hi everyone, I was wondering if anyone has a link or information as how to best handle text with CSS. By text I mean a line of text that may include 3 pieces of information, like name, phone, and email address. In the past, I always used tables for this, but want to handle this with the use of CSS if possible. I found a site that mentioned word-spacing, but that won't work because I don't want a large amount of spacing between the first and last name. Any suggestions or links are greatly appreciated. Thanks! ;-) Suzanne Hi Suzanne, I sometimes use one of a few methods for formatting snippets of inline data. For a one liner it's not a job for a table really unless you do a row of headers and a row of values. I know it's probably not semantic and-all-that but I have two examples here: http://www.sanchothefat.com/dev/inlinedata.html The first is a definition list (i just like it as a means of grouping key-value type information but there's a whole debate on the use of them that I'm not sure what the consensus is, probably best avoided to circumvent opening the debate again). The second example is the same thing achieved with a div and spans. Pretty straight forward to style it how you want. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Ideas for handling text with CSS
[EMAIL PROTECTED] wrote: Wow, thanks to EVERYONE who responded to this!! I should have given you more info. This is a page for the client's board members/commissioners. There is a single line above each photo and bio that contains: LastName, FirstName MiddleInitial PHONE: 999-999- EMAIL: [EMAIL PROTECTED] While I personally think that tables are ok with the right circumstances, I don't think this is. Also, the client will be managing all of the content via Contribute, so I want to keep this as clean and easy as possible. I had already created a class and used a span around the entire line to make it inline, and another class to make the titles bold. Then, I just used breaking spaces (a number of them) to provide the right spacing between the name and phone, and between the phone and email. But as a LONG time WordPerfect user, I can hardly stand the thought of using multiple spaces and felt that surely there was a way to handle this with CSS. Hope this explains things more clearly Suzanne You can use left and right padding or margin on those inline elements instead of nbsps. Seems like it would be a more surefire way of displaying those details if they're coming from database fields. Did you get my example url? Have a play anyway but it seems like spans are well suited to this task. The only other thing I can as being an issue for you is where the information that comes out is different lengths. eg. name: FirstName... phone: ... stuff name: LongerFirstName... phone: ... stuff name: Name... phone: ... stuff that effect could only really be achieved inline using float: left; as inline elements won't take a width... Alternatively: name: FirstName... phone: ... stuff name: LongerFirstName... phone: ... stuff name: Name... phone: ... stuff If thats acceptable then its very simple to achieve. Is it the top example or bottom example you're going for? Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best way for text when enlarged
Rick Faircloth wrote: What establishes the baseline size of 100% ? Do all browsers use the same baseline size? And do all browsers react to percentages the same? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Luc Sent: Wednesday, June 20, 2007 4:03 PM To: trevor on css-discuss Subject: Re: [css-d] Best way for text when enlarged Good afternoon trevor, It was foretold that on 20/6/2007 @ 12:09:17 GMT-0700 (PDT) (which was 16:09:17 where I live) trevor bayliss would write: snipped a bit On the body part of the css at the moment it is font 11px -what should I change it to some percent value? I use a minimum of 76%. There is a good argument for setting the font-size on the body tag to 100% every time, it sets a base level for the font-size that is readable to most everyone and won't affect people who have their minimum font-size set to anything other than the default. As for the rest of the text e.g. the text in paragraphs and headings and so on you can set their font-sizes relative to the body default using ems or %. There are some differences between browsers though not a lot, it's rarely an issue for me so I haven't really looked into it fully. Check out Eric Meyer's CSS reset reloaded: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ It's a great place to start as all your styling, especially in terms of typography as the majority of browsers will then have the same starting defaults and you can set your font-sizes to your hearts content on the elements that need it. You do need to explicitly specify every bit of styling you need so you can't rely on the old browser defaults if you do this but on the plus side you know exactly where you stand to begin with. Rule of thumb is to avoid fixed px sizes on fonts in general as they wont be resizable in = IE6. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Blank Wiki?
A recent posting contained several links, one of which was: There is helpful info on avoiding hacks for IE6 on the wiki http://css-discuss.incutio.com/?page=AvoidingHacks This link appeared to load in Firefox, but the page was blank. Choosing View page source yielded nothing. I loaded the URL into IE7 and got Internet Explorer cannot display the webpage. This same scenario has happened before when I tried to view a wiki link. Is there a secret formula for viewing this web page? Thanks, Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Divs on one line -- Solution and Thanks
After tirelessly searching, an answer was found to my problem.
Each div has a graphic background to create a button. They were stacking on
each other instead of forming a horizonal row. The
page http://csscreator.com/node/555; contains an answer:
Block elements that aren't positioned, like divs or in your case inline
elements set to display block, start on their own horizontal line.
To get round this you could float each product left.
Following this advice, I applied styling to my div's:
div { float: left; display: inline; }
This solved my problem and creates the horizontal row I sought. Thanks and
gratitude to all those on this list who inspired me to not accept defeat but
to persevere.
Bob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why aren't these DIVs on the same line?
I am constructing a control panel of buttons located at the top of the page. It will be six wide and two deep. Each of the button divs in encased in an a ... link and displays a mouseover graphic. There is no line break or paragraph break between the two divs shown here and they should be displayed on the same line. Both Firefox and Konqueror 3.5 on a Kubuntu box display the buttons stacked vertically. Could someone please help me with this problem? body !--MAIN NAVIGATION START-- div class=menu !-- Button div - Home -- a href=http://www.tropicwaveradio.net/; div id='button-home' style='height: 30; width: 150; background: url(images/button-home.jpg); background-position: 0px 0px; ' onmouseover = 'document.getElementById(button-home).style.backgroundPosition = -150px 0px; ' onmouseout = 'document.getElementById(button-home).style.backgroundPosition = 0px 0px; ' /div /a !-- End button div -- !-- Button div - Instant Replay -- a href=http://tropicwaveradio.net/listenlive.htm; div id='button-instant-replay' style='height: 30px; width: 150px; background: url(images/button-instant-replay.jpg); background-position: 0px 0px; ' onmouseover = 'document.getElementById(button-instant-replay).style.backgroundPosition = -150px 0px; ' onmouseout = 'document.getElementById(button-instant-replay).style.backgroundPosition = 0px 0px; '/div /div /a !-- End button div -- !-- End menu div -- /body Thanks, Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] DIVs still on different lines -- No a's
Before, the code block came from the button builder at grsites.com. I was using it to build the graphics for custom buttons. The code it generated can be improved it seems. The new code uses an onClick event. I thought the only reason the DIV was inside the A block was if a browser didn't understand CSS, the div inside a hyperlink a block would still work. This was weird. If browser is smart enough to respond to mouse events, why can't an onClick event be used instead of a? With trust, I used the automagically generated code from the site without thought. Here is the re-written code with the same error; the divs are stacked vertically instead of in one line. !--MAIN NAVIGATION START-- div class=menu !-- Home button div -- div id='button-home' style='height: 30; width: 150; background: url(images/button-home.jpg); background-position: 0px 0px; position: inline;' onmouseover = 'document.getElementById(button-home).style.backgroundPosition = -150px 0px; ' onmouseout = 'document.getElementById(button-home).style.backgroundPosition = 0px 0px; ' onClick=parent.location='http://www.tropicwaveradio.net/' /div !-- End button div -- !-- Instant replay button div -- div id='button-instant-replay' style='height: 30; width: 150; background: url(images/button-home.jpg); background-position: 0px 0px; position: inline;' onmouseover = 'document.getElementById(button-instant-replay).style.backgroundPosition = -150px 0px; ' onmouseout = 'document.getElementById(button-instant-replay).style.backgroundPosition = 0px 0px; ' onClick=parent.location='http://www.tropicwaveradio.net/listenlive.htm' /div !-- End button div -- /div !-- End menu div -- Thoughts anyone? Please? Thanks, Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Gap div sizing issue - IE6
Arrrghhh! I had this all working in IE6 7 and Firefox. Now it is
broken in IE6 again!
Here is the link, http://tinyurl.com/yudm6q
On the homepage I have a small animated flash for the top logo area, and
that page looks fine in all three browsers. But on the rest of the
pages I replaced the swf file with individual static images. It is just
a div box with a logo image and the name image and a tile in the
background. It is supposed to be (per the css styles ) 134px high. But
in IE6 it is making the div 140px high.
I can't figure out why it is doing that. But it causes there to be a
6px strip of the darker blue background color showing through from the
background. It is on all the pages except home (which used the swf file).
Any ideas on how to fix this?
The logo area html is just a logo div:
div id=logo_box
img id=logo src=../assets/images/pg_elements/logo.jpg alt=PRA /
img id=logo_name src=../assets/images/pg_elements/pra_name.jpg
alt=Progressive Rehabilitation Associates //div
The styles are :
#logo_box{ width: 760px; margin: 0; padding: 0;
height: 134px;
background-color: #749ABF;
background-image: url(../assets/images/pg_elements/top_bg.jpg);
background-repeat: repeat-x;
/*border: 1px solid red;*/}
img#logo { display: block; position: relative;
top: 25px; left: 16px; margin: 0; padding: 0;}
img#logo_name {position: relative;
left: 117px; top:-20px; display: block; }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC of a new kind
Rakesh Pai wrote: Consider the following markup: div id=header ... header stuff here /div div id=leftColumn ... lots of markup /div div id=rightColumn ... lots of markup /div div id=footer ... Some footer stuff /div Now, let's assume that the #leftColumn is floated left, the #rightColumn is floated right, and the #footer clear:both the floats. Also, as per the design, the body has a black background, and some wrapper for this markup has a light patterned background. The problem is that until the footer is loaded in the markup, the content in the leftColumn and rightColumn is unreadable since the floats are not cleared making the background black. If the amount of markup in the left and right columns is a lot, there's a perceivable delay in loading the footer, making the page unusable till that time. Is there a solution to this problem? Colleagues are suggesting that I use tables to ensure that the background is available, but I don't like the idea. Note that I cannot give the left column and the right column a background, since I need the pattern to show up through them. This is very urgent, so speedy responses will be greatly appreciated. You could always use a min-height so that the wrapper takes up some vertical space with its background showing up straight away, alternatively do you have overflow: hidden; set on the wrapper? That would make it wrap the floats straight away. The other suggestion I have is that it's not your problem at all but the speed of the software. Too often I have people hounding me because of how a site loads up but the problem is down to slow software. You can't fix that with css. You can only make it less obvious. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
