Shifing in IE8

HTML & CSS
1

I know that there is a simple fix, but can’t seem to find it.

My site (Spokane Area Classic Chevy Club looks good in Firefox and Chrome, but IE8 messes up the menu and the main content block.

Any advice would be great
F

2

Hi,

I couldn’t see what you meant about the main content block as it looks the same in Firefox and IE8 as far as I could see (a bit weird in both).

If you are talking about the position of the text in the left menu then the problem is that you have just left it to chance and used vertical padding on an inline element to line things up. Vertical padding on inline elements has no effect to the line height and browsers will vary in how it is represented.

You need to first set the anchor to display:block then set a height to match the image height and then adjust line-height to move the text into position.


.mainNav li a {
    background-position: 50% 80%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
[B]    display: block;
    height: 42px;
    line-height: 39px;
    /* padding: 15px 0;*/[/B]
  text-align: center;
    text-decoration: none;
}
3

Paul,

Thanks

This is what I have presently in my AllPages.css file for your “example”:

.mainNav li a {
	padding-top: 15px;
	padding-right: 0px ;
	padding-bottom: 15px;
	padding-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	text-decoration: none;
	font-size: .8em;
	color: blue;
   /* changing from 75x33 per request */
	background-image: url(images/ChevySACCCr100x43.gif);
	background-repeat: no-repeat;
	background-position: 50% 80%;
	display: list-item;
	text-align: center;
	padding-left: -30px;
	margin-left; -0px;
}

So, do I just change ALL of this to what you suggest? Or… well, need some further explanation if possible.

Thanks
F

4

Yes the rules I gave you are the shorthand versions and the nonsenical negative padding remove. It’s exactly the same as what you have but without all the unnecessary stuff ijn that rule. The background-image for example is already supplied in a separate rule somewhere else.

Just use my code instead of the code you just posted.:slight_smile: