homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Help with CSS Code
kaymeis

5+ Year Member



 
Msg#: 4524381 posted 11:38 pm on Dec 2, 2012 (gmt 0)

Can someone explain why the following pieces of code arent rendering on my page?

p.metal{font-family:arial;font-color:#ffb90f;font-size:12px;text-align:center;text-transform:capitalize;}

img.store{display:block;margin-left:auto;margin-right:auto;}

Thanx



.

 

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4524381 posted 1:50 am on Dec 3, 2012 (gmt 0)

Without seeing the rest of your code, including the HTML, it's impossible to tell what the problem might be. There's nothing in the CSS that you posted that would be a problem. You also need to explain what the problem is in more detail. Are the elements invisible or is it just that they aren't being styled as you expect them to be?

You should be able to use a tool like Firebug for Firefox, the Web Developer Toolbar in Firefox or Chrome, or even the Developer Tools in Internet Explorer to see which CSS rules are being applied to these elements. The CSS inspection tools they include can help you diagnose the problem pretty quickly.

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4524381 posted 4:21 am on Dec 3, 2012 (gmt 0)

<!DOCTYPE html>
<html lang="en-ca">
<head>
<style type="text/css">
.metal{color:#ffb90f;font-family:arial;font-size:12px;text-align:center;text-transform:uppercase;}
.store{display:block;margin:0 auto 0;}
</style>
</head>
<body>
<div>
<p class="metal">Test this text</p>
<img class="store" height="300" src="mockup.jpg" width="960">
</div>
</body>
</html>

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4524381 posted 4:43 am on Dec 3, 2012 (gmt 0)

I should have added to the above that if you are going to use a font family then it should be a family of more than 1. A good fall-back these days to cover Windows, MAC, Linux is:

font-family:arial,sans-serif,'Liberation Sans',Freesans;

not2easy

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



 
Msg#: 4524381 posted 4:44 am on Dec 3, 2012 (gmt 0)

nevermind, I saw sevencubed's "page" and thought that was supposed to be the troublesome code. d'oh! But it is true no one can guess what isn't working from the OP.

[edited by: not2easy at 4:49 am (utc) on Dec 3, 2012]

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4524381 posted 4:46 am on Dec 3, 2012 (gmt 0)

^ I don't know I tried it in FF as the OP pasted it and it wasn't displaying properly either so what I offered does.

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4524381 posted 4:52 am on Dec 3, 2012 (gmt 0)

Double doh! We're playing post-it tag. I'm confused, going to bed, good night all :)

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4524381 posted 8:19 am on Dec 3, 2012 (gmt 0)

font-family:arial,sans-serif,'Liberation Sans',Freesans

Whoops! You mean of course

font-family:arial,'Liberation Sans',Freesans,sans-serif

otherwise the last two would never be used. But there's so much overlap between the two linux families, you probably don't need both. (codestyle dot org says that if you don't have the first, there's only a 3% chance you've got the second. At least I think that's what they're saying.)

No matter what else you've got, the last item in your font stack should always be one of the generic five font families. Assuming for the sake of discussion that you've got the nerve to assemble stacks for cursive or fantasy ;)

NathanielB



 
Msg#: 4524381 posted 10:49 am on Dec 3, 2012 (gmt 0)

@kaymeis Are you posting your css in a css file or directly to your page?

Nothing seems wrong with the code above, so it should work fine. First things to check would be:
1. Your linking to your css file correctly (its easy to miss type the location, so double check).

2. If your css is on your web page rather then a css file, check you have put your css in the correct tags as posted above.

3. If after the above, you should check that you haven't used those classes elsewhere on the site, as you may be giving more then the one command for the same class.

4. Check you have closed the tags above these lines of code, if not that could cause the code not to work in some browsers.

5. Check the web page in question in another browser and/or use firebug etc to manually enter the styling to check your not simply seeing a cached copy of the page.

Those are things you can check without help or the need to share your full code or link, so have a look at those first :)

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4524381 posted 4:02 pm on Dec 3, 2012 (gmt 0)

@kaymeis

One last suggestion, because I'm trying to read your mind I'm now thinking you didn't want all letters is CAPS but only the first letter of each word. If yes then substitute text-transform:uppercase; with font-variant:small-caps;

Assuming for the sake of discussion that you've got the nerve to assemble stacks for cursive or fantasy ;)

I eat cursive fantasy stacks for breakfast, with a spoon full of sugar and raspberries :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved