Solved

Firefox won't allow selection of text within <div> tags but Internet Explorer v6 will. What?

Posted on 2008-06-12
9
455 Views
Last Modified: 2008-06-12
Experts,

I'm having 2 bizarre problems. One is important, one is less so. When I open this webpage in Internet Explorer v6, it renders perfectly and everything seems to be working fine. When I open it in firefox, the links below the menu don't work and the text can't be highlighted. However, the link in the footer (at the bottom of the page) works and the text there can be highlighted. Please provide an explanation/solution.

The second issue is related to the menu bar at the top. In internet explorer v6 it is the proper width (800px), but in firefox, it is closer to 830px. An explanation/solution to this would also be appreciated, although the first question is far more imporant.

The code for the website is below, and I uploaded the page here (note that the links will not go to the right pages as it is not in its proper place in the directory hierarchy).

http://wellsresearch.com/webdev/webdev/index1.asp

Thanks in advance,

Lyell
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
 

<title>Wells Research & Development</title>
 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 

<link href="Templates/styles.css" rel="stylesheet" type="text/css">

<link href="styles.css" rel="stylesheet" type="text/css">
 

<SCRIPT LANGUAGE="JavaScript">

<!-- Original:  D. Keith Higgs (dkh2@po.cwru.edu) -->
 

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->
 

<!-- Begin

var timeDelay = 5; // change delay time in seconds

var Pix = new Array

("contentimages/1.jpg" 

,"contentimages/2.jpg" 

,"contentimages/a.jpg" 

,"contentimages/b.jpg" 

,"contentimages/c.jpg" 

,"contentimages/d.jpg"

);

var Pix2 = new Array

("contentimages/3.jpg" 

);

var howMany = Pix.length;

var howMany2 = Pix2.length;

timeDelay *= 1000;

var PicCurrentNum = 0;

var PicCurrentNum2 = 0;

var PicCurrent = new Image();

var PicCurrent2 = new Image();

PicCurrent.src = Pix[PicCurrentNum];

PicCurrent2.src = Pix2[PicCurrentNum2];

function startPix() {

setInterval("slideshow()", timeDelay);

}

function slideshow() {

PicCurrentNum++;

PicCurrentNum2++;

if (PicCurrentNum == howMany) {

PicCurrentNum = 0;

}

if (PicCurrentNum2 == howMany2) {

PicCurrentNum2 = 0;

}

PicCurrent.src = Pix[PicCurrentNum];

document["ChangingPix"].src = PicCurrent.src;

PicCurrent2.src = Pix2[PicCurrentNum2];

document["ChangingPix2"].src = PicCurrent2.src;

}

//  End -->

</script>
 
 
 

<script language="JavaScript1.2" src="popup.js" type="text/javascript"></script>

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}
 

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}
 

function MM_nbGroup(event, grpName) { //v6.0

  var i,img,nbArr,args=MM_nbGroup.arguments;

  if (event == "init" && args.length > 2) {

    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {

      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;

      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

      nbArr[nbArr.length] = img;

      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

        if (!img.MM_up) img.MM_up = img.src;

        img.src = img.MM_dn = args[i+1];

        nbArr[nbArr.length] = img;

    } }

  } else if (event == "over") {

    document.MM_nbOver = nbArr = new Array();

    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {

      if (!img.MM_up) img.MM_up = img.src;

      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);

      nbArr[nbArr.length] = img;

    }

  } else if (event == "out" ) {

    for (i=0; i < document.MM_nbOver.length; i++) {

      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }

  } else if (event == "down") {

    nbArr = document[grpName];

    if (nbArr)

      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }

    document[grpName] = nbArr = new Array();

    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

      if (!img.MM_up) img.MM_up = img.src;

      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;

      nbArr[nbArr.length] = img;

  } }

}

//-->

</script>
 

<style type="text/css">
 

.preload2 {background: url(buttons/prodrop2/button4.gif);}

.menu2 {width:800px; margin-left: auto; margin-right: auto; list-style:none; height:40px; background:#fff url(buttons/prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu2 li.top {display:block; float:left; position:relative;}

.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}

