Hey Andy,
I am using css style sheets and they seem to work great in IE but when they are viewed in Mozzilla /Netscape they are completly ignored.
Any advice to using css with mozilla.
OR
What am I doing wrong??????? :shock:
Hey Andy,
I am using css style sheets and they seem to work great in IE but when they are viewed in Mozzilla /Netscape they are completly ignored.
Any advice to using css with mozilla.
OR
What am I doing wrong??????? :shock:
CSS not working in Mozilla???????
Try pasting your stylesheet in the css validator.
What's not working with your CSS is it now showing properly or not being applied at all?
-Andrew Riley
CSS not working in Mozilla???????
The only things I am using on the css are links, hoover, visited etc.
the color change was not working on the links and the margins were not working!
and body attributes for marginheight, width, etc..
I added-- ; clip: rect( )
; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px
and things strarted working.
body {
font-family: "Times New Roman", Times, serif;
font-size: 11pt;
color: #000033;
left margin: 0;
top margin: 0;
margin height: 0;
margin width: 0;
; clip: rect( )
; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px
}
P { font-size: 11pt }
td { font-family: Times New Roman, Times, serif; font-size: 11pt}
th { font-family: Times New Roman, Times, serif; }
A:link { text-decoration: underline; color:"#CCCC33"; }
A:visited { text-decoration: underline; color:#CCCC33; }
A:hover { text-decoration: none; color:#FFFFFF; }
.red { font-family: Times New Roman, Times, serif; color: "#FF0000"; }
.blue { font-family: Times New Roman, Times, serif; color: "#0000FF"; }
Obviously, I have a lot more reading to do yet to get full potential out this css thing
Thanks for the css validator, I ran my (Working) code through it and shows basically everything as an error!
" if it aint broke dont fix it? "
I will attempt to run a more valid code at a latter date.
Thanks for your input
CSS not working in Mozilla???????
This should work for you and mostly validate, except for a few warnings about missing backgrounds.
body {
font-family: "Times New Roman", Times, serif;
font-size: 11pt;
color: #000033;
margin: 0px;
}
P { font-size: 11pt }
td { font-family: Times New Roman, Times, serif; font-size: 11pt}
th { font-family: Times New Roman, Times, serif; }
A:link { text-decoration: underline; color: #CCCC33; }
A:visited { text-decoration: underline; color: #CCCC33; }
A:hover { text-decoration: none; color: #FFFFFF; }
.red { font-family: Times New Roman, Times, serif; color: #FF0000; }
.blue { font-family: Times New Roman, Times, serif; color: #0000FF; }
Also, a small piece of advice that I had to learn the hard way: use classes for each thing you will apply them to, not what the style looks like.
For instance, say you have two places on your site with text that you want to be blue. You set both of them to class="blue". But then later you decide you want one of those sections yellow. Now say you have that particular section on 20 pages (and not set up in a template). You begin to see the problem.
Instead make a class for each thing that you may want to look different. Then you just change you css file and viola! Every place you have that class applied looks different. That way you won't have a class called .blue that makes your text bold italic green 6 months from now. ;)
CSS not working in Mozilla???????
Interesting css bits I've picked up...
You can set an attribute to inherit.
BODY {background-image: url("smiley.png")}
.bla {color: #FF0000; background-image: inherit}
I still haven't found a great application for this, but hey, it's neat.
Also...
I use this one on the site, you can have classes with the same name, but have different visual styles depending on it's parent class/tag. (This example, the color will be different depnding on if the "title" class is inside "mainbox" or "minibox".)
.mainbox{
border: 1px solid #9A98FF;
padding: 1px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
}
.mainbox .title {
background-color: #8A8ACC;
padding-right: 5px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 1px;
background-image: url(/images/title_gradient.png);
height: 21px;
background-repeat: repeat-x;
background-position: bottom;
}
.minibox{
border: 1px solid #9A98FF;
padding: 1px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
}
.minibox .title {
background-color: #8A8ACC;
padding-right: 5px;
padding-left: 5px;
font-weight: bold;
color: #FF0000;
margin-bottom: 1px;
background-image: url(/images/title_gradient.png);
height: 21px;
background-repeat: repeat-x;
background-position: bottom;
}
The code on the page would look like:
This is a main box title
Bla bla bla bla
This is a minibox title
Bla bla bla bla
While this doesn't seem like an amazing feature, think about it. Now you don't have to name classes things like .minibox_title. Also, say you want to move your minibox, all you would have to do is change one class or move the div contating "title" do a different parent div.
Disclamer: It's late as I'm writing this; errors aren't my fault... they're features... really.
-Andrew Riley
CSS not working in Mozilla???????
I am so glad you finally found a way to do that. Seriously. I have always wanted something like that. Both of those things.
CSS not working in Mozilla???????
Wow, and I just posted those out of bordem. I gotta try that more often.
-Andrew Riley
CSS... cont.
Thanks Desolate for the code rewrite and the tip on the classes. This makes complete sense, and I can see myself running into that problem.
et to: Andy
Just cant find the time I had, with the new job to play as much as I used to. or even try to participate on the boards.
Thanks to all, Keep up the good work!
Moredirt...
CSS not working in Mozilla???????
Yea, I know how it is with work taking all the time for play (and it sometimes takes the want to play with it). Don't worry, I went through a period where I didn't do any fun/personal computer work for about two years (and I still came back).
One thing to note, don't force yoursef to do the fun stuff in addition to work stuff, it could burn you out in the long run... and that's not a good thing. One trick I tried to do and had medium sucess was... do the fun stuff at work. If your doing a website/project at work, why not try using css for the entire layout (and not tables) that way the project gets done and you get to learn something new*.
*As Desolate will tell you, just make sure it doesn't make you run behind schedule. He's seen me do that thousands of times.
-Andrew Riley
CSS not working in Mozilla???????
Thanks for the advice,
I am interested in the item you talked about about not using tables? and using all css.
I think you are doing this on you current site?
and possibly think thats the code you left above.
I'll play around with the items above.
Thanks,
Moredirt...