Jump to content

CSS won't work on firefox

darknightelor

By darknightelor
in CSS

Recommended Posts

darknightelor Newbie

darknightelor

Posted
Posted

Hello all.I've written an html page, and validated it as proper XHTML according to the validation system W3C providesThe problem is, the changes I insert at the CSS (all according to the tutorial in this site, with the link=

<link id="css" href="style.css" type="text/css" rel="stylesheet" />

)it just won't work on firefox. Which means, it works perfectly fine on IE. And one more thing, when I use ".right{text align:right}" it won't promise the direction of the text (dir in html ="rtl"), which means I still have to write it in the html instead CSS.Please, anyone, help.

Link to comment
Share on other sites
Kingy Member

Kingy

Posted
Posted

Try this!<link rel="stylesheet" type="text/css" href="style.css" />It's basically the same but took out the id, I don't know why you've got the id in there personally.Also try leaving a space in your next part and and a semi colon to the end of it, see what that does:.right {text align: right;}

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Text-align is one word, hyphenated.

.right {text-align:right;}

Direction is handled by the unicode-bidi and direction CSS properties.

.right {text-align:right;unicode-bidi:bidi-override;direction:ltr;}

Link to comment
Share on other sites
darknightelor Newbie

darknightelor

Posted
  • Author
Posted
It's basically the same but took out the id, I don't know why you've got the id in there personally.
1)The "id" tag wasn't my problem. I tried with or without it. The fact is, the CSS works fine on Internet Explorer, but Firefox won't accept it. Which is weird, because my firefox accepts simple CSS commands like the one in the tutorial. So can someone please explain, what can possibly make a difference between IE and Firefox, when the commands are all the same (my firefox is the latest version).2) I did the code with hyphenated, just missed writing it here. But thanks, I think unicode-bidi will work.Now all is left is the first question. I want to emphasize once more: The CSS code works fine on IE.PS: If you'd like, I can post here the whole HTML code and the CSS code refering to it.
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
PS: If you'd like, I can post here the whole HTML code and the CSS code refering to it.
That would be good, or even better, a link to your page.
Link to comment
Share on other sites
darknightelor Newbie

darknightelor

Posted
  • Author
Posted

Sorry, I've yet to upload this page to the WWW. So I hope the code will help you. Ignore the words in the foreign language, it's Hebrew, in case you asked yourself.

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">  <head><link rel="stylesheet" type="text/css" href="Style.css" />    </head> <body class="leftframe"><br /><h1 id="center" class="center" > <u> <b> מקצועות </b> </u> </h1><p id="right" class="right"> <a href="Minhal Vekalkala.html" target="middle1">מינהל וכלכלה</a> </p><p id="right" class="right"> <a href="default.html" target="middle1"> פיסיקה</a> </p><p id="right" class="right"> <a href="default.html" target="middle1"> מתמטיקה  </a> </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><p id="right" class="right"> <a href="middle1_frame.html" target="middle1"> חזרה לעמוד הראשי  </a> </p> </body></html>

And now the CSS code:

p.right{text-align: left}p.center{text-align: center}body.leftframe{background-image: url(rightview.bmp)}

As you can see, I've classified AND ided the links, that's because when I tried each alone it didn't work. Apparently it didn't work together as well, in Firefox.None of the values in the CSS works in firefox, (i.e: align+background), but works on Internet Explorer. Try opening it with your Firefox, tell me if there's any luck.PS: The HTML was validated as proper XHTML.Thank you.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I don't see any problem with it. I tested on my computer.There are two things that you might have overlooked:p.right{text-align: left}You're aligning the text to the left here, not to the rightp.center{text-align: center}<h1 id="center" class="center" >This isn't going to work on the <h1> element because you've put a P before it.Why not try this? .center {text-align: center}

Link to comment
Share on other sites
darknightelor Newbie

darknightelor

Posted
  • Author
