Web Design Forums

ineuw · 22-12-2007, 10:51

I need help to resolve the display differences between IE6 and Firefox 2. The following code displays a simple horizontal line referencing a css style declaration in the header. When viewed with Firefox, it is displayed properly. When viewed with IE6, it looks horrendous. The only way to display this properly in both browsers is to eliminate the css and use deprecated declarations in the <hr> tag. Being new to HTML, I would like to avoid deprecated declarations and base my knowledge on the current HTML 4.01 standard. Am I being too naive?

Comments are greatly appreciated.

ineuw

<html>
<head>
<style type="text/css">
div.hr
{
color: #ff0080;
background-color: #ff0080;
height: 5px;
width: 100%;
}
</style>
</head>
</body>
<br>
<div class="hr"></div>
</html>

haku · 22-12-2007, 11:15

You need conditional comments

ineuw · 22-12-2007, 11:45

Thanks Haku. This works fine in displaying the browsers used but, would you be kind enough to post an example that would apply to my needs? You instruction would be greatly appreciated.

ineuw

haku · 22-12-2007, 20:42

create a conditional comment for IE6 below the rest of your CSS sheet attachments, then set element styles within that sheet until your site looks proper in IE6. If someone does it for you, you will never figure out how to do it. Try it out and if you are having troubles, post your code and ask for help. But getting someone to do it for you isn't going to do anything, because you wont learn anything that way.

edit: Upon re-reading your post, I realized that you apparently didn't understand what conditional comments do. They add a separate CSS sheet that applies only to the browser mentioned in the comment, and not to other browsers. So since you are having troubles with IE6, you should do what I said above - create a stylesheet just for IE6 and then play with it until your site looks right in IE6.

freelancr · 23-12-2007, 04:47

Conditional Comments can be used for much more than merely linking to another stylesheet. Any (X)HTML can be added between the conditional tags.

About Conditional Comments

I have had problems with HR's looking different, or just crap, when using them in the past, and as I like to prefer to code using XHTML Strict 1.0, I don't think you can use the "noshade" attribute. To solve this I usually used a div, and gave it a height and a image background - looks much nicer.

haku · 23-12-2007, 05:10

No kidding! I didn't realize you could add any xhtml to conditional comments. Good info!

22-12-2007, 10:51	#1 (permalink)
ineuw Registered User Join Date: Aug 2006 Posts: 17	Help needed in resolving browser anomalies I need help to resolve the display differences between IE6 and Firefox 2. The following code displays a simple horizontal line referencing a css style declaration in the header. When viewed with Firefox, it is displayed properly. When viewed with IE6, it looks horrendous. The only way to display this properly in both browsers is to eliminate the css and use deprecated declarations in the <hr> tag. Being new to HTML, I would like to avoid deprecated declarations and base my knowledge on the current HTML 4.01 standard. Am I being too naive? Comments are greatly appreciated. ineuw <html> <head> <style type="text/css"> div.hr { color: #ff0080; background-color: #ff0080; height: 5px; width: 100%; } </style> </head> </body> <br> <div class="hr"></div> </html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

22-12-2007, 11:15	#2 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,007	You need conditional comments

22-12-2007, 11:45	#3 (permalink)
ineuw Registered User Join Date: Aug 2006 Posts: 17	Thanks Haku. This works fine in displaying the browsers used but, would you be kind enough to post an example that would apply to my needs? You instruction would be greatly appreciated. ineuw

22-12-2007, 20:42	#4 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,007	create a conditional comment for IE6 below the rest of your CSS sheet attachments, then set element styles within that sheet until your site looks proper in IE6. If someone does it for you, you will never figure out how to do it. Try it out and if you are having troubles, post your code and ask for help. But getting someone to do it for you isn't going to do anything, because you wont learn anything that way. edit: Upon re-reading your post, I realized that you apparently didn't understand what conditional comments do. They add a separate CSS sheet that applies only to the browser mentioned in the comment, and not to other browsers. So since you are having troubles with IE6, you should do what I said above - create a stylesheet just for IE6 and then play with it until your site looks right in IE6.

23-12-2007, 04:47	#5 (permalink)
freelancr Senior Member Join Date: Oct 2006 Posts: 2,060	Conditional Comments can be used for much more than merely linking to another stylesheet. Any (X)HTML can be added between the conditional tags. About Conditional Comments I have had problems with HR's looking different, or just crap, when using them in the past, and as I like to prefer to code using XHTML Strict 1.0, I don't think you can use the "noshade" attribute. To solve this I usually used a div, and gave it a height and a image background - looks much nicer.

23-12-2007, 05:10	#6 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,007	No kidding! I didn't realize you could add any xhtml to conditional comments. Good info!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)