Jump to content

Browser Differences.

Paper Tiger

By Paper Tiger
in CSS Help

 Share

Recommended Posts

Paper Tiger Newbie

Paper Tiger

Posted
Posted

Hello, hello,

 

Little bit stuck with some drop down menus:

 

In Chrome - my main browser - they behave exactly as expected.  The menus are the same size as the Subject links and the X at the end of each link under subject one (which I added for no other reason than to see if I could) Appears neatly.

 

In Mozilla Firefox - The dropdown menus are the right size, the same as their parent Subjects but in the first menu the X appears to be off the bottom of each link area and the bottom of the menu has a think Cyan strip.

 

In IE - It's a complete mess, the menus are larger than their parent and the first menu, although it behaves correctly has a thin Cyan strip down the side and a thick one at the bottom. (Comparison with the other browsers leads me to believe that it's not actually the menus that are larger but rather the Subject headers that are smaller than the 140px they are supposed to be set to).

 

I'm posting this here because I figured it's a CSS problem to do with different browser behaviours, I just don't know how to correct it or what I should be looking for.

 

Here's a link to the page so you can see it: http://90.221.181.204/ (I've temporarily enabled forwarding of port 80 through my firewall to be sent to my Apache server)

 

Here's the actual page code:

It's just a small experiment page so I haven't bothered separating the JS and the CSS into different files.

<html>
<head>
<style type="text/css">
<!--
#dropDownMenu {
margin: 0;
padding: 0;
/*z-index: 30*/
}
#dropDownMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:11px;
}
#dropDownMenu li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background-color:#6666CC;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
#dropDownMenu li a:hover {
background-color:#6699FF
}
#dropDownMenu div {
    width:138px;
position:absolute;
visibility: hidden;
margin: 0;
padding: 0;
background-color:#00FFCC;
border: 1px solid #6666CC
}
#dropDownMenu div span {
    visibility:hidden;
float:right;
}
#dropDownMenu div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background-color:#CCCCFF;
color: #5555BB;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#dropDownMenu div a:hover {
background-color:#6699FF;
color: #FFFFFF
}
-->
</style>
<script type="text/javascript">
<!--
var timeout	= 500;
var closeTimer	= 0;
var dropDownMenuItem	= 0;

// open hidden layer
function menuOpen(id)
{	
// cancel close timer
menuCancelCloseTimer();

// close old layer
if(dropDownMenuItem) dropDownMenuItem.style.visibility = 'hidden';

// find the layer by the ID passed as the function parameter (eg m1 m2 m3) and show it
dropDownMenuItem = document.getElementById(id);
dropDownMenuItem.style.visibility = 'visible';
}
// show the "X" at the end of each link
function menuSpanShow(id){
theSpan=document.getElementById(id);
theSpan.style.visibility="visible";
}
//hide the "X" at the end of each link
function menuSpanHide(id){
    theSpan=document.getElementById(id);
theSpan.style.visibility="hidden";
}
// close shown layer
function menuClose()
{
if(dropDownMenuItem) dropDownMenuItem.style.visibility = 'hidden';
}

// go close timer
function menuCloseTimer()
{
closeTimer = window.setTimeout(menuClose, timeout);
}

// cancel close timer
function menuCancelCloseTimer()
{
if(closeTimer)
{
	window.clearTimeout(closeTimer);
	closetimer = null;
}
}

// close layer when click-out
document.onclick = menuClose; 
-->
</script>
<title></title>
</head>
<body>
<h2 style="color:#666666">Basic Dropdown Menus</h2>
<ul id="dropDownMenu">
  <li><a href="#" 
        onmouseover="menuOpen('menu1')" 
        onmouseout="menuCloseTimer()">Subject One</a>
    <div id="menu1" 
            onmouseover="menuCancelCloseTimer()" 
            onmouseout="menuCloseTimer()"> 
               <a href="#" onMouseOver="menuSpanShow('a')" onMouseOut="menuSpanHide('a')">Anteaters <span id="a">X</span></a> 
               <a href="#" onMouseOver="menuSpanShow('b')" onMouseOut="menuSpanHide('b')">Badgers   <span id="b">X</span></a> 
               <a href="#" onMouseOver="menuSpanShow('c')" onMouseOut="menuSpanHide('c')">Cats      <span id="c">X</span></a> 
               <a href="#" onMouseOver="menuSpanShow('d')" onMouseOut="menuSpanHide('d')">Dogs      <span id="d">X</span></a> 
               <a href="#" onMouseOver="menuSpanShow('e')" onMouseOut="menuSpanHide('e')">Elephants <span id="e">X</span></a> 
    </div>
  </li>
  <li><a href="#" 
        onmouseover="menuOpen('menu2')" 
        onmouseout="menuCloseTimer()">Subject Two</a>
    <div id="menu2" 
            onmouseover="menuCancelCloseTimer()" 
            onmouseout="menuCloseTimer()"> 
              <a href="#">Astronauts</a> 
              <a href="#">Baseball Players</a> 
              <a href="#">Commandos</a> 
              <a href="#">Divers</a> 
    </div>
  </li>
  <li><a href="#"
        onmouseover="menuOpen('menu3')"
        onmouseout="menuCloseTimer()">Subject Three</a>
    <div id="menu3"
    	  onmouseover="menuCancelCloseTimer()"
          onmouseout="menuCloseTimer()"> 
            <a href="#">Nothing</a> 
            <a href="#">Zip</a> 
            <a href="#">Nada</a> 
            <a href="#">begone</a> 
    </div>

  </li>
  <li><a href="#">Subject Four</a></li>
  <li><a href="#">Subject Five</a></li>
</ul>
<div style="clear:both"></div>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/191279-browser-differences/
Share on other sites
Paper Tiger Newbie

Paper Tiger

Posted
  • Author
Posted

I knew I hadn't finished that post -

 

I realise that the cyan areas are being caused by the <span> tag being shown differently in different browsers.  Could someone explain the what and why of that?

 

Also could someone explain the why of the Subject headers being smaller in IE than in Firefox and Chrome?

Link to comment
https://forums.phpfreaks.com/topic/191279-browser-differences/#findComment-1008526
Share on other sites
Paper Tiger Newbie

Paper Tiger

Posted
  • Author
Posted

Well, I'm going to mark this one solved.

 

Re-inventing the wheel using the suckerfish menus as a guide has taught me a bit and the problems I was having with the previous version have vanished.

 

My server is still running on the same IP for the moment so if people want to have a look at my current version then they're welcome.

 

I'm marking this as solved now.

Link to comment
https://forums.phpfreaks.com/topic/191279-browser-differences/#findComment-1009118
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.