Why do the rollovers on the website I have made do what I want them to in Chrome but not in Firefox or Internet Explorer?

September 28, 2010 8:31 AM

I have just finished building this website... http://www.frankxcarter.com ...for a friend of mine. In Google Chrome the front page displays with no lines across the photograph and the link images {Journal, Photos, etc.) appear when you roll the mouse over the photograph. However, in Firefox there are thick horizontal white lines across the image and in Internet Explorer the rollovers don't display properly at all! Any advice as to how I can rectify will be greatly appreciated. Thanks, Theo
posted by FuckingAwesome to Computers & Internet (12 answers total)

CSS tends to behave differently in different browsers. We had to handle it with browser-based loading of different code for different browsers, but then we also had application as well as display code.
posted by L'Estrange Fruit at 8:37 AM on September 28, 2010

Yes, one of the fun headaches of web development is cross browser compatibility. Check your borders and margins for the firefox / chrome issue, and for internet explorer, the IE Conditionals are your friend.
posted by frwagon at 8:44 AM on September 28, 2010

For firefox.. making the margin and padding for img tag might fix it.. so in your CSS..

img {
margin: 0;
padding: 0;
}

It could be the line breaks (br tags) that are causing the problem. If the above doesn't fix it.. and you're not adverse to the idea.. make a table with 1 column and 6 rows. Make sure this table has to margins or padding either.

Which version of IE are you testing in?
posted by royalsong at 8:47 AM on September 28, 2010

You've not closed the body css tag. Will always cause problems.
Change to:

body {
margin: 0;
padding: 0px;
background-image:url('http://img696.imageshack.us/img696/3835/crucifixd.jpg');
background-repeat:no-repeat;
background-position:center center;
}
img{
border:none;
}

I'm sure that will fix
posted by derbs at 8:48 AM on September 28, 2010

has no* margins or padding either
posted by royalsong at 8:48 AM on September 28, 2010

CSS tends to behave differently in different browsers.

Did you look at the source? Not much CSS going on here...

Your code is.... ahem... dated.

I don't want to get all full-blown standardsier-than-thou, but I struggle to answer the direct question without an OCD-esque desire to bemoan all the rest of it. At any rate, the easiest way to fix it in my opinion would be doing it "properly".

in Internet Explorer the rollovers don't display properly at all!

I can't even be bothered to work out why, which isn't meant to be rude but rather a reflection that Javascript onmouseover, onmouseout events are superfluous / ill-advised for what you're doing here. You can do it in pure css.

The basic concept is to make an image 2x the height of the "display area". 100px in this case. In the top half, the un-rolled-over image. In the bottom half, the rolled over image. Use css background-image on the a element to show the top half of it 0 offset, and on the a:hover element, same image with a 100px offset. Article (that actually uses width and x offsets rather than height and y offsets as I had it, same concept though).

in Firefox there are thick horizontal white lines

I would wrap all the a elements in a container div with an explicit 398px width, remove all the <BR> tags and let the browser force each image underneath the next automatically.

At work, so really should be doing the webby stuff I'm paid for rather than write any more detail here. If this doesn't all make sense as it is, and/or nobody else answers to your satisfaction, I may come back later, or memail me.
posted by Slyfen at 8:50 AM on September 28, 2010

Oh hello, I'm blind. you're already using a table!

Remove the br tags and do what i said. Put each image in it's own cell.
posted by royalsong at 8:50 AM on September 28, 2010

CSS tends to behave differently in different browsers.

Did you look at the source? Not much CSS going on here...

Fair enough. It sounded like CSS issues I'd encountered in the past.
posted by L'Estrange Fruit at 8:56 AM on September 28, 2010

Start by validating your HTML. Then validate your CSS. Then check to see how it works, and ask again for help.

(FWIW it works fine in Fx 4 beta on OSX. But you have no DOCTYPE, no character encoding, you're using what appears to be HTML 3 based on the tags, you have background styles set in the body tag and redefined in CSS, you have a CSS style with no closing bracket, and if this is hosted on an actual server why are you pulling the background image from ImageShack? Can't you host it locally, as you do for every other image on the page?)
posted by caution live frogs at 9:00 AM on September 28, 2010

Mod note: few comments removed - stop it, thank you.
posted by jessamyn (staff) at 9:15 AM on September 28, 2010

img {display:block;} can clear up a number of cross-browser issues as well.
posted by misterbrandt at 12:07 PM on September 28, 2010

