Jump to content
Stef's Coding Community
scorpion

IE8 compatability issues

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I tested my answer in IE8 and it centered!

 

You must have some other code affecting it. Post a link to your online page.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

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.
Note: Your post will require moderator approval before it will be visible.

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

×
×
  • Create New...