Re: [css-d] horizontal nav not placing correctly
| URL: www.objectivedesigns.com/amittius/index.htm
| CSS: www.objectivedesigns.com/amittius/index.css
|
| I've tested it in (all WinXP) FF3, IE7, IE6, Opera 9.5, and Safari
| 3. They
| all display the navigation correctly except Safari. I want the nav
| buttons
| to touch the bottom of the nav area, but they don't quite
| go to the
| bottom
| in Safari. I also haven't tested this on a Mac, so if anyone could
| do that
| for me, that would be great (thanks in advance). What's
| more pressing,
| though, is why does Safari display it incorrectly while all
| the others
| display it correctly?
|
| Adding
| #nav a, #nav strong {vertical-align:bottom}
| should level off the differences.
|
| Incidentally, Gecko1.8.1/Fx 2 has no support of display:inline-block;
|
| Philippe
Alright, I added {vertical-align:bottom}. Does this help any of you Mac
users see it better where it was messing up before?
Daniel
__
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] horizontal nav not placing correctly
Daniel Hammond wrote:
| URL: www.objectivedesigns.com/amittius/index.htm
| CSS: www.objectivedesigns.com/amittius/index.css
|
|
| Adding
| #nav a, #nav strong {vertical-align:bottom}
| should level off the differences.
|
| Incidentally, Gecko1.8.1/Fx 2 has no support of display:inline-block;
|
| Philippe
Alright, I added {vertical-align:bottom}. Does this help any of you Mac
users see it better where it was messing up before?
Daniel
Well, I can't see the content any better than before. I could see the
content a lot better if you adjusted to my preferences, and not yours.
Otherwise, good to go as far as the menu is concerned-- same as before
the latest code addition.
--
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] IE margin problems
URL: www.objectivedesigns.com/amittius/index.htm CSS: www.objectivedesigns.com/amittius/index.css Alright, thanks for all your help with the nav on this site. Now if you'll go there again, you'll see that I have added some boxes within the body text. FF3, Opera, and Safari all display the boxes correctly. IE6 and IE7 do not. It looks as though they are having some trouble reading the margin properties correctly (both for the boxes themselves and for the unordered list in the box on the right side. Any help in making them look like they do in the better browsers would be much appreciated. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] EM based layout issue between Firefox and Safari on Mac
Jason Campbell wrote: I am trying to establish a foundation for an em based layout and I am seeing some discrepancies between Firefox 2 and Safari 3.1.2 on the mac that I had not noticed before. My example file I am referencing is available at http://www.jasoncampbell.com/CSS Hmm, all I see there is a lovely background - vertical red bar, then wide vertical pinkish bars separated by narrower white bars, finishing with a final vertical red bar. I have a simple setup here in this example. I have set the font-size for the body of my document to 62.5% my understanding is that by doing this I am, Creating unreadable mousetype for many people ... in effect, setting a base font size of roughly ten pixels. I then have a content div on the page with a width set to 98em which I am hoping in this case equates to a 980px wide area. In this div I have a bg image of 980px set. When I view the page in Firefox 2 everything is wonderful, full image, etcetera. However in Safari 3.1.2 to see the full bg image I have to increase the base font-size to 71.5% Is this right? I thought this was something that worked in both of these browsers, any insight is appreciated. Don't know what the problem is, but I'm using Firefox 2.0.0.14 on Linux here and don't see any text at all. Tidy reports that your doctype is malformed, and there's no next in the document whatsoever ... -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE margin problems
Daniel Hammond wrote:
URL: www.objectivedesigns.com/amittius/index.htm
CSS: www.objectivedesigns.com/amittius/index.css
Alright, thanks for all your help with the nav on this site. Now if you'll
go there again, you'll see that I have added some boxes within the body
text. FF3, Opera, and Safari all display the boxes correctly. IE6 and IE7 do
not. It looks as though they are having some trouble reading the margin
properties correctly (both for the boxes themselves and for the unordered
list in the box on the right side.
Any help in making them look like they do in the better browsers would be
much appreciated.
Hi Daniel:
IE treats lists differently than FF (et al)...of course. I believe IE
uses margins and the others use padding. The inclusion of this snippet
seemed to fix the problem on my local version of your site:
!--[if IE]
style type=text/css
ul.box{margin-left:2.5em;padding-left:0;}
/style
![endif]--
On a separate note, I tend to find that using Strict DocTypes gives me
more consistent results. I know of at least one member of this list who
would disagree, but it seems to me that Transitional is meant for legacy
documents being transitioned into an XHTML site/base. Your site
appears to be a new site and by my reckoning, ought to be Strict.
This, of course, will stir up a huge firestorm during which some member
of this list will express an opposite opinion and suggest that I take a
long walk off a short pier. In any event, you have (a very few) errors
in your source which occur even when validated as Transitional, but once
fixed, actually give your site Strict compliance.
Those errors are:
Line 7: missing / to close LINK
Line 13: missing alt text and remove border=0 (kill this in your
style sheet if you decide to make your header linkable)
The other errors reported by the validator are fixed by repairing those
two things. Additionally, it's been my experience that the space you're
using at the end of auto-closing tags (img src=img.png /) is
unnecessary and can be written (img src=img.png/). A perfectly
worthless bit of information, I know, but I thought I'd toss it out there.
Hope it helps!
Bill
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
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] EM based layout issue between Firefox and Safari on Mac
From: david [EMAIL PROTECTED] Jason Campbell wrote: I am trying to establish a foundation for an em based layout and I am seeing some discrepancies between Firefox 2 and Safari 3.1.2 on the mac that I had not noticed before. My example file I am referencing is available at http://www.jasoncampbell.com/CSS Hmm, all I see there is a lovely background - vertical red bar, then wide vertical pinkish bars separated by narrower white bars, finishing with a final vertical red bar. I have a simple setup here in this example. I have set the font-size for the body of my document to 62.5% my understanding is that by doing this I am, Creating unreadable mousetype for many people ... Jason didn't really mention anything about text in his original post; I'm assuming this is a more theoretical question than a 'how do I fix this site' one. in effect, setting a base font size of roughly ten pixels. I then have a content div on the page with a width set to 98em which I am hoping in this case equates to a 980px wide area. In this div I have a bg image of 980px set. When I view the page in Firefox 2 everything is wonderful, full image, etcetera. However in Safari 3.1.2 to see the full bg image I have to increase the base font-size to 71.5% Is this right? I thought this was something that worked in both of these browsers, any insight is appreciated. According to my understanding of the spec, you are totally correct - 98em * 10px should result in a width of 980px. However, have you determined that the default font-size in Safari (including your local configuration) is actually 16px? If you're relying on that value, I'd say the only way to achieve this display is by explicitly setting it, rather than assuming that 62.5% of the default will ALWAYS be 10px. Don't know what the problem is, but I'm using Firefox 2.0.0.14 on Linux here and don't see any text at all. Tidy reports that your doctype is malformed, and there's no next in the document whatsoever ... Strange - the w3 validator passes it fine. Maybe it's been updated since this post. __ 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] EM based layout issue between Firefox and Safari on Mac
Thank you Bobby Jack for this one line… (including your local configuration) I am not sure how it happened but at some point it dropped to 14 from 16 in my local prefs. I never seem to think about factoring in the preferences, I build for what I assume is the default installation settings which I understand to be Times New Roman 16, thinking that it would be an edge case for someone to seek out and change those and apparently I did at some point. Which is why I never noticed it before. I wish I could remember what I was thinking when I did that. At any rate thank you sir for your insight it did indeed help. David, thank you as well for taking the time to check it out for me, I am not sure why my doctype failed validation in your test, it is the same one I use for just about everything I do, I'm sorry if I wasn't clear that I was having (apparently local) issues with the lone bg image in my example being cut off in my div, thank you anyway. Much appreciated all, J. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE margin problems
Daniel: I often stumble into trouble with IE margins. Is there any specific reason you are using margins instead of padding? In my work I tend to want to skip margin settings (zeroing them out where needed) and choosing padding instead on some of the elements around them. This can add complexity sometimes as there are ups and downs to every solution I suppose... Good luck. -Adam Ducker __ 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 sizing - Is there a definative method?
I'm getting confused. There appears to be many ways of font resizing and I cannot make my mind up which is the best method. In the body style some use use 12px and pixel font sizes there after. Some use body style of 100% and percentages there after and finally some use 101% in body with ems there after. Which is the best option for cross-browser performance? Many thanks -- Regards Karl __ 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] horizontal nav not placing correctly
The tabs are still extending below the navigation area in Firefox 2 on the
Mac, OS X 10.4.11
Chris
On Wed, Jul 9, 2008 at 1:15 AM, Daniel Hammond [EMAIL PROTECTED]
wrote:
Alright, I added {vertical-align:bottom}. Does this help any of you Mac
users see it better where it was messing up before?
Daniel
__
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] American Flag
I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Thanks, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati __ 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 using em
Hello CSSer's I have a question regarding the differences in font-size I see between Safari 3 and FF2. I am attempting to use the Blueprint CSS and when I customize my font sizes using em Safari seems to render the text slightly larger than FF2 (haven't checked any IE yet). Does anyone know what could be the cause of this? I have never quite been able to get this right but really don't want to use straight px to declare font-size. I am using a 15 mac book pro to develop. Any advice or personal experience with this would be great. Thanks! J __ 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 sizing - Is there a definative method?
Karl Bedingfield wrote: I'm getting confused. There appears to be many ways of font resizing and I cannot make my mind up which is the best method. In the body style some use use 12px and pixel font sizes there after. Some use body style of 100% and percentages there after and finally some use 101% in body with ems there after. Which is the best option for cross-browser performance? Many thanks There is no definitive method. There are numerous theories. Opinions abound. Use the method/theory that best meets your users needs, rather than your need. The 101% (100.01%) as I recall had something to due with a rounding error in Opera (compensation for fonts being a little smaller in that browser). But it is not seen that much in style sheets nowadays. My own opinion is the use of keyword, pixels, em, or percent will all work. Keywords can be problematic, though. Pixels can only be scaled in IE if the user is in accessibility mode with the ignore font-sizes boxed checked (so maybe its not such good idea to use pixels). Em's are fine providing you set a percent base on html, or body declarations, or they'll go totally goofy when scaled (an IE bug). I find using percent throughout the style sheet with line-height set as a raw number (no unit of measure) most consistent /for me/ cross-browser. Typography is a very simple craft whose goal is simply to make words readable. But that ain't easy (particularly on a screen). Honoring user default for the primary content p (user default is medium, 16px, 1em, or 100%) is the way some of us strive to meet that goal. In the end, /it is your call./ -- 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] American Flag
Christopher Schmitt wrote: I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Christopher Schmitt Now who in the world would ever think it would come to this... Yours sincerely, Betsy Ross PS Nice job! -- 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] font-size using em
On Jul 9, 2008, at 11:04 PM, jeffrey morin wrote: I have a question regarding the differences in font-size I see between Safari 3 and FF2. I am attempting to use the Blueprint CSS and when I customize my font sizes using em Safari seems to render the text slightly larger than FF2 (haven't checked any IE yet). Does anyone know what could be the cause of this? I have never quite been able to get this right but really don't want to use straight px to declare font-size. I am using a 15 mac book pro to develop. Any advice or personal experience with this would be great. Thanks! Yes it happens. Blame the old QuickDraw technology used by Fx 2 (Mac)… Fx3 (Mac) renders text with Atsui, the same way as WebKit does. It is not the only factor: differences in how rendering engines round off to the nearest pixels also play a role and differences in subpixel smoothing. For some fonts, Safari 'cheats' a little bit, and kinda uses a hack to match the font-metrics of Times, Helvetica, Courier,... to match their counterparts on Windows (Times New Roman, Arial, Courier New,...) – it is not limited to those 3 fonts. And there are some slight differences between 10.4 and 10.5 as well. Most of the time you won't notice them though. 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] font-size using em
Thanks Philippe, What do you think of using percentages to declare fonts? Any better luck with that? I was involved in a development project once where they used all percentages and IE6 didn't like it but for this project I am not having to develop for ie6 at all (joy oh joy!) On Wed, Jul 9, 2008 at 10:26 AM, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Jul 9, 2008, at 11:04 PM, jeffrey morin wrote: I have a question regarding the differences in font-size I see between Safari 3 and FF2. I am attempting to use the Blueprint CSS and when I customize my font sizes using em Safari seems to render the text slightly larger than FF2 (haven't checked any IE yet). Does anyone know what could be the cause of this? I have never quite been able to get this right but really don't want to use straight px to declare font-size. I am using a 15 mac book pro to develop. Any advice or personal experience with this would be great. Thanks! Yes it happens. Blame the old QuickDraw technology used by Fx 2 (Mac)… Fx3 (Mac) renders text with Atsui, the same way as WebKit does. It is not the only factor: differences in how rendering engines round off to the nearest pixels also play a role and differences in subpixel smoothing. For some fonts, Safari 'cheats' a little bit, and kinda uses a hack to match the font-metrics of Times, Helvetica, Courier,... to match their counterparts on Windows (Times New Roman, Arial, Courier New,...) – it is not limited to those 3 fonts. And there are some slight differences between 10.4 and 10.5 as well. Most of the time you won't notice them though. 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] American Flag
David Laakso wrote: Christopher Schmitt wrote: I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Christopher Schmitt Now who in the world would ever think it would come to this... Yours sincerely, Betsy Ross PS Nice job! This is the second one I've seen this month ! The other one is at http://www.cssnewbie.com/example/us-flag/, but it didn't fully work for me, I got weird symbols instead of the stars. -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ 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] American Flag
You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Christopher Schmitt Well, if you don't mind nurturing obsessive-compulsive tendencies, and if you like a real challenge, instead of using gifs for stars, you could use a method like Chris Hestor did here: http://www.designdetector.com/tips/CSSPencilsDemo.php Nancy __ 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 using em
On Jul 9, 2008, at 11:32 PM, jeffrey morin wrote: What do you think of using percentages to declare fonts? Any better luck with that? That won't make a big difference. If I were you, I wouldn't worry about it. When you factor in the user settings, and the differences in text rendering between platforms, you'll see differences anyway. 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] Font sizing - Is there a definative method?
On 2008/07/09 09:46 (GMT-0500) Ben Fider apparently typed:
this is a good way to get a consistent font size:
* {
font-size: 100.01%; /*
http://css-discuss.incutio.com/?page=InternetExplorerWinBugs */
}
html { /*
http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/
*/
font-size: 62.5%; /* will set your font-size to 10 pixels */
}
body {
font-size:1.2em; /* will set your font-size to 12 pixels */
}
One who makes no meaningful attempt to test as visitors actually use their
browsers might think so, but the only consistencies that approach brings are:
1-FF2 and Opera users who have a minimum font size set only slightly (~80% or
more) or no smaller than their default size, and those with a user stylesheet
containing 'body {font-size: 100% !important}', will not see anything
remotely resembling what IE, FF3 or Safari users will see. Instead of fonts
smaller than their preference as most web sites rudely impose, they'll see
fonts _larger_ than their preference. See:
http://www.bergamotus.ws/misc/sensible-css-text-sizing.html
http://fm.no-ip.com/SS/Clagnut/bbcnSS.html
2-Everyone will be subjected to the rudeness that assuming any main content
font size less than 100% of the user's preference (i.e. default) represents.
That nearly everyone else is rude is not justification to be rude yourself.
See e.g.:
http://tobyinkster.co.uk/article/web-fonts/
http://www.w3.org/QA/Tips/font-size
http://www.useit.com/alertbox/designmistakes.html
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
http://www.dev-archive.net/articles/font-analogy.html
http://fm.no-ip.com/auth/bigdefaults.html
http://www.cameratim.com/personal/soapbox/morons-in-webspace
--
Do not let the sun go down while you are still angry.
Ephesians 4:26 NIV
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] Positioning PHP buttons
Hayden's Harness Attachment wrote:
If you go to:
http://www.choroideremia.org/new/crf_header.php
With Firefox 3.0. You get a page that I would like to see in every browser.
If you downarrow twice everything moves over and I get my Font switcher
buttons at the very top left of the screen. I am trying to move them to
underneath the curve graphic. The CSS is:
switch {
color: Black;
background-color: Silver;
display: block;
font-size: 1.8em;
text-align: center;
left: 200px;
position: absolute;
}
Any ideas on how to get my PHP buttons to align under my curve graphic?
It appears that the PHP is not wrapping the desired style in a style
tag within the head, as well as generating anonymous content within
the body itself.
Once that is rectified, then it can be best determined what in the CSS
is causing the issue.
- HP
__
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] Link attribute syntax
I'm sure my problem is ridiculously simple but it's driving me mad.
Firefox tells me my link is
div#contenuliste-articleul .somm-titrelih3.titrea
What is the syntax for setting the color of the link.
i've tried
a.h3.somm-titre{
color: #eef;
}
a.somm-titre{
color: #eef;
}
a.h3.titre{
color/#eef;
}
cpmac
but it stays black . The general a attribute is at the top of the css
file.
__
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] Link attribute syntax
Colin Mcgarry wrote:
I'm sure my problem is ridiculously simple but it's driving me mad.
Firefox tells me my link is
div#contenuliste-articleul .somm-titrelih3.titrea
What is the syntax for setting the color of the link.
i've tried
a.h3.somm-titre{
color: #eef;
}
a.somm-titre{
color: #eef;
}
a.h3.titre{
color/#eef;
}
cpmac
but it stays black . The general a attribute is at the top of the css
file.
Colin:
Can you show an example of the HTML? Make sure you apply the CSS to the
tags in the right order. If the HTML is the way I think it might be
then maybe something like this will work better:
.some-titre a {
color: #eef;
}
-Adam Ducker
__
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] fixed width layout - make expand only if needed?
I'm pretty sure I can only do this with tables, but it's worth asking for some help. The effect I want to produce is pretty much like a table. Putting a width (min-, if necessary) on a container div, and if (and only if) there's an unbroken string or table should the layout expand. The problem is that min-width is only a min, and I want the max-width to be defined only by the content. Overflow:visible lets the content flow out of the containing box, but it doesn't expand the container. Any help, please? Hayley Kinash Programmer/Web Author St Solo Computer Graphics Email: [EMAIL PROTECTED] Phone: 306.242.7119 ext.6 Fax: 1.877.651.4305 __ 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] EM based layout issue between Firefox and Safari on Mac
On Tue, 8 Jul 2008 16:13:40 -0400, Jason Campbell wrote: I am trying to establish a foundation for an em based layout and I am seeing some discrepancies between Firefox 2 and Safari 3.1.2 on the mac that I had not noticed before. My example file I am referencing is available at http://www.jasoncampbell.com/CSS [...] When I view the page in Firefox 2 everything is wonderful, full image, etcetera. However in Safari 3.1.2 to see the full bg image I have to increase the base font-size to 71.5% I have just been running a series of browser tests using percentages or EMs to see what pixels sizes they create, including on a 120 DPI setup. Yes. I did discover that Safari requires the theoretical percentage to be rounded up to the next higher whole number in order to behave like other browsers. Your 62.5% is being treated as 62% by Safari. I did not test with a base font as small as 62.5%, so can't tell you the cut-off points for various browsers. In general, though, I found that Safari tends to round down EM sizes, making them smaller than IE and Firefox, while Opera tends to round up, making them larger. This is not always noticeable, but seems to affect smaller percentages and EMs more, as you might expect. You may like to reconsider basing sizes for your image in EMs, as there are *many* settings that affect this relationship. FWIW - there are also problems using base font sizes less than 100%, as Georg Sørtun documents here: http://www.gunlaug.no/contents/wd_1_03_04.html 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/
Re: [css-d] American Flag
At 9:57 AM -0400 7/9/08, Christopher Schmitt wrote: I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Thoughts? You have far too much time on your hands. But, that's mondo slick anyway! Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.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] apologies if this is off topic but...
i need to temporarily unsubscribe from this list (as and it isn't working. can anyone help? -- Vincent Pollard http://www.ithinkx.co.uk __ 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] Centering Element W Absolute Positioning?
Hello,
I have a link that I've absolutely positioned in a relatively positioned
container so that it sits 50px up from bottom of container. In order for me to
get the link to look centered I had to style it like so:
#jobad {position: relative; width: 298px; height: 250px; border: 1px solid
#000;}
a {position: absolute; left: 76px; bottom: 50px;}
I wanted to give the left property a value of 50% but that didn't exactly
center it. So I resorted to using a pixel value. Can someone explain why
declaring left: 50% didn't work?
TIA,
Elli
__
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] Centering Element W Absolute Positioning?
Elli Vizcaino wrote:
Hello,
I have a link that I've absolutely positioned in a relatively positioned
container so that it sits 50px up from bottom of container. In order for me
to get the link to look centered I had to style it like so:
#jobad {position: relative; width: 298px; height: 250px; border: 1px solid
#000;}
a {position: absolute; left: 76px; bottom: 50px;}
I wanted to give the left property a value of 50% but that didn't exactly
center it. So I resorted to using a pixel value. Can someone explain why
declaring left: 50% didn't work?
Elli:
It appears that left: 50% is putting the link's left most position at
149px, which is 50% of 298px. This is using the leftmost edge of the
link, not the center of the link like you want, which is why it looks funny.
There are other options you can explore for centering your link other
than absolute positioning if you have other options available...
-Adam Ducker
__
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] EM based layout issue between Firefox and Safari on Mac
David, Thanks for your response, I am surprised to see the rounding you have found but only slightly, heh. The article by Georg was also interesting thanks for the link. From reading it I get the sense that he is expecting that what we are intending is that the body text remain the 10px that setting it to 62.5% creates. Really what I am intending is to create a nice even number I can use to build a layout with. I counteract the 10px for the text size by setting the font-size on interior elements to my actual desired font size. My understanding was that by setting the base font size to 62.5% I made 1em = 10px so then I can use that to style my margins and etc in 10px increments using ems. I can also get 12px font by setting a font size of 1.2em on a container, 14px with 1.4em etc. So it's really something I am doing to work my layout, not my fonts. The issue I was having was because of some local settings I had at some point changed where my font in safari was changed to a 14 point font rather than the default 16 I was expecting. Thanks so much. J. __ 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] EM based layout issue between Firefox and Safari on Mac
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jason Campbell Sent: Wednesday, July 09, 2008 8:18 AM To: David Hucklesby Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] EM based layout issue between Firefox and Safari on Mac David, Thanks for your response, I am surprised to see the rounding you have found but only slightly, heh. The article by Georg was also interesting thanks for the link. From reading it I get the sense that he is expecting that what we are intending is that the body text remain the 10px that setting it to 62.5% creates. Really what I am intending is to create a nice even number I can use to build a layout with. I counteract the 10px for the text size by setting the font-size on interior elements to my actual desired font size. My understanding was that by setting the base font size to 62.5% I made 1em = 10px so then I can use that to style my margins and etc in 10px increments using ems. I can also get 12px font by setting a font size of 1.2em on a container, 14px with 1.4em etc. So it's really something I am doing to work my layout, not my fonts. The issue I was having was because of some local settings I had at some point changed where my font in safari was changed to a 14 point font rather than the default 16 I was expecting. Of course, if you can accidentally change your default font setting, your visitor can deliberately change his or her default font setting, too, and upset all your design calculations. Perhaps it's better to think in terms of a 1em grid than a 10px grid ... David Jones, Content Coordinator, Information and Technology Management, Customer Relations - KL PS, (808) 948-5830 MMS hmsa.com made the following annotations. -- This electronic message is not an offer to contract, the acceptance of an offer to contract, or in any other way intended to contractually obligate HMSA; neither is it intended to change the terms of any existing contract unless specifically so stated. The information contained in this electronic message (or attached hereto) is intended only for the individual or entity to which it is addressed and may contain information that is confidential and protected by law. If you are not the intended recipient of this e-mail, you are cautioned that use of its contents in any way is prohibited and may be unlawful. If you have received this communication in error, please notify the sender immediately by e-mail or telephone and return the original message by e-mail to the sender or to [EMAIL PROTECTED] We will reimburse you for any cost you incur in notifying us of the errant e-mail. 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] Centering Element W Absolute Positioning?
Adam Ducker wrote:
Elli Vizcaino wrote:
I have a link that I've absolutely positioned in a relatively
positioned container so that it sits 50px up from bottom of
container. In order for me to get the link to look centered I had
to style it like so:
#jobad {position: relative; width: 298px; height: 250px; border:
1px solid #000;} a {position: absolute; left: 76px; bottom: 50px;}
I wanted to give the left property a value of 50% but that didn't
exactly center it. So I resorted to using a pixel value. Can
someone explain why declaring left: 50% didn't work?
Elli:
It appears that left: 50% is putting the link's left most position
at 149px, which is 50% of 298px. This is using the leftmost edge of
the link, not the center of the link like you want, which is why it
looks funny.
There are other options you can explore for centering your link other
than absolute positioning if you have other options available...
-Adam Ducker
Hi Ellie,
Adam's explanation is dead-on. I've included a code snippet which should
give you the effect I think you want in most browsers (except FF2 which
I think lacks support for display:inline-block). It requires a wrapper
element, but should do what ya need.
Here's the code. Hope it helps.
--Bill
PS to Ellie: CSS-D has been working fine for me over the past week. In
fact, you've missed some good messages if you've not been receiving
these last seven days or so. More soon (I promise).
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
htmlhead
titlestyle{position:absolute;center:horizontal;}/title
style type=text/css
div.spach {
position: absolute;
text-align:center;
left: 0;
right: 0;
}
h1 {
background:#dedede;
border:1px solid #99;
color: #66;
display: inline-block;
font-family: sans-serif;
padding: 10px;
}
/style
!--[if IE]style type=text/css
div {width: 100%;}
h1 {display:inline;
zoom: 1;}
/style![endif]--
/headbody
div class=spachh1TheHolierGrail:active{version:2.0}/h1/div
/body/html
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
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] Centering Element W Absolute Positioning?
Thanks guys for the clarification and suggested solutions - it helps!
Elli
--- On Wed, 7/9/08, Bill Brown [EMAIL PROTECTED] wrote:
From: Bill Brown [EMAIL PROTECTED]
Subject: Re: [css-d] Centering Element W Absolute Positioning?
To: Adam Ducker [EMAIL PROTECTED]
Cc: [EMAIL PROTECTED], CSS Discuss css-d@lists.css-discuss.org
Date: Wednesday, July 9, 2008, 3:32 PM
Adam Ducker wrote:
Elli Vizcaino wrote:
I have a link that I've absolutely positioned
in a relatively
positioned container so that it sits 50px up from
bottom of
container. In order for me to get the link to look
centered I had
to style it like so:
#jobad {position: relative; width: 298px; height:
250px; border:
1px solid #000;} a {position: absolute; left:
76px; bottom: 50px;}
I wanted to give the left property a value of 50%
but that didn't
exactly center it. So I resorted to using a pixel
value. Can
someone explain why declaring left:
50% didn't work?
Elli:
It appears that left: 50% is putting the
link's left most position
at 149px, which is 50% of 298px. This is using the
leftmost edge of
the link, not the center of the link like you want,
which is why it
looks funny.
There are other options you can explore for centering
your link other
than absolute positioning if you have other options
available...
-Adam Ducker
Hi Ellie,
Adam's explanation is dead-on. I've included a code
snippet which should
give you the effect I think you want in most browsers
(except FF2 which
I think lacks support for display:inline-block). It
requires a wrapper
element, but should do what ya need.
Here's the code. Hope it helps.
--Bill
PS to Ellie: CSS-D has been working fine for me over the
past week. In
fact, you've missed some good messages if you've
not been receiving
these last seven days or so. More soon (I promise).
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML
4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
htmlhead
titlestyle{position:absolute;center:horizontal;}/title
style type=text/css
div.spach {
position: absolute;
text-align:center;
left: 0;
right: 0;
}
h1 {
background:#dedede;
border:1px solid #99;
color: #66;
display: inline-block;
font-family: sans-serif;
padding: 10px;
}
/style
!--[if IE]style type=text/css
div {width: 100%;}
h1 {display:inline;
zoom: 1;}
/style![endif]--
/headbody
div
class=spachh1TheHolierGrail:active{version:2.0}/h1/div
/body/html
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
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 sizing - Is there a definative method?
Thanks for all the help guys, that was very informative :) Karl __ 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] Centering Element W Absolute Positioning?
Just wanted to report that the solution that worked multi browsers: IE6, IE7,
FF2, Mac Safar Mac FF ended up being a combo of both suggestions without any
hacks/conditional comments. I wrapped a p tag around the a href:
p {position: absolute; left: 0; right: 0; bottom: 50px; margin: 5px 0 0;
text-align: center; width: 100%;}
Adam - your suggestion left out the left and right property values which didn't
allow for the p to get centered in IE.
Bill your suggestion was right on but I didn't even need the conditional
comments are the display: inline-block declaration.
Again thank you both!!
Elli
--- On Wed, 7/9/08, Bill Brown [EMAIL PROTECTED] wrote:
From: Bill Brown [EMAIL PROTECTED]
Subject: Re: [css-d] Centering Element W Absolute Positioning?
To: Adam Ducker [EMAIL PROTECTED]
Cc: [EMAIL PROTECTED], CSS Discuss css-d@lists.css-discuss.org
Date: Wednesday, July 9, 2008, 3:32 PM
Adam Ducker wrote:
Elli Vizcaino wrote:
I have a link that I've absolutely positioned
in a relatively
positioned container so that it sits 50px up from
bottom of
container. In order for me to get the link to look
centered I had
to style it like so:
#jobad {position: relative; width: 298px; height:
250px; border:
1px solid #000;} a {position: absolute; left:
76px; bottom: 50px;}
I wanted to give the left property a value of 50%
but that didn't
exactly center it. So I resorted to using a pixel
value. Can
someone explain why declaring left:
50% didn't work?
Elli:
It appears that left: 50% is putting the
link's left most position
at 149px, which is 50% of 298px. This is using the
leftmost edge of
the link, not the center of the link like you want,
which is why it
looks funny.
There are other options you can explore for centering
your link other
than absolute positioning if you have other options
available...
-Adam Ducker
Hi Ellie,
Adam's explanation is dead-on. I've included a code
snippet which should
give you the effect I think you want in most browsers
(except FF2 which
I think lacks support for display:inline-block). It
requires a wrapper
element, but should do what ya need.
Here's the code. Hope it helps.
--Bill
PS to Ellie: CSS-D has been working fine for me over the
past week. In
fact, you've missed some good messages if you've
not been receiving
these last seven days or so. More soon (I promise).
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML
4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
htmlhead
titlestyle{position:absolute;center:horizontal;}/title
style type=text/css
div.spach {
position: absolute;
text-align:center;
left: 0;
right: 0;
}
h1 {
background:#dedede;
border:1px solid #99;
color: #66;
display: inline-block;
font-family: sans-serif;
padding: 10px;
}
/style
!--[if IE]style type=text/css
div {width: 100%;}
h1 {display:inline;
zoom: 1;}
/style![endif]--
/headbody
div
class=spachh1TheHolierGrail:active{version:2.0}/h1/div
/body/html
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
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] Centering Element W Absolute Positioning?
Ellie, I'm interested to know what doctype are you using (if any). The method I outlined works fine for me in all browsers on XHTML transitional but my knowledge of any quirks with regular HTML has softened over the last few years. It seems like left: 0; and right: 0; in conjunction would be superfluous. -Adam Ducker __ 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] image background question
trying to figure out how to use a small image (such as a fat arrow) as
a background. want to be able to re use the arrow and place different
numbers over it. I've tried the following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
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/
[css-d] Width problems with IE7 FF (Content wider in FF)
I've run into another problem. I wondered why my main #content displays correct in IE7 but the #content is wider in FF2/3. I have tried different variations of the code but when I fix one the other displays incorrectly. Can anyone see what I am doing wrong? I also wondered why my image box borders collapse in IE also. Here is a link to a test page: http://www.eilig.co.uk/test/ Here is my CSS: http://paste-it.net/public/e66adb0/ I appreciate your time. Many thanks Karl __ 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] Centering Element W Absolute Positioning?
Adam Ducker wrote: Ellie, I'm interested to know what doctype are you using (if any). The method I outlined works fine for me in all browsers on XHTML transitional but my knowledge of any quirks with regular HTML has softened over the last few years. It seems like left: 0; and right: 0; in conjunction would be superfluous. -Adam Ducker Adam, For absolutely positioned elements left:0;right:0 is essentially the same thing as width:100%...except that IE6 won't recognize it as such, honoring /only/ the right /or/ the left setting. Under normal circumstances, width:100% will give you the effect you want...unless you're using borders, margins, or padding, in which case of course, the width of your box becomes width:100%+borders+margin+padding. In Ellie's case, width:100% would have probably done the trick. Hope it helps. Bill -- /** * Bill Brown * TheHolierGrail.com MacNimble.com * From dot concept...to dot com...since 1999. ***/ __ 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] image background question
Two ideas:
1) a link please so we can see your page, check to see if there are other
issues not apparent in the snippet you provided, etc. Possibly a path
problem to the image? Any number of things could be the case when we
essentially can't see what you see.
2) span tags are inline elements. You might try display:block; on your
span. Not sure.
On Wed, Jul 9, 2008 at 3:47 PM, Kelly Moore [EMAIL PROTECTED] wrote:
trying to figure out how to use a small image (such as a fat arrow) as
a background. want to be able to re use the arrow and place different
numbers over it. I've tried the following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
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/
__
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] American Flag
This looked neat, but in Opera and FF3.0 I could not view it. Tim Dawson wrote: David Laakso wrote: Christopher Schmitt wrote: I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Christopher Schmitt Now who in the world would ever think it would come to this... Yours sincerely, Betsy Ross PS Nice job! This is the second one I've seen this month ! The other one is at http://www.cssnewbie.com/example/us-flag/, but it didn't fully work for me, I got weird symbols instead of the stars. -- *Christopher* - the creative sheep *animator*///motion graphics artist/\\*web dev* web: www.walkfar.ca mailto:[EMAIL PROTECTED] email: [EMAIL PROTECTED] http://www.walkfar.ca/ __ 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] Centering Element W Absolute Positioning?
Adam - I am using the transitional Doctype in this case. Your code snippet left out the left and right property values which caused the p tag to float outside and over to the right in IE6 7, even with the width set to 100% - but as soon as those two values were added, everything fell into place in both IE and all remained well in the other browsers. As an aside - why am I not receiving all email discussions? I missed Adam's post and am only seeing now in Bill's response. --- On Wed, 7/9/08, Bill Brown [EMAIL PROTECTED] wrote: From: Bill Brown [EMAIL PROTECTED] Subject: Re: [css-d] Centering Element W Absolute Positioning? To: Adam Ducker [EMAIL PROTECTED] Cc: [EMAIL PROTECTED], CSS Discuss css-d@lists.css-discuss.org Date: Wednesday, July 9, 2008, 4:54 PM Adam Ducker wrote: Ellie, I'm interested to know what doctype are you using (if any). The method I outlined works fine for me in all browsers on XHTML transitional but my knowledge of any quirks with regular HTML has softened over the last few years. It seems like left: 0; and right: 0; in conjunction would be superfluous. -Adam Ducker Adam, For absolutely positioned elements left:0;right:0 is essentially the same thing as width:100%...except that IE6 won't recognize it as such, honoring /only/ the right /or/ the left setting. Under normal circumstances, width:100% will give you the effect you want...unless you're using borders, margins, or padding, in which case of course, the width of your box becomes width:100%+borders+margin+padding. In Ellie's case, width:100% would have probably done the trick. Hope it helps. Bill -- /** * Bill Brown * TheHolierGrail.com MacNimble.com * From dot concept...to dot com...since 1999. ***/ __ 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] image background question
From: Kelly Moore [EMAIL PROTECTED] hmm, well here is my test page. it seems to work, but this is stand-alone. i had to add a bunch of 's for the full arrow to work. is there a better way to do this? http://yakmaster.net/test/arrowtest.html Kelly, Have you tried setting the arrow image as a background image on the h3 instead of that span and tried to work things out that way? ~holly __ 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] image background question
tried, but without much luck. Kelly, Have you tried setting the arrow image as a background image on the h3 instead of that span and tried to work things out that way? ~holly __ 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] image background question
Kelly Moore wrote:
hmm, well here is my test page. it seems to work, but this is
stand-alone. i had to add a bunch of nbsp; 's for the full arrow to
work. is there a better way to do this?
http://yakmaster.net/test/arrowtest.html
Hi Kelly,
On your test page, one of the problems I encountered was that your 2
is the same color as the background-color, so when it's not directly
over top of the image, I see nothing.
Here's a bit of sample code I use for bullet-image replacement...maybe
it'll be helpful for you:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
htmlhead
titlestyle:focus{bullet:image-replacement}/title
style type=text/css
h1 {
background-color: #dedede;
border:1px solid #99;
color: #454545;
font-family: sans-serif;
padding: 5px;
text-align:center;
}
h3.bii {
background-color: #dedede;
border:1px solid #99;
color: #66;
font-family: sans-serif;
overflow: hidden;
}
h3.bii span.bullet {
background-image:
url(http://destiney.com/images/btn_small_arrow.png;);
background-position: 0 50%;
background-repeat: no-repeat;
display: inline;
float: left;
height:auto !important;
height:27px;
margin-right: 5px;
min-height:27px;
padding-left: 32px;
text-align:right;
width: 2em;
}
/style
!--[if IE]style type=text/css
h3.bii{zoom:1}
/style![endif]--
/headbody
h1Bullet-to-Image Replacement (single line)/h1
h3 class=biispan class=bullet1./span| Item Content/h3
h3 class=biispan class=bullet100./span| Item Content/h3
h3 class=biispan class=bullet999./span| Item Content/h3
/body/html
Hope it helps.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
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] image background question
http://yakmaster.net/test/arrowtest.html
Kelly,
Have you tried setting the arrow image as a background image on the h3 instead
of that span and tried to work things out that way?
Delete the non-breaking spaces from your HTML and change your CSS to the
following -
h3 {
color:#25427c;
font-size:0.9em;
background-image: url(images/orange_indicator.png);
background-repeat: no-repeat;
}
h3 span.orangearrow {
height: 15px;
width: 24px;
margin: 0 10px 0 0;
font-size: small;
text-align: center;
display: block;
float: left;
color:white;
}
~holly
__
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] image background question
From: Kelly Moore [EMAIL PROTECTED] tried, but without much luck. http://yakmaster.net/test/arrowtest.html Please bottom post and leave/include the links so people responding later don't have to go hunt them down. Here's my example - http://members.dslextreme.com/users/cssjedi/css-d/arrowtest.html ~holly __ 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] American Flag
On Jul 9, 2008, at 4:56 PM, Christopher wrote: This looked neat, but in Opera and FF3.0 I could not view it. That's weird. I took screenshots of both Opera and FF3 before I posted the CSS flag. You can see them here: FF3: http://ion.christopherschmitt.com/cssflag/cssflag_firefox3.png Opera 9.5: http://ion.christopherschmitt.com/cssflag/cssflag_opera9-5.png Tim Dawson wrote: David Laakso wrote: Christopher Schmitt wrote: I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Best, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati __ 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] DAC site check please
http://www.fatpawdesign.com/DAC/DACindex.html http://www.fatpawdesign.com/DAC/DACpagecss.css http://www.fatpawdesign.com/DAC/DACresetcss.css Hey All: Would appreciate a site check and critique for my redesign for The Drug Affected Children Website (links above). HTML and CSS validated. I apologize in advance for the huge background image. Working on compressing it without making it look totally naff. Nav links go to existing site. Known issues, 1. 'Hovering' on the nav links seems particularly laggy in Avant and IE8. 2. Gilder-Levin header image replacement not working in Avant. Comments from the 'Directorate' on design, color and typography welcome off-list. Best, Peter www.fatpawdesign.com using Win XP/SP2, FF3.0/IE8/O9/Av11 __ 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] DAC site check please
Peter Hyde-Smith wrote:
http://www.fatpawdesign.com/DAC/DACindex.html
Would appreciate a site check and critique for my redesign for The Drug
Affected Children Website (links above).
Peter
Quick pass in Mac Opera, FF/3, Camino, and Safari all looked fine. Kinda
wonder why all the lead between the navigation links?
I am not able to view it in a PC now. But a quick look at the code
indicates you may hit the em font-scaling bug in IE.
If so add this at the top of the style sheet for correction of it:
html {font-size: 100%;}
PS Hmm. Targeting folks in the Asian community are we..?
--
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] image background question
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Kelly Moore
Sent: Wednesday, July 09, 2008 10:48 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] image background question
trying to figure out how to use a small image (such as a fat
arrow) as a background. want to be able to re use the arrow
and place different numbers over it. I've tried the
following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
any ideas?
Hmmm, perhaps try using padding instead of margin?
David Jones, Content Coordinator, Information and Technology Management,
Customer Relations - KL PS, (808) 948-5830
MMS hmsa.com made the following annotations.
--
This electronic message is not an offer to contract, the acceptance of an offer
to contract, or in any other way intended to contractually obligate HMSA;
neither is it intended to change the terms of any existing contract unless
specifically so stated.
The information contained in this electronic message (or attached hereto) is
intended only for the individual or entity to which it is addressed and may
contain information that is confidential and protected by law. If you are not
the intended recipient of this e-mail, you are cautioned that use of its
contents in any way is prohibited and may be unlawful. If you have received
this communication in error, please notify the sender immediately by e-mail or
telephone and return the original message by e-mail to the sender or to [EMAIL
PROTECTED] We will reimburse you for any cost you incur in notifying us of the
errant e-mail. 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] EM based layout issue between Firefox and Safari on Mac
Of course, if you can accidentally change your default font setting, your visitor can deliberately change his or her default font setting, too, and upset all your design calculations. Perhaps it's better to think in terms of a 1em grid than a 10px grid ... David Jones, Content Coordinator, Information and Technology Management, Customer Relations - KL PS, (808) 948-5830 David, You are absolutely right the visitor could change their default font settings, they can also increase or decrease the font size on the fly. Which is why I think of it as a foundation, I'm using ems with an expectation that the user can change the font size. Setting it to 10px just helps me work my grid out initially. I have no delusions of it being set in stone, but it gives me a place to start one that I can wrap my mind around without too much effort ; ) heh. Cheers, J. __ 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] Width problems with IE7 FF (Content wider in FF)
On Jul 10, 2008, at 5:49 AM, Karl Bedingfield wrote: I've run into another problem. I wondered why my main #content displays correct in IE7 but the #content is wider in FF2/3. I have tried different variations of the code but when I fix one the other displays incorrectly. Can anyone see what I am doing wrong? I also wondered why my image box borders collapse in IE also. Here is a link to a test page: http://www.eilig.co.uk/test/ There is an html comment before the DocType. That puts IE 7 in QuirksMode [1]. In that case, IE uses the incorrect handling of 'width' (the padding is included in the width); other browsers make you 2 columns wider: used width = width + padding-left + padding-right. rm that comment and you should level of the browsers. [1] http://www.satzansatz.de/cssd/quirksmode.html 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] Width problems with IE7 FF (Content wider in FF)
Philippe, so much - you wouldn't imagine just how long I was trying to fix this. Thanks Karl Thank you 2008/7/10 Philippe Wittenbergh [EMAIL PROTECTED]: On Jul 10, 2008, at 5:49 AM, Karl Bedingfield wrote: I've run into another problem. I wondered why my main #content displays correct in IE7 but the #content is wider in FF2/3. I have tried different variations of the code but when I fix one the other displays incorrectly. Can anyone see what I am doing wrong? I also wondered why my image box borders collapse in IE also. Here is a link to a test page: http://www.eilig.co.uk/test/ There is an html comment before the DocType. That puts IE 7 in QuirksMode [1]. In that case, IE uses the incorrect handling of 'width' (the padding is included in the width); other browsers make you 2 columns wider: used width = width + padding-left + padding-right. rm that comment and you should level of the browsers. [1] http://www.satzansatz.de/cssd/quirksmode.html Philippe --- Philippe Wittenbergh http://l-c-n.com/ -- Regards Karl Bedingfield __ 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] EM based layout issue between Firefox and Safari on Mac
Jason Campbell wrote: Of course, if you can accidentally change your default font setting, your visitor can deliberately change his or her default font setting, too, and upset all your design calculations. Perhaps it's better to think in terms of a 1em grid than a 10px grid ... David Jones, Content Coordinator, Information and Technology Management, Customer Relations - KL PS, (808) 948-5830 David, You are absolutely right the visitor could change their default font settings, they can also increase or decrease the font size on the fly. Which is why I think of it as a foundation, I'm using ems with an expectation that the user can change the font size. Setting it to 10px just helps me work my grid out initially. I have no delusions of it being set in stone, but it gives me a place to start one that I can wrap my mind around without too much effort ; ) heh. Cheers, J. There is no place that you can start if your design is based on a grid. By designing a grid you are creating a design based in stone. The more you try to create a dimensional design (especially with ems) the more you cast your design in stone. Go this page. http://www.jasoncampbell.com/CSS/ And via Tools | Options | Content, select 30px from Fonts Colors. Notice how a horizontal scrollbar occurs and the grid is sitting to the left edge of the viewpoint. Is this the layout that you are seeking? -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln __ 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] Width problems with IE7 FF (Content wider in FF)
Karl Bedingfield wrote: I've run into another problem. I wondered why my main #content displays correct in IE7 but the #content is wider in FF2/3. Here is a link to a test page: http://www.eilig.co.uk/test/ Karl /After Philippe/, and with correction of the quirksmode issue he raised, how about we take it up a couple of notches beyond that and try to provide what is also needed to make it work beyond removing the comment above the doctype, validate the markup, ditch some of the redundant and unnecessary code; and, as important (to me, at least) since you posted on another another thread yesterday regarding typography, attempt to make the page readable for children of all ages? Please see the changed source file with change of doctype and different character encoding than you had along with the many changes/comments made to the CSS file. Cursory checked in IE/6, IE/7 and some compliant browsers. html http://www.chelseacreekstudio.com/ca/cssd/v.htm css http://www.chelseacreekstudio.com/ca/cssd/v_files/master00.css HTH J. M. W. Turner -- 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/