Posted
.right{text-align: left}You're aligning the text to the left here, not to the rightp.center{text-align: center}<h1 id="center" class="center" >This isn't going to work on the <h1> element because you've put a P before it.Why not try this? .center {text-align: center}
1.I've done it on accident, but it doesn't matter, does it. I wanted my align to be left, doesn't matter what class I give it.2.I've done what you wrote, it doesn't help. and the problem is also with the background which doesn't show on firefox.3.As I've stated 4 times before, it works fine, just the way I want it to on Internet Explorer, but not on firefox.4.By the way, that page is a frame in another HTML page, maybe it has something to do with it?Okay, have you tried these codes on Firefox? Did it work? If so, the problem might be with my firefox, eventhough other codes of CSS (like the one in the w3school tutorial) works on him. I have no idea why it's not working for me. I hoped someone could help me...Please people, don't let me down...Don't let me lose hope on Firefox and give up to IE (whats more, I need all firefox users to see my page too!)!!!PS: How do I make the color of the text to be taken from a picture, like the background?
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I copied your code into a document and tested in Firefox and it works just fine for me.I'd need to test your page online to see what the problem is.There's no way to take a color from an image.

Link to comment
Share on other sites
darknightelor Newbie

darknightelor

Posted
  • Author
Posted
I'd need to test your page online to see what the problem is.
Fine, I've uploaded it all to the web via a free host. The loading time of the page is pretty long, but it will fully load eventually. Only on Firefox it won't show you the Right_frame, you'll be able to see it at IE. This is what happens to me.Please, review it for these two days, afterwards I'm going to get it down.http://sandybox.110mb.com/Note: Only the frame on the right side of the screen uses the CSS file (I wanna solve this problem first before refering the whole site to CSS).Note2: There's a very small chance you might get into a site of inappropriate content (not for children) because of the host ads, if so, I am truely sorry. The site I made has no offending content. I'm also apologizing the words might look like japanese for you :) I'd have asked this question in Hebrew forum, but I trust you pros more.PS: I've also uploaded here two links to screenshots of my site, one using Firefox, and one using IE. You can guess which is which (I'm uploading this in case the problem is in my computer).Link 1: http://img227.imageshack.us/img227/2461/ss1vo6.jpgLink 2: http://img292.imageshack.us/img292/2408/ss2vf9.jpgThank you again, for dedicating time to help people like me.
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Here's a list of errors I'm getting:Line 1: Unexpected end of file, expecting ',' or '{'. Rules ignored due to bad selectorhttp://sandybox.110mb.com/Style.cssLine 1: Unexpected end of file, expecting closing }http://sandybox.110mb.com/Style.css---This line in your CSS file doesn't make sense:

tags.p."right"{text-align:"right"}

I don't know about the rest, your CSS file doesn't seem to be working well.Maybe you shouldn't have a line break at the beginning of the file, and you should organize your CSS like this:

h1 { text-align: center; }h1 {  font-size: 26pt;  color:gray;}.right {  text-align: right;  color:green;  unicode-bidi:bidi-override;  direction:rtl;}.leftframe { background-image: url(rightview.bmp); }

Link to comment
Share on other sites
darknightelor Newbie

darknightelor

Posted
  • Author
Posted

Omg, I realized what the problem is. I saved the HTML file as UNICODE and not as ANSI, when I save as ANSI it works on firefox, otherwise it won't!!Please, you gotta help me people, I need to use unicode because I'm using a foreign language-hebrew, and it can't be shown on ANSI, Please, I beg, anyone, help me!

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Try adding a meta tag that specifies the charset as UTF-8 (and change the encoding back to UTF-8).

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Link to comment
Share on other sites
darknightelor Newbie

darknightelor

Posted
  • Author
Posted
Try adding a meta tag that specifies the charset as UTF-8 (and change the encoding back to UTF-8).
<meta http-equiv="content-type" content="text/html; charset=utf-8">

Thanks, I'll use it. But I just realized my problem was that I didn't save the CSS as Unicode too, like the html...lol, how awkward.Thanks for all the help.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...