Forum Moderators: not2easy

Message Too Old, No Replies

Firefox and CSS

Wont work

         

malcolmcroucher

11:32 am on Jun 21, 2008 (gmt 0)

10+ Year Member



Anyone know of any reasons why firefox does not apply CSS setting yet internet explorer will ?

Regards

Malcolm

4css

1:02 pm on Jun 21, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



malcolmcroucher,

Are you talking about a web page that you are designing and the style sheet isn't being picked up?

IF you could provide a little more information it would be helpful.

Thanks
4~css

Xapti

1:44 am on Jun 22, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Supply us with the code. Chances are you're using bad CSS or HTML.

malcolmcroucher

7:45 am on Jun 22, 2008 (gmt 0)

10+ Year Member



Hopefully this will help , I added some html and a bit of widget.css code.

=================
Html portion here
=================
<link rel="stylesheet" type="text/css" href="widget.css" />
<link rel="stylesheet" type="text/css"href="widget2..css" />
<link rel="stylesheet" type="text/css"href="widget3.css" />

</head>

<body>

<body onLoad="resizingWindowLoaded(1000, 1000)"
onResize="resizingWindowResized()">

<?php include("headings.php"); ?>
<?php include("heading2.php"); ?>

========================
Some CSS portion here
========================
.Block {
position:absolute;
left:26% ;
top:29%;
height: 36em;
width:40em;
border-right:1px solid white;
Border-top: 1px Solid white;
Border-bottom: 1px Solid white;
Border-left: 1px Solid white;
padding:10px;
background-color:#606060;

}

h2 {
position: Relative;
color :#FF1493;
font-family : Arial ;
font-weight : bold;
font-variant : small-caps;}

=================

andrewtayloruk

3:07 pm on Jun 24, 2008 (gmt 0)

10+ Year Member



This part has two fullstops <link rel="stylesheet" type="text/css"href="widget2..css" />

Whilst this might not be causing your problem it is something that needs changing.

Maybe if you were a bit more specific people might be able to help you.

D_Blackwell

4:02 pm on Jun 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Anyone know of any reasons why firefox does not apply CSS setting yet internet explorer will ?

The provided sample renders CSS in both FF & IE; not the same, or even close, but the CSS is applied.

However, the CSS is inconsistently presented which indicates a high likelihood of errors in other places. Sometimes uppercase, sometimes lower. Sometimes extra space, sometimes not. These are red flags.

malcolmcroucher noted one error, but the small sample has numerous inconsistencies

I would recommend W3C validation of all of the CSS pages, plus the HTML and see what errors can be eliminated.

<html>
<head>
<style>
.block {
position: absolute;
left: 26% ;
top: 29%;
height: 36em;
width: 40em;
border: 1px solid #fff
padding: 10px;
background-color: #606060;
color: #fff;
}
h2 {
color: #ff1493;
font: small caps, bold 1.5em Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
<div class="block">
class="block"
<h2>
HEADING 2
</h2>
</div>
</body>
</html>

malcolmcroucher

8:30 am on Jul 3, 2008 (gmt 0)

10+ Year Member



okay ,

So I removed all the capital letters but it still doesnt work in firefox.

So perhaps you can help me with W3 standards ?

What are those and where can i find out more about them ?

(okay im a dummy)

Regards

Malcolm

riez4

9:55 am on Jul 3, 2008 (gmt 0)

10+ Year Member



@malcolmcroucher

I had a same problem...
IE works the CSS fine but firefox wont,
returned warning from firefox:

The stylesheet [example...] was loaded as CSS even though its MIME type, "text/html", is not "text/css"

But now i have that problem fixed,
just simply add a PHP line:

header('Content-type: text/css')

before it goes the CSS output (in case if u're using a PHP server)

4css

10:58 am on Jul 3, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Malcom,
What dtd are you using?

Ok, for your validation go Here [validator.w3.org]

And for the CSS Specs go here CSS Specs [w3.org]

Validate your (x)html and your css.

You can post your warnings on here if you don't know what they are telling you to do.

malcolmcroucher

8:03 am on Jul 4, 2008 (gmt 0)

10+ Year Member



@4css

I have no idea what dtd means ?

My site is still offline so will only be able to validate it at a later stage.

This is just a general question :

What are the implications of not having validated web sites in terms of html , xhtml and css ?

Regards and thanks a ton for everyones help.

Malcolm

4css

10:58 am on Jul 4, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Malcolm.

The dtd is your doctype definition that is at the top of your page.

example:
_______________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<title></title>
</head>
<body>
</body>
</html>
______________________

I use the xhtml strict for my pages, there are other versions available as well.

Here, from the W3C [w3.org] is a bit of information for you on this. To learn more about it you can google this and find more information on it. Or post m ore questions if you have any and someone will help you with it.

Malcom
What are the implications of not having validated web sites in terms of html , xhtml and css ?

First, the validation process will show if you have any errors in your code for either css or your (x)html. I find that it is a great learning tool, and helps you to find typos, and other errors that you might have that you can miss when trying to trouble shoot your site.

Next, if you do have some errors, it might be the reason why some things don't display correctly for you.

Sometimes, no matter how many times you view your code when things don't layout correctly, you can miss a typo, an incorrectly nested list, a closing tag on your xhtml code.

There is a tool bar that you can get for Firefox called the Web Developers tool bar. With this you can right clik on your page, go to the Web Developer, the side drop out box will have a section that says tools on it. Within that area you will find the tool for validating your local (x)html and css.

I use it all the time. Then when your page goes live, you can always test it again.

Also, if you don't wish to install the tool bar on firefox you can go Here. [validator.w3.org] If you look at the page it has tabs on it. There is a tab there you can click which allows you to copy and paste your code onto the validates site and it will validate it for you.

I hope I was able to help you out a little bit with your questions. Feel free to post more if you have them!

4~css!