Internet Explorer moving content

Airehk

New Member
I know this is a common issue, but here it is.

Internet Explorer is causing a graphic used in a link lower in the page to show up in the upper navigation. Its hard to explain so here's the link.

http://student2013.ccgraphicdesign.ca/erikmattila/bodson/index.html

Works perfect in Firefox, Chrome and Safari on both PC and Mac.

Once you start interacting with the top navigation, it takes the last of the bottom navigation "Contact Me" with the little envelope graphic and places it on three of the four top navigation links. I see the connection as to why that happens, because the one link unaffected is one that links out of the webpage.

Home and About are html and Contact is php for obvious reasons.

Some help with this would be greatly appreciated. Thanks
 

Airehk

New Member
They are all each their own individual image file. They are separated into two groups in the html coding listed as Uppernav and lowernav. The way I see it, the upper navigation shouldn't just help itself to other parts of the website for graphics. It doesnt make sense.

I really don't have a clue whats going on here because the coding dictates that it should grab the top of the image then show the bottom when rolled over — that's it.

EDIT: I have not heard of image sprites until now, so I'll be implementing that into the page later.
 

Airehk

New Member
Would it be possible that the image sprite tactic is the solution? I fear that doing so will keep the same issue going, only with all three of the lower links showing at the top nav.
 

ronaldroe

Super Moderator
Staff member
I tried Chrome, IE9 and IE7. Everything looked fine, unless I'm missing something
 

Airehk

New Member
I tried Chrome, IE9 and IE7. Everything looked fine, unless I'm missing something

Now this frightens me because not only do I need to fix the IE issue, now I need to fix an inconsistant IE issue. More or less, I'll have to see if its a screen resolution problem, or maybe its.. I don't even know!:confused:

I appreciate you guys taking a look and your input, but if there is maybe — I know this sounds stupid — an answer from dealing with this similar issue in the past, it would be really appreciated.

Thanks!
 

ronaldroe

Super Moderator
Staff member
IDK. Check your class/ID names and other selectors to make sure you aren't accidentally selecting that nav. I would try giving the buttons at the bottom a new class and select them using only that class. See if it still does it then. Something like:

Code:
.troubleshoot{
/* yada yada CSS */
}
And then:
HTML:
<div class="troubleshoot">
<!--Button Markup-->
</div>
If I haven't completely confused you at this point, see if that doesn't change things for you. A lot of people seem to think you need to select things by doing stuff like:
Code:
#wrapper #inner-wrapper #hey-lets-add-another-wrapper div.button{/*CSS*/}
All of that's ridiculous when most of the time all you need is ".button". Not saying this is you, but just in general, a lot of issues like this one end up being something like that.
 
Last edited:

Airehk

New Member
I don't think you lost me and I am aware that putting divs inside of divs and so on is bad practice. Im guilty for doing it only because I sadly havn't leaned how to actually use classes. I know its a basic, but I really am unaware of how they are used.

Anyway, here my code.

Code:
@charset "UTF-8";
.troubleshoot{
/* CSS Document */
}
/*---DEFAULTS---*/

*{
	margin: 0;
	padding: 0;
}

body{
	font-size: 62.5%;
	font-family:Tahoma, Geneva, sans-serif;
	margin:0 auto;
	background-image:url(gfx/wallpaper.jpg);
}

html{
	font-size: 100%;
	overflow-y: scroll; 
}


#wrapper{
	width:960px;
	margin:0 auto;
	background-color:#FFF;
}

/*---STRUCTURE---*/
#header{
	width:960px;
	height:100px;
	border-bottom: dotted #CCC 2px;
}

#mlslogos{
	width:320px;
	height:100px;
	background-image:url(gfx/otherlogos.png);
	float:left;
}

/*--------------TOP NAVIGATION--------------*/
/*---BUTTON1---*/


#home {
width: 100px;
float:left;
}
 
#home li{
list-style: none;
}
 
.home a:link, a:visited{
background-image: url(gfx/buttons/home.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:top;
}
 
.home a:hover, a:active{
background-image: url(gfx/buttons/home.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:bottom;
}

/*---BUTTON2---*/


#about {
width: 100px;
float:left;
}
 
#about li{
list-style: none;
}
 
.about a:link, a:visited{
background-image: url(gfx/buttons/about.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:top;
}
 
.about a:hover, a:active{
background-image: url(gfx/buttons/about.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:bottom;
}

/*---BUTTON3---*/


#listings {
width: 100px;
float:left;
}
 
#listings li{
list-style: none;
}
 
.listings a:link, a:visited{
background-image: url(gfx/buttons/listings.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:top;
}
 
.listings a:hover, a:active{
background-image: url(gfx/buttons/listings.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:bottom;
}

/*---BUTTON4---*/


#contact {
width: 100px;
float:left;
}
 
#contact li{
list-style: none;
}
 