.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(buttons/prodrop2/down.gif) no-repeat right top;}

.menu2 li a.top_link:hover {color:#fff; background: url(buttons/prodrop2/button4.gif) no-repeat;}

.menu2 li a.top_link:hover span {background:url(buttons/prodrop2/button4.gif) no-repeat right top;}

.menu2 li a.top_link:hover span.down {background:url(buttons/prodrop2/button4a.gif) no-repeat right top;}
 

.menu2 li:hover > a.top_link {color:#fff; background: url(buttons/prodrop2/button4.gif) no-repeat;}

.menu2 li:hover > a.top_link span {background:url(buttons/prodrop2/button4.gif) no-repeat right top;}

.menu2 li:hover > a.top_link span.down {background:url(buttons/prodrop2/button4a.gif) no-repeat right top;}
 
 

.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
 

/* Default link styling */
 

/* Style the list OR link hover. Depends on which browser is used */
 

.menu2 a:hover {visibility:visible;}

.menu2 li:hover {position:relative; z-index:200;}
 

/* keep the 'next' level invisible by placing it off screen. */

.menu2 ul, 

.menu2 :hover ul ul, 

.menu2 :hover ul :hover ul ul,

.menu2 :hover ul :hover ul :hover ul ul,

.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 

.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:163px; height:auto;}

.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}

.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:157px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; font-weight: normal; border:3px solid #fff; border-width:0 0 0 3px;}

.menu2 :hover ul.sub li a.fly {background:#fff url(buttons/prodrop2/arrow.gif) 80px 7px no-repeat;}

.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}

.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(buttons/prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul li:hover > a.fly {background:#4ab url(buttons/prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
 

.menu2 :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
 

	#head {width:800px; margin-left: auto; margin-right: auto; height:100px; position:relative;}
 

	#foot {width:800px; margin-left: auto; margin-right: auto; position:relative;}

	

	#frame {

		width:800px;

		margin-right:auto;

		margin-left:auto;

		margin-top:10px;

		padding:0px;

		text-align:left;

		}

	

	#body {

		margin:10px 10px 0px 10px;

		padding:0px;

		}

	

	#leftcontent {

		float:left;

		width:200px;

		background:#fff;

		padding:0px;

		}
 

	#leftbox {

		width:191px;

		border:1px solid #000;

		padding:3px 1px 3px 3px;

		margin-top:3px;

		}
 

	#header {
 

		padding:0px;

		height:20px;

		background:#fff url(buttons/prodrop2/button1a.gif) repeat-x;

		text-align:center;

		color:#FFFFFF;

		text-decoration:none;

		font-size:13px;

		font-weight:bold;

		}

		

	#centercontent {

		background:#fff;

		width: 600px;

   		float:left;

		padding:0px;

		/*

		IE5x PC mis-implements the box model. Because of that we sometimes have

		to perform a little CSS trickery to get pixel-perfect display across browsers.

		The following bit of code was proposed by Tantek Celik, and it preys upon a CSS

		parsing bug in IE5x PC that will prematurly close a style rule when it runs

		into the string "\"}\"". After that string appears in a rule, then, we can override

		previously set attribute values and only browsers without the parse bug will

		recognize the new values. So any of the name-value pairs above this comment

		that we need to override for browsers with correct box-model implementations

		will be listed below.

		

		We use the voice-family property because it is likely to be used very infrequently,

		and where it is used it will be set on the body tag. So the second voice-family value 

		of "inherit" will override our bogus "\"}\"" value and allow the proper value to

		cascade down from the body tag.
 

		The style rule immediately following this rule offers another chance for CSS2

		aware browsers to pick up the values meant for correct box-model implementations.

		It uses a CSS2 selector that will be ignored by IE5x PC.

		

		Read more at http://www.glish.com/css/hacks.asp

		*/

		

		voice-family: "\"}\"";

		voice-family: inherit;

   		float:left;

		}
 

	html>body #centerbox {

   		float:left;

		}

	

	#centerbox {

		width:594px;

		border:1px solid #000;

		padding:3px 1px 3px 3px;

		margin-top:3px;

		}
 

