View Full Version : IE / Firefox Cross Browser Border Issue

Jul 25th, 2010, 08:00 PM
Hello all,

My website appears fine on Firefox 3.x but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). My website is http://www.rpghive.com . Any help is greatly appreciated.


Jul 26th, 2010, 09:11 AM

We have seen the issue and i can do it.


Jul 26th, 2010, 09:17 AM
safedesign1, just in words it wont help.


Jul 26th, 2010, 09:20 AM
Line 183, Column 7: end tag for "div" omitted, but OMITTAG NO was specified

Try to fix the errors in your markup first, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rpghive.com%2F

Jul 26th, 2010, 09:13 PM
@abduraooft - Thanks, for the tip! I went ahead and fixed the major error: I put a closing </div> before the </body> tag to satisfy this error:

Line 183, Column 7: end tag for "div" omitted, but OMITTAG NO was specified


Okay, I fixed the major error and the rest of the errors seem to be related to the flash that my web developer gave me and I would not know how to fix them. (I don't believe that they are causing my error anyway).

Now, I am still experiencing the same problem. Any further help is greatly appreciated!!!


Jul 27th, 2010, 02:59 AM
Do you think this could be the answer? I noticed that the "missing" boder on the right and the left sides of the article area is actually an image (it appears as an image in Firefox)! The image is Sheet-v.png and can be found in the template.css file. The image is found in this code:

.art-Sheet-cr, .art-Sheet-cl
top: 11px;
bottom: 11px;
width: 22px;
background-image: url('../images/Sheet-v.png');

Do you think this may be the answer? If so, do you see anything that could be added to help support IE?


Jul 27th, 2010, 07:25 PM
moderator, please delete songzhanglai's spam post.

Jul 27th, 2010, 08:59 PM
I think the issue here is with the div .art-header.

If you look at IE8 and IE7 you'll see a grey bottom border with rounded corners immediately below the big image. This isn't there in FF and it is the presence of this which makes the article and login screen look wrong in IE.

That border is coming from the multiple divs within .art-sheet, and in IE these aren't where they should be because of the height of 682px applied to .art-header. This in turn is restricting the height of .art-sheet, so the bottom border is not at the bottom of the page. Remove the height on .art-header and .art-sheet extends to where it should be - you can see that the verticals at the side go all the way down now. Removing the height has the same effect in FF, so good news :thumbsup:.

However, your footer now looks odd - part of the problem is you have two different images for that rounded corner bottom - one coming from the .art-sheet divs and another from .art-footer-background. Possibly remove the one on .art-footer and .art-footer-background and use a different approach to styling the footer.

Jul 27th, 2010, 09:31 PM
Argh, couldn't leave this one alone. Couldn't work out why there was a gap at the bottom between the two bottom images. And then :eek::

<div class="cleared"></div>

Get rid of that space and I think you're sorted - no need to muck about with your footer...

Jul 28th, 2010, 01:29 AM
@SB65 - You are awesome, you rock! Thank you so much for your help! I changed the code per your suggestions and it worked! :thumbsup: