Re: [css-d] Accounting for Windows DPI settings
[EMAIL PROTECTED] wrote: In the last couple of weeks I've come across a couple of people in my organization who have their PCs set up so that the DPI setting is 120 DPI instead of the normal 96 DPI. This has caused all sorts of consternation. Any one else run into this? If so, how are you working around it? John Garison I guess there is a connection with CSS buried in here someplace... If in the CSS, you set default on the body, and maintain it for the page primary content, you've got a shot at it. Care in the CSS not to restrict height, or provide work around for it when necessary helps. In addition to vertical fluidity, a well structured CSS layout can accommodates horizontal width differences due to font scaling-- min/max width and other means can be used to achieve this. Testing from here to eternity is paramount. Testing in a small window, at +2 and also at minimum font-size at the largest setting in the Gecko's and Mac browsers, text-size largest (and font-sizes ignored) in all IE browsers, and setting a minimum font-size in Opera (a friend tests at 50px min) are some methods. Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Noob with float/div problems
Hello and thanks for letting me join your group, although it's very intimidating for a novice.I am definitely not a hand coder, but I sure have changed a lot of code by hand. I built a table oriented image heavy website no CSS. I struggle to get to first base with CSS on my top banner, it should be simple- changing the text between my logo and a gif one of my rings. It is presently a fixed size table that I think should expand to the browser. Original site http://www.equestrian-jewelry.com/index.htm - Right now I am just worried about the top banner. http://www.equestrian-jewelry.com/stylesheets/horsejewelry.css Visually what works best is http://www.equestrian-jewelry.com/test1.htm http://www.equestrian-jewelry.com/stylesheets/test.css This is what I want, the two large images are spacers for now till I get the top working. This code isn't good but displays well on IE5,6, Opera7,9 and Mozilla, even on old Netscape. I think http://www.equestrian-jewelry.com/jewelry_horse.htm is as close to proper as I can see. It even validates-but the banner doesn't layout properly. http://www.equestrian-jewelry.com/stylesheets/test.css http://www.equestrian-jewelry.com/test2.htm looks good (alternate text only shows) but the right image is dropped to low. http://www.equestrian-jewelry.com/stylesheets/banner.css I tried to keep this short but I keep wanting to cry. Can you please take a look at what I have done and offer some advise? Thanks Ken __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using CSS to control PDF for print
I think the full version of Acrobat Professional will give you options on web based settings and saving files for print as far as I know - then you just create a downloadable pdf file same dessert - different tent Phil Turner FREELANCE DESIGNER TEL: 0161 439 1669 Graphic Designer BA Hons [EMAIL PROTECTED] http://www.philturner-uk.com NEW BOOK - YOUR PLANET NEEDS YOU http://www.yourplanetneedsyou.org Please consider the environment before printing this email. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Accounting for Windows DPI settings
In the last couple of weeks I've come across a couple of people in my organization who have their PCs set up so that the DPI setting is 120 DPI instead of the normal 96 DPI. This has caused all sorts of consternation. In one case, the guy was unable to use an application (some Oracle Financial application or other) because the fonts were so large that they caused drop-down lists to obscure important screen elements like buttons. When he changed the DPI setting to 96, it worked fine. How does one test for this? Switching DPI settings is a pain (reboot required) but the results of not accommodating it is significant. Any one else run into this? If so, how are you working around it? John Garison __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] form/fieldset alignment in IE
David Laakso wrote: Ray Leventhal wrote: http://www.cprtools.net/reg/regform1.php snip Assuming you can mess around and play games with the html: snip /select br / :: add :: /fieldset div!-- --/div :: add :: And you may want to pay a visit to the Markup Validation Service. Hi David, Thank you :) The addition of the markup div!-- --/div between the fieldset tags did, in fact, do the trick. Regarding validation, I was appalled to see that I'd submitted a page with so many errors, but in retrospect, I'd be messing with DTD to try to get IE to 'work' and have since fixed all but one. On a side note (definitely OT - any replies to this, please send directly to me), how does one validate with an onSubmit() call in a submit button tag? Thanks again, -R -- Non scholae sed vitae discimus __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using CSS to control PDF for print
On 01/02/2008, Chang Huang [EMAIL PROTECTED] wrote: Hi all, I've been reading about how to use CSS to control the layout of a web for print, I wonder is there's a optimum way to style a web-generated PDF for print. I've been googling it for a while but with no success. Can anyone point me to the right direction please? Hy Chang, if you're in control of the server environment you can produce great results with CSS2XSL-FO http://www.re.be/css2xslfo/ which produces an xsl-fo file from your css and html (featuring great css suport, including running headers, footnotes etc.) this xsl-fo file can be sent to an xsl-fo processor to generate the desired PDF. Have a look at the documentation for more information. -- cheers Milan Zoufal http://milan.zoufal.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Using CSS to control PDF for print
Hi all, I've been reading about how to use CSS to control the layout of a web for print, I wonder is there's a optimum way to style a web-generated PDF for print. I've been googling it for a while but with no success. Can anyone point me to the right direction please? Thanks Chang Huang __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob with float/div problems
On Feb 1, 2008, at 6:11 AM, Ken Davies wrote:
Original site http://www.equestrian-jewelry.com/index.htm -
Right now
I am just worried about the top banner.
Off the cuff, here's the approach I'd take to the banner. I've done
no testing on it, apart from Safari and Firefox, so it's not
presented as a final solution, but rather as a place for you to start
from:
HTML
div id=banner
img src=Animation11.gif alt= width=80 height=56 /
img src=BCG100.gif alt=Logo id=logo width=94 height=53 /
pHorse jewelry for equestrians and horse lovers./p
pBreeds of horses, barrel racing, rodeo, dressage, jumping and
polo/p
/div
CSS
#banner { padding: 3px; text-align: center; width: 858px; height:
53px; border: 3px double black;}
#banner img { float: right; }
#banner img#logo { float: left; }
#banner p { margin: 0; padding: 0; font-weight: bold; font-size: 110%;}
Commentary:
I don't like CSS class names that are tied to the presentation,
especially during development. During development, many aspects of
the design are likely to change, and then I'll have to go back
through all the pages and change the class name. I think it's a much
better practice to create class and ID names related to the meaning/
function of the object being styled. Hence logo instead of
floatleft.
I also don't like using any more semantically empty tags (div, span)
than I absolutely have to, hence only one. It junks up the document
to use multiples, and while I'm not against doing so if I have to for
a desired effect, I never do it needlessly.
With CSS on the scene, tags like b and i become redundant. Forget
they even exist is my advice. That's what CSS is for.
The p for the title text is probably non-optimal. I'm not sure
where you;re going with this, but replacing them with any sort of
header tag would work as well, though you'll have to change the font-
size to do so.
At a guess, I'd say you're overthinking it, and that's why you're
stressed. The process is simple:
1. Content first. Write the text and select the images.
2. Break the document into logical sections, if possible.
3. Decide what the function of each element is. Is it a heading? then
mark it with an h tag of the appropriate level. If it's an image/
description pair you could put it in a table (image in one column,
description in the other) or a definition list (dt for image, dd for
description).
Only now do we get to CSS
Notice to this point we haven't given a single thought to appearance.
They're off-topic for the list, so I avoided detail, and won't
discuss them further on list. But here we start with CSS, so I'll
walk you through what I did to get the above code
I wanted two images, one at each end. One was the logo, so the logo
ID would be enough to call it out. Since there isn't another img in
the banner, a general img style could float it to the other side. You
can reverse the two images n the HTML file, if you want. The greater
specificity of the logo styling will always pre-empt the general
float right to send it left.
Next, the original had two lines of text, centered, so I centered all
the text in the banner. I killed the margins and padding because the
browser defaults vary, and they all pretty much suck (browsers are
lousy at typography). You can tinker farther with this by playing
with line-height as well as padding and margin.
That gave me the images and the text, but the border wasn't there.
The old site looked like a double border, so that's what I loaded
here. Then I adjusted the height of the banner div (when the images
floated, they were removed from the flow of the document, so the
banner container shrank to the height of the text. You *could* play
with the text size until the box was the right size, but that's open
to being clobbered by someone using a strange text size (Yes, that's
you, Felix ;{} )
Now if you wanted to make it bulletproof (for modern browsers) you
might want to recast the div and image sizes in ems, so they would
grow along with the text. That would probably mean recreating the
images at a larger size, then forcing the browser to shrink them down
to normal, but it's possible. Then as text size grows, the design
elements grow with it. (Like implementing Opera's zoom feature in
CSS for the other browsers.) But that's just personal quirks.
You might want to take a look at Eric Meyer on CSS, where he walks
through the process of taking a site from a table into pure CSS. (And
I'd recommend it even if he wasn't the founder of our feast, so to
speak.)
Or, if you're wanting to work a bit harder, pick up Transcending
CSS (Andy Clarke's absolutely wondrous volume which epitomizes the
ideal that a book on design should be a thing of beauty). The latter
assumes a basic knowledge of CSS, though, so if you don't get it
first, you may find parts of it hard slogging.
Have
Re: [css-d] Using CSS to control PDF for print
Chang Huang wrote: I've been reading about how to use CSS to control the layout of a web for print, I wonder is there's a optimum way to style a web-generated PDF for print. I've been googling it for a while but with no success. Can anyone point me to the right direction please? I'm not sure I understand your question correctly, but I have successfully created PDF versions of web pages, with CSS-enhanced presentation, using just the free PDFCreator software and a web browser - specifically, Firefox, since it supports alternate style sheets, so that I can use link rel=alternate stylesheet type=text/css title=Style sheet for PDF version href=foo.css media=all and just select that style sheet from the browser's menu, so that I'll first see(roughly) on screen the effects of the foo.css style sheet. Then I just use the Print command in the browser and select the virtual printer corresponding to PDFCreator. There are many other programs as well that can be used for making it possible to generate PDF files from a browser, but I haven't seen any comparison from the viewpoint how well CSS rules are applied. Maybe you could just try some alternative and see whether it fits. In simple cases, probably almost any such software will do. Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] PRE extends outside DIV
Dear all, If you take a look at my site (link in signature) you will see we have a range of Flash tutorials, most of which include code (ActionScript). My personal preference is to have the code in a pre tag in order to keep the logical indentations, though I have only just started doing this. So good. However, the design in liquid width, and yet the pre extends outside the bounds of the div ( I know this is normal behaviour for a div, not to expand to fit its contents). Is there any way to force it to wrap onto the next line? We have a very variable-screen-sized audience, so forcing a new line would be out of the question really. Oh by the way, you may (resize if necessary) be able to see what I mean on http://www.foundation-flash.com/tutorials/xml/ Thanks, -- Harry Burt Head Designer, *Foundation Flash* /http://www.foundation-flash.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] PRE extends outside DIV
What immediately springs to mind is setting overflow: auto; on the .code definition, not sure if its the best option or even what you want... -Original Message- Subject: [css-d] PRE extends outside DIV So good. However, the design in liquid width, and yet the pre extends outside the bounds of the div ( I know this is normal behaviour for a div, not to expand to fit its contents). Is there any way to force it to wrap onto the next line? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] PRE extends outside DIV
I would like to avoid scrollbars if possible, which I believe that would give me. It is an option though. Simon Tiplady wrote: What immediately springs to mind is setting overflow: auto; on the .code definition, not sure if its the best option or even what you want... -Original Message- Subject: [css-d] PRE extends outside DIV So good. However, the design in liquid width, and yet the pre extends outside the bounds of the div ( I know this is normal behaviour for a div, not to expand to fit its contents). Is there any way to force it to wrap onto the next line? -- Harry Burt Head Designer, *Foundation Flash* /http://www.foundation-flash.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari a:hover problem
Hello, Does anybody know how to fix the bug in Mac Safari that prevents the display of a:hover effects in anchors placed within list items? I've tried setting both the parent ul and li to display: block and position: relative, as recommended by a couple of Googled articles, but this hasn't helped. Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob with float/div problems
Ken, That helps. Did you see Arlen's response? I think you will find it extremely helpful and probably won't need any more help after reading through it all! If you still do, let us know. Thanks and good luck, On Feb 1, 2008 12:40 PM, Ken Davies [EMAIL PROTECTED] wrote: Hello Valerie and wow I sent that 5 hours ago. I want to end up with a very similar look but expanding to fit the window, not fixed width. Thats what I wanted originally, and I still do. I have been working on all the areas I need to improve it too, first things first. Also should I send this email to the original list address. and thank you Ken Valerie Wininger wrote: Ken, I'm not entirely sure what you want the site to look like. On the current home page, you have a fixed width table, but it looks like you want to end up with a page that expands to fit the browser window. Is that right? Or do you just want the banner to expand? A little more info about what you want the finished product to look like would be helpful. Then we can go from there. On Feb 1, 2008 7:11 AM, Ken Davies [EMAIL PROTECTED] wrote: Hello and thanks for letting me join your group, although it's very intimidating for a novice.I am definitely not a hand coder, but I sure have changed a lot of code by hand. I built a table oriented image heavy website no CSS. I struggle to get to first base with CSS on my top banner, it should be simple- changing the text between my logo and a gif one of my rings. It is presently a fixed size table that I think should expand to the browser. Original site http://www.equestrian-jewelry.com/index.htm - Right now I am just worried about the top banner. http://www.equestrian-jewelry.com/stylesheets/horsejewelry.css Visually what works best is http://www.equestrian-jewelry.com/test1.htm http://www.equestrian-jewelry.com/stylesheets/test.css This is what I want, the two large images are spacers for now till I get the top working. This code isn't good but displays well on IE5,6, Opera7,9 and Mozilla, even on old Netscape. I think http://www.equestrian-jewelry.com/jewelry_horse.htm is as close to proper as I can see. It even validates-but the banner doesn't layout properly. http://www.equestrian-jewelry.com/stylesheets/test.css http://www.equestrian-jewelry.com/test2.htm looks good (alternate text only shows) but the right image is dropped to low. http://www.equestrian-jewelry.com/stylesheets/banner.css I tried to keep this short but I keep wanting to cry. Can you please take a look at what I have done and offer some advise? Thanks Ken __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Valerie Wininger www.valeriewininger.com -- Valerie Wininger www.valeriewininger.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] positioning issue
http://www.ricochet.org/ricochet2/company_principal.html original page (above) validates and goes cross browser fairly well, i think. it has some scaling issues on fonts, messing badly with alignment. at issue was as the gray box expands vertically, it changes the positions of the arrows which are intended to let people cycle through the site quickly. i want the position of the arrows to remain constant, and wanted to move them under 'Communications Design' http://www.ricochet.org/ricochet2/company_principal_alt.html the page validates, works and scales well in firefox, but opera and safari push the #rightcol to the bottom left corner. looking for a remedy. any help? --ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Split image in two divs...idk
I'm developing a site(http://www.bleusolutions.com/pianoguy/piano.html) .How can construct my css and cut the image so that the bottom of the brown star seal appears in the top right corner of the #wrapper div and top of the seal is in the header...right now I just have it as one big image (http://www.bleusolutions.com/pianoguy/images/hdr_img.jpg) which I do not want to do -- -Bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hand coders vs wsywig coders...I had no idea
Due to a resounding lack of interest (of the few people that emailed, some even emailed just to let me know that in the past such ideas didn't develop much momentum), and conflicting requests from those who were interested (I got a few don't bother with anything but _ requests), it doesn't look like such a survey would be worth the effort. (Maybe people feel differently and just haven't expressed that opinion. If so, I'd be happy to reconsider.) If anyone is interested in general web development habits, I'd suggest http://www.alistapart.com/articles/2007surveyresults. It'd be nice to see a survey focused on css development habit, but it would be silly to go to the effort of development if there's very limited interest. Regards (and apologies for the slightly off topic post), Zach On Jan 25, 2008 10:44 PM, Zach Shepherd [EMAIL PROTECTED] wrote: I'll bite. I haven't seen any comprehensive surveys about css development habits and I certainly think it'd be an interesting thing to get some more information on. I'd certainly be open to suggestions about questions/topics. In the interest of keeping Off Topic posts off of the list, I'd ask that people send any comments about this directly to me when appropriate. The set-up time will depend on the volume of ideas/requests I get. I'll drop a link to the list when it's up and running. Regards, Zach On Jan 25, 2008 2:54 PM, Eric A. Meyer [EMAIL PROTECTED] wrote: At 1:46 PM -0500 1/25/08, Scott Thigpen wrote: ... And if someone wants to set up a short-ish survey about people's CSS development habits, let us know you're on it and then announce the survey location once it's ready to go. ... -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob with float/div problems
I sent that 5 hours ago. I want to end up with a very similar look but expanding to fit the window, not fixed width. Then change the CSS I posted. Maybe something like width:100% or width:95% and add some margins. Whatever you want to see. Have Fun, Arlen -- In God we trust, all others must supply data __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Stylesheet just for Safari
I have a very tight layout and Safari is displaying a tag differently than Firefox. How would you embed a separate style sheet for Safari into a webpage? with IE differences I have been using the following !--[if lte IE 6] link rel=stylesheet type=text/css media=screen href=/css/Ie6.css / ![endif]-- Thank you __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Accounting for Windows DPI settings
On Thu, 31 Jan 2008 13:36:02 -0500 (EST), [EMAIL PROTECTED] wrote: How does one test for this? Switching DPI settings is a pain (reboot required) but the results of not accommodating it is significant. Any one else run into this? If so, how are you working around it? This is the same problem that visitors have with text size enlarged, or with minimum font size greater than 16px. *All* these users benefit from your use of relative sizes (percents and ems) instead of pixels. No testing for DPI settings needed. (Although it can be done with scripting.) Tedd Sperling[1] sizes everything in ems. I am certain that his site is viewable under almost any circumstance I can think of. [1] http://sperling.com/examples/zoom/ Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Noob with float/div problems
Thank you for not laughing at me and for the very constructive advise. I will get back at it tonight. Re -using h1,h2 tags. I tried that a few times but couldn't get the text to stay inside the images. Maybe with other corrections it will work. Also the borders showing originally is because I was even more of a noob then. I will persevere. I even over thought asking for help. It is less painful than I had been thinking. Thanks again Ken __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css menu text misplaced
The text in each link is at the top of the 'box'. How do I move the text
down without moving the a:focus background?
http://korbyimagery.com/ab/
#outerWrapper #contentWrapper #leftColumn1 ul li {
font-family: Futura Book, futura, Arial, Helvetica, sans-serif;
display: block;
height: 30px;
font-size: 12px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #B3A193;
list-style-type: none;
letter-spacing: 0.2em;
vertical-align: middle;
}
#outerWrapper #contentWrapper #leftColumn1 ul li a:focus {font-family:
Futura Book, futura, Arial, Helvetica, sans-serif;
display: block; height: 30px;
font-size: 12px;
border-top: 1px dotted #B3A193;
list-style-type: none;
background-image: url(images/li-bg.jpg);
}
Thanks.
Shanna
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using CSS to control PDF for print
I've been reading about how to use CSS to control the layout of a web for print, I wonder is there's a optimum way to style a web-generated PDF for print. I've been googling it for a while but with no success. Can anyone point me to the right direction please? I have NO idea if this is related, but Prince is an application that's designed to create PDF files for print using CSS: http://www.princexml.com/ There was recent discussion of it on Typophile: http://www.typophile.com/node/40332 (Not affiliated, just found it to be an intriguing product) -Darrel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Three column variable width columns with padding
Hi, I am after a format that has three variable with columns of 33% with padding on either side of each column. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Accounting for Windows DPI settings
Hi, On Feb 1, 2008 3:02 PM, David Hucklesby [EMAIL PROTECTED] wrote: On Thu, 31 Jan 2008 13:36:02 -0500 (EST), [EMAIL PROTECTED] wrote: Tedd Sperling[1] sizes everything in ems. I am certain that his site is viewable under almost any circumstance I can think of. [1] http://sperling.com/examples/zoom/ The problem I always have with this technique is that background images don't scale -- is there any CSS-only way to compensate for that? The only solutions I've been able to come up with involve using img tags in semantically incorrect places or dynamically switching background-imaged elements with img elements, neither of which make me feel good inside. -Ray __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column variable width columns with padding
I am after a format that has three variable with columns of 33% with padding on either side of each column. Okay got a working example :- http://www.aarongray.org/Examples/CSS/ThreeColumnVariableWidth.html Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] printing online forms
Hello -- I'm the webmaster for a regional archives organization who have asked me to update an online member application form. They do not want members to email the form to them, but rather fill in the form online, print it out, and mail it in. I know this could be accomplished very easily with a PDF form, but I think the idea is to be as user-friendly (and accessible) as possible, so we've tried to limit the number of PDFs on the site... So... since I am in the process of teaching myself tableless design with CSS and thought I'd start here. I built the form with CSS (with many thanks to CSS Mastery by Andy Budd), but now I need it to print properly. I've created a print stylesheet and now the biggest issue I'm having is getting the checkbox columns to work in the print-out. They look great on the screen and they print really awful... I'm trying so hard to make this work, but I'm not exactly sure what I am doing wrong. Here is the online form: http://www.lib.umd.edu/MARAC/members/member-app.html Here is the form stylesheet: http://www.lib.umd.edu/MARAC/forms.css Here is the print stylesheet: http://www.lib.umd.edu/MARAC/print.css Any suggestions or resources you could point me to? Thanks, Jessica Tanny _ Shed those extra pounds with MSN and The Biggest Loser! http://biggestloser.msn.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using CSS to control PDF for print
Hi Chang,
Stylising web rendered PDF is as feature included in the PDF
proprietary format.
You have 3 entry point for this, depending on how you generate your PDF.
1 : you can set a custom CSS class for any element of the PDF when you
create it with Adobe Acrobat Pro 8, or, if you dynamically regenerate
your PDF excracting each element, you can set a CSS class for each
type or named element.
2 : you can join a custom CSS file to be applied on your PDF
programmaticaly. This depend on the component you use for rendering
PDF to HTML. This could be (ASP.net) objMyPDFDocument.customCssFile or
objMyPDFWriter.RenderingRules (this one would allow XSLT too, using a
RulesFactory I guess). If ou details your methods I can help you more
on this.
3 : For printing, you can use the @media clause in order to give
correct CSS classes to print only.
@media screen {
/* Specific Screen rules */
}
@media print {
/* Specific Print rules */
}
@media all {
/* Non-specific rules */
}
Nevertheless, the better way to make stylised PDF document is ... to
render them in XML format and then use XSLT, or render them in HTML
and use standard CSS. Components exists on the web, but they ae very
expensive.
Cheers,
Sébastien
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using CSS to control PDF for print
On Fri, 01 Feb 2008 18:46:35 +1100 Chang Huang wrote: Hi all, I've been reading about how to use CSS to control the layout of a web for print, I wonder is there's a optimum way to style a web-generated PDF for print. I've been googling it for a while but with no success. Can anyone point me to the right direction please? Also one thing that is so glaring that you probably have not failed to notice. PDFs created on the fly on the server are dependent on the fonts on the server, if it isn't on the server it can't get embedded. Web pages created in HTML are dependent on the fonts at the client. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob with float/div problems
On Fri, 01 Feb 2008 04:11:15 -0800
Ken Davies wrote:
Hello and thanks for letting me join your group, although it's very
intimidating for a novice.I am definitely not a hand coder, but I sure
have changed a lot of code by hand. I built a table oriented image
heavy website no CSS. I struggle to get to first base with CSS on my
top banner, it should be simple- changing the text between my logo and
a gif one of my rings. It is presently a fixed size table that I think
should expand to the browser.
In addition to Arlen's words of wisdom. If the image isn't vital to the
page content then put it in the background. The jewellery item at the
right could be in the background.
#banner {
background: url(/images/Animation11.gif) right center no-repeat;
}
#banner p {
padding-right: 83px; /* leaves Animation11.gif uncovered */
}
Putting it in the background makes it part of the template and releases
it from the requirement to have alt text. The background center is
optional as vertical centering is the default, i put it in, but you
could change it to top, bottom or delete it if you choose.
Also it looks like that image is meant to be an animation but my browser
reports an error in the image and no animation takes place.
--
Michael
All shall be well, and all shall be well, and all manner of things shall
be well
- Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob with float/div problems
Ken Davies wrote: Original site http://www.equestrian-jewelry.com/index.htm - Right now I am just worried about the top banner. Visually what works best is http://www.equestrian-jewelry.com/test1.htm I think http://www.equestrian-jewelry.com/jewelry_horse.htm is as close to proper as I can see. It even validates-but the banner doesn't layout properly. http://www.equestrian-jewelry.com/test2.htm looks good (alternate text only shows) but the right image is dropped to low. Ken Ken, I think I'd go for broke and do the whole thing with CSS. If you are anything like me, it helps to have an example. If so, this is in keeping with that [1]. If you want it to run rail to rail, simply change the 776px widths to 100%. Quick checked in IE/6 an 7; and FF, Opera. [1] http://www.chelseacreekstudio.com/ca/cssd/horse.html Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column variable width columns with padding
Hi Aaron, I have made a quick layout for you based on my 'Perfect 3 column liquid layout'. Here is the link: http://matthewjamestaylor.com/blog/perfect-3-column-thirds.htm Let me know how you go. Great thanks alot, I could not get a footer to position properly on the example I was using. I see yours has a footer which is great. Many thanks Matt, Aaron - Matt =) Matthew James Taylor http://matthewjamestaylor.com - Original Message - From: Aaron Gray [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Saturday, February 02, 2008 7:30 AM Subject: spam: [css-d] Three column variable width columns with padding Hi, I am after a format that has three variable with columns of 33% with padding on either side of each column. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column variable width columns with padding
Hi Aaron, I have made a quick layout for you based on my 'Perfect 3 column liquid layout'. Here is the link: http://matthewjamestaylor.com/blog/perfect-3-column-thirds.htm Let me know how you go. - Matt =) Matthew James Taylor http://matthewjamestaylor.com - Original Message - From: Aaron Gray [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Saturday, February 02, 2008 7:30 AM Subject: spam: [css-d] Three column variable width columns with padding Hi, I am after a format that has three variable with columns of 33% with padding on either side of each column. Many thanks in advance, Aaron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Stylesheet just for Safari
Nancy Johnson wrote: I have a very tight layout and Safari is displaying a tag differently than Firefox. How would you embed a separate style sheet for Safari into a webpage? with IE differences I have been using the following !--[if lte IE 6] link rel=stylesheet type=text/css media=screen href=/css/Ie6.css / ![endif]-- Thank you Provide a clickable link to the page in question or a test page that exhibits the problem. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
