[Christopher Filbey]

Finally got it fixed! Your suggestions weren’t quite the solution, but it got me thinking (excuse the burning smell!).

When you mentioned using the header and menu as one graphic, I had a brainwave. I made all those images with GIMP, and in the interest of uniformity, made them all the same 900-pixel width. Problem was, only the header image was 900 pixels; the others had empty space on the sides, bringing them up to 900. IE wasn’t recognizing that empty space, and treated it like, say, the 884-pixel menu. This accounts for the misalignment.

Long story short, I cropped the images to their “true” widths and had the CSS reflect those widths. Now, they render properly in everything I’ve tested: IE6, IE8, Firefox, Opera, Netscape, and Google Chrome. Thanks to you and Curtis for the hand.

[Christopher Filbey]

The “target” attribute is deprecated and will probably be phased out in the future. Still, if you’re not feeling the use of Javascript, I see a couple of problems with your target=_blank code. Remove the single quotes around the URL and include a double quote after it. Then, put another double quote after target= to finish it. Basically, replace

a href=”‘media/gospelplaylist/gospelplayer.html’target=_blank”

with

a href=”media/gospelplaylist/gospelplayer.html” target=”_blank”

I hope I understood the problem correctly and this was helpful.

[Christopher Filbey]

Sorry about the delay. Here is a shot, zoomed at 150%:

The header on top is perfectly aligned in the center, no matter what. The menu underneath, and the container, underneath that, both shift and appear to be repeating on the right-hand side.

This is goofy, since I did have it going once, and only IE creates this effect.

[Christopher Filbey]

Hello,

Going back to my main CSS, taking out the outline: none rules for a:link and a:visited does prevent the hover shift. Thank you muchly.

Now, all that’s left is to figure out why the menu, container, and footer images shift left (looks like a good 10 pixels!) when IE is zoomed. They not only shift, but they repeat on the right side and the repeated image is cut off at the designated div width.

This experience will teach me to make copies before making changes!

[Christopher Filbey]

I’ve also found that taking out any attributes that change the hyperlink on hover (ex. text-decoration: underline or a different font color) prevent that shift on hover only, but that defeats the purpose of the hover effects to begin with. That also doesn’t solve the shift while zooming, either. Oh, well; battle continues…

[Christopher Filbey]

Hello again,

Removing the background: transparent attribute causes bullets from my previous li to appear. I checked it out in Developer Tools, and for some reason, my menu li inherits the attributes from my main li. I wonder if that might be the cause.

All I know is that all hyperlinks cause that shift, and zooming in on the page causes the same thing. You might have uncovered the root cause, though, so the battle continues.

[Christopher Filbey]

Thanks for checking this out for me. I’ve always been extremely unnecessarily redundant! Anyway, I cleaned up what I thought was redundant, both in the HTML and the CSS, but the result is the same. It’s almost like something is causing the background to repeat even when the opposite is specified. Anyway, here is the site address again, and here is the new CSS:

@charset “utf-8”;
/* CSS Mainstyle */

* {
margin: 0;
}

body {
background: url(../images/background.jpg) repeat-x left top;
font-family: “comic sans ms”, sans-serif;
color : #ffeecb;
position: relative;
margin: 0px;
padding: 0px;
text-align: center;
}

p {
font-family: “comic sans ms”;
font-size: 16px;
color: #000000;
padding-top: 15px;
border: 0px;
}

p.center {
text-align: center;
margin: 0 auto;
}

a:link {
color: #326ea1;
text-decoration: none;
outline: none;
}

a:visited {
color: #326ea1;
text-decoration: none;
outline: none;
}

a:hover {
color: #326ea1;
text-decoration: underline;
outline: none;
}

a:active {
color: #326ea1;
text-decoration: none;
outline: none;
}

h1 {
font-family: “comic sans ms”;
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
padding: 0;
color: #000000;
}

h2 {
font-family: “comic sans ms”;
font-weight: bold;
font-size: 28px;
text-transform: uppercase;
padding: 0;
color: #000000;
}

h3 {
font-family: “comic sans ms”;
font-weight: bold;
font-size: 24px;
text-transform: uppercase;
padding: 0;
color: #000000;
}

h4 {
font-family: “comic sans ms”;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
padding: 0;
color: #000000;
}

h5 {
font-family: “comic sans ms”;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
padding: 0;
color: #000000;
}

h6 {
font-family: “comic sans ms”;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
padding: 0;
color: #000000;
}

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

li {
background: url(../images/screw.gif) no-repeat;
background-position: 0px 5px;
padding: 0 20px 0 20px;
font-family: “comic sans ms”;
font-size: 16px;
color: #000000;
}

hr {
border: 0px;
width: 80%;
color: #861010;
height: 5px;
}

div.hr {
border: 0;
width: 80%;
height: 5px;
background: url(../images/hr1.gif) no-repeat;
margin: 0 auto;
padding: 0px;
}

div.hr hr {
display: none;
}

img {
border-style: none;
margin: 0px;
padding: 20px;
vertical-align: text-top;
}

img.center {
display: block;
margin: 0 auto;
}

.left {
float: left;
}

.right {
float: right;
}

.center {
margin: 0 auto;
text-align: left;
}

table {
background-color: transparent;
border: none;
position: relative;
width: 100%;
}

table, td, th {
font-family: “comic sans ms”;
font-size: 16px;
border: 0px;
}

table.center {
margin: 0 auto;
text-align: center;
}

table.filler {
width: 100%;
height: 350px;
}

table.padded {
padding-left: 60px;
}

#container {
background: url(../images/conback.gif) repeat-y left top;
width: 900px;
margin: 0 auto;
text-align: left;
}

#header {
background: url(../images/ppsign.gif) no-repeat;
width: 900px;
height: 185px;
margin: 0 auto;
padding: 0px;
}

#header span {
display: none;
}

#menu {
background: url(../images/ppmenu.gif) no-repeat;
width: 900px;
height: 70px;
margin: 0 auto;
padding: 0px;
}

#menu ul {
list-style-type: none;
margin: 0px;
padding: 0 0 0 90px;
text-align: center;
}

#menu li {
width: 112px;
background: none;
display: block;
float: left;
margin: 0 auto;
padding: 6px 4px 0px 4px;
}

#menu li a {
width: 112px;
font-family: “comic sans ms”;
font-size: 16px;
color: #000000;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}

#menu li a:hover {
color: #7F3D37;
text-decoration: none;
}

.clear {
clear: both;
}

#content {
margin: 0 auto;
text-align: left;
width: 700px;
padding: 15px 15px 0px 15px;
font-family: “comic sans ms”, sans-serif;
}

#footer1 {
background: url(../images/ppfooter.gif) no-repeat;
width: 900px;
height: 130px;
margin: 0 auto;
padding: 0px;
}

#footer1 span {
display: none;
}

#footer2 {
background: url(../images/ppfooter2.gif) no-repeat;
width: 900px;
height: 112px;
margin: 0 auto;
padding: 14px 0px 0px 0px;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}

#footer2 a {
color: #FFFFFF;
text-decoration: none;
}

#footer2 a:hover {
color: #7F3D37;
text-decoration: none;
}

If there’s anything more that needs to be trimmed or changed, please let me know. The CSS validates with the W3C, so I’m not sure where it went wrong. Thanks again for looking at this for me.

[Christopher Filbey]

To reiterate, I once had this site working perfectly on all browsers I tested. My stupid bad for not backing up my original CSS.

…And oh, yeah – please help!