Re: [css-d] Fwd: Problem BG image position bottom in FF
On May 11, 2007, at 2:36 PM, Luca Pellanda wrote: The bg image (img/sfondo-pagina.jpg) position must be on the bottom of the page. You can find a screenshot of the problem @ this link: http://lnx.fluiddesignlab.com/screen.jpg [...] On 5/11/07, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On May 11, 2007, at 5:42 AM, Luca Pellanda wrote: can anyone help me why the background image on the page does not display corretly in FF? The web site is: http:// lnx.fluiddesignlab.com/index.php remove the icc-colour profile information out of the jpg file. Ah. o. oops. What Firefox (and any other Gecko based browser) and Opera are doing is absolutely correct. All your content is absolute positioned, and as such completely taken out of the flow. As a result, your body element is essentially _empty_. The image is then positioned at the bottom of the *window*, because you try to force the body element to be as tall as the window. It is not really a good idea to use absolute positioning that way. In my browser, with my font-size, I see the content of a number of boxes overlapping the content of other boxes, as they are positioned with pixel precision, but the content, with my font-size is taller than it probably is on your monitor, with your font-size. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ 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] Vertical Layout
Phillip S. Baker wrote: I am having difficulty getting the footer to actually rest down on the bottom and have the main container take up all the rest of the height that is not taken up by the header or footer. Any help or pointers in the rigth direction would be great. Maybe this is what you're after... http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ regards Georg -- http://www.gunlaug.no __ 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] 12px gap gpne but still get a 4px gap below floated image in IE7
Robert Lane wrote: I added the fixes mentioned below and now it is much better, but in IE7 the there is still a small gap below the floated image and above the footer. It is correctly rendered in Firefox. How can I get them to butt together with no gap? Link is here: http://tinyurl.com/2go7kn Images are inline-elements by default, and IE/win is correctly placing it on a text-baseline with room for descenders - giving you a gap. Firefox, and most other browsers, are applying a transitional (doctype dependent) trick on lone images, so no gap will show up in those browsers. Add... #slides img {display: block;} ...to get rid of the gap. Works the same in all browsers and regardless of doctype-trickery. regards Georg -- http://www.gunlaug.no __ 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] Problem link:hover on Safari
Hi, on this site: http://lnx.fluiddesignlab.com/index.php if you rollover the link menu with Safari, the #logo div go down... Can someone help me to resolve this problem? Best regards Luca PS: if you can check the site... help me to find other bug. __ 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] How to stop text from wordwrapping.
jana coyle wrote: This has been driving me nuts. If you make the browser window small (less than half of the screen) the header text will wordwrap. If there are no spaces between characters then the text stays put. I have add _ and change the color to match the background color. Is there any other way to make the text just stay put, short of making the header an image. Here is a link to an example. http://www.precisemessenger.com/private/header.html Use a non-breaking space - nbsp; Haven't tested on your page but I think it should work. cheers, D# __ 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] Printing drop-capital
An 18th century text which I am currently transcribing requires text before the initial drop-capital letter of the following sentence. CSS: .first {text-indent: 0em} .left {float: left; width: 2em} .first:first-letter {float: left; font-size: 3.2em; font-weight: bold} HTML: div class=leftS.D./div p class=firstFöredrogs Amiralitets-Collegii underdåniga Förslag, af den 27 sistl. Februarii, .../p This displays more or less as expected in the most recent versions of Firefox, Internet Explorer, and Opera. However, when printing, Internet Explorer inserts a linebreak after the drop-cap. Is this a bug or have overlooked something? Lars Bruzelius SYSteam Udac AB Box 174, SE-751 04 Uppsala, Sweden. Telephone: +46 18 678054E-mail: [EMAIL PROTECTED] Telefax: +46 18 516600URL:http://www.udac.se; __ 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] relative positioning inside absolute positionedelement- why not percentage for top?
On May 11, 2007, at 2:51 AM, Mike Wilson wrote: But extending this reasoning to the offset properties, like left and top, seems unfair as they cannot cause any layout recursion. The child height and width may cause recursion as the parent element may base its own size on the child size, but the parent element will never base its own size on a child's offset. The specification is very clearly written for height percentages (10.5): If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. but I lack the corresponding text for top percentages (9.3.2) which are only specified as refer to height of containing block. But the % offset for 'top' cannot be computed in your case, as it depends on the height of the containing block, which is _basically_ unknown (it is 'auto'). So, could you comment if my reasoning below is plausible? : 1) The spec doesn't mention special handling of percentage offsets when the parent's size is dependent on child size. 2) Standard browser makers have made an educated guess that the spec's reasoning behind height/width should be extended to the offset properties (which is not implied by the spec). 3) When I set a top percentage the standard browser resets top to auto which is why I see no upwards shift. 4) When I set a left percentage the standard browser is free to do what it prefers as this is undefined and, as they probably reason the way I do above, can calculate the correct widths without risk of recursion and then use a percentage based on that, which is why I do see a left shift. I agree that the spec is a little under-defined in this case. Maybe you should take this up with the CSS WG? They might still include a clarification [1]. ref you point 2 above. I don't think the browser makers have made 'an educated guess' :-). For 'left' or 'right' offset, it is based ultimately on the shrink-to- fit algorithm for width, something that is defined [2]. For 'top' (and 'bottom'), height has no shrink-to-fit possibilities, and hence your top: 50% computes to '0'. [1] you can take it up via the mailing list http://lists.w3.org/Archives/Public/www-style/ [2] see towards the end of 10.3.7 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ 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] Please remove me from the list
Thanks Han. __ 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] Please remove me from this list.
__ 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] format the Hover Effect in a List Menu
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: 11 May 2007 07:11 To: css-d@lists.css-discuss.org Subject: [css-d] format the Hover Effect in a List Menu What is the best way to format the Hover Effect in a List Menu without affecting other links on the page? I assume you mean links as in a href=... Try ul.class li a:hover {styles...} Where 'class' is the class name assigned to your list. Thanks, Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.com __ 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] format the Hover Effect in a List Menu
From: [EMAIL PROTECTED] What is the best way to format the Hover Effect in a List Menu without affecting other links on the page? Thanks Ahead of time for your help... Kindest Regards, Rich --- Not only for hover but for all styles, target the element with a very specific selector. Something like: ul#menu li a:hover {rules CSS} where #menu is the ID for the UL element that encloses the List Menu. ul id=menu li a href=... ...Link /a /li /ul Regards, Maurício Samy Silva http://www.maujor.com/ __ 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 a div
That didn't work, it did introduce a gap between each but didn't centre the images. -Original Message- From: Ricky Zhou [mailto:[EMAIL PROTECTED] Sent: 09 May 2007 22:36 To: James Smith Cc: CSS Discuss Subject: Re: [css-d] Centering a div James Smith wrote: If you look at http://dev.jaysphotography.org.uk/index.cfm/page/images/ you will see thumbnails at the top of the page. No matter how hard I try I can't get these to the centre of the page and I have tried all of the normal tricks. Since the images are floated, it's somewhat difficult to center them. If you don't mind having a small space between them (which I think looks better anyway), you can remove float: left; from #Thumbs img and set #Thumbs { text-align: center; }. Hope this helps, Ricky __ 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] format the Hover Effect in a List Menu
What is the best way to format the Hover Effect in a List Menu without affecting other links on the page? Thanks Ahead of time for your help... Kindest Regards, Rich __ 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] [ADMIN] Re: Please remove me from this list.
Dear Pamela You can unsubscribe yourself at this page http://www.css-discuss.org/mailman/listinfo/css-d Just enter your email address and password as directed. If you can't remember your password, just enter an incorrect password and you will get the opportunity to recover it. As an aside, the message you just sent was received by close to 8000 people. If you join another mailing list, please read and keep the instructions that you receive on subscribing. These normally have information about how to unsubscribe. Failing that, most mailing lists will have a link to a page that gives the same information. Everybody else, return to your positions, be they absolute, static, fixed or relative... Best wishes Alex Robinson css-d moderator __ 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] Website check-44 Please!!
Hi List, Could I please have a cross browser site check!! The url is: http://www.organ.id.au and the .css file address is: http://www.organ.id.au/org1.css Looks ok? in Firefox 1.5 I am experiencing a problem in IE 6. when I mouseover the navigation, the is div cut off at the bottom of the page. The rest of the site is looking ok to me unless I have missed something!! Thanks in advance, Ken. __ 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] Printing drop-capital
Lars Bruzelius wrote: CSS: .first {text-indent: 0em} .left {float: left; width: 2em} .first:first-letter {float: left; font-size: 3.2em; font-weight: bold} HTML: div class=leftS.D./div p class=firstFöredrogs Amiralitets-Collegii underdåniga Förslag, af den 27 sistl. Februarii, .../p This displays more or less as expected in the most recent versions of Firefox, Internet Explorer, and Opera. However, when printing, Internet Explorer inserts a linebreak after the drop-cap. Is this a bug or have overlooked something? Lars Bruzelius It displays on screen the way I guess you intend in XP IE6.0, IE7.0, FF/2.0.0.3, but /not/ as you intend in Opera9.10. And prints the same as on the screen in IE7.0 and FF/2.0.0.3 (no line break in either IE/7 or FF) I am not able to preview or print from the standalone version of IE/6.0 that I use on XP. Best, ~dL -- http://chelseacreekstudio.com/ __ 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] Popups and script blocker in IE7
I am developing a site using a client side shopping cart. It requires cookies to be enabled and uses some Javascript. IE7 blocks the cart when it pops up and also blocks the script associated with the cart. Is there anything I can do about this? Thanks, Kevin __ 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] [ADMIN - OFF TOPIC] Re: Popups and script blocker in IE7
At 11:25 -0400 11/5/07, jana coyle wrote: I am developing a site using a client side shopping cart. It requires cookies to be enabled and uses some Javascript. IE7 blocks the cart when it pops up and also blocks the script associated with the cart. Is there anything I can do about this? Yes. Ask the question on a list that deals with cookies and javascript. That is, a general web development list. Not one focused on css. On the off topic page of the css-d wiki you will find several suitable places to ask your question http://css-discuss.incutio.com/?page=OffTopic Anyone who feels they have an answer, please write Kevin/jana offlist. Thread dead. Relax. Alex css-d moderator __ 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] Box model -I am being really stupid here
Hi list I know this is a basic question which I should be able to work out, but I just cannot see where I am going wrong. content div is inside wrapper which, should stretch to encompass the content - does in IE7 but not FF. Been trying to sort out client site for some time now. Basic template for simplicity is at. You will see the border at the top of the page in FF - this is border-bottom. http://www.iyesolutions.co.uk/templates/css/test-css.php Any help on a Friday gratefully received. Cheers Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.467 / Virus Database: 269.6.8/797 - Release Date: 10/05/2007 17:10 __ 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] Printing drop-capital
- Original Message - From: Lars Bruzelius [EMAIL PROTECTED] CSS: .first {text-indent: 0em} .left {float: left; width: 2em} .first:first-letter {float: left; font-size: 3.2em; font-weight: bold} HTML: div class=leftS.D./div p class=firstFöredrogs Amiralitets-Collegii underdåniga Förslag, af den 27 sistl. Februarii, .../p This displays more or less as expected in the most recent versions of Firefox, Internet Explorer, and Opera. However, when printing, Internet Explorer inserts a linebreak after the drop-cap. Is this a bug or have overlooked something? Hi Lars, I've tested the code fragment you sent and all is going OK when printing it in IE6/Win here. I do not got the *linebreak after the drop-cap* on the printed fragment text. Does exists a hosted page online in order we can see the context where the problem appears? Regards Maurício Samy Silva http://www.maujor.com/ __ 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] Box model -I am being really stupid here
From: Ian Young [EMAIL PROTECTED] To: [EMAIL PROTECTED] Css-Discuss. Org css-d@lists.css-discuss.org Sent: Friday, May 11, 2007 4:01 PM Subject: [css-d] Box model -I am being really stupid here ... Basic template for simplicity is at. You will see the border at the top of the page in FF - this is border-bottom. http://www.iyesolutions.co.uk/templates/css/test-css.php --- Hi Ian, Try to put the clear div AFTER (not before as you did) the close tag for the main content: Like so: /div!-- eo main-content -- div class=clear!-- --/div Regards, Maurício Samy Silva http://www.maujor.com/ __ 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] Box model -I am being really stupid here
Hi list I know this is a basic question which I should be able to work out, but I just cannot see where I am going wrong. content div is inside wrapper which, should stretch to encompass the content - does in IE7 but not FF. Been trying to sort out client site for some time now. Basic template for simplicity is at. You will see the border at the top of the page in FF - this is border-bottom. http://www.iyesolutions.co.uk/templates/css/test-css.php Any help on a Friday gratefully received. Cheers Ian 05/11/2007 Ian: You are not being stupid at all. I think the behavior is because the wrapper's contents are floated, which removes them from the flow somehow. If you take the float off of the *main-content*, the wrapper expands to contain it and the border moves to the bottom. There is a work around, but I can't remember off of the top of my head what it is. You can add a bottom border to *main-content* that will show up where you want it, but the wrapper still does not expand. I'll keep chipping away at it. Cheers, Peter www.fatpawdesign.com __ 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] 3 col layout
Hello Is it possible to contain a 3 column layout within another container? For clarity I've uploaded a screenshot of what I want to achieve. I've tried about a zillion combinations of 3-col layouts, but just can't get it to work (except in firefox) http://pkl.net/~toasty/site.gif Sure thing. Just set up a wrapper with the look that you want and place your 3 col layout inside. Just watch for margins, padding and widths to make sure that it doesn't break. I am sorry that I don't have the time to point you in direction of an example Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.467 / Virus Database: 269.6.8/797 - Release Date: 10/05/2007 17:10 __ 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] 3 col layout
Hello Is it possible to contain a 3 column layout within another container? For clarity I've uploaded a screenshot of what I want to achieve. I've tried about a zillion combinations of 3-col layouts, but just can't get it to work (except in firefox) http://pkl.net/~toasty/site.gif Some advice would be much appreciated. Thanks Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.com __ 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] Box model -I am being really stupid here
content div is inside wrapper which, should stretch to encompass the content - does in IE7 but not FF. Been trying to sort out client site for some time now. Basic template for simplicity is at. You will see the border at the top of the page in FF - this is border-bottom. http://www.iyesolutions.co.uk/templates/css/test-css.php Any help on a Friday gratefully received. Cheers Ian Ian: Try moving your clearing division outside of the closing /div for *main-content*, but before the closing /div tag for *wrapper*. That appears to do the trick without changing the CSS in WinXP/SP2 + IE7/FF2.0/O9.02 Cheers, Peter www.fatpawdesign.com __ 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] Box model -I am being really stupid here
From: Ian Young [EMAIL PROTECTED] To: [EMAIL PROTECTED] Css-Discuss. Org css-d@lists.css-discuss.org Sent: Friday, May 11, 2007 4:01 PM Subject: [css-d] Box model -I am being really stupid here ... Basic template for simplicity is at. You will see the border at the top of the page in FF - this is border-bottom. http://www.iyesolutions.co.uk/templates/css/test-css.php -- - Hi Ian, Try to put the clear div AFTER (not before as you did) the close tag for the main content: Like so: /div!-- eo main-content -- div class=clear!-- --/div Regards, Maurício Samy Silva http://www.maujor.com/ Thanks to both Mauricio and Peter I was too close to this. Classic case of not seeing the wood for the trees. Proper page works a treat too. Cheers Ian No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.467 / Virus Database: 269.6.8/797 - Release Date: 10/05/2007 17:10 __ 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] Question about multipule stylesheets
Hi - I'm starting a site (fairly new to css) where one section (not just a page but many pages that are related) must look COMPLETELY DIFFERENT (colors, background, logo etc.) than the rest of the site, but the basic structure of both sections are exactly the same. Is what I've explained below ok? Is there a better way (before I go too far) than what I've planned? I've started with a global style sheet that has the basics such as: body { font-size: 12px; font-family: Verdana, Arial, Helvetica, Sans-Serif; padding:0px; margin:0px; } #wrapper { width: 775px; margin-left: auto; margin-right: auto; height:100%; } Then to give each respective section it's specific look, I needed to add additional property/values to the same selector that I have in the global stylesheet. So I end up with a second (and third) stylesheet that also have the body, wrapper, etc. selector with additional property/values (tho I've not repeated the property/values that are in the global.) And of course, the global is linked to all pages, while the second is linked only to the pages for that section, and the third the same. Second stylesheet body { background: #ced9e4; color:#999; } #wrapper { background:url(../images/wrapper_main.gif) repeat top center; background-color:#fff; } Third Stylesheet body { background: #343434; color:#333; } #wrapper { background:url(../images/wrapper_jazz.gif) repeat top center; background-color:#000; } __ 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] 3 col layout
Martin Paton wrote: Hello Is it possible to contain a 3 column layout within another container? For clarity I've uploaded a screenshot of what I want to achieve. I've tried about a zillion combinations of 3-col layouts, but just can't get it to work (except in firefox) http://pkl.net/~toasty/site.gif Some advice would be much appreciated. Thanks Martin This message has been scanned for malware by SurfControl plc. www.surfcontrol.com __ 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/ Yes, it is absolutely possible. -- Thanks, Jim __ 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] Question about multipule stylesheets
Juanita wrote: Hi - I'm starting a site (fairly new to css) where one section (not just a page but many pages that are related) must look COMPLETELY DIFFERENT (colors, background, logo etc.) than the rest of the site, but the basic structure of both sections are exactly the same. Is what I've explained below ok? Is there a better way (before I go too far) than what I've planned? I've started with a global style sheet that has the basics such as: body { font-size: 12px; font-family: Verdana, Arial, Helvetica, Sans-Serif; padding:0px; margin:0px; } #wrapper { width: 775px; margin-left: auto; margin-right: auto; height:100%; } Then to give each respective section it's specific look, I needed to add additional property/values to the same selector that I have in the global stylesheet. So I end up with a second (and third) stylesheet that also have the body, wrapper, etc. selector with additional property/values (tho I've not repeated the property/values that are in the global.) And of course, the global is linked to all pages, while the second is linked only to the pages for that section, and the third the same. Second stylesheet body { background: #ced9e4; color:#999; } #wrapper { background:url(../images/wrapper_main.gif) repeat top center; background-color:#fff; } Third Stylesheet body { background: #343434; color:#333; } #wrapper { background:url(../images/wrapper_jazz.gif) repeat top center; background-color:#000; } __ 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/ This will work fine. But if something isn't overriding as you'd expect it to, first check that the rule you want applied is at least as specific as one specified in your basic sheet. Additionally, if you don't mind hedging out the version 4 browsers you may want to consider importing the lower-level style sheet into your 2nd / 3rd level style sheet as this will be sure that the finer-level stylesheets override their predecessors properly and you can link all 3 sheets in one link statement. Example: *Basic.css Stuff with structure *Section.css import Basic.css Stuff with section colors / text *Page.css import Section.css Stuff with page specific css link rel=stylesheet type=text/css media=screen (or print or whatever) href=Page.css / -- Thanks, Jim __ 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] Question about multipule stylesheets
Another way to handle this without having to manage multiple stylesheets is to give the body and id and style accordingly for example: body { font-size: 12px; font-family: Verdana, Arial, Helvetica, Sans-Serif; padding:0px; margin:0px; } #wrapper { width: 775px; margin-left: auto; margin-right: auto; height:100%; } body#two { background: #ced9e4; color:#999; } body#two #wrapper { background:url(../images/wrapper_main.gif) repeat top center; background-color:#fff; } etc etc. __ 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] Box model -I am being really stupid here
Ian Young wrote: content div is inside wrapper which, should stretch to encompass the content - does in IE7 but not FF] http://www.iyesolutions.co.uk/templates/css/test-css.php Ian I /hope/ this is what you are after, Ian: http://chelseacreekstudio.com/ca/cssd/ian.html Just a number of little thing the sum of which caused the problem. The styles need to be in the head of the document, you have two semi-colons here: #65909A;;height:1%; and I think you cleared the floats too early. There are notes in the source regarding floating the parent to contain the float, width adjustments necessary to make it happen, and margin-doubling in IE6.0. Best, ~dL -- http://chelseacreekstudio.com/ __ 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] Website check-44 Please!!
[EMAIL PROTECTED] wrote: Could I please have a cross browser site check!! http://www.organ.id.au I am experiencing a problem in IE 6. when I mouseover the navigation, the is div cut off at the bottom of the page. IE6 is losing track of the navBar's area. Giving navBar 'Layout' will solve that, but can't be applied directly on top of existing styles without causing other problems. I'd suggest some minor changes / additions... #navBar {width: 163px; margin: 0;} * html #navBar {overflow-x: hidden;} * html #navBar li {height: 100%;} * html #navBar ul li a {display: block; height: 100%;} ...which will solve that and a few other problems in IE6, and improve cross browser stability. regards Georg -- http://www.gunlaug.no __ 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] ordered horizontal list
Hi all, Is it possible to achieve a horizontal ordered list in IE6 using only one OL element and valid CSS without images? Say: 1. First item2. A longer second item 3. shorter 3th HTML: ol li... /li li... /li li... /li /ol CSS: ol li { float:left; margin-right:25px; } This works in FFox and Opera but fails in IE6 (don't know in IE7 but believe it works, since it seems to be a 'hasLayout' issue). PS: I extract the following excerpt from: http://www.satzansatz.de/cssd/onhavinglayout.html#list Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. And now I ask: Do you know if this is one of Some of these problems that cannot be cured? Thanks Maurício Samy Silva http://www.maujor.com/ __ 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] Border not showing in IE
I've been out of this for quite a long time (and off the lists) and just finally starting back hooray I have a border issue that I haven't been able to figure out what's happening and still learning IE 7 stuff... There should be a line under the non-active secondary tabs in this mock-up. It appears OK in FireFox and opera. Any pointers in the right direction would be appreciated. http://www.finishingfirst.com/sia/index.html Thanks -- Susan R. Grossman [EMAIL PROTECTED] __ 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] Border not showing in IE
Susan Grossman wrote: I've been out of this for quite a long time (and off the lists) and just finally starting back hooray I have a border issue that I haven't been able to figure out what's happening and still learning IE 7 stuff... There should be a line under the non-active secondary tabs in this mock-up. It appears OK in FireFox and opera. Any pointers in the right direction would be appreciated. http://www.finishingfirst.com/sia/index.html Thanks try putting height: 1%; into #navtabs... you'll probably also have to put it in #navtabs ul nat __ 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] Question about multipule stylesheets
I'm starting a site (fairly new to css) Is what I've explained below ok? Is there a better way (before I go too far) than what I've planned? You should have no problems with this as long as you specify your stylesheet link tags in the proper order: -- 73, AC7ZZ http://counter.li.org/ Linux User #246504 __ This will work fine. But if something isn't overriding as you'd expect it to, first check that the rule you want applied is at least as specific as one specified in your basic sheet. Thanks for the input - I just wanted to make sure I wasn't starting down the wrong path before I got to the point of no return...and Felix, I will fix the font - you did tell me that on my other css attempt awhile ago (and I did it!) but forgot. Thanks again to the list __ 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] ordered horizontal list
Mauricio Samy Silva wrote: Hi all, Is it possible to achieve a horizontal ordered list in IE6 using only one OL element and valid CSS without images? Say: 1. First item2. A longer second item 3. shorter 3th HTML: ol li... /li li... /li li... /li /ol CSS: ol li { float:left; margin-right:25px; } This works in FFox and Opera but fails in IE6 (don't know in IE7 but believe it works, since it seems to be a 'hasLayout' issue). PS: I extract the following excerpt from: http://www.satzansatz.de/cssd/onhavinglayout.html#list Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. And now I ask: Do you know if this is one of Some of these problems that cannot be cured? Thanks Maurício Samy Silva http://www.maujor.com/ Maurício, Your sample renders the same way in IE 6 and 7 - the items are listed horizontally, but without markers. Might be an incurable problem, but I am not an expert... Lori __ 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] ordered horizontal list
Hi all, Is it possible to achieve a horizontal ordered list in IE6 using only one OL element and valid CSS without images? Say: 1. First item2. A longer second item 3. shorter 3th HTML: ol li... /li li... /li li... /li /ol CSS: ol li { float:left; margin-right:25px; } This works in FFox and Opera but fails in IE6 (don't know in IE7 but believe it works, since it seems to be a 'hasLayout' issue). Thanks Maurício Samy Silva http://www.maujor.com/ 05/11/2007 Mauricio: It doesn't work in WinXP/SP2 + IE7 either. Cheers, Peter www.fatpawdesign.com __ 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] Border not showing in IE
From: Susan Grossman [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Friday, May 11, 2007 8:37 PM Subject: [css-d] Border not showing in IE There should be a line under the non-active secondary tabs in this mock-up. It appears OK in FireFox and opera. http://www.finishingfirst.com/sia/index.html -- Hi Susan, I noticed the problem in IE6 here. You must say to IE6 to pull up 1px the navtab in order to make appear the border. Add the following: * html #navtabs LI {position:relative;top:-1px;} (or use conditional comments for IE6 - and IE7?-) and the border will be revealed in IE6 Regards Maurício Samy Silva http://www.maujor.com/ __ 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] ordered horizontal list
Lori, Thanks now I know that IE7 behaves like IE6 on this issue. The question is how to force IE renderizes the markers. I'd like to know if it is impossible or not. Maurício Samy Silva http://www.maujor.com/ - Original Message - From: Lori Lay [EMAIL PROTECTED] To: Mauricio Samy Silva [EMAIL PROTECTED] Cc: [css-d] List css-d@lists.css-discuss.org Sent: Friday, May 11, 2007 9:24 PM Subject: Re: [css-d] ordered horizontal list Mauricio Samy Silva wrote: Hi all, Is it possible to achieve a horizontal ordered list in IE6 using only one OL element and valid CSS without images? Say: 1. First item2. A longer second item 3. shorter 3th HTML: ol li... /li li... /li li... /li /ol CSS: ol li { float:left; margin-right:25px; } This works in FFox and Opera but fails in IE6 (don't know in IE7 but believe it works, since it seems to be a 'hasLayout' issue). PS: I extract the following excerpt from: http://www.satzansatz.de/cssd/onhavinglayout.html#list Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. And now I ask: Do you know if this is one of Some of these problems that cannot be cured? Thanks Maurício Samy Silva http://www.maujor.com/ Maurício, Your sample renders the same way in IE 6 and 7 - the items are listed horizontally, but without markers. Might be an incurable problem, but I am not an expert... Lori __ 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] 3 col layout
Martin Paton wrote: For clarity I've uploaded a screenshot of what I want to achieve. I've tried about a zillion combinations of 3-col layouts, but just can't get it to work (except in firefox) http://pkl.net/~toasty/site.gif Martin Don't know if this will help but it beats banging your head against a wall: http://chelseacreekstudio.com/ca/cssd/layout34.html Best, ~dL -- http://chelseacreekstudio.com/ __ 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] problem with margin after float
Hello again, I’m having a problem with the top margin on a div id=”content” not showing up in IE. There is a list styled as a horizontal menu that is floated left BEFORE this div, however I have cleared the float. The div id=”content” that follows this list has an h1 tag at the top. Since I cleared the float the h1 tag shows proper top margin in FF. IE doesn’t show this margin. Strangely enough, if I put a border around the div id=”content” then the margin on the h1 does appear, however any top margin on the div id=”content” itself does not. Another thing I noticed is if I remove the clear: left before the div id=”content” then it does appear as it should in IE. Can anyone help? Oh, you can view the page at HYPERLINK http://www.tibbits.ca/test/index.phphttp://www.tibbits.ca/test/index.php Thank you, Matt Tibbits No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.467 / Virus Database: 269.6.8/797 - Release Date: 5/10/2007 5:10 PM __ 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] ordered horizontal list
Mauricio Samy Silva wrote: Lori, Thanks now I know that IE7 behaves like IE6 on this issue. The question is how to force IE renderizes the markers. I'd like to know if it is impossible or not. Maurício, It would appear that it's not possible. I did some searching and that seems to be the consensus, even as recently as Dec 2006. Apparently the issue is that IE changes the list from display: list-item to display: block when the list is floated, so the markers are lost. Even setting the display on the list items to display: list-item doesn't fix the problem. The solutions seemed to be either to use JavaScript or images, which you said you wanted to avoid. I even found a lot of solutions that simply involved using an unordered list instead! Now all we need is display: inline-list-item and we'd be all set :-) Lori __ 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] problem with margin after float
- Original Message - From: Matt Tibbits [EMAIL PROTECTED] To: css-d@lists.css-discuss.org I’m having a problem with the top margin on a div id=”content” not showing up in IE. There is a list styled as a horizontal menu that is floated left BEFORE this div, however I have cleared the float. Can anyone help? Oh, you can view the page at HYPERLINK http://www.tibbits.ca/test/index.phphttp://www.tibbits.ca/test/index.php Hi Matt, This is a collapsing margin issue. The fix is to assign a border (as you have had noticed) or padding to the #content DIV. #content {border-top:1px solid #(same color as the background);} or #content {padding-top:1px;} Read more about collapsing margins at: http://css-discuss.incutio.com/?page=CollapsingMargin Regards Maurício Samy Silva http://www.maujor.com/ __ 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] problem with margin after float
Thank you for your help. Cheers, Matt Hi Matt, This is a collapsing margin issue. The fix is to assign a border (as you have had noticed) or padding to the #content DIV. #content {border-top:1px solid #(same color as the background);} or #content {padding-top:1px;} Read more about collapsing margins at: http://css-discuss.incutio.com/?page=CollapsingMargin Regards Maurício Samy Silva http://www.maujor.com/ No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.467 / Virus Database: 269.6.8/797 - Release Date: 5/10/2007 5:10 PM __ 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] clearing issue
I was wondering if someone could help me here. I'm styling out a CMS right now (using WordPress) and I've been asked to do a little avatar thing for each person that writes a post. I'm using a rounded corners method I found here at CSS-D (and works very well, by the way), and for this case, I needed to float the section right. I'm also using the .clearfix method to clear my floats - which also works well. However I have an odd instance, where, if a post is very short, the avatar section overlaps the whole content section, rather than being contained inside of it. I know the float is what's doing it, but none of my clearing methods wan to take hold (I've even tried an hr class=clearing / method, which didn't work, either - not the :after trick, but the actual .clearing {clear:right;} thing.) http://anekostudios.com/help/ provides a list of the files you need if anyone feels like offering a hand here. I can't name who the client is, so I had to provide a screenshot to remove names (help.jpg), so you could see the problem. The help-code.txt file is the HTML output from the CMS - it's exactly what you'd see if you viewed the source code of the page in question. The other two are the two stylesheets that affect this page. I've tried various methods to clear the float, but I can't seem to get the content bottom to push past my floated avatar. I don't *want* to set a min-height for the content area, but if that's the only method that will work, it's what I must do (it's the only other thing I can think of to do). But I'm hoping someone here can help me figure out what I'm overlooking, 'cause y'all are smarter than I am. ;) Thanks for any help you can give :) ~Shelly __ 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] clearing issue
- Original Message - From: Shelly [EMAIL PROTECTED] To: CSS-D css-d@lists.css-discuss.org http://anekostudios.com/help/ I've tried various methods to clear the float, but I can't seem to get the content bottom to push past my floated avatar. I don't *want* to set a min-height for the content area, but if that's the only method that will work, it's what I must do (it's the only other thing I can think of to do). But I'm hoping someone here can help me figure out what I'm overlooking, 'cause y'all are smarter than I am. ;) --- Hi Shelly, Use the following to clear the div.entry div.entry {width:100%; overflow:auto;} Regards, Maurício Samy Silva http://www.maujor.com/ __ 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] clearing issue
Use the following to clear the div.entry div.entry {width:100%; overflow:auto;} I *love* you! Thank you so much :) ~Shelly __ 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/