...

View Full Version : Resolved Div invisible in IE; OK in other browsers



mcpop909
11-10-2011, 11:28 AM
Hi,

I have a DIV (class="social") for Facebook and Twitter buttons under the navigation on the left-hand side of my website which you can see live at www.hkiph.org.

This is fine in Chrome, Firefox, Safari and Opera but invisible in Internet Explorer 9 - in IE there is just an empty space between the navigation and the search button.

The HTML starts (truncated due to length of post):





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en-GB" style="overflow-y: scroll;">

<head>

<title>The Hong Kong Institute of Phonetics | 香港語音教育學院</title>
</head>

<body class="background" style="background-image:url('images/background.gif')">

<!-- LOGO -->

<div class="site_style"><a href="index.php"><img class="logo_image" alt="Logo" src="images/logo_full.png"></a>

<div class="mobile_only">
<a href="/"><img alt="Logo" class="mobile_logo" src="images/logo_mobile.png"></a>
<h1>The Hong Kong Institute of Phonetics</h1>
</div>

<!-- CONTENT HOLDER -->
<div class="content_holder">

<div class="menu">
<div class="menu_border">
<p style="font-size:3pt">&nbsp;</p>
<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_001' ,'hide', 'our_id_002' ,'hide', 'our_id_003' ,'hide')"
href="./">Home</a>
</p>

<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_001' ,'show', 'our_id_002' ,'hide', 'our_id_003', 'hide')"
href="courses">Courses</a>
</p>

<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_002' ,'show', 'our_id_001' ,'hide', 'our_id_003' ,'hide')"
href="why-study-phonetics">Why study phonetics?</a>
</p>

<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_003' ,'show', 'our_id_001' ,'hide', 'our_id_002' ,'hide')"
title="Free audio recordings of all the sounds of English."
href="sounds-of-english">The sounds of English</a>
</p>


<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_001' ,'hide', 'our_id_002' ,'hide', 'our_id_003' ,'hide')"
href="consultants">Consultants</a>
</p>

<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_001' ,'hide', 'our_id_002' ,'hide', 'our_id_003' ,'hide')"
title="Existing clients - Log in to our Virtual Learning Centre for access to all course materials."
href="login">Client login</a>
</p>


<p class="menu_item"><a class="menu_link"
onmouseover="showHideMenu('our_id_001' ,'hide', 'our_id_002' ,'hide', 'our_id_003' ,'hide')"
href="contact">Contact</a>
</p>

</div>

<div class="social">

<iframe src="//www.facebook.com/plugins/like.php?href=www.facebook.com%2Fhkiph&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action =like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:75px;" allowTransparency="true"></iframe><br>

<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="rmstibbard"></a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

</div>

<div class="search">
<FORM method=GET action="http://www.google.com/search">
<TABLE>
<tr>
<td class="search_border">

<INPUT TYPE=text name=q maxlength=255 value="" class="search_input">
<INPUT type=submit name=btnG VALUE="Search this site" class="search_button">
<input type=hidden name=domains value="hkiph.org"><br>
<input type=hidden name=sitesearch value="hkiph.org">
</td>
</tr>
</TABLE>
</FORM>
</div>

</div>


<div id="our_id_001" class="hidden_sub_menu" style="top:20px;"
onmouseover="showHideMenu('our_id_001' ,'show', 'our_id_002' ,'hide', 'our_id_003', 'hide')"
onmouseout="showHideMenu('our_id_001' ,'hide', 'our_id_002' ,'hide', 'our_id_003' ,'hide')">

<p class="sub_menu_title"><a class="sub_menu_title_link" href="courses">&nbsp;OVERVIEW OF OUR COURSES</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="pronounce-english-accurately">Pronounce English accurately</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="speak-english-expressively">Speak English expressively</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="phonetics-and-phonics-for-teachers">Phonetics and phonics for teachers</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="phonetics-and-phonics-for-parents">Phonetics and phonics for parents</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="general-phonetics">General phonetics</a></p>

</div>


<div id="our_id_002" class="hidden_sub_menu" style="top:47px;"
onmouseover="showHideMenu('our_id_002' ,'show', 'our_id_001' ,'hide', 'our_id_003' ,'hide')"
onmouseout="showHideMenu('our_id_002' ,'hide', 'our_id_001' ,'hide', 'our_id_003' ,'hide')">

