PDA

View Full Version : IE / Firefox Cross Browser Border Issue



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

Thanks!

safedesign1
Jul 26th, 2010, 09:11 AM
Hi,

We have seen the issue and i can do it.

Thanks

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

Regards.

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

</body>
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

nkephart
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

</body>

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

Thanks!

nkephart
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?

Thanks!

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

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

SB65
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>
&nbsp;
</div>

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

nkephart
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: