Jump to content
Sign in to follow this  
darknightelor

CSS won't work on firefox

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites
Text-align is one word, hyphenated.
.right {text-align:right;}

How silly of me, I didn't even notice that. :)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites
.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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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); }

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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">

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...