</style>

<script language="JavaScript1.2" src="copyright.js" type="text/javascript"></script>

</head>
 

<body>
 

<div id="frame">
 

<div align="center">

  <a href="index.asp"><img src="images/header4.png" width="800" height="40" border="0"></a>
 

</div>
 

<span class="preload2"></span>
 

<ul class="menu2">

  <li class="top"><a href="index.asp" id="home" class="top_link"><span class="down">Home</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="index.asp">Home</a></li>

      <li><a href="site_map.asp">Site Map</a></li>
 

      <li><a href="news/press.asp">News</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

  </li>

  <li class="top"><a href="company.asp" id="company" class="top_link"><span class="down">Company</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="company.asp">Company</a></li>
 

      <li><a href="privacy.asp">Privacy Policy</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

  </li>

  <li class="top"><a href="products.asp" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="products.asp">Products</a></li>
 

      <li><a href="products/preconfig.asp">Pre-Configured Systems</a></li>

      <li><a href="products/custom.asp">Customized Systems</a></li>

      <li><a href="products/autocollimator.asp">Autocollimator</a></li>

      <li><a href="products/instruments.asp">Instruments</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

  </li>
 

  <li class="top"><a href="services.asp" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="services.asp">Services</a></li>

      <li><a href="services/training.asp">Training Courses</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 

  </li>

  <li class="top"><a href="software.asp" id="software" class="top_link"><span class="down">Software</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="software.asp">Overview</a></li>

      <li><a href="softwareversions.asp">Available Versions</a></li>

      <li><a href="downloads.asp">Downloads</a></li>
 

      <li><a href="documentation.asp">Documentation</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

  </li>

  <li class="top"><a href="library.asp" id="library" class="top_link"><span class="down">Library</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="library.asp">Library</a></li>
 

      <li><a href="library/tests/main.asp">Tests and Configurations</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

  </li>

  <li class="top"><a href="contact.asp" id="contact" class="top_link"><span class="down">Contact Us</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="sub">

      <li><a href="contact.asp">Contact Us</a></li>
 

      <li><a href="javascript:popup('forms/info_form.cfm'">Request Information</a></li>

      <li><a href="directions.asp">Driving Directions</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

  </li>

</ul>

    <div id="leftcontent">
 

	<div id="leftbox">
 

	<div id="header">Company Profile</div>

	<p  class="maintext";>

	Wells Research and Development develops custom instrumentation 

	for challenging measurement and alignment applications. 

	Combining expertise in optics, precision mechanics, software, 

	and motion systems, the Company has developed modular hardware 

	and software that can be quickly configured to meet wide-ranging 

	lens-testing needs.</p>

	</div>

	

	<div id="leftbox">

	<div id="header">News</div>

	<p  class="maintext";>
 

	Wells Research celebrates its 10th anniversary in providing quality, 

	cost-effective optics testing solutions.

	</p>

	</div>

	<div id="leftbox">

	<a href="news/press.asp">News Archives</a>

	</div>
 

    </div>
 

    <div id="centercontent">
 

	

	<table width="100%" border="0" cellspacing="0" cellpadding="2">

	<tr>

	<td><img src="contentimages/1.jpg" name="ChangingPix" width=296px id="ChangingPix"></td>

	<td><img src="contentimages/3.jpg" name="ChangingPix2" width=296px" align="right" id="ChangingPix2"></td>

	</tr>

	</table>

	</td>
 

	<div id="centerbox">
 

	<div id="header">Welcome</div>
 

	<p class="maintext">Our 

	goal is to provide you with optical test equipment that 

	is easy to used, accurate, affordable and flexible. 

	<a href="company.asp">Read more</a></p>
 

	<p class="maintext">Who uses our equipment? Most of our 

	customers are optical engineers who are looking for 

	an affordable solution to a difficult measument problem. 

	<a href="company.asp#who">Read more</a></p>

	<p class="maintext">We welcome the opportunity to discuss 

	your measurement or testing problems. If you wish, we 

	can arrange a live, web-based, demonstration of our 

	equipment on your own lenses. <a href="contact.asp">Contact 

	us</a></p>
 

	<p class="maintext">Our products combine state-of-the-art 

	hardware with easy-to-use PixelScope image analysis 

	software. We invite you to download a <strong>free evaluation 

	version</strong> of the software. <a href="software.asp">Read 

	more</a></p>

	</div>

	<div id="centerbox">

	<div id="header">Customer Feedback</div>
 

	<p class="maintext">
 

	&quot;Plastic lenses are a critical component in our head-mounted display 

	products. To maintain product quality we needed to develop 

	sophisticated testing capabilities. We invested about 

	6 man-months to design, build and test our own MTF measurement 

	system. It took Ben about 30 minutes to set up OpticStudio 

	and do the same test on our lens.&quot;</p>
 

	<p class="maintext">Paul Zavraki, President and CEO of 

	MicroOptics Inc.</p>

	</div>

    </div>

 <div id="foot">
 