A number of issues here.
1. your rollovers are transparent pngs. IE does not like those. So you need a png fix unless you change the rollover images.
2. your images don't have heights and widths on them, that can cause problems as the browser does its best to figure out how to render
3. You intend to have the image centered horizontally and vertically using a table, I think this is not going to be as reliable as you might hope
4. You have no doctype, and inconstent decisions about what the doctype might be. For this layout you could chose html 4.01, xhtml, or html5, doesn't matter. But you got to pick. I imagine this is not something you deal with day to day, so I'll pick for you.
5. I think you're going to be better served with code that is a bit cleaner.

In that spirit, here's the completed code replacing your existing page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>FRANK CARTER</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Theo Kindynis" /> 
<meta name="description" content="The official website of Frank Carter" /> 
<meta name="keywords" content="frank carter, gallows, tattooist, tattoos, frith street, photography, painting, blog, portfolio, twitter, official" /> 
<link rel="SHORTCUT ICON" href="http://www.frankxcarter.com/favicon.ico" />
<style type="text/css"> 
body { margin: 0; padding: 0; }
a {outline: none;}
#wrapper {
   margin-right: 0;
   margin-left: 0;
   position: relative;
}
#splash {
   background-image:url('http://img696.imageshack.us/img696/3835/crucifixd.jpg');
   background-repeat: no-repeat;
   height: 600px;
   width: 398px;
   position: fixed;
}
#splash ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#splash ul li {
   margin: 0;
   padding: 0;
}
#splash a {
   outline: none;
   display: block;
   height: 100px;
   width: 398px;
   text-transform: uppercase;
}
#splash a span {
   display: none;
}
#s1 a:hover { background-image: url(http://frankxcarter.com/images/journalover.png);}
#s2 a:hover { background-image: url(http://frankxcarter.com/images/paintingsover.png);}
#s3 a:hover { background-image: url(http://frankxcarter.com/images/photosover.png);}
#s4 a:hover { background-image: url(http://frankxcarter.com/images/twitterover.png);}
#s5 a:hover { background-image: url(http://frankxcarter.com/images/friendsover.png);}
#s6 a:hover { background-image: url(http://frankxcarter.com/images/contactover.png);}
</style>
<!--[if IE]>
<style type="text/css">
#s1 a:hover { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://frankxcarter.com/images/journalover.png', sizingMethod='scale');}
#s2 a:hover { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://frankxcarter.com/images/paintingsover.png', sizingMethod='scale');}
#s3 a:hover { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://frankxcarter.com/images/photosover.png', sizingMethod='scale');}
#s4 a:hover { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://frankxcarter.com/images/twitterover.png', sizingMethod='scale');}
#s5 a:hover { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://frankxcarter.com/images/friendsover.png', sizingMethod='scale');}
#s6 a:hover { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://frankxcarter.com/images/contactover.png', sizingMethod='scale');}
</style> 
<![endif]-->
<script ></script>
<script type="text/javascript">
var SPLASH = {
   'HEIGHT': 600,
   'WIDTH': 398,
   'ID':'splash',
   'recenter': function(){
      var view_width;
      var view_height;
      if (typeof window.innerWidth !== 'undefined')
         { view_width = window.innerWidth; view_height = window.innerHeight; }
      else if (typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientWidth !== 'undefined' && document.documentElement.clientWidth !== 0)
         { view_width = document.documentElement.clientWidth; view_height = document.documentElement.clientHeight; }
      else { view_width = document.getElementsByTagName('body')[0].clientWidth; view_height = document.getElementsByTagName('body')[0].clientHeight; }
      var elem = document.getElementById(SPLASH.ID);
      var top = parseInt(((view_height - SPLASH.HEIGHT) / 2), 10);
      var left = parseInt(((view_width - SPLASH.WIDTH) / 2), 10);
      if (top > 0) { elem.style.top = top + 'px'; }
      if (left > 0) { elem.style.left = left + 'px'; }
      return true;
} };
window.onload = SPLASH.recenter;
window.onresize = SPLASH.recenter;
</script>
</head> 
<body> 
<div id="wrapper">
   <div id="splash">
   <ul>
      <li id="s1"><a href="http://www.frankxcarter.tumblr.com"><span>Journal</span></a></li>
      <li id="s2"><a href="http://www.frankxcarter.tumblr.com/paintings"><span>Paintings</span></a></li>
      <li id="s3"><a href="http://www.frankxcarter.tumblr.com/photographs"><span>Photographs</span></a></li>
      <li id="s4"><a href="http://www.twitter.com/frankxcarter"><span>Twitter</span></a></li>
      <li id="s5"><a href="http://www.frankxcarter.tumblr.com/friends"><span>Friends</span></a></li>
      <li id="s6"><a href="http://www.frankxcarter.tumblr.com/contact"><span>Contact</span></a></li>
   </ul>
   </div>
</div>
</body> 
</html>

posted by artlung at 3:38 PM on September 28, 2010