FORUMS: list search recent posts

IE8 background image shifts

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Christopher Filbey
IE8 background image shifts
on Oct 13, 2010 at 11:22:52 pm

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!


Return to posts index

Christopher Filbey
Re: IE8 background image shifts
on Oct 14, 2010 at 4:31:20 pm

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!


Return to posts index

Curtis Thompson
Re: IE8 background image shifts
on Oct 14, 2010 at 4:56:13 pm

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


Return to posts index


Christopher Filbey
Re: IE8 background image shifts
on Oct 14, 2010 at 11:40:43 pm

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.


Return to posts index

Curtis Thompson
Re: IE8 background image shifts
on Oct 15, 2010 at 1:21:16 am

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


Return to posts index

Christopher Filbey
Re: IE8 background image shifts
on Oct 19, 2010 at 9:42:17 am

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.


Return to posts index


Christopher Filbey
Re: IE8 background image shifts
on Oct 19, 2010 at 10:09:02 am

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


Return to posts index

Fernando Mol
Re: IE8 background image shifts
on Oct 19, 2010 at 1:22:49 pm

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.


Return to posts index

Christopher Filbey
Re: IE8 background image shifts
on Oct 19, 2010 at 8:17:44 pm

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!


Return to posts index


Fernando Mol
Re: IE8 background image shifts
on Oct 20, 2010 at 2:31:36 am

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.


Return to posts index

Christopher Filbey
Re: IE8 background image shifts
on Nov 2, 2010 at 3:36:14 pm

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.


Return to posts index


Fernando Mol
Re: IE8 background image shifts
on Nov 2, 2010 at 6:16:37 pm

It's weird, I tested in in IE8, IE7 and IE6 an that doesn't happen in my computer (Win7 64).

Anyway, you may want to try a different div structure. Use a single image background for the entire header and just place the menu text buttons in front.

You can try assigning a centered position to

background-position:center;

I hope this helps


Return to posts index


Christopher Filbey
Re: IE8 background image shifts
on Nov 25, 2010 at 12:41:03 am

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.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]