<td height="14" bordercolor="#000000" bgcolor="#FFFFFF"> 

  <div align="center"><img src="images/bartop.png" width="800" height="2"></div></td>
 

  <p align="center"> &copy; 
 

	<script language="JavaScript">

	<!--

		document.write(getCurrDate());

	//-->

	</script>
 

	Wells Research &amp; Development | 15 A Lewis Street, Lincoln MA 01773 USA<br>

	(p) 781.259.8667 | (f) 781.259.8675 | <a href="mailto:info@wellsresearch.com">info@wellsresearch.com</a> 

  </p></td>
 

<td height="14" bordercolor="#000000" bgcolor="#FFFFFF">

  <div align="center"><img src="images/bartop.png" width="800" height="2"></div></td>
 

</div></div>
 

</table>

</body>

</html>

Open in new window

0
Comment
Question by:lyellr
  • 6
  • 2
9 Comments
 
LVL 10

Accepted Solution

by:
bluefezteam earned 375 total points
ID: 21772269
erm - just at a glance could you add this to the css

#foot {clear:both;}

or add it into the #foot element

See if that works...
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21772290
If I am right, your page has lost scope because you have floated the left and center colum, firefox has lost track of the documents dimensions.

By applying CLEAR:BOTH; to that foot(er) it will clear the floats and allow Firefox to understand where the elements need to be positioned and render correctly.

Fingers crossed that will do it.
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21772462
As for the menu width, that's down to the list element used to create the menu,

you can clearly see between IE and FF that there's a left margin in FF, try setting the margins to 0 (I know they are on AUTO) at the moment, but in the scope of a LIST you have to give specific sizes (I have found) so on my assumption that a standard margin is 15px in FF then that would account for your 30px extra width.

Try .menu2{margin:0;} just to see if that helps. also clear margins on the LI
.menu2 li {margin:0;}

Nice menu by the way, very windows vista.
0
 

Author Comment

by:lyellr
ID: 21772844
1/2 No luck on the header yet. Thank you very much for that first solution, worked perfectly. Any more ideas for cutting the menu down to size? Its possible I haven't put margin:0 in the correct place yet (still trying).
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21773074
ok

.menu2 {
width:760px;
}

in firefox that brings your menu to the correct width so there's something to work with.

I would suggest adding this to your current page after your CSS files are written out...

@import url("ffFix.css")_;

and in this new CSS file just add

body .menu2 {
width:760px;
}

(leave 800px set in the original css file)

hope fully this will then tell firefox to shrink the width and stay the same for IE
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 125 total points
ID: 21773177
Many browsers, including Firefox, put some default left padding on <ul>s and <ol>s. All you need to do is give it padding:0.
0
 

Author Comment

by:lyellr
ID: 21773193
How about

<style type="text/css">@import "ffFix.css" screen;</style>

as the import command. That seems to work.
0
 
LVL 10

Assisted Solution

by:bluefezteam
bluefezteam earned 375 total points
ID: 21773210
damn just ahead of me

.menu2 {padding:0}
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21773221
excellent - eitherway as long as it's working for you.

Congratulations
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now