laszlomajor Posted October 28, 2006 Share Posted October 28, 2006 I am new in css and I was trying to make something very simple. It did not work in Firefox 1.5 and Netscape 8.1 but worked in IE 6. I was using Amay 9.52 (found on w3 homepage) to write code. My css file is as simple as this:hr {width: 90%; color: #00ff00}p {margin-left: 100px; color: red}Only hr width was displaid correctly in Firefox and Netscape but IE displaid all correctly. Former ones did not display neigther color nor margin.I even tried to ommit all spaces:hr {width:90%; color:#00ff00}p {margin-left:100px; color:red}Still does not work.Can anyone help on this issue? Thank you Link to comment Share on other sites More sharing options...
shiftJIS Posted October 29, 2006 Share Posted October 29, 2006 First, get Firefox 2. It has an inline spell checker.The CSS looks okay. I personally would put ending semi-colons on the second statements, but I don't think the browsers mind. It validates at least.Because the CSS is okay, I suspect the issue is with the HTML (or perhaps you have another stylesheet somewhere?) I'll need more info than what you have so far. Link to comment Share on other sites More sharing options...
laszlomajor Posted October 29, 2006 Author Share Posted October 29, 2006 Dear shiftJIS San,Thank you for your reply.When I tried today again the margin and the paragraph color worked. I do not know why. However, the green horizontal line works only in IE6. First, get Firefox 2. It has an inline spell checker.The CSS looks okay. I personally would put ending semi-colons on the second statements, but I don't think the browsers mind. It validates at least.Because the CSS is okay, I suspect the issue is with the HTML (or perhaps you have another stylesheet somewhere?) I'll need more info than what you have so far.I have installed Firefox 2. Still grey only horizontal line. The semi-colons did not change the behavior.For your reference here are all the files in the folder:test.gifindex.htmltest.cssThe content of the css file is only:hr {width: 90%; color: #00ff00}p {margin-left: 100px; color: red}The content of the index.html is:<?xml version="1.0" encoding="iso-8859-1"?><!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"><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>test</title> <meta name="generator" content="amaya 9.52, see http://www.w3.org/Amaya/" /><link rel="stylesheet" type="text/css" href="test.css" /><style type="text/css">body {background-image: url('test.gif');background-repeat: no-repeat;background-attachment: fixed}</style></head><body><p>TEST</p><hr><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p><p>FIX</p></body></html>Even if I remove the fix background it is not working.I hope you or other forum member can find why it does not display properly the color of the horizontal line in Firefox and Netscape. Other colors also do not work.Domo arigatou Link to comment Share on other sites More sharing options...
shiftJIS Posted October 29, 2006 Share Posted October 29, 2006 Your spelling has improved.When I first saw the problem, I didn't notice that you were trying to style the hr line a different color. Yes, I can realize that that's a problem because, according to w3, "presentation attributes of the hr element were deprecated in HTML 4.01". Firefox still allows the setting of a color for the hr though, but it's through background-color.Try a css of: hr { width: 90%; color: #00ff00; background-color: #00ff00;}p { margin-left: 100px; color: red;} The thing is now, this will make the hr colored in IE and Firefox, but isn't fully supported with other browsers. From what I read online, there might be some browsers out there that don't behave the way you intend it to. Just google for "css hr color" and you can find lots of discussion and lots of methods of doing this. Link to comment Share on other sites More sharing options...
laszlomajor Posted October 30, 2006 Author Share Posted October 30, 2006 Dear shiftJIS San,Thank you for your help. It works now in Firefox and Netscape also.However, it has a thin black border on top and on the left side. It is more obvious by increasing the height. But at least it is colored now. Domo arigatouLaszlo Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now