<p class="sub_menu_title"><a class="sub_menu_title_link" href="why-study-phonetics">&nbsp;WHY STUDY PHONETICS?&nbsp;</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="definitions">First things first: Definitions of terms</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="the-science-of-phonetics">The science of phonetics</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="phonics-or-phonetics">Phonics or phonetics: Which is best?</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="why-phonetic-knowledge-is-vital-for-Hong-Kong-learners">Why phonetic knowledge is
vital for Hong Kong learners</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="phonemic-awareness-research-hongkong">Relevant research on poor phonemic awareness in Hong Kong</a></p>

</div>

<div id="our_id_003" class="hidden_sub_menu" style="top:75px;"
onmouseover="showHideMenu('our_id_003' ,'show', 'our_id_001' ,'hide', 'our_id_002' ,'hide')"
onmouseout="showHideMenu('our_id_003' ,'show', 'our_id_001' ,'hide', 'our_id_002' ,'hide')">

<p class="sub_menu_title"><a class="sub_menu_title_link" href="sounds-of-english">&nbsp;THE SOUNDS OF ENGLISH WITH IPA TRANSCRIPTIONS&nbsp;</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="english-consonants">Audio recordings of all the English consonants</a></p>

<p class="sub_menu_item"><a class="sub_menu_link" href="english-vowels">Audio recordings of all the vowels of British English</a></p>


</div>


<div class="mobile_menu">
<br><br><a href="sitemap">Navigation for mobile via sitemap</a><br><br>

<FORM method=GET action="http://www.google.com/search">
<TABLE>
<tr>
<td>

<INPUT TYPE=text name=q size=12 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Search this site">
<input type=hidden name=domains value="hkiph.org"><br>
<input type=hidden name=sitesearch value="hkiph.org">
</td>
</tr>
</TABLE>
</FORM>

</div>





and the CSS is:





.site_style
{
background-color:white;
position:absolute;
top:0px;
left:0px;
width:80%;
border-right:1px solid black;
box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; -webkit-box-shadow: 5px 5px 5px #888;
border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;
}


.logo_image
{
width:720px;
height:120px;
border:0;
}


a:link
{
color: blue;
font-weight:bold;
text-decoration:none;
}

a:visited
{
color:purple;
}

a:hover
{
outline:none;
color:orange;
text-decoration:none;
}


.sitemap_level_1
{
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 10pt;
color: black;
text-align: left;
text-indent:0px;
line-height:1.5em;
}

.sitemap_level_2
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight:bold;
color: black;
text-align: left;
margin-left:10px;
line-height:1.5em;
}

.sitemap_level_3
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight:bold;
color: black;
text-align: left;
margin-left:20px;
line-height:1.5em;
}



a.sitemap_link
{
color: blue;
text-decoration:none;
}

a.sitemap_link:visited
{
color: purple;
}

a.sitemap_link:hover
{
outline:none;
color:orange;
text-decoration:none;
}


.background
{
background-color:#FAFAFA;
}

p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
text-align: justify;
line-height:1.5em;
}

.normal_text
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
text-align: justify;
line-height:1.5em;
}

.caption
{
font-family: Arial, Helvetica, sans-serif;
margin-left:15%;
font-size: 8pt;
color: #858585;
text-align: justify;
line-height:1.25em;
}

.database_text
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight:normal;
color: black;
text-align: left;
}

.fp_banner
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
text-align: justify;
line-height:1.5em;
border:1px solid black;
padding:10px;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}

.banner_colour
{
background-color:#E6E6FA;
}


.fp_lower_containing_div
{
margin-left:auto;
margin-right:auto;
position: relative;
width: 100%;
height: 350px;
text-align:center;
}

.fp_lowerdiv_top_left
{
position: absolute;
top: 0px;
left: 00%;
width: 33%;
height: 155px;
}

.fp_lowerdiv_middle
{
position: absolute;
top: 30px;
left: 33%;
width: 33%;
height: 260px;
}

.fp_lowerdiv_top_right
{
position: absolute;
top: 0px;
left: 66%;
width: 33%;
height: 155px;
}

.fp_lowerdiv_bottom_left
{
position: absolute;
top: 180px;
left: 0%;
width: 33%;
height: 155px;
}

.fp_lowerdiv_bottom_right
{
position: absolute;
top: 180px;
left: 66%;
width: 33%;
height: 155px;
}