.contact a:link, a:visited{
background-image: url(gfx/buttons/contact.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:top;
}
 
.contact a:hover, a:active{
background-image: url(gfx/buttons/contact.png);
background-repeat: no-repeat;
height: 62px;
width: 100px;
display: block;
background-position:bottom;
}


#nav{
	width:400px;
	height:62px;
	float:right;
	padding-top:10px;
	padding-right:5px;
}

/*--------------TOP NAVIGATION---END--------------*/

#banner{
	width:960px;
	height:250px;
	background-image:url(gfx/header.png);
	margin-top:10px;
}

/*--------------BOTTOM NAVIGATION--------------*/


/*---BUTTON1---*/

#search {
width: 300px;
height: 150px;
float:left;
}
 
#search li{
list-style: none;
}
 
.search a:link, a:visited{
background-image:url(gfx/buttons/search.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:top;
}
 
.search a:hover, a:active{
background-image:url(gfx/buttons/search.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:bottom;
}

/*---BUTTON2---*/


#area {
width: 300px;
height: 150px;
padding-left:30px;
float:left;
}
 
#area li{
list-style: none;
}
 
.area a:link, a:visited{
background-image: url(gfx/buttons/area.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:top;
}
 
.area a:hover, a:active{
background-image:url(gfx/buttons/area.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:bottom;
}

/*---BUTTON3---*/


#mail {
width: 300px;
height: 150px;
padding-left:30px;
float:left;
}
 
#mail li{
list-style: none;
}
 
.mail a:link, a:visited{
background-image: url(gfx/buttons/mail.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:top;
}
 
.mail a:hover, a:active{
background-image:url(gfx/buttons/mail.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:bottom;
}

#lowernav{
	width:960px;
	height:150px;
	float:left;
	padding-top:10px;
}

/*--------------BOTTOM NAVIGATION---END--------------*/


#aboutinfo{
	width:300px;
	float:left;
	margin-top:5px;
	padding-top:5px;
	border-top:dotted #CCC 2px;
	color:#333;
	font-size:1.4em;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#aboutinfocont{
	width:300px;
	float:left;
	margin-top:5px;
	padding:5px 0 0 30px;
	border-top:dotted #CCC 2px;
	color:#333;
	font-size:1.4em;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#aboutinfoend{
	width:300px;
	float:left;
	margin-top:5px;
	padding:5px 0 0 30px;
	border-top:dotted #CCC 2px;
	color:#333;
	font-size:1.4em;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#slogan{
	width:960px;
	height:100px;
	float:left;
	margin:5px 0 0 0;
	padding:5px 0 0 0;
	border-top:dotted #CCC 2px;
	background-image:url(gfx/slogan.png);
	background-repeat:no-repeat;
	
}

#footer{
	width:960px; 
	height:100px;
	float:left;
	margin-top:5px;
	padding-top:5px;
	border-top:dotted #CCC 2px;
	text-align:right;
	color:#999;
	font-size:1em;
}
	

#contactform{
	width:360px;
	height:450px;
	margin-left:320px;
	float:left;
}

/*---------TYPOGRAPHY------------*/

h1 {
	font:Georgia, "Times New Roman", Times, serif;
	color:#666;
	font-weight:100;
	border-top:2px solid #CCC;
	margin-top: 25px;
	padding-top: 10px;
}
p {
	font:Georgia, "Times New Roman", Times, serif;
	color:#000;
	margin: 15px 0 5px;
	font-size:1.2em;
}

/*-----------FORM---------------*/

fieldset {
	border:none;
}

/*-------Classes-------*/

.formField {
	border:#CCC dotted thin;
	color:#666;
	padding:5px 10px;
	font-size: 1.6em;
	width: 300px;
	height:30px;
}


.submitBtn {
	margin-top: 10px;
}

.message {
	font:1.4em Arial, Helvetica, sans-serif;
	padding:5px 5px;
	text-align:center;
	color:#FFF;
	background-color:#900;
	width:640px;
	margin:0 0 0 160px;
}

.textField{
	color:#666;
	padding:5px 10px;
	font-size: 1.6em;
	width: 300px;
	height:100px;
}

HTML:
<!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>Julie Bodson — Royal LePage North Heritage Realty</title>
<style type="text/css">
@import url("main.css");
</style>
</head>

<body>

<div id="wrapper">

<div id="header">

<div id="mlslogos">
</div>

<div class="troubleshoot">


<div id="nav">

	<ul id="home">
	<li class="home"> <a href="index.html"></a> </li>
	</ul>

	<ul id="about">
	<li class="about"> <a href="about.html"></a> </li>
	</ul>

	<ul id="listings">
	<li class="listings"> <a href="http://www.royallepagesudbury.ca/listings.asp?AGENTID=104"></a> </li>
	</ul>

	<ul id="contact">
	<li class="contact"> <a href="contact.php"></a> </li>
	</ul>
    
