-
IE8 background image shifts
Hello all,
After successfully completing this site, I made a small tweak to the CSS, and now it causes my hyperlinks’ background images to shift/overflow both on hover and on zoom. This only happens on IE8 (and possibly 7); the pages render just fine on IE6, Firefox, Opera, and Google Chrome.
I am using one of the sub-pages here because the homepage is not on the server yet. Please excuse the collection of continuous crap that passes as code; it’s my first day!
The CSS:
@charset “utf-8”;
/* CSS Mainstyle*/* {
margin: 0;
}body {
background: url(../images/background.jpg) repeat-x top left;
font-family: comic sans ms, sans-serif;
color : #ffeecb;
position: relative;
margin: 0px;
padding: 0px;
text-align: center;
min-width: 800px;
}lodgebody {
background: url(../images/background2.jpg) repeat-x repeat-y top left;
font-family: comic sans ms, sans-serif;
color : #ffeecb;
position: relative;
margin: 0px;
padding: 0px;
text-align: center;
min-width: 800px;
}p {
font-family: comic sans ms;
font-size: 16px;
color: #000000;
}p.center {
text-align: -moz-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;
margin: 20px 0 px 0px;
color: #000000;
}h2 {
font-family: comic sans ms;
font-weight: bold;
font-size: 28px;
text-transform: uppercase;
margin: 20px 0 px 0px;
color: #000000;
}h3 {
font-family: comic sans ms;
font-weight: bold;
font-size: 24px;
text-transform: uppercase;
margin: 20px 0 px 0px;
color: #000000;
}h4 {
font-family: comic sans ms;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
margin: 20px 0 px 0px;
padding: 0px;
color: #000000;
}h5 {
font-family: comic sans ms;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
margin: 20px 0 px 0px;
color: #000000;
}h6 {
font-family: comic sans ms;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
margin: 20px 0 px 0px;
color: #000000;
}ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}li {
background: url(../images/screw.gif) no-repeat;
background-position: 0px 5px;
padding-left: 20px;
padding-right: 20px;
font-family: comic sans ms;
font-size: 16px;
color: #000000;
}hr {
border: 0px;
width: 80%;
color: #861010;
background-color: #transparent;
height: 5px;
}div.hr {
border: 0;
width: 80%;
height: 5px;
background: url(../images/hr1.gif) no-repeat;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: 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-left: auto;
margin-right: auto;
}.left {
float: left;
}.right {
float: right;
}.center {
margin: 0 auto;
text-align: left;
}.center table {
margin-left: auto;
margin-right: auto;
text-align: -moz-center;
text-align: center;
}table {
background-color: transparent;
border: none;
position: relative;
width: 100%;
}table, td, th {
font-family: comic sans ms;
font-size: 12px;
border: 0px;
}table.filler {
width: 100%;
height: 350px;
}th
{
background-color: #291f15;
color: #ffffff;
}.padded {
padding-left: 60px;
}#container {
background: url(../images/conback.gif) repeat-y top left;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;
}#header {
background: url(../images/ppsign.gif) no-repeat;
width: 900px;
height: 185px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}#header span {
display: none;
}#lodgeheader {
background: url(../images/ppsign2.gif) no-repeat;
width: 800px;
height: 215px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}#lodgeheader span {
display: none;
}#menu {
background: url(../images/ppmenu.gif) no-repeat;
align: center;
width: 900px;
height: 70px;
margin: 0 auto;
padding: 0px;
}.table {
display: table;
margin: 0 auto;
}#menu ul {
list-style-type: none;
margin: 0px;
padding-left: 90px;
text-align: center;
}#menu li {
width: 112px;
background: transparent;
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;
}.home {
width: 112px;
text-align: center;
}.lodging {
width: 112px;
text-align: center;
}.boating {
width: 112px;
text-align: center;
}.services {
width: 112px;
text-align: center;
}.events {
width: 112px;
text-align: center;
}.forsale {
width: 112px;
text-align: center;
}.clear {
clear: both;
}#content {
margin: 0 auto;
text-align: left;
width: 700px;
padding: 15px; 15px 0px 15px;
font-family: comic sans ms, sans-serif;
}#content p {
font-family: comic sans ms;
font-size: 16px;
padding-top: 15px;
border: 0px;
}#content td {
font-family: comic sans ms;
font-size: 16px;
border: 0px;
}#footer1 {
background: url(../images/ppfooter.gif) no-repeat;
width: 900px;
height: 130px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}#footer1 span {
display: none;
}#footer2 {
background: url(../images/ppfooter2.gif) no-repeat;
width: 900px;
height: 112px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 14px 0px 0px 0px;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}#footer2 a {
font-family: comic sans ms;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}#footer2 a:hover {
color: #7F3D37;
text-decoration: none;
}Much appreciated!
-
12 Replies
-
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!
-
hello…
it’s really hard to debug that because you have so much redundant css going on – for example, your class item for each link is not necessary, as a class should be a style applied to a set of elements as opposed to an individual thing.
you also have all the widths and alignments for your li, but you have that duped in the individual link classes. therefore, something in there is making ie unhappy, but it’s really hard to pick it apart with all the layers.
(and this comes from somebody who’s done css for years)
first step i would recommend would be to strip it back a bit – remove the css class attribute for each nav link and the related css and see what happens then.
sitruc
-
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.
-
hello…
just a guess here, but i’d try removing the transparent background attribute here:
#menu li {
width: 112px;
background: transparent;
display: block;
float: left;
margin: 0 auto;
padding: 6px 4px 0px 4px;
}see if that does the trick…
sitruc
-
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.
-
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…
-
This is weird.
Your CSS display some rules for the A:link
But in IE8, using the incorporated developer tool, it shows that your CSS has more rules in the A:link
I removed these rules and your shifting disappeared.
The rules removed were:
outline-color: invert;
outline-width: medium;If we can figure it out where are those rules coming you can fix the site removing them.
*Always share a link to your site and rate the posts. This is a free service for you and for us.
-
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!
-
I’m zooming in and out in IE8 and nothing else shifts.
Can you please post a snapshot?
*Always share a link to your site and rate the posts. This is a free service for you and for us.
-
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.
Reply to this Discussion! Login or Sign Up