.graphic_menu
{
border:0px;
max-width:100%;
}

.tagline
{
top:-10px;
position:relative;
float:right;
margin-right:10px;
font-family: arial , helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
width:100%;
text-align:right;
}

.top_contact_screen
{
top:5px;
position:relative;
float:right;
margin-right:10px;
font-family: arial , helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
}

.top_contact_mobile
{
display:none;
}

a.top_contact_link
{
color:grey;
text-decoration:none;
}

a.top_contact_link:visited
{
text-decoration:none;
color:gray;
}

a.top_contact_link:hover, a.top_contact_link:focus, a.top_contact_link:active
{
text-decoration:none;
color: orange;
}


.content_holder
{
background-color:white;
position:absolute;
top:180px;
left:0px;
width:100%;
border-right:1px solid black;
box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; -webkit-box-shadow: 5px 5px 5px #888;
border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

.content
{
margin-left:180px;
text-align:justify;
margin-right:10px;
min-height:178px;
}


.menu
{
position:absolute;
left:0px;
width:160px;
background-color:#FAFAFA;
height:100%;
font-weight:normal;
overflow-y:hidden;
overflow-x:hidden;
}

.mobile_menu
{
display:none;
}

.menu_border
{
background-color:#FAFAFA;
position:relative;
top:-13px;
border-right:8px solid grey;
}

.menu_item
{
position:relative;
text-align:right;
font-size:10pt;
font-weight:normal;
font-family: arial , helvetica, sans-serif;
line-height:15px;
margin-right:10px;
margin-top:10px;
}


a.menu_link:link
{
text-decoration:none;
color:black;
font-weight:normal;
}

a.menu_link:visited
{
text-decoration:none;
color:black;
}

a.menu_link:hover, a.menu_link:active, a.menu_link:focus
{
text-decoration:none;
color: orange;
}


.hidden_sub_menu
{
visibility:hidden;
position:absolute;
left: 152px;
background-color:#F8F8F8;
z-index:1;
border:1px solid black;
box-shadow: 10px 10px 5px #888; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888;
}

.sub_menu_item
{
font-family: arial , helvetica, sans-serif;
margin-left:10px;
margin-right:10px;
line-height:12px;
}

a.sub_menu_link:link
{
font-weight:normal;
text-decoration:none;
color:black;
}

a.sub_menu_link:visited
{
text-decoration:none;
color:black;
}

a.sub_menu_link:hover
{
text-decoration:none;
color: orange;
}

.sub_menu_title
{
text-align: left;
font-family: arial , helvetica, sans-serif;
font-size: 10pt;
color: white;
font-weight:bold;
background-color:gray;
margin-left:10px;
margin-right:10px;
border-bottom:1px solid white;
}

a.sub_menu_title_link:link, a.sub_menu_title_link:visited
{
text-decoration:none;
color:white;
}

a.sub_menu_title_link:hover
{
text-decoration:none;
color: black;
}

.footer_box
{
position:relative;
top:25px;
left:10px;
}

.footer_text
{
font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
color:grey;
font-weight:normal;
text-decoration:none;
}

a.footer_text
{
color:gray;
font-weight:normal;
text-decoration:none;
}

a.footer_text:visited
{
text-decoration:none;
color:gray;
}

a.footer_text:hover, a.footer_text:focus, a.footer_text:active
{
text-decoration:none;
color: orange;
}

h1
{
font-family: Arial, helvetica, sans-serif;
font-weight: normal;
font-size: 15pt;
color: white;
text-align:left;
text-indent:10px;
background-color:#24A1F1;
border-radius:15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
box-shadow: 4px 4px 2px #888;
display:inline-block;
}


h2
{
font-family: Arial, helvetica, arial, sans-serif;
font-size:12pt;
font-weight:bold;
}

.grey_box
{
font-family: Arial, helvetica, arial, sans-serif;
font-size:13pt;
color:white;
background-color:#8F8F8F;
text-indent:10px;
font-weight:bold;
box-shadow: 5px 5px 2.5px #CCC;
display:inline-block;
}


p.terms
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
text-align: justify;
line-height:1.2em;
margin-left:10px;
}


li
{
margin-left:-10px;
margin-right:10px;
}


.login
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
}

.strong
{
font-weight: bold;
}

