Ugh... WTF is going on here ?.

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|128\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Ugh... WTF is going on here ?.
Thu, 18 Dec 2008, 22:16
steve_ancell	I have just started to dig into CSS, but have found something puzzling. The HTML/CSS below, works fine with all the colours in FireFox, but in Internet Explorer 7, it just renders the text as black. Where did I go wrong, I have not got a clue. Thanks in advance <html> <head> <style media="screen" type="text/css"> obj1{color: red;} obj2{color: green;} obj3{color: blue;} </style> </head> <body> <obj1> <h1>First Line !</h1> </obj1> <obj2> <h3>Second Line !</h3> </obj2> <obj3> <p>Third Line !</p> </obj3> </body> </html> --v
Thu, 18 Dec 2008, 22:48
HoboBen	<Obj1/2/3> aren't valid html elements. For generic blocks like that, you would use <div>. Or, in this case, you can apply the styles straight to each element by giving them a class. Here's several ways of doing it - each should look the same, but work quite differently. Here ".obj1" in the CSS means that it will apply to any element with the class="obj1" attribute: <html> <head> <style media="screen" type="text/css"> .obj1{color: red;} .obj2{color: green;} .obj3{color: blue;} </style> </head> <body> <h1 class="obj1">First Line !</h1> <h3 class="obj2">Second Line !</h3> <p class="obj3">Third Line !</p> </body> </html> --v Here "h1.obj1" in the CSS means that it will only apply to any <h1> element with the class="obj1" attribute: <html> <head> <style media="screen" type="text/css"> h1.obj1{color: red;} h3.obj2{color: green;} p.obj3{color: blue;} </style> </head> <body> <h1 class="obj1">First Line !</h1> <h3 class="obj2">Second Line !</h3> <p class="obj3">Third Line !</p> </body> </html> --v Here we're applying styles to every h1, h3, or p element <html> <head> <style media="screen" type="text/css"> h1 {color: red;} h3 {color: green;} p {color: blue;} </style> </head> <body> <h1>First Line !</h1> <h3>Second Line !</h3> <p>Third Line !</p> </body> </html> --v Here's another way of doing what you did originally <html> <head> <style media="screen" type="text/css"> .obj1 {color: red;} .obj2 {color: green;} .obj3 {color: blue;} </style> </head> <body> <div class="obj1"> <h1>First Line !</h1> </div> <div class="obj2"> <h3>Second Line !</h3> </div> <div class="obj3"> <p>Third Line !</p> </div> </body> </html> --v Hope that helps! -=-=- blog \| work \| code \| more code
Thu, 18 Dec 2008, 22:54
steve_ancell	I'm sure I can get some sense from that. Cheers Ben
Thu, 18 Dec 2008, 23:00
steve_ancell	Yay, it works !. Thanx again Ben
Thu, 18 Dec 2008, 23:19
HoboBen	No problem Yell if you need any more tips.
Fri, 19 Dec 2008, 00:07
steve_ancell	OK, cheers