</div>
</div>
</div>

<div id="banner">
</div>

<div id="lowernav">

	<ul id="search">
	<li class="search"> <a href="http://www.royallepagesudbury.ca/listings.asp?AGENTID=104"></a> </li>
	</ul>

	<ul id="area">
	<li class="area"> <a href="http://www.royallepagesudbury.ca/property-search"></a> </li>
	</ul>

	<ul id="mail">
	<li class="mail"> <a href="contact.php"></a> </li>
	</ul>
    
</div>

<div id="slogan">
</div>

<div id="footer"><p>2012 Royal LePage North Heritage Realty, Brokerage — Julie Bodson<br />4-3020 Highway 69 North, Val Caron, ON P3N 1R8<br /> Design by Erik Mattila</p>
</div>

</div>

</body>
</html>

This might very well give a better idea on whats happening. I also want to add that this is only for the index page, which is having the same problems as the rest. This leaves me to think its a css issue as its the only think applied across the board consistently.
 

ronaldroe

Super Moderator
Staff member
I guess I should have been more clear on my joke. The divs inside of divs thing was a joke about code I've seen, not yours. In fact, your HTML is pretty dang clean. There are better ways to do some of it, but all in all it isn't bad.

That said, here lies your issue:
Code:
.search a:link, a:visited{
background-image:url(gfx/buttons/search.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:top;
}
 
.search a:hover, a:active{
background-image:url(gfx/buttons/search.png);
background-repeat: no-repeat;
height: 150px;
width: 300px;
display: block;
background-position:bottom;
}
In these selectors, you're telling the browser, "Here's how I want you to style every link inside anything with the ".search" class, plus every visited link everywhere. And here's how I want you to style every hovered link inside anything with the ".search" class and every active link everywhere."

Commas in selectors start you completely over from scratch, so you'll have to call the .search again for the selectors after the comma. So:
.search a:link, .search a:visited{/*CSS*/}
.search a:hover, .search a:active{/*CSS*/}
 

Airehk

New Member
So if I understand you correctly, get rid of the comma after the "a:visited"?

so it reads:

.search a:link a:visited{
blah blah
}

I think you might be on to something because the issue on IE only starts right after you select a link, sometimes, I think. Last night it looked fixed, but one I started to interact with them, the problem came back. I think its permanent now on my IE because of cookies saying "You were already here".

I'm going to fiddle with this theory a bit because I have a good feeling about it. Thanks for the help, I'll post back if the issue is or isn't resolved. I wanna CRUSH this IE problem! :D

P.S. Thanks for complementing me on the tidy coding, I try to make it legible incase so that.. you know.. I want to read it again if there are errors!


EDIT: I have tried different variants of your suggestion, none worked. Updating Internet Explorer fixed the issue though. I'm wondering if anyone is using an old IE should just suffer? I mean it IS their fault for using a horrid browser, though they are innocent for not knowing otherwise.
 
Last edited:

Airehk

New Member
I think I'm going to call it quits on this issue. Updating IE solved the issue 100%. The way I see it is if someone uses IE and can see a problem, they may want to look into what is wrong, then get advice on updating or changing browser.

ronaldroe, you're a good man. Thanks for all the help.
Phreaddee, thanks for hinting towards image sprites, never heard of them until you introduced me.
 

ronaldroe

Super Moderator
Staff member
No. Keep the comma. In fact, copy the selectors exactly as I rewrote them.

You're welcome.

The problem here isn't IE. It's actually every other browser lying to you by rendering the code how you want it to look.
 

Brodzko

New Member
Hey,

It displays the Contact button twice for me - once in the lowerNav as it should, and once in the upperNav as it apparently shouldn't - it seems to be displayed on Home link default and it's blinking when I move my cursor over it.

Anyway, I can't see why you coded the upperNav using images, when it could be easily done with just a few lines of CSS - the less images the better, I think.

I would yet try to code the lowerNav as a set of three divs instead of ul. But am not sure whether that'd be helpful.

In the end we all know we're talking about IE so we shouldn't be wondered about such stuff happening. Let's just hope IE's percentage will drop very quickly :)
 

ronaldroe

Super Moderator
Staff member
I would yet try to code the lowerNav as a set of three divs instead of ul. But am not sure whether that'd be helpful.
This is the only place I disagree. However, instead of individual <ul>'s, do one list and style the <li> as the buttons.
 

Airehk

New Member
Thanks for the further advice guys! I took a couple days off, so I will try and re upload it with the said tweaks in time. I'm still new to web with only about a solid years experience.

Again with that said, I'm grateful for the advice.
 
Top