Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 9:10 PM, Elli Vizcaino wrote:
> I also think you're convinced it's an absolute path issue but it's not. You
> get an error message because I'm a WP and it's PHP driven and directories
> just work a little differently - people just cant get direct access to a
> directory on WP, just because it exist - it just doesn't work that way. And
> as already stated several times FF doesn't render the font even w the
> absolute path.
Really you had two issues going on. First was your pathing issue
which prevented the rest of us from seeing the problem (unless we had
the font installed) and you did get that corrected for creampuff and I
was able to verify that the font is now downloading properly with no
errors. The second issue as was pointed out is that the font file
itself was corrupt. BTW, if you still wanted to use the creampuff
font I was able to download a good, non-corrupted, version (in all the
supported formats) from here http://www.fonts2u.com/creampuff.font and
it includes the @font-face download with a stylesheet containing the
necessary @font-face code. I did download your code and was able to
get it working locally in all browsers. Here's the @font-face I used
with the font files downloaded from the link above:
@font-face {
font-family:"Creampuff";
src:url("../fonts/CREAMPUF.eot?")
format("eot"),url("../fonts/CREAMPUF.woff")
format("woff"),url("../fonts/CREAMPUF.ttf")
format("truetype"),url("../fonts/CREAMPUF.svg#Creampuff")
format("svg");
font-weight:normal;
font-style:normal;
}
Also the error message I received was not because of WP, it was the
standard 404 error you get for any resource that the browser tries to
download that doesn't exist in that location on the server. In this
case you're path was pointing to
http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf which clearly
the font file did not reside at that location, and as I've said you've
fixed that piece. It's always a good idea to open up the developer
tools in either chrome/safari/ie/firefox and make sure the resources
your html is requesting don't throw 404 errors due to improper paths.
I went ahead and took some screenshots of the SOF project you
referenced as "working" so you could see what I'm seeing with that
project. Again I downloaded a good copy of "Little Days" font from
the same site I got creampuff from and I downloaded your code locally
so you can see the difference between "Little Days" not working and it
working. Here is what I see in Chrome 16 for your SOF site:
Top half of page:
http://www.flickr.com/photos/meenfrmr/6641808481/in/photostream/
Bottom half of page:
http://www.flickr.com/photos/meenfrmr/6641808435/in/photostream/
Here's what your site looks like on my local desktop (local code) with
"Little Days" working:
Top half of page:
http://www.flickr.com/photos/meenfrmr/6641808569/in/photostream/
Bottom half of window:
http://www.flickr.com/photos/meenfrmr/6641808525/in/photostream/
--
Jason Arnold
http://www.jasonarnold.net
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino wrote: > Can you tell me what version of Chrome and OS you're viewing from? And have > you checked it out in any other browsers? Because it was never an issue > before. The link had been up for discussion in another post a couple of weeks > ago and plenty of people on the list saw it and responded. No one has ever > reported not seeing Little Days at all. So this is really surprising as this > is the first time I'm hearing this. > > > Creampuff on the other hand is the font in question for this topic and the one > that doesn't show up for me in FF but does on all the other browsers. My > chrome version is 16. If you cold post a screen shot w browser and OS details > that would be awesome! This is the case in all browsers I checked with on Windows XP (IE7, Chrome 16, FireFox, Safari) and Mac OS X 10.7 (Chrome 16, Firefox, Safari). I mentioned littledays.ttf because you said it worked and that you used that same code for creampuff.ttf, but the reason creampuff.ttf doesn't work is because you never had working code to begin with since you're littledays.ttf does not work either. Currently, the font that renders on your http://www.e7flux.com/clients/sof/ project for me is Monotype Corsiva since that is a font I have installed on my machines, but Little Days does not render and no browser is able to get the font file because the browser is looking in the wrong place based on your "src" property. When you use a path like "fonts/creampuff.ttf" that is relative to where your css file is located at and so the browser is going to look in "http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf";. I would send a screenshot of what I'm seeing but I'm between moves and my servers are currently down. I would suggest using absolute urls for these things or use the next best thing "/e7flux2012/fonts/creampuff.ttf" since that will point the browser at the root of your site and build the path out to the proper spot. Once you get the "src" property set correctly things should be working much better. As to why people may see the fonts just fine, one thing to keep in mind is that if you have the font installed on your computer then you will see the font show up just fine because your computer has the font and the browser is able to grab it from your machine. This is also why others may have had no problem viewing your page with the specified font. If you want to test @font-face make sure you test it from a machine that doesn't already have the font installed. -- Jason Arnold http://www.jasonarnold.net __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 2:30 PM, Elli Vizcaino wrote:
>
>
> The font is in its own directory. The link you provided places the the fonts
> directory within the CSS directory. I don't know why it's a problem this time
> around because the way I wrote my CSS code is exactly how I used it in
> another project (http://www.e7flux.com/clients/sof/) and it works fine.
>
> @font-face {
> font-family: Creampuff;
> src: url('fonts/creampuff.ttf') format('truetype');
> font-weight: normal;
> }
>
Are you sure it's working in your other project
(http://www.e7flux.com/clients/sof/)? Because when i go to that site
I get the same error message in chrome for littledays.ttf and that
font definitely does not show up. Your issue is you're using the
relative src from where the css is located if you wanted. Using
fonts/creampuff.ttf tells the browser to look at
site.domain.com/location-of-css/fonts/creampuff.ttf. If you used
/fonts/creampuff.ttf then the browser will look for the file in
site.domain.com/fonts/creampuff.ttf. This is also the issue with your
other project for the littledays.ttf file. So you have two choices,
you can either 1) correct your src property in your @font-face or 2)
move the font files to a "fonts" folder inside the folder where your
css file is located.
--
----
Jason Arnold
http://www.jasonarnold.net
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 1:16 PM, Elli Vizcaino wrote: > Ok so I tested on latest versions of Chrome, Opera, Safari for Windows, IE9, > IE8, IE7 and they are all rendering the font. It's in FF where I'm having the > problem. I tested in both FF3.6 & 9 and what you see on those versions of FF, > is the fallback font (Brush Script STD) of the font stack. The other > browsers render "Creampuff" as it should. Please find link below: > > http://www.e7flux.com/e7flux2012/ are you sure you're referencing the proper location for your font? I get Comic Sans in all browsers and when I look at the developer console in Chrome I see this error: Failed to load resource: the server responded with a status of 404 (Not Found) http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf -- -------- Jason Arnold http://www.jasonarnold.net __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a simple form look identical across the main browsers
On Sun, Apr 25, 2010 at 3:45 PM, John Franks wrote: > Here is my main problem - I need it to look identical in all of the following > main browsers, including having the text vertically align in the center of > the input fields i.e. line heights etc: > > - Internet Explorer versions 7 and 8 > > - Chrome > > - Firefox > > - Opera > > - Safari > > I have really tried but just can't get it looking anything near identical > across the different browsers. Please help. Thanks very much in advance. John. I know you already have the solution to your issue but I think this needs to be noted: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ -- ---- Jason Arnold http://www.jasonarnold.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color
On Tue, Feb 23, 2010 at 9:01 AM, Tom Livingston wrote: > List, > > What is the reasons for using: > > background: #fff; > > > > instead of: > > background-color: #fff; > > > > I've seen this lately, and wonder why the preference for the first > one. I've only used 'background' as shorthand for something like: > > background: #fff url(images/image.png) left top no-repeat; > > Which is better or more correct? Neither is "more correct" and "better" depends on the situation. "background" is just one of the many shorthand properties you can use like margin, padding or border. It can save you a lot of text by not having to specify each specific element of background and instead groups them up in one nice rule. It really depends on your coding style and if you're looking to minimalize the size of your CSS. Really, though, both are fine to use. -- Jason Arnold http://www.jasonarnold.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Issues with padding
On Fri, Feb 5, 2010 at 8:56 AM, WILSON, BECKY wrote:
> I am having trouble with padding around the text body, see:
> http://www.sc.edu/aes/index.shtml
>
>
>
> Here is the CSS I'm using:
>
> #mainContentPad {
>
> padding-top: 15px;
>
> padding-right: 15px;
>
> padding-bottom: 15px;
>
> padding-left: 15px;
>
> }
You definitely want to run your site through validation first as there
are several errors with your code using the DOCTYPE you're using for
the page(You're evidently missing an end div tag btw). I was able to
get your page to work in firefox (haven't checked in IE) by changing
your style for #mainContentPad to:
#mainContentPad {
padding: 15px;
width: 538px;
float: left;
}
whether or not that's the best approach I don't know but it fixed your
issue in firefox.
--
--------
Jason Arnold
http://www.jasonarnold.net
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sarfari seems to be reading IE conditional comments
On Thu, Jan 28, 2010 at 9:03 AM, Kevin Leebroderick wrote: > I was wondering if anyone else has come across Safari reading the [if IE] > comments. I am viewing a site I am building on Safari 4.0.4 and was > inspecting the pages h1 tag when I saw that it was referencing my > iemaster.css. > > The site can be viewed at" > http://www.leebroderickweb.com/preview/raymondbroderick > > If you inspect the div#content h1 "Focusing on treating trauma and its > effects on you and your family" you can see that it is picking up the > letter-spacing defined in my iemaster.css. > I am calling the this css in the following way: > rel="stylesheet" media="screen,projection" /> > > I am not sure if it is in the way I declared the iemaster.css or if > something else may be going on. Was wondering if anyone had some insight on > this. > > Thanks Kevin Kevin, You didn't write the ie conditional comment correctly. For it to work the way you want it to work the tag needs to be part of the html comments like this: The way you currently have it the link tag will be read by all browsers(not just safari). If you wanted only non-IE browsers to see your link then the way you have it is correct just change the [if IE] to [if !IE]. -- Jason Arnold http://www.meenfrmr.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
