Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Compatibility mode viewing website on Internet Explorer 6 and iOS Safari

    Hi everyone, thanks in advance for reading.
    This is my first time using a forum, sorry in advance if anything I did is wrong!
    Now let's get to the topic.


    Ok, so here's my problem:

    I have recently build my own website and I coded myself the website.
    My website looks perfectly fine in any updated browser (Chrome, Firefox, IE9, Safari and opera). However, I noticed that on IE6 my website is having an issue of compatibility with my menu bar (or the nav bar). For some reasons, it won't come up right. The same problem happens when viewing my website from any iOS device (iphone, ipod, ipad...).

    It bothers me because about 20% of people are still using IE6 and more people are starting to use iOS devices to surf the web.


    See below what happens:
    Index page

    Note: Contact link goes under nav bar instead of at the end like it should and does in all other updated browser.


    Navigation page

    Note: Contact link goes under nav bar instead of at the end like it should and does in all other updated browser. And all the other menu which is usually under it is pushed as well...


    Okay, I will leave you guys the html coding of the index page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml" 
    	xml:lang="en" 
    	xmlns:og="http://ogp.me/ns#"
    	xmlns:fb="http://www.facebook.com/2008/fbml"    
    >
      
    <head>
    	<?php include("head.php"); ?>
    </head>
       
       
    <body class="link1">
       
    	<?php include("header.php"); ?>
       
    	<?php include("menu.php"); ?>
    
     
    <div id="body">
    
    <script language="JavaScript">
    // Copyright 1996, Infohiway, Inc. (http://www.infohiway.com)
    // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
    <!--
    function adArray() {
     for (i=0; i*2<adArray.arguments.length; i++) {
      this[i] = new Object();
      this[i].src = adArray.arguments[i*2];
      this[i].href = adArray.arguments[i*2+1];
     }
     this.length = i;
    }
    function getAdNum() {
     dat = new Date();
     dat = (dat.getTime()+"").charAt(8);
     if (dat.length == 1)
      ad_num = dat%ads.length;
     else
      ad_num = 0;
     return ad_num;
    }
    var ads = new adArray(
    "/images/slide/slide_1.jpg","europe.php",
    "/images/slide/slide_2.jpg","europe.php",
    "/images/slide/slide_3.jpg","europe.php",
    "/images/slide/slide_4.jpg","europe.php",
    "/images/slide/slide_5.jpg","europe.php");
    var ad_num = getAdNum(); 
    document.write('<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD '
    +'ALIGN=CENTER><FONT SIZE=2 FACE=Arial><B>    '
    +'</FONT></TD><TR></TR><TD><A HREF="'+ads[ad_num].href+'"><IMG SRC="'+ads[ad_num].src+'" '
    +'WIDTH="800" HEIGHT="533" BORDER=0 name=js_ad></A></TD></TR></TABLE></CENTER>');
    link_num = document.links.length-1;
    function rotateSponsor() {
     if (document.images) {
      ad_num = (ad_num+1)%ads.length;
      document.js_ad.src = ads[ad_num].src;
      document.links[link_num].href = ads[ad_num].href;
      setTimeout("rotateSponsor()",5000);
     }
    }
    setTimeout("rotateSponsor()",5000);
    
    		
    // -->
    </script>
    
    </div>
     
     
     
     
    	<?php include("recentphotos.php"); ?>
     
      
    	<?php include("footer.php"); ?>
    
    
    
    
    
       </body>
       
       
    </html>


    And here is the css coding. Note that you can also access the css page at http://www.oliviergougeon.com/design.css

    Code:
    body
    {
    width: 850px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 20px;
    background-color: #2B2922;
    }
    
    html
    {
    overflow-y: scroll;
    /*cursor: url("images/cursor.cur"), auto;*/
    }
    
    
    
    
    #logo /* HEADER HEADER HEADER */
    {
    background-image: url("images/logo.png");
    display: block;
    height: 97px;
    text-indent: -99999999px;
    width: 486px;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    /*border: 5px solid;*/
    border-color: #A39770;
    background-repeat: no-repeat;
    /*text-decoration: none;
    padding-top: 77px;
    overflow: hidden;*/
    }
    
    #logo_one /* PICTURES PICTURES PICTURES */
    {
    background-image: url("images/nyc.jpg");
    display: block;
    height: 253px;
    text-align: center;
    width: 380px;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    border: 2px solid #A39770;
    background-repeat: no-repeat;
    }
    
    
    #menu
    {
    /*float: left;*/
    /*width: 840px;*/
    clear: both;
    color: #A32500;
    background-color: #EFE4BD;
    border: 2px solid;
    border-color: #A39770;
    padding: 0px;
    height: 22px;
    margin-bottom: 0px;
    }
    
    #menu ul
    {
    list-style: none;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px;
    }
    
    #menu ul li
    {
    float: left;
    margin-top: 2px;
    margin-bottom: 0px;
    margin-left: 40px;
    margin-right: 40px;
    }
    
    
    #menu h3
    
    {
    /*text-indent: 10px;*/
    }
    
    #menu a
    {
    text-decoration: none;
    color: #2B2922;
    font-weight: bolder ;
    }
    
    #menu a:hover
    {
    color: #A32500;
    }
    
    #menu a:active
    {
    color: #A32500;
    }
    
    
    
    
    #photo_menu
    {
    /*float: left;*/
    /*width: 840px;*/
    color: #A32500;
    background-color: #EFE4BD;
    border: 2px solid;
    border-color: #A39770;
    padding: 0px;
    height: 22px;
    margin-top: -2px;
    font-size: 70%;
    }
    
    #photo_menu ul
    {
    list-style: none;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px;
    }
    
    #photo_menu ul li
    {
    float: left;
    margin-top: 4px;
    margin-bottom: 0px;
    margin-left: 40px;
    margin-right: 40px;
    }
    
    
    #photo_menu h3
    
    {
    /*text-indent: 10px;*/
    }
    
    #photo_menu a
    {
    text-decoration: none;
    color: #2B2922;
    font-weight: bolder ;
    }
    
    #photo_menu a:hover
    {
    color: #A32500;
    }
    
    
    
    
    #menu_home
    {
    float: left;
    width: 168px;
    height: 30px;
    text-align: center;
    }
    
    #menu_aboutme
    {
    float: left;
    width: 168px;
    height: 30px;
    text-align: center;
    }
    
    #menu_photographs
    {
    float: left;
    width: 168px;
    height: 30px;
    text-align: center;
    }
    
    #menu_guestbook
    {
    float: left;
    width: 168px;
    height: 30px;
    text-align: center;
    }
    
    #menu_contact
    {
    float: left;
    width: 168px;
    height: 30px;
    text-align: center;
    }
    
    
    #body
    {
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 15px;
    /*width: 840px;*/
    /*font-family: Tahoma, serif;*/
    font-family: Verdana, Tahoma, serif;
    
    /*height: 540px;*/
    
    color: black;
    background-color: #EFE4BD;
    height: auto;
    border: 2px solid;
    border-color: #A39770;
    
    overflow: visible;
    }
    
    #body div
    {
    /*padding-left: 15px;*/
    }
    
    #body span p
    {
    padding-left: 20px;
    padding-right: 0px;
    color: black;
    line-height: 20px;
    }
    
    #body span p a
    {
    text-decoration: none;
    color: #A32500;
    }
    
    #body span p img
    {
    width: 15%;
    position: absolute;
    left: 43%;
    }
    
    
    
    
    
    #body div p
    {
    text-indent: 10px;
    color: black;
    }
    
    #body h1
    {
    text-align: left;
    font-size: 170%;
    color: #A32500;
    padding-left: 0px;
    padding-bottom: 1px;
    border-bottom: 1px solid #A32500;
    }
    
    #body h3
    {
    text-align: left;
    color: #A32500;
    padding-left: 0px;
    }
    
    #body h2
    {
    color: #A32500;
    }
    
    #fakepadding
    {
    padding-left: 20px;
    color: black;
    /*background-image: url('images/olivier.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 100% -40px;*/
    }
    
    
    #photoblock_ab
    {
    /*border: 2px solid black;*/
    /*height: 600px;*/
    height: 824px;
    padding-left: 2px;
    padding-right: 2px;
    overflow: visible;
    margin-bottom: 1px;
    position: relative;
    display: block;
    }
    
    #photoblock_a
    {
    /*border: 2px solid;
    border-color: #A39770;*/
    float: left;
    height: auto;
    width: 380px;
    margin: 10px;
    display: inline;
    overflow: visible;
    height: auto;
    margin-bottom: 1px;
    position: block;
    }
    
    
    #photoblock_b
    {
    /*border: 2px solid;
    border-color: #A39770;*/
    height: auto;
    width: 380px;
    float: right;
    margin: 10px;
    display: inline;
    overflow: visible;
    height: auto;
    margin-bottom: 1px;
    position: block;
    }
    
    #posts_images
    {
    text-align: center;
    }
    
    #posts_images img
    {
    /*border: 10px solid white;*/
    }
    
    
    #recentphotos
    {
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    clear: both;
    
    background-color: #EFE4BD;
    color: #2B2922;
    text-transform: uppercase;
    border: 2px solid #A39770;
    }
    
    #recentphotos h4
    {
    margin-top: 0px;
    border-bottom: 1px solid #2B2922;
    padding-right: 20px;
    margin-bottom: 8px;
    }
    
    #recentphotos span
    {
    font-style: italic;
    }
    
    #recentphotos img
    {
    border: 2px solid #2B2922;
    margin-right: 1px;
    margin-bottom: 2px;
    }
    #footer
    {
    clear: both;
    margin-top: 1px;
    }
    
    #copyright
    {
    /*text-align: right;*/
    color: white;
    float: right;
    }
    
    #copyright span
    {
    font-style: italic;
    }
    
    #footer a
    {
    text-decoration: none;
    color: white;
    }
    
    #footer a:hover
    {
    color: #A32500;
    }
    
    #footer p
    {
    margin-top: 2px;
    font-size: 90%
    }
    
    #topofpage
    {
    clear: both;
    /*text-align: left;*/
    color: white;
    float: left;
    }
    
    #main-logo
    {
    clear: both;
    float: left;
    }
    
    #facebook
    {
    margin-top: 6px;
    float: right;
    }


    It must be something really stupid to add in the css code that will fix everything... I've been trying so many stuff, but I can't get it to work.

    Thanks again for reading and I hope some genius will find the answer to my problem!

    Cheers guys.
    Last edited by olivier255; 07-27-2011 at 01:22 AM. Reason: Resolved

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    241
    Thanks
    16
    Thanked 2 Times in 2 Posts
    try adding display: inline-block; to the "#photo_menu ul li" in the css?

    let me know if that works, if not will look into deeper, thanks
    Last edited by nandahosting; 07-26-2011 at 01:44 AM.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hey @nandahosting,

    Thanks for replying this quick to my thread.
    Unfortunately, it did not fix the problem...

    What should we look up next?

    Thanks again,
    Olivier
    Last edited by olivier255; 07-26-2011 at 02:05 AM.

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    FOUND the answer to my problem.

    Hi everyone,

    First I'd like to thank @nandahosting for answering to my post.

    After many attempts, I finally found the solution to my problem; I thought I'd share it with you guys so if it ever happened to anyone they could fix it.

    So my original css code was :

    #menu ul li
    {
    float: left;
    margin-top: 2px;
    margin-bottom: 0px;
    margin-left: 40px;
    margin-right: 40px;
    }

    Note: What happens is that the margin-right tag added a 40px margin to the right of the last nav link. And doing so told iOS safari that there wasn't enough place for that 40px-margin in the div of the nav bar.

    So what I did... Is pretty simple. I changed the css code to that :

    #menu ul li
    {
    float: left;
    margin-top: 2px;
    margin-bottom: 0px;
    margin-left: 69px;
    margin-right: 0px;
    padding-left: 0px;
    }

    And I added this to the html code for the last nav link to "contact" :
    <ul>
    <li><a id="link1" href="/">Home</a></li>
    <li><a id="link2" href="/aboutme">About Me</a></li>
    <li><a id="link3" href="/photographs">Photographs</a></li>
    <li><a id="link4" href="/guestbook">Guestbook</a></li>
    <li style="margin-right: 0px;"><a id="link5" href="/contact">Contact</a></li>
    </ul>

    Note: By doing so, I was able to position my nav list with the css and removed the extra "40px-margin" to the right of "contact" in the nav bar by forcing the last list menu to have no margin to its right (see bold text above). Now that the "contact" nav link was 40px shorter, it could actually fit in my div.

    Anyways, hope this will help anymore in the future who encounters my same problem.

    Cheers,
    Olivier


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •