CSS Internet Explorer/FF

Experts Exchange

	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.3

CSS Internet Explorer/FF

Asked by akbiro in Cascading Style Sheets (CSS), JavaScript

My page in question is www.xtremeaquaticfoods.com/pops/pops.html.

If you view it and click on the links in FF, it works nicely, expanding the side panels with relation to the content.

If however you view it in IE...and click on a link, the side panels disappear. I can not find the problem. The code snipet is below.

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Monster Diet</title>
 
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4','a5');
 
function switchid(id)
{
  hideallids();
  showdiv(id);
  var mainHeight = document.getElementById('mainContent').clientHeight;
  document.getElementById('sidebar1').style.height = mainHeight + 'px';
  document.getElementById('sidebar2').style.height = mainHeight + 'px';
} 
 
 
function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}
 
function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}
 
function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	var mainHeight = document.getElementById('mainContent').clientHeight;
document.getElementById('sidebar1').style.height = mainHeight + 'px';
document.getElementById('sidebar2').style.height = mainHeight + 'px';
	
	
	}
}
</script>
 
<link href="thrColFix.css" rel="stylesheet" type="text/css" />
</head>
 
<a style="float: center;" href="javascript:window.close('self')">Close this 
window</a>
<body class="thrColFix">
 
<div id="container">
 
<div id="header">
  <!--end of "header" div-->
  <img src="img/Xtreme-proofs.jpg" width="200" height="129" /> </div>
 
 
  <div id="sidebar1">
  <img src="img/monster_9mm_pellett.gif" width="150" height="113" /><h3>9mm Monster </h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. sapien. </p>
  <!-- end #sidebar1 --></div>
  
  <div id="sidebar2">
    <table width="150" border="0">
  <tr>
    <th scope="col"><img src="img/a_lawanda_njara_peacock_txt.gif" width="137" height="103" alt="njara cichlid" /></th>
  </tr>
  <tr>
    <td><img src="img/a_regal_peacock_txt.gif" width="137" height="103" alt="royal peacock" /></td>
  </tr>
  <tr>
    <td><img src="img/L_fuelleborni_rt_marmalade_txt.gif" width="137" height="103" alt="fuelleborni" /></td>
  </tr>
  <tr>
    <td><img src="img/lemon_jake_txt.gif" width="137" height="103" alt="lemon jake" /></td>
  </tr>
</table>  
  <!-- end #sidebar2 -->
  </div>
  
  <div id="mainContent">
    <h1> Xtreme Aquatic Foods - 9mm Pellet</h1>
    <ul>
      <li><a href="javascript:switchid('a1');">Feeding Instructions</a></li>
      <li>
        <a href="javascript:switchid('a2');">Basic Ingredients</a>        </li>
      <li><a href="javascript:switchid('a3');">Feeding Video</a>        </li>
      <li><a href="javascript:switchid('a4');">Available Container Sizes</a></li>
      <li><a href="javascript:switchid('a5');">Coupons</a></li>
    </ul>
    
    <div id='a1' style="display:block;">
	  <h2>Feeding Instructions:</h2>
		<p><b>Jean-Paul Sartre, (1905-1980)</b> born in Paris in 1905, studied at the École 
		Normale Supérieure from 1924 to 1929 and became Professor of Philosophy at Le Havre
		in 1931. With the help of a stipend from the Institut Français he studied in Berlin
		(1932) the philosophies of Edmund Husserl and Martin Heidegger. After further teaching
		at Le Havre, and then in Laon, he taught at the Lycée Pasteur in Paris from 1937 to 1939.
		Since the end of the Second World War, Sartre has been living as an independent writer.</p>
        <p></p>
	</div>
 
	<div id='a2' style="display:none;">
		<h2>Basic Ingredients</h2>
		<p>The conclusions a writer must draw from this position were set forth in 
		"Qu'est-ce que la littérature?" (What Is Literature?), 1948: literature is
		no longer an activity for itself, nor primarily descriptive of characters 
		and situations, but is concerned with human freedom and its (and the author's)
		commitment. Literature is committed; artistic creation is a moral activity.
        no longer an activity for itself, nor primarily descriptive of characters 
		and situations, but is concerned with human freedom and its (and the author's)
		commitment. Literature is committed; artistic creation is a moral activity.</p>
	
	</div>
 
	<div id='a3' style="display:none;">
		<h2>Feeding Video</h2>
	
	  <p>A vault of Red Zebras at Feeding time on Florida Exotic Fish Sales fish farm in South Florida.</p>
	
	  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
	    <param name="movie" value="Video/ACA_Show_tank1.swf" />
	    <param name="quality" value="high" />
	    <param name="wmode" value="opaque" />
	    <param name="swfversion" value="6.0.65.0" />
	    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you dont want users to see the prompt. -->
	    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
	    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	    <!--[if !IE]>-->
	    <object type="application/x-shockwave-flash" data="Video/ACA_Show_tank1.swf" width="320" height="240">
	      <!--<![endif]-->
	      <param name="quality" value="high" />
	      <param name="wmode" value="opaque" />
	      <param name="swfversion" value="6.0.65.0" />
	      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
	      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
	      <div>
	        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
	        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
	      <!--[if !IE]>-->
        </object>
	    <!--<![endif]-->
      </object>
	</div>
<div id='a4' style="display:none;">
<h2>Available in the Following Container and Sizes"</h2>	
			<p>Sartre is one of those writers for whom a determined philosophical position is the 
			centre of their artistic being. Although drawn from many sources, for example, 
			Husserl's idea of a free, fully intentional consciousness and Heidegger's existentialism,
			the existentialism Sartre formulated and popularized is profoundly original. 
			Its popularity and that of its author reached a climax in the forties, and Sartre's 
			theoretical writings as well as his novels and plays constitute one of the main inspirational
			sources of modern literature. In his philosophical view atheism is taken for granted; the
			"loss of God" is not mourned. Man is condemned to freedom, a freedom from all authority,
			which he may seek to evade, distort, and deny but which he will have to face if he is to
			become a moral being. The meaning of man's life is not established before his existence.
			Once the terrible freedom is acknowledged, man has to make this meaning himself, has to 
			commit himself to a role in this world, has to commit his freedom. And this attempt to
			make oneself is futile without the "solidarity" of others.</p>
	</div></p>
    <div id='a5' style="display:none;">
    <h2>Coupons</h2>
    <p>Print a coupon, take it to your local independent fish or pet shop and ask them to order you this sample of Xtreme Aquatic Foods - Monster Diet.  We will send a 5oz container and a store sample for the Pet or Fish shop to try.  It's a win-win.  Once you try it, you will love it!!  </p>  
    <p>Print a coupon, take it to your local independent fish or pet shop and ask them to order you this sample of Xtreme Aquatic Foods - Monster Diet.  We will send a 5oz container and a store sample for the Pet or Fish shop to try.  It's a win-win.  Once you try it, you will love it!!  </p>  
    <a href="../coupons/coupon.html" target="_blank"> Get Coupon</a>
    </p>
	</div>
  <!-- end #mainContent -->
  </div>
 
 
<div id="footer">
<!--end of "footer" div-->
</div>
</div>
<!--end of "container" div-->
 
  
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
//-->
</script>
<a style="float: center;" href="javascript:window.close('self')">Close this 
window</a>
</body>
</html>

           
         

CSS Internet Explorer/FF

Asked by akbiro in Cascading Style Sheets (CSS), JavaScript

About this solution