.login_box
{
border:1px solid black;
background-color:#DCDCDC;
width:65%;
text-align:left;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}

.login_table
{
cellspacing:0px;
cellpadding:0px;
border:0px;
}

.contact
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
text-align: justify;
line-height:2em;
}

.fp_contact
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
font-weight:bold;
text-align: center;
}

.login_text
{
margin-left:10px;
margin-right:10px;
}


.reference
{
text-indent:-2em;
margin-left: 2em;
}

.uline
{
text-decoration:underline;
}

.ital
{
font-style:italic;
}

.purple
{
background-color:#CD00CD;
}

.grey
{
background-color:grey;
}

.brightgreen
{
background-color:#49E20E;
}

.darkgreen
{
background-color:#518C62;
}


.lightblue
{
background-color:#9BE3FB;
}


.blue
{
background-color:#24A1F1;
}

.lightbrown
{
background-color:#D2AA6D;
}

.lightgrey
{
background-color:lightgrey;
}

.big_space
{
height:45px;
}


.mid_space
{
height:30px;

}

.small_space
{
height:20px;
}

.page_break
{
height:20px;
}

.mobile_only
{
display:none;
}

.screen_centre
{
text-align:center;
}


.table_header
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: white;
background-color:grey;
font-weight:bold;
text-align:left;
vertical-align:top;
}

.table_left_header
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
font-weight:bold;
text-decoration:underline;
vertical-align:top;
}

.ipa
{
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Charis SIL";
font-size: 20pt;
color: black;
text-align:left;
}

.ipa-small
{
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Charis SIL";
font-size: 12pt;
color: black;
}

.ipa-alert:link
{
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Charis SIL";
font-size: 20pt;
color: red;
text-align:left;
}

.ipa-alert:hover
{
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Charis SIL";
font-size: 20pt;
color: orange;
text-align:left;
}

.ipa-alert:visited
{
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Charis SIL";
font-size: 20pt;
color: red;
text-align:left;
}

.phonics
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: black;
font-weight:bold;
text-align:left;
}

.phonics-alert
{
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: red;
font-weight:bold;
text-align:left;
}

.phonics-alert-small
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: red;
font-weight:bold;
text-align:left;
}

.note
{
font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
}


.search
{
position:relative;
float:right;
width:125px;
text-align:center;
line-height:10px;
margin-right:10px;
margin-top:20px;
overflow:hidden;
}

.search_border
{
border:1px dotted gray;
padding:5px;
border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
}

.search_input
{
height:18px;
outline:none;
width:107px;
border:1px solid grey;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}


.search_button
{
width:110px;
}


.social
{

text-align:right;
line-height:10px;
margin-right:10px;
margin-top:-5px;
overflow:hidden;
}

.base_layer
{
border:1px solid black;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}

.table_row
{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
text-align: left;
width: 100%;
}

.table_cell
{
float: left;
margin: 0;
padding: 0;
width:49%;
}

.space_line
{
clear: both;
margin: 0;
padding: 0;
width: auto;
}

.table_text
{
margin-left:10px;
margin-right:10px;
}

.border_right
{
border-right:1px solid black;
}

.border_bottom
{
border-bottom:1px solid black;
}


.image_right
{
border:none;
float:right;
max-width:40%;
}

.image_left
{
border:none;
float:left;
max-width:40%;
}

.image_login
{
border:none;
height:64px;
width:64px;
}


I hope I have followed the guidelines for posting properly - my apologies if not.

Any help much appreciated as I really cannot see what is wrong.

Thanks,
Richard

SB65
11-10-2011, 11:33 AM
Works for me in IE9 and IE8....

mcpop909
11-10-2011, 11:38 AM
Gosh! I asked a friend to try it and he says it's OK too. Must be something to do with my PC - I will delete the history and cache and try again. Sorry for the unnecessary post and thanks for checking it.

Can you mark the thread as solved for me or do I have to do that?

Richard

SB65
11-10-2011, 11:44 AM
Are you by any chance viewing the page locally in your computer - in which case IE may be blocking the javascript that loads your social media stuff.

You should be able to edit your first post and mark it resolved.

mcpop909
11-10-2011, 11:55 AM
I deleted my history and temporary internet files and it was OK. Must have been cached locally in that browser only. It was really doing my head in, so many thanks for the instant response! I have marked it "Resolved" now.

Richard



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum