[css-d] Once again, IE6 positioning woes...
I have posted here a couple of times before. I'm overhauling a non-profit's table-based site to CSS. I've now posted my testing pages to their site: their old (and still real) site is http://www.unemployedhelp.on.ca/clientswelcome.htm, while my version is http://www.unemployedhelp.on.ca/clientswelcome.html (the suffix .html is the only difference in the names). My (bloated) stylesheet is at /images/clientstyle.css. My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html. I wanted to make the h3 headers have a 46x46 px graphic on the left, then position the text of the h3s to the immediate right of their respective graphics. In Firefox, it works. In IE6, of course, it doesn't. The graphics show up in the right place, but the h3s get knocked down to the bottom of the page. Here is the relevant portion of the XHTML: div id=vrcResumes h3spanReacute;sumeacute;s/span/h3 /div (Repeated for vrcCoverLetters and vrcInterviews) And here is the relevant portion of CSS code: #vrcResumes, #vrcCoverLetters, #vrcInterviews { position: relative; } #vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 { height: 46px; margin: 0 0 0 0; } #vrcResumes h3 { background: url('vrc_resumetitle.png') left top no-repeat; } #vrcCoverLetters h3 { background: url('vrc_covertitle.png') left top no-repeat; } #vrcInterviews h3 { background: url('vrc_inttitle.png') left top no-repeat; } #vrcResumes h3 span, #vrcCoverLetters h3 span, #vrcInterviews h3 span { display: inline; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: large; position: absolute; left: 46px; bottom: 0; padding-left: 5px; vertical-align: middle; letter-spacing: 2px; height: 28px; width: 90%; color: #FF; background-color: #0F3063; border-top: 1px solid #4E688D; } I know it has something to do with my use of absolute positioning in the spans, but I don't know how to go about it in another way. Any tips on how to whip IE6 into shape, or do I just bite the bullet and do a full image replacement on the entire h3 element? Thanks in advance. Darren Best __ 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] Once again, IE6 positioning woes...
Darren Best wrote: [snip] My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html. I wanted to make the h3 headers have a 46x46 px graphic on the left, then position the text of the h3s to the immediate right of their respective graphics. In Firefox, it works. In IE6, of course, it doesn't. The graphics show up in the right place, but the h3s get knocked down to the bottom of the page. [snip] Hi Darren, Beginning on lines 87 (ish), you have these elements: #vrcResumes H3 SPAN #vrcCoverLetters H3 SPAN #vrcInterviews H3 SPAN Removing the position:absolute from those elements and replacing it with display:block should help, if not fix the issue. Let me know how you get on. --Bill Brown TheHolierGrail.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] Once again, IE6 positioning woes...
[snip] My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html. I wanted to make the h3 headers have a 46x46 px graphic on the left, then position the text of the h3s to the immediate right of their respective graphics. In Firefox, it works. In IE6, of course, it doesn't. The graphics show up in the right place, but the h3s get knocked down to the bottom of the page. [snip] Hi (again) Darren, After further analysis, seems this (more complete) solution might be more helpful to you: #vrcResumes H3 { margin:0px; padding-left: 46px;} #vrcCoverLetters H3 { margin:0px; padding-left: 46px;} #vrcInterviews H3 { margin:0px; padding-left: 46px;} #vrcResumes H3 { background:url(vrc_resumetitle.png) no-repeat left bottom; padding-top: 25px;} #vrcCoverLetters H3 { background:url(vrc_covertitle.png) no-repeat left bottom; padding-top: 25px;} #vrcInterviews H3 { background:url(vrc_inttitle.png) no-repeat left bottom; padding-top: 25px;} #vrcResumes H3 SPAN, #vrcCoverLetters H3 SPAN, #vrcInterviews H3 SPAN { background-color: #0f3063; border-top:#4e688d 1px solid; display: block; padding-left: 5px; font-size: large; color: #ff; font-family: 'arial narrow', arial, helvetica, sans-serif; letter-spacing:2px;} If I'm way off-base here, let me know. Otherwise, it looks good from what I can see on my system (wirelessly Terminal Server Client-ed from my Ubuntu Desktop into my Toshiba Tablet running IE6/WinXP-SP2 in Multiple IE Standalone mode, -- don't ask, it gets weird). Hope it helps! Bill __ 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] Once again, IE6 positioning woes...
Darren Best wrote: http://www.unemployedhelp.on.ca/vrc/index.html. I wanted to make the h3 headers have a 46x46 px graphic on the left, then position the text of the h3s to the immediate right of their respective graphics. In Firefox, it works. In IE6, of course, it doesn't. The graphics show up in the right place, but the h3s get knocked down to the bottom of the page. Position the span relative to its own headline... #vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 { height: 46px; margin: 0; position: relative; } ...and IE/win will cooperate. IE/win needs for an element to have Layout[1], so it can't absolute position anything relative to the divs surrounding those headlines. The 'height: 46px' acts as perfect 'hasLayout' triggers on the headlines. The divs surrounding the headlines are superfluous anyway, and may as well be deleted. Just reassign the ID selectors to the relevant headlines in markup and CSS, so you hit the right elements with your styles. BTW: the 'display: inline' on all those off-screen positioned spans has no purpose. An absolute positioned element is always 'display: block', no matter what you declare on it. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizes
On Tue, 08 Apr 2008 18:43:14 -0500 Alan Gutierrez wrote: I'm noticing that when I specify font sizes using em, they are slightly smaller in Firefox than in Safari. This becomes a problem when the font sizes get smaller. In Safari they are the right size, but in Firefox they are almost illegible. I couldn't dig anything up on Google, probably searching with the wrong terms. Could anyone point me to a discussion of or article on this particular quirk? In theory this is part of the users right to control how large the font is they are viewing themselves[1]. In practise this is not often reality as most users are not aware they can control the default browser font size. To a web developer the optimum for accessibility is to not use a font under 1em. In practise space in areas like sidebars can force many developers to set a pixel font size[2]. What i try to do is specify my fonts in ems and check that degredation is ok in IE at Largest font setting and in Firefox for at least 3 Larger settings (found in the view menu of both browsers) before becoming unreadable. Trying to have too fine-grained control over fonts is a hangover many print designers persist in hanging on to. Designing for the internet is a compromise on many fronts. One last thing you may wish to take into account is that different monitors use different DPI[3] or PPI[4] settings. What may look good on your LCD monitor may not look as good on an 800X600 15 CRT monitor, These references (below) are less authoritative than illustrative, but among them you will probably find the compromise that suits your demonstration page. Zen Garden designers before you have employed various methods to constrain fonts on their pages, many examples may be found in the CSS there. Because it is demonstrative one should consider if the techniques used there are techniques that should be employed in practical sites, which also perhaps gives you permission to use more fixed methods there as it is for demonstration purposes. [1] http://kb.iu.edu/data/aiwf.html [2] http://www.netmechanic.com/news/vol2/html_no11.htm [3] http://en.wikipedia.org/wiki/Dots_per_inch [4] http://en.wikipedia.org/wiki/Pixels_per_inch -- 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] Once again, IE6 positioning woes...
On 14/04/2008, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Position the span relative to its own headline... #vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 { height: 46px; margin: 0; position: relative; } ...and IE/win will cooperate. IE/win needs for an element to have Layout[1], so it can't absolute position anything relative to the divs surrounding those headlines. The 'height: 46px' acts as perfect 'hasLayout' triggers on the headlines. Bingo, thanks! That did the trick. After adding the relative positioning for the h3s, the text started staying put. After adding padding-top of 17px to the h3, and margin-left of 46px and display:block to the h3 spans (thanks to Bill Brown for those!) I have what I was looking for! The divs surrounding the headlines are superfluous anyway, and may as well be deleted. Just reassign the ID selectors to the relevant headlines in markup and CSS, so you hit the right elements with your styles. Yes, I know that a bunch of my markup is pointless, and as I get a bit more confident with my skills, I'll be able to get leaner with the code. Sometimes I think that adding elements will make it more flexible, but I think it often just ends up confusing me as I have to wade through more possibilities as to what is messing up in the stylesheet. Hopefully, I haven't introduced too many bad habits for myself on my first try. BTW: the 'display: inline' on all those off-screen positioned spans has no purpose. An absolute positioned element is always 'display: block', no matter what you declare on it. Thanks, good to know and I appreciate it. Positioning seems to be the hardest thing about CSS to comprehend (at least for me), but I'm getting there. [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- An interesting read. Explains a lot, too! Darren Best __ 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] Combining multiple stylesheets and a padding question
Two questions: Re combining multiple stylesheets-- Can someone provide me with the exact syntax for linking multiple stylesheets so they can be linked in an html head with a single link call. What I want to do is to have one link in the head of my html document that links to a number of stylesheets or to one stylesheet that is somehow linked to a number of other stylesheets. I need both the syntax for linking the stylesheets to a single stylesheet and the syntax that needs to be in the html head. I've found references that say that this can be done using @import within a stylesheet linking it to others or link tags within a stylesheet with a common title attribute but I can't figure out the correct syntax at each end for doing this. Re padding -- Why do the dimensions of a div get bigger when I change the padding in the div? I thought padding simply indented content from the outer dimension of a div. Is there any way to create padding in a div and keeping the outer dimensions of the div the same without decreasing the size of the div by the amount of the padding? Here is the style where the padding is causing the size of the div to expand: .titleDiv { position:relative; float: left; width: 451px; height:87px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding: 12px; background-color: #FF00FF; } Thanks, --Kenoli Kenoli Oleari 1801 Fairview Street Berkeley, CA 94703 Neighborhood Assemblies Network 510-601-8217, [EMAIL PROTECTED] http://www.sfnan.org, http://www.horizonsofchange.com Kenoli Oleari 1801 Fairview Street Berkeley, CA 94703 Neighborhood Assemblies Network 510-601-8217, [EMAIL PROTECTED] http://www.sfnan.org, http://www.horizonsofchange.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] Special how-to request
On 4/12/08, Alan Gresley [EMAIL PROTECTED] wrote: IE8: A disaster. Broken pieces here and there. I would say this is since you have this. just my two cents, but you might think twice about taking the time to make your site display correctly in IE8 at this point because IE8 is still in its first beta. many changes will be made to IE8 before it's released, and you'd have to go back through your site again to update it. __ 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] Combining multiple stylesheets and a padding question
- Original Message - From: Kenoli Oleari To: CSS Mailing List Sent: Monday, April 14, 2008 2:27 PM Subject: [css-d] Combining multiple stylesheets and a padding question Two questions: Re combining multiple stylesheets-- Can someone provide me with the exact syntax for linking multiple stylesheets so they can be linked in an html head with a single link call. What I want to do is to have one link in the head of my html document that links to a number of stylesheets or to one stylesheet that is somehow linked to a number of other stylesheets. I need both the syntax for linking the stylesheets to a single stylesheet and the syntax that needs to be in the html head. I've found references that say that this can be done using @import within a stylesheet linking it to others or link tags within a stylesheet with a common title attribute but I can't figure out the correct syntax at each end for doing this. Re padding -- Why do the dimensions of a div get bigger when I change the padding in the div? I thought padding simply indented content from the outer dimension of a div. Is there any way to create padding in a div and keeping the outer dimensions of the div the same without decreasing the size of the div by the amount of the padding? Here is the style where the padding is causing the size of the div to expand: .titleDiv { position:relative; float: left; width: 451px; height:87px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding: 12px; background-color: #FF00FF; } Thanks, --Kenoli Kenoli. I think what you want is in this example: @import 'global.css'; @import 'nav.css'; @import 'right.css'; @import 'left.css'; which can be in the top a stylesheet which is linked in the HTML. The reason that the div size increases with the padding (and margins) is because the browser calculates the over-all size of the div as the sizes you state for the div and then adds the padding and margins to work out the over-all size. If you want to keep the div to your chosen size, then subtract any padding and margins from the appropriate width or height. i.e. .divsize { width:100px; height:100px; margin:0; padding:0; } will give you a box of exactly 100px wide x 100px high. .divsize { width:100px; height:100px; margin:10px 0 10px 0; padding:0 5px 0 5px; } will give you a box of 110px wide x 120px high. so using your example to get back to the size you actually state, you'd have to redefine like: .titleDiv { position:relative; float: left; width: 427px; /* was 451px */ height:63px; /* was 87px */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding: 12px; /* Don't forget that this is padding on all sides so has to be counted double in the width/height calc! */ background-color: #FF00FF; } I hope this helps. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus __ 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] Changing font-size for individual font-family items
There is no way to do this without scripting - at least not in non-IE browsers. While you don't have access to the user's fonts, on page load you could insert an element with a single character inside and measure the height. You could determine the height for your preferred font and compare the values. If the values don't match you could assume they don't have your font and then adjust the size accordingly - all with scripting, of course. This technique, however, is not fail-safe as users may have changed the font size manually which will return you different values. Overall though, I would recommend against using that font in favor of a more common one (see http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) If that is not possible, you might try Verdana as your fall back instead of Arial - it also appears slightly larger at 16px. Good luck. Zack Frazier -- Senior Developer VSA Partners, Inc. 1347 South State Street Chicago, Illinois 60605 http://www.vsapartners.com Does CSS provide any way to do something like this: if (TW Cen MT is available) then 16px else 13px or even if (TW Cen MT) then 16px elseif (Arial) then 13px elseif (Helvetica) then 13px elseif (sans-serif) then (13px) endif __ 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] Special how-to request
cj wrote: On 4/12/08, Alan Gresley [EMAIL PROTECTED] wrote: IE8: A disaster. Broken pieces here and there. I would say this is since you have this. just my two cents, but you might think twice about taking the time to make your site display correctly in IE8 at this point because IE8 is still in its first beta. many changes will be made to IE8 before it's released, and you'd have to go back through your site again to update it. I never said anything about fixing the problems in IE8. I said that style rules meant for IE6 or IE7 bug behavior should not be given also to IE8. These could be from [if IE] Conditional comments or CSS hacks. The current bugs with IE8 is for MS to fix. Alan http://css-class.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] z-index issue
Hi, I am working on a layout which involves element overlapping and i'm concerned that I am not setting the stack order correctly. The reason I need to set stack order is that I have overlapping interface elements which must display above of the other content. example: /* CSS */ #step_two_heading_wrapper { position: relative; height: 20px; } #step_two_heading { background: transparent url(../images/step_two_heading.png) no-repeat top left; * background: none !important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/step_two_heading.png',sizingMethod='scale'); width: 443px; height: 29px; margin-left: 1px; margin-top: -8px; text-align: center; position: absolute; top: 0; left: 0; z-index: 2; } !-- HTML -- div id=step_two_heading_wrapper div id=step_two_heading h3Step two Heading /h3 /div /div __ 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] Font-Family: Calibri, Verdana, ...
Font-family: Calibri, Verdana, Ariel, sans-serif; Is there a solution which will size Calibri so it roughly matches Verdana and Ariel (which works cross-browser)? (Calibri is a new MS font which renders about 20% smaller than Verdana.) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-Family: Calibri, Verdana, ...
Sam Carter wrote: Font-family: Calibri, Verdana, Ariel, sans-serif; A strange list. Note that a font called Ariel probably does not exist; Arial does. Is there a solution which will size Calibri so it roughly matches Verdana and Ariel (which works cross-browser)? No (because font-size-adjust does not work on the majority browser). Scripting might give a partial answer. (Calibri is a new MS font which renders about 20% smaller than Verdana.) Well, maybe, for some values of %. But I think font-family: Calibri, sans-serif; is OK. I know that Calibri is good when available. If not, I can't really tell whether Arial is an improvement over the browser's generic sans-serif. Verdana isn't. 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] Superfish/Sprites IE6 navigation menu problems
Hi all, I'm back to the list that taught me all I know today. I used to read this list every day 4 or 5 years ago and learned a lot. Now I'm back and I need a little help. A client of mine asked for a menu which has subnavs that appear when you roll over the main nav. Well, I have this all created and finished, in Firefox/Safari/any other decent browser, but IE6 is really giving me a hard time. The subnavs do not appear at all in ie6. I kind of see why not but I still can't get it working. The sprite main navs all have widths on them of 150px. IE6 is passing that width on somehow to the subnav li elements. I have tried redeclaring the subnavs to have a width of auto but that isn't working. I tried playing with the floats and display: inlines and blocks but am getting nowhere. I also know it's not a sfHover/jQuery/Superfish javascript bug as liek i said if you change the width from 150px to say 50px you'll see the subnavs but not in the right place. I also realize IE7 is a little mangled with the sub menus but for the most part is working ok. Any help and I would greatly appreciate it so much, thanks in advance, David Testpage set up here: http://rossinteractive.com/projects/testnav/ CSS here: http://rossinteractive.com/projects/testnav/css/screen.css __ 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] Inconsistent behavour with z-index in IE6/7
Hi all. I just came across another discrepancy with IE6 and IE7. I'm using some gradients as borders/separators and some even have a border color set. To get the effect that I want, it's important that they overlap in the right order, so I'm using z-index to set the priority. The stylesheet is fairly conventional with a site container, navbar, header and main contents. I've put the home page up for inspection at: http://www.webbwize.co.uk/Test_Area/TEP/index.htm and the CSS is at: http://www.webbwize.co.uk/Test_Area/TEP/scripts/stylesheet.css What should be seen is the header with a top horizontal gradient border with appropriate white and gray border colors set, along with two vertical gradient borders, also with appropriate white and gray border colors set. Under this there should be a header bottom gradient border with appropriate white and gray border colors set, and lastly there should be an empty main container, which is described in the div #homecontent {}. All of the gradient borders should be fully visible apart from where they overlap each other. This is the case in Firefox, Opera and Safari. In IE6 and IE7 the #homecontent box is being drawn over the lower gradient border, even though its z-index is set to 0 and all of the gradient borders are set above 0. I've given #homecontent a red border (which would not normally be there) to demonstrate the top edge of the lower div. If there was no background color set and no border on #homecontent, the effect would not be seen. The only way to make IE6/7 behave is to set z-index to -1 (or [I think] any negative number) or to set the header container ( #homehead ) z-index to 1 (probably the right solution). I wonder if this has been documented anywhere? Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus __ 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] Font size
I do not know if this is the right list for this question. I use the following in the CSS for a web site I maintain. * { margin: 0; padding: 0; } html { height: 100%; font-size: 80%; } body { font-size: 1em; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 10px 10px; padding: 5px 0px 10px; } #wrapper { } #header { min-height:142px; } h1 { color: #F0; background: #8B; font-size: 1.5em; text-align: center; line-height: 72px; white-space: nowrap; display: block; } And I am told repeatedly that my fonts are to larger. I use a screen reader with Firefox so I am not really concerned with font size. I have a lot of viewers from perfect site to totally blind like myself. What is your advice on font size? I have alot of IE and Firefox users. Angus MacKinnon Infoforce Services http:ééwww.infoforce-services.com It is impossible to rightly govern the world without God and the Bible. George Washington __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-Family: Calibri, Verdana, ...
Sam Carter wrote: [snip] Font-family: Calibri, Verdana, Ariel, sans-serif; Is there a solution which will size Calibri so it roughly matches Verdana and Ariel (which works cross-browser)? (Calibri is a new MS font which renders about 20% smaller than Verdana.) [snip] Hi Sam. You could use a javascript-ed solution which works in conjunction with CSS in this manner (pseudo-code ...ish): You create a span in your source code. In your CSS, style it with {font-family:Calibri,monospace;}. Then, create another span with the same content. Set your CSS for this box to be {font-family:monospace;}. Do a quick javascript test: if those two spans have equal width, then the user does not have Calibri on their system. Act accordingly (like load a different stylesheet, adjust font-size, and so on). If you need help writing something that'll work for you, let me know. Best, Bill Brown TheHolierGrail.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] Font size
And I am told repeatedly that my fonts are to larger. I use a screen reader with Firefox so I am not really concerned with font size. I have a lot of viewers from perfect site to totally blind like myself. What is your advice on font size? I have alot of IE and Firefox users. Hi Angus. Your site looks just fine to me. Additionally, you've wisely allowed the user (especially IE users) the ability to change their font size. Using a pixel based setup would have locked some IE users out of their browser widget functionality. I use a similar system on TheHolierGrail.com with a site-based text re-sizer which you're welcome to use if you like. Might help calm the rowdy masses. Best Regards, Bill Brown TheHolierGrail.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] Font size
I am told repeatedly that my fonts are to larger. I use a screen reader with Firefox so I am not really concerned with font size. I have a lot of viewers from perfect site to totally blind like myself. What is your advice on font size? Hi Angus, presumably the site in question has a similar font size to your site Infoservice. This site is indeed difficult to read for me as a sighted user; but the font size itsself is not what troubles me, it is the line height and line length. The height being too small so that lines are too narrowly spaced and the line length to long. If you would add something like p { max-width: 60em; margin: 1.5em auto; line-height: 1.6em; } to your CSS, the page becomes far more readable (at least for me). Cheers, jens -- Jens Brueckmann http://www.yalf.de __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font size
On 2008/04/14 11:56 (GMT-0700) Hayden's Harness Attachment apparently typed: html { ... font-size: 80%; } body { ... font-family: Arial, Helvetica, sans-serif; font-weight: bold; ... And I am told repeatedly that my fonts are to larger. I use a screen reader with Firefox so I am not really concerned with font size. I have a lot of viewers from perfect site to totally blind like myself. What is your advice on font size? I have alot of IE and Firefox users. Angus MacKinnon Infoforce Services http:ééwww.infoforce-services.com It is impossible to rightly govern the world without God and the Bible. George Washington Do you think Jesus would use CSS like that? By using it, you're in essence saying to each visitor You have incorrectly determined the best family, weight and size text for yourself to read comfortably using your web browser, so I'm going use my CSS power to usurp your decision. Even though Jesus would actually know the best size for each visitor, something you as webmaster or designer are incapable of knowing, I think he'd probably leave it up to each visitor to make his own mistakes, and set neither family, nor size, nor weight for you in either _body_ or _html_ elements. To do otherwise is simply rude. Some non-zero portion of the universe does in fact have them correctly set, whether done passively or actively. You can't know how many, which shouldn't matter anyway. Visitors who complain about text size on sites where you have set body and/or html font-size to 100% need to be told it's their own job to choose the best size within their own viewing environment, because you are incapable of knowing what's best outside your own environment. The closest thing there is to a safe assumption is that each and every visitor has in fact set the best size for his or herself, and that this decision needs to be respected, by virtually never setting any size other than 100%/1em/medium on either html or body. http://www.informationarchitects.jp/100e2r?v=4 All the above does not imply that text size should never be set on elements other than html or body. There are perfectly valid reasons to vary _portions_ of web pages from the users' preferences for text size, family weight, but not for blanket overrides cascading from html body. -- Either the constitution controls the judges, or the judges rewrite the constitution. Judge Robert Bork Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Inconsistent behavour with z-index in IE6/7
Alan K Baker wrote: I just came across another discrepancy with IE6 and IE7. http://www.webbwize.co.uk/Test_Area/TEP/index.htm In IE6 and IE7 the #homecontent box is being drawn over the lower gradient border, even though its z-index is set to 0 and all of the gradient borders are set above 0. I wonder if this has been documented anywhere? #homehead { z-index: 1; } ... _is_ the right solution in your case, since IE/win can't stack children higher than their own A:P or R:P parents relative to elements outside their parents, no matter what. This IE/win stacking bug has been around since forever. It is often mentioned (and lost) in articles about something else, since one has to work around this bug for all sorts of constructions that rely on stacking. Can't remember where I read about it first - around 10 years ago, so google around. regards Georg -- http://www.gunlaug.no __ 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] Inconsistent behavour with z-index in IE6/7
Alan K Baker wrote: I just came across another discrepancy with IE6 and IE7. I'm using some gradients as borders/separators and some even have a border color set. To get the effect that I want, it's important that they overlap in the right order, so I'm using z-index to set the priority. http://www.webbwize.co.uk/Test_Area/TEP/index.htm http://www.webbwize.co.uk/Test_Area/TEP/scripts/stylesheet.css Alan. I think you may want to evaluate your priorities. Produce a structurally sound page that withstands user discretion, and the gradient issue you wrote about will be exactly what it is-- a trivial and insignificant pursuit. -- 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] Site Check Please: IE 6 / CSS Zen Garden Project
Hello, I was given the CSS Zen Garden project as a design test and I have something up on my server that I'm working on: http://e7flux.com/csszengarden/chaoticspring.html I've checked across IE6, 7, 8, FF Windows Mac and Safari Mac. They all seem fine except in IE6. The last time I checked via www.browsershots.org the layout was completely broken and looks like this in IE6: http://e7flux.com/csszengarden/ie6.png - Is this the haslayout bug? Haven't been able to get a screenshot from browershot.org in over an hour. Can someone check and tell me if it's still broken and if so, how can I fix it? TIA, Elli Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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] Column width different in IE6
Dear All, I'm redesigning my website to phase out the few lingering tables, and I've run into a problem. On this page, in IE6 http://test.priswell.com/new/enable.htm The main center column (div id col1) doesn't quite hit up against the farthest right column that contains the menu (div id col2) but on this page, http://test.priswell.com/new/cskools.htm even though the column width is set to the same width, it's too wide for the space allowed and so it's bumped to below col1.In Firefox, there is no difference. How do I get the pages to display the same in IE6? Style sheet: http://test.priswell.com/new/style2.css~Ronnie [EMAIL PROTECTED]://homeschool.priswell.com/Improving the community one kid at a time __ 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] Inconsistent behavour with z-index in IE6/7
As I already have a fix, I agree that it's no big deal, but in the interests of knowledge furtherance, I don't believe that it's a trivial pursuit. :-) Had there not been a fix, it would have been a major issue. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: David Laakso To: Alan K Baker Cc: css-d Sent: Monday, April 14, 2008 9:21 PM Subject: Re: [css-d] Inconsistent behavour with z-index in IE6/7 I think you may want to evaluate your priorities. Produce a structurally sound page that withstands user discretion, and the gradient issue you wrote about will be exactly what it is-- a trivial and insignificant pursuit. -- 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] when are 2 external css called for?
John wrote: [snip] This has been an excellent thing for me to learn in my greenhorn-hood.. As I adjust my pages to work with this new combined style sheet, I'm adding id=index to every instance of my p tags; my space after design employs a pparagraph's worth of text/p pparagraph's worth of text/p, so every p needs adjusting. Is there a way to say All of these p are now p id=index? [snip] Hi John, Id's are kinda like database indexes, and they must be unique (like a primary key). Your choices are to ignore this and do it anyway (the glory and freedom of the internet); change to class=index; or add an auto incrementing value to the id: id=index1,id=index2,id=index3. If it was me, I'd change them to classes and then use a Javascript function to change any non-index-class ps into p class=index with a little javascript like this: var convertParasToIndexParas = function () { var allParas = document.getElementsByTagName(P), i = allParas.length; while (i--) { if (allParas[i].className.indexOf(index)1) { allParas[i].className = allParas[i].className + index; } }; }; window.onload=convertParasToIndexParas; Ideally, the window.onload function should be routed through an Event Manager (google:addEvent). I like Dean Edwards' solution for this. Anyway, then, style away in your style sheet like so: p{ background: #e1; border: 1px solid #ccc; margin-top: 0; padding: 2px 5px;} Hope it helps! Bill Brown TheHolierGrail.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] when are 2 external css called for?
On Apr 14, 2008, at 4:29 PM, Bill Brown wrote: John wrote: [snip] This has been an excellent thing for me to learn in my greenhorn-hood.. As I adjust my pages to work with this new combined style sheet, I'm adding id=index to every instance of my p tags; my space after design employs a pparagraph's worth of text/p pparagraph's worth of text/p, so every p needs adjusting. Is there a way to say All of these p are now p id=index? [snip] Hi John, If it was me, I'd change them to classes and then use a Javascript function to change any non-index-class ps into p class=index with a little javascript like this: var convertParasToIndexParas = function () { var allParas = document.getElementsByTagName(P), i = allParas.length; while (i--) { if (allParas[i].className.indexOf(index)1) { allParas[i].className = allParas[i].className + index; } }; }; window.onload=convertParasToIndexParas; Ideally, the window.onload function should be routed through an Event Manager (google:addEvent). I like Dean Edwards' solution for this. I would strong advise against something like this just to add a css class to all instances of an element on a page. When you do something like this, you should be taking advantage of what CSS was meant for: cascading. It's also a bunch of unnecessary javascript that will be run on every page load. I'd recommend attaching a class to a parent container (usually the body tag or a wrapper div) called 'index' and use css to style your p's: body class=index phere's my text/p /body .index p { //styles here } This is similar to other replies on this thread. Ryan Doherty [EMAIL PROTECTED] __ 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] img referencing another page has a border. How to lose border?
I'm using restructuredtext to generate html and get a colored border around an image link, but don't want it. I have an example at http://ecosensory.com/ which uses style sheets http://ecosensory.com/default.css ecosensory_leo_rst.css, silver_city.css The .css files have just one use of :link and :visited, and I can make the color change, but not lose the blue border. I tried border-width: 0; in a selector without getting the result I expected from reading w3c.org docs on css 2.1. I can make docutils restructuredtext generate html and also pass along unchanged html, so for a case where it fails to give me usable html, I can just output some as is. Have I got a cascading precedence order affecting me? Thanks, John Griessen -- Ecosensory Austin TX __ 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] img referencing another page has a border. How to lose border?
On Apr 15, 2008, at 9:26 AM, John Griessen wrote: I'm using restructuredtext to generate html and get a colored border around an image link, but don't want it. I have an example at http://ecosensory.com/ which uses style sheets http://ecosensory.com/default.css ecosensory_leo_rst.css, silver_city.css The .css files have just one use of :link and :visited, and I can make the color change, but not lose the blue border. img, a img {border:none;} Throughout your stylesheet I saw the use of cm (centimetre, for margins), pt (point). Those are not suitable for screen usage - use em or px. color:none is invalid http://www.w3.org/TR/CSS21/colors.html#propdef-color Philippe --- Philippe Wittenbergh http://l-c-n.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] Full-height left column in fluid layout.
On 4/10/08, David Laakso [EMAIL PROTECTED] wrote: Richard Grevers wrote: http://www.vine.org.nz/index.php/services uses a negative-margin based How can I make the left-column (which is sized in ems) full height? http://www.vine.org.nz/index.php - complicated by the presence of the two-column masthead, which may mess up 100% heights. This is one way to do it (providing this link is not totally mangled in transmission): http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1-3width=33-34-33equal_height=1longest=1time=1207745223288 -- and check the make columns equal height box. And also: http://www.satzansatz.de/cssd/companions.html Having had problems with onetruelayout before, I tried Gunlaug's companion column example. Footerstickalt is now working correctly on both short and long pages, but .leftcol still doesn't appear full length In Opera and Firefox, the long page example ( http://www.vine.org.nz/index.php/adult-classes ) shows a gap between content and footer, and the sample text and outline I included in the companion column for testing purposes are visible, but not its background. Any further clues? -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] Full-height left column in fluid layout.
In Opera and Firefox, the long page example ( http://www.vine.org.nz/index.php/adult-classes ) shows a gap between content and footer, and the sample text and outline I included in the companion column for testing purposes are visible, but not its background. Any further clues? Not to be entirely self-promoting, but have you taken a look at theholiergrail.com? I can send you the ZIP/RAR if it looks like it might meet your needs. Lemme know if it can help. Bill Brown TheHolierGrail.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] Full-height left column in fluid layout.
On 4/15/08, Richard Grevers [EMAIL PROTECTED] wrote: On 4/10/08, David Laakso [EMAIL PROTECTED] wrote: Richard Grevers wrote: http://www.vine.org.nz/index.php/services uses a And also: http://www.satzansatz.de/cssd/companions.html Having had problems with onetruelayout before, I tried Gunlaug's companion column example. Footerstickalt is now working correctly on both short and long pages, but .leftcol still doesn't appear full length In Opera and Firefox, the long page example ( http://www.vine.org.nz/index.php/adult-classes ) shows a gap between content and footer, and the sample text and outline I included in the companion column for testing purposes are visible, but not its background. Any further clues? Aaaargh! After playing around for 2 hours I finally post to the list, then 2 minutes later I find an errant background-color which is overriding .leftcol But I still have the problem of the gap (stripe of background colour) in FF/Opera, plus the client will want the left column to go all the way to the bottom (or a narrow footer) -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizes
On Tue, 8 Apr 2008 18:43:14 -0500, Alan Gutierrez wrote: I'm noticing that when I specify font sizes using em, they are slightly smaller in Firefox than in Safari. This becomes a problem when the font sizes get smaller. In Safari they are the right size, but in Firefox they are almost illegible. I couldn't dig anything up on Google, probably searching with the wrong terms. Could anyone point me to a discussion of or article on this particular quirk? Yes. I have noticed that, even using carefully calculated EMs or percents, there are differences between browsers. But this is usually only by one pixel, and seems to be due to (1) the number of decimal places a browser actually uses, and (2) how a particular browser rounds the calculated resulting font-size to come up with a whole number of pixels. This is also affected by a number of other factors, of which only the font-size on the outermost container is under a designer's control. While the size also depends on the actual fonts available on a visitor's machine, you can mitigate somewhat by selecting a list of fonts of comparable size. Avoid, for example, using Verdana with Arial. For this and other reasons, I suggest you use a base font-size of 100%. (By base font-size I mean that specified on, say, the HTML selector, although you can also defer this to a container further in.) I also recommend you use nothing smaller than 75%, and that only for copyright notice, document date, or such. Michael Adams already sent you some useful additional information. Hopefully these help. 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] 2 col linked, single list element
Hi Guys, I need a list with 2 columns, all as one anchor, ala: http://tinypic.com/view.php?pic=rby7f6s=3 I'm currently using lia href=span class=catsection 1/spanspan class=prodsection 2/span/a/li On hover, the whole background needs to swap the full width of the li (the list is superimposed over a bg image, and on hover, the background of the anchor gets a 'hilight' state of the bg) I've tried everything from floats to relative positions to inline-block and nothing works 100%. Anyone have any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizes
On 2008/04/14 19:52 (GMT-0700) David Hucklesby apparently typed: On Tue, 8 Apr 2008 18:43:14 -0500, Alan Gutierrez wrote: I'm noticing that when I specify font sizes using em, they are slightly smaller in Firefox than in Safari. This becomes a problem when the font sizes get smaller. In Safari they are the right size, but in Firefox they are almost illegible. Yes. I have noticed that, even using carefully calculated EMs or percents, there are differences between browsers. But this is usually only by one pixel, and seems to be due to (1) the number of decimal places a browser actually uses, and (2) how a particular browser rounds the calculated resulting font-size to come up with a whole number of pixels. Browser rounding differs not only by browser, but also by platform. Now that Safari exists on both doz and Mac, one must be specific discussing what Safari does. Safari (v3.x) seems to round on doz identically to FF, while on Mac noticeably not identical: http://fm.no-ip.com/SS/Fnt/rounding-SS.html Hopefully this FF difference will disappear in FF3, but not having a new enough OS X version to run FF3, I can't test for any difference. -- Either the constitution controls the judges, or the judges rewrite the constitution. Judge Robert Bork Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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/