Image appearance ok in FF, not in IE8

I am not sure what i need to do in my css/html but here is th edeal.

If you go to this page in FireFox, it looks perfect. In IE8, the “map” image repeats several times. That is not supposed to happen. I am not sure how to change the CSS to make it look right in IE8. Please advise.

PAGE: http://billboardfamily.com/?page_id=2

That is what I am talking about … for some reason, it does not look like that on my screen … very odd. I can see a definite difference between FF and IE8 … Thank you for helping me out on all of this. You have made my day. Thanks!

Hi,

I can’t see any difference between Firefox and Ie8.

I’ve attached a composite screenshot that shows Firefox on the top and IE8 on the bottom and they match exactly.

I think you must be referring to something else.

The button is probably out because you have used vertical padding on inline elements which browsers are allowed to ignore and is probably compounded by the fact that you have reduced the line-height too small for the font causing differences in browwsers.

You should float the anchors so that padding is applied nicely and then adjust everything to fit.

e.g. Roughly like this:


#header .purchase {
    clear: both;
    position: relative;
 [B]   margin-top:-28px;
    margin-left: 844px;[/B]
    float:left;
}
[B]#header .logo h1{padding-bottom:25px}
#header li a{float:left;padding:0 15px;line-height:1.7em;}
[/B]


That almost has it exactly. It looks good from an alignment standpoint. Just one question, though. If you look at this in FF, it is perfect. The spaces between all of the nav elements, including the button are the same. In IE8, however, the space between the last nav text element, and the button is much larger than in FF. I tried to play with the font size, but, obviously, that made it look incorrect in FF. Any thoughts on this, or is it pretty much stuck that way?

If you want to remove it, you have to remove every jquery link in the header (or wherever they are).

One thing I notice is that you have a couple of jquery plugins linked in the header above the jquery library. The jquery library should sit above anything else requiring the library.

In the actual HTML table, there is no inline style, background especially, for the table <div>, only defined in the CSS.

No, not in the source code, but it is being added in dynamically in IE. Unfortunately I’m not sure why, but it’s no doubt being done by JavaScript.

Also, if you look at the “BUY YOUR DAY” button at the right of the nav bar, it is not in the correct location in IE8…it is in FF, however. Very odd.

Looks basically the same to me. You need to be more specific about what “correct” is.

I’m not sure why, but in IE, in the #table div, there is an inline style with shorthand background styles. The repeat in this rule is overriding the no-repeat in the style sheet. Do you know what’s adding these inline styles? Is it JavaScript?

I am not sure. I am having an issue with JQuery loading multiple times on some pages, and I can not get it to stop even after removing the plugins calling the JQuery library. Maybe these are related. In the actual HTML table, there is no inline style, background especially, for the table <div>, only defined in the CSS.

Also, if you look at the “BUY YOUR DAY” button at the right of the nav bar, it is not in the correct location in IE8…it is in FF, however. Very odd.

It’s the border-radius.htc file that you are using for the round corners in IE8 that is causing the problems. It seems to be very buggy.

One solution is to remove the background image from the parent and use an inner element instead to hold the background image and then the conflict seems to be avoided.


#table {
    width: 740px;
    overflow: hidden; /*contain floats*/
    background-color: #f2f2f2;
    font-family: Arial;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    behavior: url(/border-radius.htc);
    border-radius: 0px;
}
.inner{
    background: #f2f2f2 url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/map.png) no-repeat 0 0;
    padding: 465px 10px 10px;
    width: 710px;
}



<div id="table">
 <div  class="inner">

  etc......

 </div>
</div>

Or just remove the border-radius.htc file rule from that original rule and the map will display ok but the background will have square corners in IE.

Anyone have any ideas?

I just went into IE8 and changed the text size setting from “Medium” to different sizes, and there is no difference in the way the text in the nav bar looks.

It almost looks like the font size is smaller in IE8 or something.

I can’t check in Vista at the moment as my laptop has crashed badly and I’ll have to re-install everything from scratch when I get time.

I assume you haven’t just knocked the text size down by accident (in the browser options) :slight_smile:

I am using Vista. Here is the screenshot. FF is on top, IE8 on bottom. It almost looks like the font size is smaller in IE8 or something.

that is crazy. Thanks

Here’s some browerscam screenshots which show the text as all the same size.

http://www.browsercam.com/public.aspx?proj_id=524184

It must be a problem with your computer :slight_smile:

Thanks, that totally worked for the map image. Any idea why the “Buy Your Day” button at the right end of the nav bar is aligned differently in IE8 than it is in FF? In FF it looks correct.

Those JQuery links are being created by WOrdpress / plugins…if you look at the actual source code, there is only the one mention in the header.php file. If you remove that JQuery call…it breaks a lot of the functionality in the site. I really need someone who has fixed this before to help me out…I will never be able to get this part to work on my own…not enough experience with this multiple JQuery load issue.

As for the JavaScript adding the inline style…I don;t know why it is doing that, or how it is doing it, or how to fix the issue either. Once again, need an expert opinion on this.

As for the button alignment issue… In Firefox, all nav link, and the button are evenly spaced. In IE8, the button is much farther from the last text nav link. Also, in IE8, the button sits much higher in the nav bar (it is touching the black part of the header) than it does in FF. In FF it is centered top to bottom in the blue nav area…it does not touch the black in the header at all.

You’ll have to post a screenshot so we can see the difference but I’m not sure why it would look different to my IE8 unless you are running compatibility mode or something. (My screenshot was from XP so maybe yours is vista or windows7 which I didn’t test)