Internet Explorer moving content

Discussion in 'Web Design' started by Airehk, Aug 9, 2012.

to remove all ads.
  1. Airehk

    Airehk New Member

    Messages:
    33
    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
     
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Happens on a phone too.
    Is it an image sprite gone wrong?
     
  3. Airehk

    Airehk New Member

    Messages:
    33
    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.
     
  4. Airehk

    Airehk New Member

    Messages:
    33
    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.
     
  5. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Guess you must have fixed it? Seems fine to me.
     
  6. Airehk

    Airehk New Member

    Messages:
    33
    I haven't fixed it. Were you looking at it on IE?
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I tried Chrome, IE9 and IE7. Everything looked fine, unless I'm missing something
     
  8. Airehk

    Airehk New Member

    Messages:
    33
    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!
     
  9. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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: Aug 9, 2012
  10. Airehk

    Airehk New Member

    Messages:
    33
    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.
     
  11. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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*/}
     
  12. Airehk

    Airehk New Member

    Messages:
    33
    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: Aug 10, 2012
  13. Airehk

    Airehk New Member

    Messages:
    33
    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.
     
  14. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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.
     
  15. Airehk

    Airehk New Member

    Messages:
    33
    Thanks for the update, Ronaldroe.
     
  16. Brodzko

    Brodzko New Member

    Messages:
    27
    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 :)
     
  17. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    This is the only place I disagree. However, instead of individual <ul>'s, do one list and style the <li> as the buttons.
     
  18. Airehk

    Airehk New Member

    Messages:
    33
    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.
     

Share This Page