scorpion Posted May 10, 2010 Report Share Posted May 10, 2010 I have, with help from this forum, developed my website using Notepad++ to display correctly with FF IE6 and IE7. I have made a point of validating all my pages to HTML4 Strict. ww w.irish type3 dna.org/ (remove 3 spaces) Yesterday I saw my website rendered in IE8 for the first time, and I was appalled! Two problems were overcome quickly but the following, while I was able to find a workaround, has me wondering what gives? I use a horizontal dividing bar between sections on my page, centered. Code as follows:- CSS hr { /** A light full-width line **/ text-align:center; } hr.bar { /** Blue Dividing Bar **/ width:200px; height:4px; color:#506F89; background-color:#506F89; text-align:center; border:none; } HTML <hr class="bar"> This displayed centered in FF, IE6 and IE7 but left justified in IE8. As my centering class works fine for images and tables, even with IE8, I tried that. CSS .center { text-align:center; } HTML <div class="center"><hr class="bar"></div> But this was no better. So I have taken an image of the bar and found the following works in IE6, IE7, IE8 and FF. <div class="center"><img src="images/bar.jpg" alt="" width="202" height="7"></div> This solution validates correctly, as did the original, so why does IE8 not respond the same as IE7 and FF? Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 10, 2010 Report Share Posted May 10, 2010 (edited) The hr tag is a block element according to this:- http://htmlhelp.com/reference/html40/block.html so try margin: auto instead of text-align: center:- hr.bar { /** Blue Dividing Bar **/ width:200px; margin: 0 auto; height:4px; color:#506F89; background-color:#506F89; /*text-align:center;*/ border:none; } as text-align: center is for inline elements. When Microsoft developed IE8 they said it would be the most standards-compliant browser and in this case it seems that they were right as other browsers are applying text-align to hr when they should not (although it's helpful when browsers are tolerant of mistakes in coding and IE8 is not tolerating wrong coding here). Edited May 10, 2010 by Wickham Quote Link to comment Share on other sites More sharing options...
scorpion Posted May 10, 2010 Author Report Share Posted May 10, 2010 Hi Wickham, Well I tried your suggestion but it does not work either ... Unless there are any other suggestions, I might stick with the image, at least it works but not so elegant. Quote Link to comment Share on other sites More sharing options...
lm Posted May 10, 2010 Report Share Posted May 10, 2010 have you tried conditional comments for IE8? Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 10, 2010 Report Share Posted May 10, 2010 I tested my answer in IE8 and it centered! You must have some other code affecting it. Post a link to your online page. Quote Link to comment Share on other sites More sharing options...
scorpion Posted May 10, 2010 Author Report Share Posted May 10, 2010 Okay, I have added the <hr class="bar"> to create the blue dividing line in my footer, appearing just above my copyright, name and "last updated" date. As such it will appear in all pages of ww w.irish type 3dna.org (remove 3 spaces) The blue dividing line below the copyright notice is:- <div class="center"><img src="images/bar.jpg" alt="" width="202" height="7"></div> css includes:- hr { /** A light full-width line **/ text-align:center; } hr.bar { /** Blue Dividing Bar **/ width:200px; margin:0 auto; height:4px; color:#506F89; background-color:#506F89; border:none; } I do see that align is deprecated in HTML4, and yet the page still validated! Shouldn't deprecated items at least receive a caution? In IE8 the upper line justifies left, but of course the compatibility button centers it again. Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 10, 2010 Report Share Posted May 10, 2010 (edited) I've looked at your online page in IE8 (without using IE7 compatibility) and all the grey/blue hr tags are centered properly. edit:- I see that you've still got the image for the horizontal rule. I downloaded you code and added this just after your image:- <hr class="bar"> and this to the stylesheet:- hr.bar { width: 200px; height: 4px; color: #eee; background-color: #eee; margin: 0 auto; border: none; } and the hr tag was centered, so the code does work in IE8. Edited May 10, 2010 by Wickham Quote Link to comment Share on other sites More sharing options...
scorpion Posted May 11, 2010 Author Report Share Posted May 11, 2010 I've looked at your online page in IE8 (without using IE7 compatibility) and all the grey/blue hr tags are centered properly. edit:- I see that you've still got the image for the horizontal rule. I downloaded you code and added this just after your image:- <hr class="bar"> and this to the stylesheet:- hr.bar { width: 200px; height: 4px; color: #eee; background-color: #eee; margin: 0 auto; border: none; } and the hr tag was centered, so the code does work in IE8. Wickham ... I am probably thick but this line is what I have as my 'bar' just above my copyright line at the bottom of the page. <hr class="bar"> And the css stylesheet still contains:- hr.bar { /** Blue Dividing Bar **/ width:200px; margin:0 auto; height:4px; color:#506F89; background-color:#506F89; border:none; } So I don't see what you have done except change the color of the 'bar'. In my IE8 browser, this 'bar' is still left justified. Could you explain what you have changed from my existing code? Surely the order of elements in the hr.bar code does not matter? Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 11, 2010 Report Share Posted May 11, 2010 (edited) It's partly my confusion. I saw several hr tags and then saw that they were made with images so I added my code next to one of them and it centered in IE8. Later I saw that you had changed only the bottom one near the footer with your style code which my code had overwritten because it was coded last in the css file. I assure you that your code and mine both work in my IE8. I've just tested again and you don't need the <div class="center">.......</div> around the <hr class="bar"> Edited May 11, 2010 by Wickham Quote Link to comment Share on other sites More sharing options...
scorpion Posted May 11, 2010 Author Report Share Posted May 11, 2010 I think I have found an answer. I need to add a 'center' div. It can be before the bar or surrounding it ... both work. <div class="center"></div><hr class="bar"> or <div class="center"><hr class="bar"></div> It seems that there is a need to set up the centering and then the hr remembers it. I thought I tried this earlier, but at least it works now! Cheers, Dennis Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 11, 2010 Report Share Posted May 11, 2010 You don't need the surrounding center div! My added hr tag didn't have it and it still centered, so I can't understand why your IE8 is different. Quote Link to comment Share on other sites More sharing options...
scorpion Posted May 11, 2010 Author Report Share Posted May 11, 2010 You don't need the surrounding center div! My added hr tag didn't have it and it still centered, so I can't understand why your IE8 is different. I tried removing the centering div and it now works fine, so I went back to the css hr.bar and commented out the margin: 0 auto; that you had suggested and this is the element that does the centering. So! all is now well. Thanks again, Dennis Quote Link to comment Share on other sites More sharing options...
jmb272 Posted May 13, 2010 Report Share Posted May 13, 2010 Like many others, i despise IE. However, i dont dismiss it when building a site. If i add something to a web page that works in firefox, chrome, opera & safari but i cant get it to work in IE, i take it out. Compatibility is my number 1 priority. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.