Lissa Explains it All:  Web Design Forums  

Go Back   Lissa Explains it All: Web Design Forums > Web Site Help > CSS

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 07-11-2010, 09:37 PM
jazzeerascal jazzeerascal is offline
n00bzilla
 
Join Date: Jul 2010
Posts: 2
jazzeerascal is on a distinguished road
CSS, font size & classes

Help! I've run my coding through w3c validators and nothing pops up, it says it's all fine. I'm trying to use classes to apply different styles to different sections of elements. I'm trying to group elements e.g., links and lists into one class together to make my code neater. Trying to work out why my navigation class won't increase the font size. i also want it kerned slightly closer together, with a small amount of leading to increase the sizing between each line. Now, I've tried this a million ways already and whether I specify an element to a class or not it doesn't work. The only way it worked is when my coding was incorrect (I had grouped a number of elements into one class to specify them, but it was causing elements that I didn't give a class to to inherit the styling anyway - very annoying). Please help!!! It's driving me batty!!

my link as an example is here: http://wordpress.sorayafrench.com/wordpress/hmm/

CSS: /* generated by csscreator.com */
html, body{
margin:0;
padding:0;
background-color:#ff8f40;
}

#pagewidth{
min-width:100%;
}

#header{
position:relative;
height:100px;
background-color:#ff8f40;
width:100%;
}

#leftcol{
width:25%;
float:left;
position:relative;
background-color:#ff8f40;
}

#twocols{
width:75%;
float:right;
position:relative;
background-color:#ff8f40;
}

#rightcol{
width:10%;
float:right;
position:relative;
background-color:#ff8f40;
}

#maincol{
background-color: #FFFFFF;
float: left;
display:inline;
position: relative;
width:90%;
height:70%;
padding:20px;
}


.header{
font-family: arial,sans-serif;
font-size: 175%;
text-align: right;
color:#fb3f51;
}

.headeremail{
font-family: arial,sans-serif;
font-size: 100%;
text-align: right;
color:#fb3f51;
}

.navigation {
font-family: arial,sans-serif;
font-size:32px;
color:#fb3f51;
letter-spacing:-0.05em;
text-align: left;
text-decoration: none;
list-style:none;
}

a:link, a:visited, a:active, a:hover {
font-family: arial,sans-serif;
font-size:12px;
color:#fb3f51;
text-decoration:none;
}

.cv {
font-family: arial,sans-serif;
font-size: 12px;
text-align: left;
color:#000;
list-style:circle;
text-decoration: none;
}

.cvplace {
font-family: arial,sans-serif;
font-size: 12px;
text-align: left;
color:#000;
}

img {
border:none;
}

h2
{font-family: arial,sans-serif;
font-size: 20px;
text-align: center;
color:#fb3f51;
}

h3
{font-family: arial,sans-serif;
font-size: 18px;
text-align: center;
color:#fb3f51;
}

h4
{font-family: arial,sans-serif;
font-size: 14px;
text-align: left;
color:#fb3f51;
}




/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Reply With Quote
Sponsored Links
  #2  
Old 07-12-2010, 02:19 AM
G-commer G-commer is offline
Script Kiddie
 
Join Date: Aug 2005
Posts: 103
G-commer will become famous soon enough
Have you tried moving your .navigation definition below your definition of the normal link styles? CSS styles are read top to bottom, and applied in the same order.

Also, this is what your site looked liked to me, in case you are having browser or operating system issues: http://imgur.com/wZrIY
Reply With Quote
  #3  
Old 07-12-2010, 11:02 AM
jazzeerascal jazzeerascal is offline
n00bzilla
 
Join Date: Jul 2010
Posts: 2
jazzeerascal is on a distinguished road
Quote:
Originally Posted by G-commer View Post
Have you tried moving your .navigation definition below your definition of the normal link styles? CSS styles are read top to bottom, and applied in the same order.

Also, this is what your site looked liked to me, in case you are having browser or operating system issues: http://imgur.com/wZrIY
I've tried it both ways with the same results. For some reason the font size seems to apply itself to the space between the words instead of the words themselves. I've tried setting the font size to EM instead, and also as a %. All with the same result...
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
font size Fanta Tables 3 11-26-2006 12:46 AM
changing color of font for links Darlene7 CSS 6 11-03-2006 01:30 AM
Font size on stylesheet won't work in table Margo Tables 2 06-24-2005 11:37 PM
Font size Problem Nikkular CSS 2 01-23-2005 11:13 PM
menu font size needs to be different.... malachithree10 HTML Help 1 11-04-2003 03:59 AM


All times are GMT. The time now is 02:21 AM.


Powered by vBulletin® Version 3.8.3
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.