pagerussell
22 Apr 2011, 05:53 PM
Hello,
I am having a very wierd problem that manifested when I tested in IE8 and FF3.5. Here is what I am doing: I am applying a:link & a:visited to various div id in a compound css selector to give that dive a background image, position, border. Inside the div is a href; I then use a:hover & a:active to make the image pop out a bit when a user hovers. This works fine in IE9, FF4, and Chrome 10.
However, in the last generation of browsers, when a user clicks the image link, it disappears. And when the user navigates back to the page where they clicked that link, it is gone completely and wont return, even on refresh. I have no idea what is wrong. I have decalared an appropriate doctype, I made sure that a:link and a:visited preceeded a:hover and a:active. I am at my wits end.
You can check it out yourself at www.pagerussell.info
My css is big, so I will post only the css and code for my index page:
Index:
<!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>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Page Russell</title>
<link href='_css/mainstyle.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='wrapper'>
<div id='logo_div'><a id='logo_link' href='/index.html'></a>test</div>
<div id='home_contact_div'><a id='contact_link' href='/contact/'></a></div>
<div id='home_about_me_div'><a id='about_me_link' href='/about/'></a></div>
<div id='home_film_div'><a id='film_link' href='/film/'></a></div>
<div id='home_edu_div'><a id='edu_link' href='/edu/'></a></div>
<div id='home_resume_div'><a id='resume_link' href='/resume/'></a></div>
<div id='home_web_div'><a id='web_link' href='/web/'></a></div>
<div id='home_write_div'><a id='write_link' href='/write/'></a></div>
<div id='home_charity_div'><a id='charity_link' href='/charity/'></a></div>
<div id='home_backstage_div'><a id='backstage_link' href='/backstage/'></a></div>
</div>
</body>
</html>
CSS:
body
{
background: #000;
text-align: center;
}
#wrapper
{
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#logo_div a:link, a:visited
{
background: url(../_images/logo.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 298px;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #000;
}
#logo_div a:hover, a:active
{
background: url(../_images/logo.jpg) -301px 0px;
display: block;
position: absolute;
height: 140px;
width: 310px;
left: 0px;
top: 0px;
border: 1px solid #000;
z-index: 2;
}
#home_contact_div a:link, a:visited
{
background: url(../_images/contact_me.jpg) no-repeat 0px 0px;
display: block;
position: absolute;
height: 133px;
width: 298px;
left: 300px;
top: 0px;
border: 1px solid #000;
}
#home_contact_div a:hover, a:active
{
background: url(../_images/contact_me.jpg) no-repeat -301px 0px;
display: block;
position: absolute;
height: 140px;
width: 310px;
left: 295px;
top: 0px;
border: 1px solid #000;
z-index: 2;
}
#home_about_me_div a:link, a:visited
{
background: url(../_images/about.jpg) no-repeat 0px 0px;
display: block;
position: absolute;
height: 268px;
width: 148px;
left: 600px;
top: 0px;
border: 1px solid #000;
}
#home_about_me_div a:hover, a:active
{
background: url(../_images/about.jpg) no-repeat -151px 0px;
display: block;
position: absolute;
height: 279px;
width: 155px;
left: 595px;
top: 0px;
border: 1px solid #000;
z-index: 2;
}
#home_film_div a:link, a:visited
{
background: url(../_images/film.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 598px;
position: absolute;
left: 0px;
top: 135px;
border: 1px solid #000;
}
#home_film_div a:hover, a:active
{
background: url(../_images/film.jpg) -600px 0px;
display: block;
position: absolute;
height: 140px;
width: 620px;
left: 0px;
top: 133px;
border: 1px solid #000;
z-index: 2;
}
#home_edu_div a:link, a:visited
{
background: #D6D6D6 url(../_images/education.jpg) no-repeat 0px 0px;
height: 268px;
width: 148px;
border: 1px solid #000;
position: absolute;
left: 0px;
top: 270px;
}
#home_edu_div a:hover, a:active
{
background: url(../_images/education.jpg) no-repeat -150px 0px;
border: 1px solid #000;
position: absolute;
height: 279px;
width: 155px;
left: 0px;
top: 266px;
z-index: 2;
}
#home_resume_div a:link, a:visited
{
background: url(../_images/resume.jpg) no-repeat 0px 0px;
display: block;
height: 268px;
width: 298px;
position: absolute;
left: 150px;
top: 270px;
border: 1px solid #000;
}
#home_resume_div a:hover, a:active
{
background: url(../_images/resume.jpg) -300px 0px;
display: block;
position: absolute;
height: 279px;
width: 310px;
left: 148px;
top: 266px;
border: 1px solid #000;
z-index: 2;
}
#home_web_div a:link, a:visited
{
background: url(../_images/web.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 298px;
position: absolute;
left: 450px;
top: 270px;
border: 1px solid #000;
}
#home_web_div a:hover, a:active
{
background: url(../_images/web.jpg) -300px 0px;
display: block;
position: absolute;
height: 140px;
width: 310px;
left: 445px;
top: 268px;
border: 1px solid #000;
z-index: 2;
}
#home_write_div a:link, a:visited
{
background: url(../_images/write.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 448px;
position: absolute;
left: 0px;
top: 540px;
border: 1px solid #000;
}
#home_write_div a:hover, a:active
{
background: url(../_images/write.jpg) -450px 0px;
display: block;
position: absolute;
height: 140px;
width: 465px;
left: 0px;
top: 535px;
border: 1px solid #000;
z-index: 2;
}
#home_charity_div a:link, a:visited
{
background: url(../_images/charity.jpg) no-repeat 0px 0px;
display: block;
height: 268px;
width: 148px;
position: absolute;
left: 450px;
top: 405px;
border: 1px solid #000;
}
#home_charity_div a:hover, a:active
{
background: url(../_images/charity.jpg) -150px 0px;
display: block;
position: absolute;
height: 279px;
width: 155px;
left: 448px;
top: 396px;
border: 1px solid #000;
z-index: 2;
}
#home_backstage_div a:link, a:visited
{
background: url(../_images/backstage.jpg) no-repeat 0px 0px;
display: block;
height: 268px;
width: 148px;
position: absolute;
left: 600px;
top: 405px;
border: 1px solid #000;
}
#home_backstage_div a:hover, a:active
{
background: url(../_images/backstage.jpg) -150px 0px;
display: block;
position: absolute;
height: 279px;
width: 155px;
left: 595px;
top: 396px;
border: 1px solid #000;
z-index: 2;
}
Please Help!!! I am so lost as to why these browser are doing this, especially since IE 9 and FF4 run this perfectly fine. I have run through my code a ton, and there are no syntax errors as far as I can tell. I even used image sprites to eliminate load times on the hover! The only thing I can think of is the fact that I have approached the code in an odd way by giving the a: psuedo properties to the divs themselves instead of the href inside them.
I am having a very wierd problem that manifested when I tested in IE8 and FF3.5. Here is what I am doing: I am applying a:link & a:visited to various div id in a compound css selector to give that dive a background image, position, border. Inside the div is a href; I then use a:hover & a:active to make the image pop out a bit when a user hovers. This works fine in IE9, FF4, and Chrome 10.
However, in the last generation of browsers, when a user clicks the image link, it disappears. And when the user navigates back to the page where they clicked that link, it is gone completely and wont return, even on refresh. I have no idea what is wrong. I have decalared an appropriate doctype, I made sure that a:link and a:visited preceeded a:hover and a:active. I am at my wits end.
You can check it out yourself at www.pagerussell.info
My css is big, so I will post only the css and code for my index page:
Index:
<!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>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Page Russell</title>
<link href='_css/mainstyle.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='wrapper'>
<div id='logo_div'><a id='logo_link' href='/index.html'></a>test</div>
<div id='home_contact_div'><a id='contact_link' href='/contact/'></a></div>
<div id='home_about_me_div'><a id='about_me_link' href='/about/'></a></div>
<div id='home_film_div'><a id='film_link' href='/film/'></a></div>
<div id='home_edu_div'><a id='edu_link' href='/edu/'></a></div>
<div id='home_resume_div'><a id='resume_link' href='/resume/'></a></div>
<div id='home_web_div'><a id='web_link' href='/web/'></a></div>
<div id='home_write_div'><a id='write_link' href='/write/'></a></div>
<div id='home_charity_div'><a id='charity_link' href='/charity/'></a></div>
<div id='home_backstage_div'><a id='backstage_link' href='/backstage/'></a></div>
</div>
</body>
</html>
CSS:
body
{
background: #000;
text-align: center;
}
#wrapper
{
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#logo_div a:link, a:visited
{
background: url(../_images/logo.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 298px;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #000;
}
#logo_div a:hover, a:active
{
background: url(../_images/logo.jpg) -301px 0px;
display: block;
position: absolute;
height: 140px;
width: 310px;
left: 0px;
top: 0px;
border: 1px solid #000;
z-index: 2;
}
#home_contact_div a:link, a:visited
{
background: url(../_images/contact_me.jpg) no-repeat 0px 0px;
display: block;
position: absolute;
height: 133px;
width: 298px;
left: 300px;
top: 0px;
border: 1px solid #000;
}
#home_contact_div a:hover, a:active
{
background: url(../_images/contact_me.jpg) no-repeat -301px 0px;
display: block;
position: absolute;
height: 140px;
width: 310px;
left: 295px;
top: 0px;
border: 1px solid #000;
z-index: 2;
}
#home_about_me_div a:link, a:visited
{
background: url(../_images/about.jpg) no-repeat 0px 0px;
display: block;
position: absolute;
height: 268px;
width: 148px;
left: 600px;
top: 0px;
border: 1px solid #000;
}
#home_about_me_div a:hover, a:active
{
background: url(../_images/about.jpg) no-repeat -151px 0px;
display: block;
position: absolute;
height: 279px;
width: 155px;
left: 595px;
top: 0px;
border: 1px solid #000;
z-index: 2;
}
#home_film_div a:link, a:visited
{
background: url(../_images/film.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 598px;
position: absolute;
left: 0px;
top: 135px;
border: 1px solid #000;
}
#home_film_div a:hover, a:active
{
background: url(../_images/film.jpg) -600px 0px;
display: block;
position: absolute;
height: 140px;
width: 620px;
left: 0px;
top: 133px;
border: 1px solid #000;
z-index: 2;
}
#home_edu_div a:link, a:visited
{
background: #D6D6D6 url(../_images/education.jpg) no-repeat 0px 0px;
height: 268px;
width: 148px;
border: 1px solid #000;
position: absolute;
left: 0px;
top: 270px;
}
#home_edu_div a:hover, a:active
{
background: url(../_images/education.jpg) no-repeat -150px 0px;
border: 1px solid #000;
position: absolute;
height: 279px;
width: 155px;
left: 0px;
top: 266px;
z-index: 2;
}
#home_resume_div a:link, a:visited
{
background: url(../_images/resume.jpg) no-repeat 0px 0px;
display: block;
height: 268px;
width: 298px;
position: absolute;
left: 150px;
top: 270px;
border: 1px solid #000;
}
#home_resume_div a:hover, a:active
{
background: url(../_images/resume.jpg) -300px 0px;
display: block;
position: absolute;
height: 279px;
width: 310px;
left: 148px;
top: 266px;
border: 1px solid #000;
z-index: 2;
}
#home_web_div a:link, a:visited
{
background: url(../_images/web.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 298px;
position: absolute;
left: 450px;
top: 270px;
border: 1px solid #000;
}
#home_web_div a:hover, a:active
{
background: url(../_images/web.jpg) -300px 0px;
display: block;
position: absolute;
height: 140px;
width: 310px;
left: 445px;
top: 268px;
border: 1px solid #000;
z-index: 2;
}
#home_write_div a:link, a:visited
{
background: url(../_images/write.jpg) no-repeat 0px 0px;
display: block;
height: 133px;
width: 448px;
position: absolute;
left: 0px;
top: 540px;
border: 1px solid #000;
}
#home_write_div a:hover, a:active
{
background: url(../_images/write.jpg) -450px 0px;
display: block;
position: absolute;
height: 140px;
width: 465px;
left: 0px;
top: 535px;
border: 1px solid #000;
z-index: 2;
}
#home_charity_div a:link, a:visited
{
background: url(../_images/charity.jpg) no-repeat 0px 0px;
display: block;
height: 268px;
width: 148px;
position: absolute;
left: 450px;
top: 405px;
border: 1px solid #000;
}
#home_charity_div a:hover, a:active
{
background: url(../_images/charity.jpg) -150px 0px;
display: block;
position: absolute;
height: 279px;
width: 155px;
left: 448px;
top: 396px;
border: 1px solid #000;
z-index: 2;
}
#home_backstage_div a:link, a:visited
{
background: url(../_images/backstage.jpg) no-repeat 0px 0px;
display: block;
height: 268px;
width: 148px;
position: absolute;
left: 600px;
top: 405px;
border: 1px solid #000;
}
#home_backstage_div a:hover, a:active
{
background: url(../_images/backstage.jpg) -150px 0px;
display: block;
position: absolute;
height: 279px;
width: 155px;
left: 595px;
top: 396px;
border: 1px solid #000;
z-index: 2;
}
Please Help!!! I am so lost as to why these browser are doing this, especially since IE 9 and FF4 run this perfectly fine. I have run through my code a ton, and there are no syntax errors as far as I can tell. I even used image sprites to eliminate load times on the hover! The only thing I can think of is the fact that I have approached the code in an odd way by giving the a: psuedo properties to the divs themselves instead of the href inside them.