...
PDA

View Full Version : Resolved Compatibility mode viewing website on Internet Explorer 6 and iOS Safari

olivier255
07-25-2011, 11:58 PM
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
http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/268614_10150266556617492_516977491_7519452_2261174_n.jpg
Note: Contact link goes under nav bar instead of at the end like it should and does in all other updated browser.


Navigation page
http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/262904_10150266556587492_516977491_7519451_2771206_n.jpg
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:

<!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

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.
nandahosting
07-26-2011, 12:41 AM
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
olivier255
07-26-2011, 01:03 AM
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
olivier255
07-27-2011, 12:19 AM
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

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum