[css-d] how to remove the small fluttering while styling :hover
Not sure what you mean by fluttering. You can try CSS3 transforms to set a delay or to fade on hover. Regards, Chetan Crasta On Mon, Jun 25, 2012 at 1:10 PM, meera kibe meera_k...@yahoo.com wrote: Hi How can i remove that small fluttering when i hover over a link and i want it to change its state say like getting a border around it or change the color Its so annoying . Thanks Meera __ 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] crop image with code?
Is there a code-based way to handle this? the analog would be InDesign where you can have an image much larger than you want to show, and easily scoot the image around inside its picture box to change the cropping? One simple way of doing this is by having a div with an img child element. The div should have a specified width and height (using CSS) and should have position:relative and overflow:hidden. The img element should be absolutely positioned. You can then adjust your crop using the left, right, top, and bottom properties. Regards, Chetan Crasta __ 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 implement background like this...
The site gymboree.com uses multiple background images of different colors. However, the same effect could have been more easily and flexibly achieved using translucent png images with appropriate background colors. Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] vertical menu question
On a CSS vertical menu, is there a way to have its submenus open in an upward direction if the submenu doesn't have enough space to open in a downward direction? Thanks. Bruce The only possible solution I can think of (using CSS 2) is to position the sub menu absolutely with respect to the viewport using the bottom property. Don't know if there is some new technique using CSS 3. Regards, Chetan Crasta __ 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] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
In the Name/Email inputs, the tops of the text Name and Email are cut
off (Firefox 4 / Ubuntu). I think the reason for this is for the computed
font size ( 25.13 px), the line height is 32px. However, only 17px space is
available. If you increase the height of the input element to 44px, and
move the background image (border image) vertically by 6px and remove the
bottom margin, everything will be OK.
.sof-email-form input {
-moz-box-sizing: border-box;
background: url(../images/email-form-input-bkg.png) no-repeat scroll
0 6px transparent;
color: #88;
display: block;
font-family: Little Days;
font-size: 1.571em;
font-weight: bold;
height: 44px;
margin: 0 auto;
padding: 9px 4px 3px;
width: 231px;
}
At least, it looked fine in Firefox 4 with Firebug. Let me know if it works.
Regards,
Chetan Crasta
__
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] amazing use of css..
On Mon, Dec 19, 2011 at 1:12 AM, Michael Beaudoin mich...@ba-doyn.comwrote: I thought this was amazing and wanted to share. Hope you all don't mind. http://www.ruawebdesign.com/**css3-at-at/http://www.ruawebdesign.com/css3-at-at/ Michael Cool! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer not clearing main content in IE7
On Sat, Dec 10, 2011 at 11:34 PM, Debbie Campbell d...@redkitecreative.comwrote: In this WordPress site, only in IE7, the footer (outlined in red) isn't clearing the main container: http://www.**mountainsagecommunityschool.**org/resources/research/http://www.mountainsagecommunityschool.org/resources/research/ Can someone please help? -- Debbie Campbell www.redkitecreative.com __**__**__ That page is suffering from acute divitis with a secondary infection of positionitis :) I was able to fix the IE7 footer issue by removing some of the unnecessary relative positioning. http://roughtech.com/t/mscs.html The CSS and HTML of the page is so convoluted, I think it'd be best to start over, from scratch. Regards, Chetan Crasta __ 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] IE7 css box class not working
On Sun, Dec 11, 2011 at 10:07 AM, Carol Swinehart ckfswebdevelopm...@gmail.com wrote: www.socilfairfieldhocking.org/index6.html on this page you will see where in the leftcol div .box The .box tag does not work in the css as the first box is code that way and is not working. The other boxes (left column) are coded using style=... This is a problem with IE7 only. Carol IE7 does not see the float:left; declaration on line 403. This may have something do with astonishing number of CSS syntax errors :-) Fixing those will placate IE7. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.socilfairfieldhocking.org%2Findex6.htmlprofile=css3 You can see a preview here: http://roughtech.com/t/socil.html Regards, Chetan Crasta __ 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] panotour problem
On Tue, Dec 13, 2011 at 2:13 AM, virtual tours virtualtours.co...@gmail.com wrote: Hi all - a friend suggested I post here with the hope that someone could help - so here goes: I'm redoing a 360 panoramic website at www.virtualtours.co.cc but am having a problem displaying the swf files in the page. Couldn't see the problem. If swf files are not displaying, what makes you think it has something to do with CSS? Regards, Chetan Crasta __ 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] Fluid layout cross-browser rendering
On Tue, Dec 13, 2011 at 8:19 AM, David Odefey dode...@gmail.com wrote: I'm working on a fluid layout. It is rending how i would like in Chrome 15, but breaks in FF 8 (win7) It is hard to troubleshoot the problem without a link to the page. It is far too time consuming to take your code, build a page with it, put dummy content in it, and then examine the rendering. Provide a link and I'd be happy to analyze it. Regards, Chetan Crasta __ 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] Fluid layout cross-browser rendering
On Tue, Dec 13, 2011 at 10:08 AM, David Odefey dode...@gmail.com wrote: The page is part of a project in development, and it is dynamic. I copied the view source to get a static snapshot and uploaded it along with the css to: http://odefeydesign.com/problem/ again, chrome-fine, firefox, breaks (by 1px) Thanks for taking a look On Mon, Dec 12, 2011 at 10:19 PM, Chetan Crasta chetancra...@gmail.comwrote: On Tue, Dec 13, 2011 at 8:19 AM, David Odefey dode...@gmail.com wrote: I'm working on a fluid layout. It is rending how i would like in Chrome 15, but breaks in FF 8 (win7) The border on section class=content-blog-recent whitebox is causing the problem (remove it and the boxes align correctly). You see, the width of that div is 61% with 3% left and right padding, a total of 67%. The #sidebar has a width of 30% and a left margin of 3%, total 33%. 67% + 33% = 100%. This leaves no space for the 1px border (total 2px left and right). Either remove the border entirely or keep 2px space for it. Regards, Chetan Crasta __ 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] Fluid layout cross-browser rendering
One last question, does anyone know how many decimal places you can use when setting pixel and percentages in CSS? In my experience it seems like fonts allow finer accuracy (i've used ems values like 2.4) but widths seem only to allow #.0 and #.5. Any info or references about this? IE6 and IE7 ignore the decimal part in percentage values and px values, and they ignore the third decimal place in em values. I don't know about IE8 and IE9. I think all other (non-IE) browsers recognize at least the first decimal place in percentage and px values and the third decimal place in em values. Regards, Chetan Crasta __ 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] Fluid layout cross-browser rendering
On Tue, Dec 13, 2011 at 11:27 AM, David Odefey dode...@gmail.com wrote: Thanks again Chetan. Do have a link to a reference about this info? I try to keep all that kind of information clipped or bookmarked. David IE6 and IE7 ignore the decimal part in percentage values and px values, and they ignore the third decimal place in em values. I don't know about IE8 and IE9. I think all other (non-IE) browsers recognize at least the first decimal place in percentage and px values and the third decimal place in em values. Regards, Chetan Crasta That info is based on my own investigations some years ago: http://destination-code.blogspot.com/2008/10/font-size-percentage-values.html http://destination-code.blogspot.com/2008/10/font-size-relative-length-unit-em.html http://destination-code.blogspot.com/2008/10/font-size-relative-length-units-px.html Looking for some links with more current info, myself :-) Regards, Chetan Crasta __ 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] Problem aligning list
On Fri, Oct 7, 2011 at 8:55 AM, Brian Jones bdotjo...@gmail.com wrote:
Hi,
I am having an issue aligning the background image(the dash) for the
li elements (previous and next) on the projects page. Everything
aligns ok in firefox but in chrome its not aligning correctly
http://www.aandac.com/boilerplate_2_0/index.html#/projects/
The height of the a is 17px in Firefox but only 8px in Chrome. This can be
fixed by this:
#projects-nav li a { height: 17px;}
Regards,
Chetan Crasta
__
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] IE 7 DROP DOWN MENU HANG CHECK PLEASE
On Tue, Sep 13, 2011 at 9:03 AM, Alan Gresley a...@css-class.com wrote:
On 13/09/2011 12:43 PM, Elli Vizcaino wrote:
I found this on a possible fix:
http://www.builtfromsource.**com/2006/10/23/a-fix-for-**
suckerfish-dropdowns-in-ie-7/http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/
- I added #main-nav li.about:hover { position: static;} Can someone
please confirm that this works in IE7 and the sub menu NO longer
hangs or freezes.
http://e7flux.com/dfd/index.**htmlhttp://e7flux.com/dfd/index.html
Much appreciated!
Elli Vizcaino
In IE7, the sub menu does not appear at all now.
Chetan, can yob please described what you observed.
Earlier, in IE7, the sub menu would freeze (could not be made to disappear).
Regards,
Chetan Crasta
__
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] Lightbox gallery with CSS
On Wed, Sep 14, 2011 at 12:27 AM, Rachel Mawhood rac...@longitude0.co.ukwrote: Hi list Is it possible to create lightbox effects with images, as on this page (click on any of the images in the main part of the page) http://www.rostock-heute.de/**tag-des-offenen-denkmals-2011-** rostock-staendehaus-**kossfelderstrasse/31597http://www.rostock-heute.de/tag-des-offenen-denkmals-2011-rostock-staendehaus-kossfelderstrasse/31597 using only CSS and no javascript? TVIA Rachel Here is one example: http://www.cssplay.co.uk/menu/css3-keyframe-lightbox.html Regards, Chetan Crasta __ 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] Lightbox gallery with CSS
Here is one example: http://www.cssplay.co.uk/menu/css3-keyframe-lightbox.html Here is another example that works in more browsers: http://www.cssplay.co.uk/menu/lightbox-click.html However, it did not work in Chrome 13 in Linux (could be a browser bug). Regards, Chetan Crasta __ 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] Drop Down Menu On Hover Testing Please - IE 7
And do I have to download the different versions of IE to the virtualbox software once I installed it. Or doe it come pre-installed with the software? IE is preinstalled in the images, see: http://www.microsoft.com/download/en/details.aspx?id=11575 To install in non-windows OS this info will help (read the comments also): http://danielmcormond.com/2011/02/21/how-to-use-microsoft-ie-vpc-images-with-virtualbox-on-mac-os-x/ Regards, Chetan Crasta __ 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] background-image needs to display when there is no content
On Mon, Sep 12, 2011 at 9:53 PM, Norman Fournier nor...@normanfournier.comwrote: Hello, I have a page that requires a background image to display when there is no content in the div. I have cobbled a transparent gif into the div in order to force the image to display. If the transparent gif is not there, the background image is cropped at the top of the div. I want to lose the transparent gif and achieve this using css. I tried to force the div to display by adding !important; to the css but that didn't work. Here is the effect I am looking for. The paint drips are the background image that needs to display on subsequent pages for continuity: http://www.thehalcyoncore.com After the animation loads subsequent pages should display the graphics statically, without the animation running. Here is the affected page with the background image broken: http://www.thehalcyoncore.com/thc-audios.html Don't know why you need a transparent gif. However, if you want to remove the bit of paint drips that is seen in the above page, remove the top padding on #main. Regards, Chetan Crasta __ 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] h1 background question
On Sun, Sep 11, 2011 at 8:48 AM, Curtis Clark jccl...@mockfont.com wrote: I haven't been keeping up with the list recently, so my apologies if something similar has already been covered. I'm looking for a background for an h1 that extends on the left to the edge of the viewport, but stops on the right at the right edge of a fixed-width centered block below. You can see the desired effect in a comp at http://www.csupomona.edu/~**jcclark/more/left-h1/mockup1.**jpghttp://www.csupomona.edu/~jcclark/more/left-h1/mockup1.jpg. The only way I've been able to figure how to do this is visible at http://www.csupomona.edu/~**jcclark/more/left-h1/http://www.csupomona.edu/~jcclark/more/left-h1/; the HTML/CSS is: div style=width:50%; height:50px; background-color:#aaa; padding-right:350px; text-align:right; h1 style=color:#fff; font-size:1.5em; margin:7px 0 0 0; text-align:left; width:326px; overflow:visible; white-space:nowrap; display:inline-block;This is the first-level header, which may run long/h1 /div I was pleased that adding a right padding with width in pixels could increment a div with a width in percent (first time I've understood why the box model is as it is). But is this the best approach? We'll be feeding IE 6 and below a different stylesheet. -- Curtis Clark Cal Poly Pomona Here is a solution: http://roughtech.com/t/leftheading/1.html It involves the non-semantic use of spans, therefore I recommend using javascript to create those elements. Regards, Chetan Crasta __ 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] h1 background question
Interesting. Mine seems a bit cleaner (no image needed), but the containing div is not semantic (although it could arguably be an hgroup). Thanks for the alternate approach! Happy to help. If you want the translucent background but don't want to use images, use the CSS3 color value rgba like this: background-color: rgba(0,0,0,0.5); Regards, Chetan Crasta __ 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] Drop Down Menu On Hover Testing Please - IE 7
On Mon, Sep 12, 2011 at 9:15 AM, Elli Vizcaino elli...@yahoo.com wrote: Hello, I am unable to test functional behavior cross browser because I have to rely on browser shot services to do my testing. I would greatly appreciate it, if a number of you would take a look at this site http://e7flux.com/dfd/ and hover on the word About in the nav. It has a drop down sub menu and should look like this screen shot: http://e7flux.com/dfd/dfd-ss.png across all browsers. I am especially interested in knowing if everything is fine in IE7. In IE7-WinXP, once the drop down menu appears it stays visible even after moving the mouse outside. Using VirtualBox (www.virtualbox.org) and Microsoft's IE VPC images, one can easily test IE compatibility in Windows, Linux or Mac OS. Regards, Chetan Crasta __ 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] converting frame style website to tables and css
On Fri, Sep 9, 2011 at 11:28 PM, Brahm Friedlander brahmf...@gmail.comwrote: This is my first post. In the past I've used frames to make web sites. My site - http://www.brahmfriedlander.ca uses frames. Other artists have asked me to make similar sites for them but I know frames are not the way to go and css is. How would I go about creating a site with the same features as mine i.e. displaying photos on a split screen rather than having thumbnail opening to large jpg on different page. Being new to this site and css and web design in general I hope this is not too outrageous a request. Best regards, Brahm brahmf...@gmail.com http://www.brahmfriedlander.ca http://www.brahmfriedlander.ca/ br...@brahmfriedlander.ca Try the technique shown here: http://www.cssplay.co.uk/menu/object-gallery.html Regards, Chetan Crasta __ 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] z-index on menu
A number of CSS declarations had to be overridden, see the inline styles. IE 8 seems to get confused with the relative positioning. http://roughtech.com/t/prestige.html Regards, Chetan Crasta __ 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] stretch one div vertically in three column layout
1) my wrapper div somehow doesn't stretch and lets the inner content
overflow and i have no idea what is causing that.
Try #silver { overflow: hidden; padding-bottom: 6.5em; }
2) i don't know how to hide the text from ul li's and let only the
images see through...
Try #navigation ul a { text-indent: -1000px; }
Regards,
Chetan Crasta
__
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] Hidden HRs
Using Firebug, this is what I found: The two lines is actually a bottom border on the h1. The p element is relatively positioned to overlap the bottom part of the h1. A background color is set on the p to prevent the border from being seen over the letters. Regards, Chetan Crasta __ 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] Floating content problem
Modify the rule in your stylesheet as below:
.brazil {
margin: -12% 10% 0 1070px;
width: 236px;
}
Regards,
Chetan Crasta
__
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] DIVs referring to each other, and absolute positioning
I have made many changes to your code to fix the problems you mentioned, see: http://roughtech.com/t/tft.html . Also, make sure you check your code with the w3.org css validator http://jigsaw.w3.org/css-validator/ and html validator http://validator.w3.org/ Regards, Chetan Crasta __ 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] Image need to center in right side of page, in div sidebar
The div that contains the image as a background should be given 100% width and this declaration should be added background-position: center 0; By the way, your code is non-semantic and difficult to maintain. I suggest reading this article: http://boagworld.com/technology/semantic-code-what-why-how/ Also check your code with the w3org validators : http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmerrimacknhweather.com http://validator.w3.org/check?uri=merrimacknhweather.com Regards, Chetan Crasta __ 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] Navagation list issue
Comment out the following declarations like this:
.nav ul li
{
/* background-image: url(images/header_bg.jpg);
background-repeat: repeat-x; */
...
and add this
.nav ul
{
background: url(images/header_bg.jpg) repeat-x;
overflow:hidden;
}
Regards,
Chetan Crasta
__
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] nav bar: how to move one item all the way to the right?
Try
nav { position:relative; padding-right: 30px;}
nav a.rightitem { postition: absolute; right: 0; }
Make sure the padding-right on nav is sufficient.
Regards,
Chetan Crasta
On Sat, Jul 23, 2011 at 6:29 PM, Koen van der Drift
koenvanderdr...@gmail.com wrote:
Hi,
I have a working nab bar and want to move the right most item all the way
to the right. I tried the following:
nav
ul
li…. [insert links here]
lia href=../rightlink.html
class=rightitemallright/a/li
/ul
/nav
nav ul
{
margin: 0; /* reset */
padding: 0; /* reset */
list-style-type: none; /* no bullets */
overflow: hidden;
}
nav li
{
display: inline;
float: left;
}
nav a.rightitem
{
float: right;
}
But that doesn't do what I am looking for.
Any suggestions?
Thanks,
- Koen.
__
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] Background image position
On Wed, Jun 29, 2011 at 4:31 AM, Tom Livingston tom...@gmail.com wrote: Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... background: url(image.png) no-repeat 50% 0; The above CSS will cause the image to be centered. For the *left edge* to be at the center, you need to double the width of the image by adding a transparent region on the left. For example, if you have an image of width 200px, using an image editor add a 200px transparent region to the left of the image. The new width of the image will be 400px. Now apply the above CSS to align the left edge of the image to the center of the viewport. Regards, Chetan Crasta __ 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] Converting Table to CSS
Happy to 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] Converting Table to CSS
Here you go: http://roughtech.com/t/ttoc.html Regards, Chetan Crasta __ 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] IE 7 z-index issue
Have you tried inserting the logo using the img element (instead of a css background)? Whether that fixes this issue or not, it is right way of inserting a logo image. Regards, Chetan Crasta __ 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] Converting Table to CSS
Please put your page on a webserver and give the link. It makes it easier to examine. Regards, Chetan Crasta __ 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] collapse issue...
There are a number of XHTML errors, fixing those will simplify troubleshooting: http://validator.w3.org/check?uri=http%3A%2F%2Fba-doyn.com%2Fjunk%2Fwidget_test Regards, Chetan Crasta __ 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] collapse issue...
Fixing the invalid HTML and using the right doctype (HTML, not XHTML) fixed the problem: http://roughtech.com/t/BudLight.html Regards, Chetan Crasta __ 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] collapse issue...
On Sat, May 7, 2011 at 10:59 PM, David Laakso da...@chelseacreekstudio.com wrote: Did it? Mac OS X 10.4.11:-) . Camino. Safari. WebKit. Opera. SeaMonkey. It fixed the specific problem mentioned by the OP, not all the problems with the code. http://roughtech.com/t/BudLight.html : On Sat, May 7, 2011 at 7:49 PM, Michael Beaudoin mich...@ba-doyn.com wrote: The email field is the one collapsing up under the last name field. Regards, Chetan Crasta __ 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] Body Height: 100%?
Try this:
html, body { height: 100%; width: 100%; margin:0; padding: 0;}
Regards,
Chetan Crasta
__
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] Body Height: 100%?
On Fri, May 6, 2011 at 9:58 PM, Chetan Crasta chetancra...@gmail.com wrote:
Try this:
html, body { height: 100%; width: 100%; margin:0; padding: 0;}
Actually, only the height needs to be 100%:
html,body { height: 100%; margin:0; padding: 0;}
Regards,
Chetan Crasta
__
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] Problem with IE7 content coming out of box
The suggestions that I gave earlier unfortunately work only when
applied using the IE Developer Toolbar!
The correct solution is this:
!--[if IE 7]
#main {margin-top:160px;}
![endif]--
Also, it is a better to load the html5.js file before loading the css
files (by putting it earlier in the source).
Regards,
Chetan Crasta
__
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] Problem with IE7 content coming out of box
On Fri, May 6, 2011 at 11:21 PM, Chetan Crasta chetancra...@gmail.com wrote:
Oops, should be
!--[if IE 7]
style type=text/css
#main {margin-top:160px;}
/style
![endif]--
Regards,
Chetan Crasta
__
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] Problem with IE7 content coming out of box
Add this:
#main {left:0;}
Regards,
Chetan Crasta
__
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] Problem with IE7 content coming out of box
On Fri, May 6, 2011 at 10:00 AM, Chetan Crasta chetancra...@gmail.com wrote:
Add this:
#main {left:0;}
This will also work:
#main {zoom:1;}
or
#main {height:1%;}
Regards,
Chetan Crasta
__
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] display:inline-block Rendering Differences
While experimenting with display:inline-block, I was surprised to find differences in rendering by three current browsers, viz. Chrome 11, Firefox 4 and Opera 11.10. Internet Explorer 8 and Safari's rendering is the same as Chrome 11. Here's the page: http://roughtech.com/t/centering_multi.html What's going on? Regards, Chetan Crasta __ 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] display:inline-block Rendering Differences
I fixed the problems with that first test, I have specified the font size and font family: http://roughtech.com/t/centering_multi1.html Opera 11 still renders the page differently from other browsers. Is that a bug? The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align Thanks for that. Regards, Chetan Crasta __ 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 centering items
On Sun, May 1, 2011 at 12:21 PM, Kim Brooks Wei kimi@kimbwei.com wrote: I want Metro New Jersey Green Drinks 3 Gatherings - You're Invited! and the elephant to appear as a single copy block - to the left of the Join box (another copy block). I have never heard the term copy block before. Can you tell us what you mean? Regards, Chetan Crasta __ 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 centering items
So when you say that you want it to appear as a single copy block, do you mean you want to style the logo and the h5 together and give them the appearance of a block? The solution to that would depend on what style you wish to apply. You have to be more clear. Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS positioning question
Try this:
#header {
height: 50px;
margin: 0 auto -19px;
padding: 30px 0 0;
position: relative;
text-align: center;
width: 445px;
background-color: white;
z-index: 100;
}
Regards,
Chetan Crasta
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer placement in FF - FIXED!
On Sat, Apr 30, 2011 at 2:06 PM, Alan Gresley a...@css-class.com wrote:
It still not a sticky footer. It's a footer that it always fixed at the
bottom of the viewport. To get this variant of footerStickAlt to work as a
sticky footer, change this CSS,
That's right! I didn't notice it earlier.
In addition to the changes you suggested, here are some changes:
html, body {height: 100%;}
The article suggests this: !--[if !IE 7]
I haven't tested it in IE 9, but I think it has to be changed to
!--[if (IE 6) | (IE 8)
Regards,
Chetan Crasta
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer placement in FF
On Fri, Apr 29, 2011 at 12:04 PM, Steve Caramia st...@caramiadesign.com wrote: This worked: http://www.duclauddesign.com/ This doesn't: http://www.lankforddesign.com/ Both pages have problems, and not just in Firefox. When the browser window height is around 600px the layout breaks. For a sticky footer (footer that stays at the bottom), try the technique described here: http://www.cssstickyfooter.com/using-sticky-footer-code.html Regards, Chetan Crasta __ 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] column help...
Try this:
#page-wrap { overflow:hidden; }
#4col1, #4col2, #4col3, #4col4 {float:left;width:25%}
Regards,
Chetan Crasta
__
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] column help...
On Fri, Apr 29, 2011 at 7:22 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: The relevant id=... attribute values begin with a digit (4), which is prohibited in XHTML and, more importantly, in CSS. Of course, good catch! Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer placement in FF - FIXED!
On Sat, Apr 30, 2011 at 2:19 AM, Steve Caramia st...@caramiadesign.com wrote: Great! Thanks for cleaning up my code. I'm a little confused, though. The Sticky Footer page specifically says NOT to add margin values on the top and bottom. In this case, it does not cause any problems. It works correctly in IE 7, IE 8, Chrome, Safari and Firefox. Regards, Chetan Crasta __ 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] Styling Submenus on a Dropdown Menu
To apply styles only to the first level lis, use this selector: #primary-nav .tab_navigation ul li Regards, Chetan Crasta __ 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] Styling Submenus on a Dropdown Menu
Remove this style:
#primary-nav li
{
/* background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat scroll left top transparent; */
}
and put it here
#primary-nav .tab_navigation ul li
{
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat scroll left top transparent;
}
Remove this style:
#primary-nav a
{
/* background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat scroll right top transparent */
}
and put it here
#primary-nav .tab_navigation ul li a
{
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat scroll right top transparent;
}
Regards,
Chetan Crasta
__
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] Styling Submenus on a Dropdown Menu
On Fri, Apr 29, 2011 at 12:26 AM, Gates, Jeff gat...@si.edu wrote: Okay, I did as you suggested No you didn't. Line 288 and 297 are commented out. Remove the /* and */. Also, change #intro .nav-introduction a to #intro .nav-introduction a Also, there are some errors in the HTML that should be corrected: http://validator.w3.org/check?uri=http%3A%2F%2Fafricanamericanart.si.edu Regards, Chetan Crasta __ 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] Styling Submenus on a Dropdown Menu
I have made the corrections and put the page here: http://roughtech.com/t/intro.html Regards, Chetan Crasta __ 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] Incorrect width - Opera Bug?
On Wed, Apr 27, 2011 at 3:04 AM, upa...@earthlink.net
upa...@earthlink.net wrote:
I messed Up on that second work around. Below is the Corrected one
noindex:-o-prefocus, yourselector{
rules
rules
}
Thanks for that. I used that special selector to restrict the height
of the div. http://roughtech.com/t/mb/
@Philippe: Using the CSS3 transform to scale the font didn't help.
That info was interesting though, thanks.
Regards,
Chetan Crasta
__
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] Incorrect width - Opera Bug?
On Wed, Apr 27, 2011 at 3:47 PM, Alan Gresley a...@css-class.com wrote: Is Chetan freezing font-sizes again? You have more chance of consistency by using an image. The problem wasn't Opera's 9px minimum font size per se, but the height increase that it resulted in. Restricting the height using CSS causes some transitory ugliness in the animation, so I used a height declaration targeted only at Opera. Regards, Chetan Crasta __ 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] IE6, 7 and overflow on a slider: is there a fix?
On Wed, Apr 27, 2011 at 10:19 PM, Gabriele Romanato gabriele.roman...@gmail.com wrote: Now, IE6 and 7 show _all_ the slides, while IE8 and all other browsers (correctly) only the very first one. Is there a fix or something? I noticed this behavior occurring also for horizontal sliders. We need to see the original complete page because the code that you gave works in IE 6 and 7. See http://roughtech.com/t/slidetest.html Regards, Chetan Crasta __ 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] Styling ul and li
You could go about it in this way:
For the home page, give the body tag the class home (body
class=home), for the About Us page, (body class=about_us) and
so on.
The menu items should also have classes, eg (li
class=homeHome/lili class=about_usAbout Us/li...).
Your css should look like this:
.home .home { display:none;}
.about_us .about_us, .contact_us .contact_us, {background-color: red;}
/* highlighting the current menu item */
Here is an example of the above technique:
http://www.roughtech.com/t/menu_style1.html
Regards,
Chetan Crasta
__
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] Incorrect width - Opera Bug?
I've got a slideshow that renders correctly in all browsers except Opera 11 (haven't tested older versions of Opera). http://roughtech.com/t/mb/ The widths of the small slides are smaller than they should be in Opera 11. It appears to be a CSS issue but I don't know of any workarounds. Any ideas? Regards, Chetan Crasta __ 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] Incorrect width - Opera Bug?
Unable to reproduce: It maybe an Opera Linux issue then? Here are the screenshots: http://roughtech.com/t/mb/screenshots.html Regards, Chetan Crasta __ 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] Incorrect width - Opera Bug?
Just checked, same issue in Opera 11.10 in Windows XP. __ 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] Incorrect width - Opera Bug?
OK, I understand what's happening now. Actually, it is not the width that is incorrect, it is the font size. Opera incorrectly calculates the percentage value of the font size. The font size is declared on the grand parent element as 18px, on the parent element as 0.3em and on the p element itself as 80%. This should compute to 4.32px but Opera computes it as 9px. Still haven't been able to fix it though. ~ Chetan Crasta __ 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] Incorrect width - Opera Bug?
Ok, finally figured this one out. It is Opera's Minimum Font Size setting that is causing the problem. This is set to 9px by default. I'm sure the developers of Opera had good intentions when implementing this. However, one would think that they would have realized that font sizes less than 9px can be used as a graphical effect. Does anyone know if this can be overriden? ~Chetan __ 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] Incorrect width - Opera Bug?
Sounds like it could be the Opera Minimum Font Size (Pixels) Setting (Preferences - Advanced - Fonts). -Paul Burney http://www.burney.ws/ That's right, Paul (I read your email after I sent my previous email). I wish there was a way to override that setting using Javascript or CSS. Regards, Chetan Crasta __ 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] Incorrect width - Opera Bug?
'Minimum font size' can not be overridden in any browser, so you better find a way to solve your case that doesn't run into it. regards Georg I guess I'll have to just tolerate that difference in Opera's rendering. Thanks David, Paul and Georg for helping. Regards, Chetan Crasta __ 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] Display Spry menu in IE
Please put the page on a web server and give us the link. Or you can try this CSS drop-down menu solution: http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html Regards, Chetan Crasta __ 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] Styling ul and li
You could go about it in this way:
For the home page, give the body tag the class home (body
class=home), for the About Us page, (body class=about_us) and
so on.
The menu items should also have classes, eg (li
class=homeHome/lili class=about_usAbout Us/li...).
Your css should look like this:
.home .home { display:none;}
.about_us .about_us, .contact_us .contact_us, {background-color: red;}
/* highlighting the current menu item */
Regards,
Chetan Crasta
__
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] OT: Protecting pictures
How do you guys protect your images on the web? I normally don't bother trying to protect images because all the methods can be circumvented. But if a client insists on it, I use this technique: I overlay an absolutely positioned, transparent, div over the image. Right clicking on the image is then not possible. As usual, IE7 and IE8 behave differently. In these browsers, a transparent div is ignored when right clicking. The workaround for this is to give the div a background color and then set the opacity to 0 to make it transparent. You can see an example here: http://www.roughtech.com/t/protected_pic.html Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Css Page Layout checking
There is a mistake in the doctype. There is a newline just before the start of the URI. Also, giving the link to the page will make it easier for us to test the page. Regards, Chetan Crasta __ 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] slideshow positioning problem
BTW, you need to give div#nav a high z-index to prevent the drop-down
menus from fading out under the images.
div#nav { position:relative; z-index: 1; }
Regards,
Chetan Crasta
__
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] Dead zone beneath linked images
There's a dead zone beneath the images. I can add space above or below the
images in question, and no dead zone.
Not sure what you mean by dead zone. It looks OK in Firefox and
Chrome. If you don't want the two images overflowing .execphpwidget,
try this:
.execphpwidget {overflow:hidden;}
Regards,
Chetan Crasta
__
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] form field label font
There are mistakes in the html: There is a span end tag and a label
end tag with no corresponding opening tag. Also the label element's
for attribute's value should be an id of an input element.
To find problems with your CSS and HTML, you should use a validator
such as http://validator.w3.org/ and
http://jigsaw.w3.org/css-validator/ .
To look at the styles that apply to an element you can use the Firefox
extension Firebug.
Regards,
Chetan Crasta
On Mon, Apr 11, 2011 at 11:32 AM, unnikrishna menon damodaran
umenondamoda...@gmail.com wrote:
hi all gurus out there,
am relatively a newbie with css/html.
my problem: in the form field below:
Mobile Number Home Tel. Number shows in one row with text area input
is fine.
but for Home Tel. Number font is showing in serif which is not in the style.
i guess it is a problem with label style but am unable to fix it.
any help would be greatly appreciated.
good day all,
kind regards | umd |**
/** contact form **/
#contactform { margin:0; padding:5px 13px;}
#contactform * { color:black;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none;
display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:100px; padding:5px 0;
font:bold 11px Arial, Helvetica, sans-serif; color:#3d3d3d;
text-transform:capitalize;}
#contactform label span { font:normal 11px Arial, Helvetica,
sans-serif;color:red;}
#contactform input.text { width:430px; border:1px solid #e9e9e9; margin:5px
0; padding:5px 2px; height:12px; background:#fff;}
#contactform input.text02 { width:144px; border:1px solid #e9e9e9;
margin:5px 0; padding:5px 2px; height:12px; background:#fff; font:bold 11px
Arial, Helvetica, Sans-serif; color:#3d3d3d;}
li
label for=name Mobile Number span
class=red*/span/label
input id=Mobile Number name=Mobile Number
class=text02/
Home Tel. Number span class=red*/span
input id=Home Tel name=Home Tel class=text02
//label
/li
__
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] CSS navigation/menu/selection
http://www.kacevisual.com/files/CSSContentSlide/ Ingenious. It would be better without the non-semantic empty a elements though. ~Chetan __ 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] Position h2 and p in one line
Float the h2:
h2{float:left;}
Regards,
Chetan Crasta
On Sun, Apr 10, 2011 at 6:21 PM, mhe...@gmail.com wrote:
Hi there,
I'd like to position a short h2 (double the hight of p) in one line with p so
that on the right hand side of h2 there are 2 lines of p. Below h2, p should
spread on the whole line. I hope it makes sense.
Thanks
Martin
Sent from my BlackBerry® wireless device
__
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] Stacking divs
Try
#header_topmenu class { position:relative; z-index: 100; }
Regards,
Chetan Crasta
On Sun, Apr 10, 2011 at 10:52 AM, RePost repost...@yahoo.com wrote:
I'm attempting to stack two divs in a wrapper at the right side of my
header.
There's another div to the left, and the header is wrapped in a container
div.
My problem is, I can't get the stacked divs to behave. The content doesn't
stay in them and they don't conform to a height setting.
I'd appreciate any suggestions.
Thanks!
http://bit.ly/hLlMwb
__
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] css slider/slideshow...
Can someone point me to a tutorial on how to create a slider/slideshow in css like the one on the home page here: http://www.finewoodworking.com? I have done many in Flash but I want to get away from that and use a non-Flash solution. I created a Javascript/CSS slideshow in an example to an earlier question by you: http://roughtech.com/t/pcv.html Regards, Chetan Crasta __ 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] Browser Support: Alternate Style Sheets?
On Mon, Mar 28, 2011 at 12:24 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: The practical conclusion is that alternate stylesheets are not of much use _unless_ you also create an explicit user interface for selecting one of them and program code for making the selection a preferred stylesheet and for storing this selection so that it works across pages and across sessions. The approach, with its benefits, also demonstrates why the alternate stylesheet concept in CSS recommendations would not be very useful even if browsers widely supported it: it is based on a per-page selection, with no defined mechanism or even a suggested idea that the selection be preserved. There's not much point in surfing around a site if you need to select a stylesheet every time you have moved to a new page Thanks for clearing that up. Also, Google Chrome does not provide any means to switch between stylesheets. ~Chetan __ 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] new IE display question
What you need are tabs that will expand or shrink with the containing text. Try the Sliding Doors technique: http://www.alistapart.com/articles/slidingdoors/ Regards, Chetan Crasta On Mon, Mar 28, 2011 at 12:32 AM, Rory Bernstein r...@rorybernstein.com wrote: http://motherloadshow.com/ I'm back with another question about this same page. The main nav bar: I am just using a single BG image to create the look of the blue/green/red tabs, and the links are a list of items. But in IE, the text gets spaced out further, and the text goes out to the right, past the end of the red tab. Is there something wrong with my css that can be fixed to make them stay put? Rory __ 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] Same CSS, Same Browser But Looks Different Locally/Online
Install Firebug and then inspect the CSS that is applied to the elements in question. Regards, Chetan Crasta __ 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] Trying to make text lighter than 100
On Sat, Mar 5, 2011 at 4:14 PM, Felix Miata mrma...@earthlink.net wrote: This thread got me to investigating a little. http://fm.no-ip.com/Auth/Font/fonts-weightier.html should show at least some readers that weights lighter than 400 do exist in at least a couple of commonly available families, one of which is free and available to all, and installed by default on most Linux systems. Interesting test. On my Ubuntu system, Chrome 9 and Opera 11 did not render the DejaVu 100 text -- it was as if only normal and bold existed. However, Firefox rendered the typeface correctly -- DejaVu 100 was used for weights 100 to 300. Dunno why it didn't work in Chrome 9 and Opera 11, seems to be a bug. ~Chetan __ 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] Tweaking Tumblr Theme
Happy to help.
Forwarding your reply to the list to inform them that the issue is solved.
~Chetan
On Wed, Jan 26, 2011 at 5:48 PM, faramineux faramin...@comcast.net wrote:
a img { border:none; }
That worked! Thanks.
On Jan 25, 2011, at 11:18 PM, Chetan Crasta wrote:
Try this
a img { border:none; }
#content #newDay .post img { /* border: 1px solid #FF; */ }
Regards,
Chetan
On Wed, Jan 26, 2011 at 7:44 AM, faramineux faramin...@comcast.net
wrote:
http://jcl2011.tumblr.com/
Found that in Firefox linked images have a border that is not showing in
Safari. I would like to get rid of that border all together around the
image
I have used for the title to the site. It is situated in
the header. What I have tried has not worked. TIA
__
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] Tweaking Tumblr Theme
Try this
a img { border:none; }
#content #newDay .post img { /* border: 1px solid #FF; */ }
Regards,
Chetan
On Wed, Jan 26, 2011 at 7:44 AM, faramineux faramin...@comcast.net wrote:
http://jcl2011.tumblr.com/
Found that in Firefox linked images have a border that is not showing in
Safari. I would like to get rid of that border all together around the image
I have used for the title to the site. It is situated in
the header. What I have tried has not worked. TIA
__
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] Overriding styles
On Sat, Jan 15, 2011 at 10:17 PM, Tim Climis tim.cli...@gmail.com wrote:
So I put the following rule in the stylesheet:
[bgcolor] {background-color: transparent}
and it worked! All the HTML elements with bgcolor were reset!
So, apparently, it's possible, using CSS, to override element styles not set
using CSS. I can't really think of any common usages for this, but it might
be handy some time if you need to redo a site and don't have control over
the HTML source.
---Tim
For those who are curious, the selector that Tim used is the CSS
Attribute Selector, see:
http://www.w3schools.com/css/css_attribute_selectors.asp
~Chetan
__
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] line breaks and/or outdenting?
On Thu, Jan 13, 2011 at 1:04 AM, Rory Bernstein r...@rorybernstein.com wrote:
Hello, I posted here before about a solution for outdenting the lines of a
paragraph (first line of text hangs our further to left than the rest of the
lines) and got a great solution. But, it turns out that given how my content
is coming in from the CMS, I cannot mark up the text in the way that I'd need
(can't wrap each item in a p tag the way I would need to.
Did you try this:
#container:first-line
{
text-indent:-4em;
}
~Chetan
__
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] line breaks and/or outdenting?
Sorry, only a limited number of properties can be applied to the pseudo element :first-line. These do not include positioning properties. Looks like your only option is to put the text of the first line within a span and then style it. ~Chetan __ 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] slight layout change: center numbers in circles.
On Tue, Jan 11, 2011 at 11:47 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: On the theoretical side: because these characters are dingbats, i.e. specific graphics encoded as characters in a technical sense but not true text characters. On the practical side: because they mostly _don't_ exist in fonts. See the short font list at http://www.fileformat.info/info/unicode/char/2776/fontsupport.htm People's computers may have other fonts containing dingbats, but a) the appearances may be surprising and b) those fonts may have non-Unicode encodings. -- Yucca, http://www.cs.tut.fi/~jkorpela/ Good info. I'm not sure of the meaning of those characters, though. Do they have the same meaning as regular numbers? This wikipedia article doesn't say: http://en.wikipedia.org/wiki/Enclosed_Alphanumerics The characters were rendered correctly in my Ubuntu computer. It has MS's free core fonts installed. In any case, the use of these characters is limited because while the color of the shaded circle can be changed, the color of the letter can only be changed using background-color which changes the color of the entire line box. ~Chetan __ 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] Textured Background Not Lining Up
On Tue, Jan 11, 2011 at 4:23 PM, John Franks johnfra...@hotmail.co.uk wrote:
.. Everything lines up great in Internet Explorer (7 8 only which is all I
need) and Opera. But if you view the website through Chrome, Firefox and
Safari the lines in the textured background do not line up at the join between
the main donut and the website background.
Try this
#introPanel {
/* background: url(../images/introPanelBackground.gif) no-repeat
scroll left top transparent; */
}
#wrapper
{
background: url(../images/introPanelBackground.gif) no-repeat
scroll left top transparent;
}
Didn't investigate what was causing the misalignment, but the above
CSS seems to fix it :)
Cheers,
~Chetan
__
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] Textured Background Not Lining Up
On Tue, Jan 11, 2011 at 4:23 PM, John Franks johnfra...@hotmail.co.uk wrote:
.. Everything lines up great in Internet Explorer (7 8 only which is all I
need) and Opera. But if you view the website through Chrome, Firefox and
Safari the lines in the textured background do not line up at the join
between the main donut and the website background.
The cause of the misalignment is the 2px bottom border on div#header.
Another possible fix for the problem is:
#introPanel { margin-top:-2px;padding-top:2px}
Cheers,
~Chetan
__
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] Fixed background image
On Tue, Jan 11, 2011 at 7:02 PM, Anne Pennington
an...@digitalplot.co.uk wrote:
The site in progress is :
http://www.mauricerowdon.org/site/
and an example of the page which requires fixed div is
http://www.mauricerowdon.org/site/fiction.htm
But as you will be able to see, the image position is fine vertical, but the
horizontal position relates to the page, not the div, so moves when you
resize the page.
Hi Annie,
I think I have implemented the behavior you described, see:
http://roughtech.com/t/maurice.html
I put a large empty space on the left of the image and then aligned
the background image horizontally center.
#content {
background: url(mr_big.jpg) no-repeat fixed center bottom transparent;
}
Cheers,
~Chetan
__
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] Textured Background Not Lining Up
On Tue, Jan 11, 2011 at 10:53 PM, John Franks johnfra...@hotmail.co.uk wrote: Thanks Chetan, I applied a background:transparent to the #wrapper and removed the background image from the #introPanel and all works perfectly now thanks. John. Sending your email to the list so that everyone knows that you found the solution. ~Chetan __ 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] Fixed background image
On Tue, Jan 11, 2011 at 11:00 PM, Anne Pennington an...@digitalplot.co.uk wrote: Hi Chetan Thank you so much for this. I guess if I add more space to the right of the image more of his head will appear? Works fine and thank you again. All best Annie Happy to help. To make more of the head appear (horizontally), remove some of the space to the left (in the image). I have CCd your email to the list to inform them that the issue is solved. ~Chetan __ 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] slight layout change: center numbers in circles.
On Tue, Jan 11, 2011 at 12:23 AM, Rory Bernstein r...@rorybernstein.com wrote:
Hello All,
http://mcgivney.ehclients.com/
On this page, you will see a big jQuery slideshow thing. I has some numbers
in circles that let you select the slide to see. How can I get the numbers
centered exactly in the circles? I can't seem to figure that out.
Thank you,
Rory
Add this
.switcher li a { line-height:13px;}
~Chetan
__
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] Color not taking on hover
On Sat, Jan 8, 2011 at 3:31 PM, Kim Brooks Wei kimi@kimbwei.com wrote: Hi People, On http://bit.ly/ad7AEl in #copy (see links at top of right column, for example) my link's type color don't change to white on hover. Can you spot the problem? I can't see it. Kimi In line 136 of greenwei.css Change a:hover to #copy a:hover . You need the specificity to override #copy a of line 225 ~Chetan __ 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] Javascript and CSS Strict?
On Sat, Jan 8, 2011 at 10:26 PM, Alan Gresley a...@css-class.com wrote: On 8/01/2011 9:06 AM, Chetan Crasta wrote: Note that you can have a similar menu using only CSS. See: http://roughtech.com/t/dropdown.html ~Chetan And what happens when I adjust the minimum font size settings in Firefox or Opera or the universal access font size setting in Safari? The answer is the menu breaks. Chetan, remove those absolute units like pixels and then you will having something that is truly accessible. Correct. Those are problems with that design. I gave that page just as an example of how CSS might be used to create drop down menus. It is by no means a complete or perfect implementation. You may code valid HTML and valid CSS but you fail regarding accessibility. Actually, the menu wasn't coded by me. It was made by someone else on this list who wanted some help with a particular CSS problem. ~Chetan __ 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] CSS Sprite Generator
On Fri, Jan 7, 2011 at 10:06 PM, Thierry Koblentz thie...@tjkdesign.com wrote: http://lmgtfy.com/?q=sprites+generator On Fri, Jan 7, 2011 at 9:58 PM, David Laakso da...@chelseacreekstudio.com wrote: Fwiw, Google : subject line: css sprites generator-- turns up these among others: http://csssprites.com/ http://spritegen.website-performance.org/ @Thierry, @David I think the way you answered Sarah's question was insulting and condescending. I think the question was a perfectly valid one. Sure, a Google search would partially provide a solution to Sarah's query, but she asked the question on this list to get *recommendations* from list members. A Google search would point toward the solutions for almost every question asked on this list. But this list still serves a purpose: to encourage discussion and provide help to others. Just a reminder: Above all, if you can't answer with a modicum of respect, or without feeling somehow annoyed by the question, then DO NOT ANSWER AT ALL. - http://css-discuss.org/policies.html#ask-answer ~Chetan __ 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/
