Jen53403
Programmer
- Jul 17, 2006
- 22
I am teaching myself HTML and CSS. Can anyone tell me why IE puts an extra line between list items in the product-tabs list in index.html but not in test.html? Why does the list in index.html display correctly in Firefox but not IE, and how can I fix that? (I want the page to look like it does in Firefox.) My first thought is that there's something missing in my CSS.
Also, is absolute positioning a good idea, or should I be using another method for my layout, and what method would that be?
Also, why does IE give me a "content blocked" notification for my Javascript code? This only started after I added the mouseOver() and mouseOut() methods. Again, IE does this but Firefox does not.
index.html:
test.html:
Thanks!
Also, is absolute positioning a good idea, or should I be using another method for my layout, and what method would that be?
Also, why does IE give me a "content blocked" notification for my Javascript code? This only started after I added the mouseOver() and mouseOut() methods. Again, IE does this but Firefox does not.
index.html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.---.com/index.html">[/URL]
<html>
<head>
<title>--- co.</title>
<meta name="description" content="---">
<meta name="keywords" content="---">
<script type="text/javascript">
function mouseOver(prod)
{
document.display.src = "product_box/" + prod + ".bmp";
}
function mouseOut()
{
document.display.src = "product_box/all_products.bmp";
}
</script>
<style type="text/css">
<!--
#title
{
position: absolute;
top: 0px;
left: 0px;
}
#nav-bar
{
position: absolute;
top: 158px;
left: 0px;
}
#nav-bar ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
#nav-bar li
{
display: inline;
}
#nav-bar li a
{
display: block;
float: left;
width: 131px;
height: 24px;
border: 1px solid #006;
text-align: center;
color: #006;
line-height: 24px;
font-size: 16px;
font-family: serif;
background: #d0ddfd;
}
#nav-bar li a:hover
{
background: #b0bdcd;
color: #000;
border-color: #000;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */
#news-box
{
position: absolute;
top: 184px;
left: 0px;
margin: 0px;
padding: 0px;
width: 264px;
height: 400px;
color: #000;
font-size: 16px;
background: #ccc url(---.gif) center no-repeat;
list-style: none;
font-family: serif;
text-align: left;
border: 1px dashed #006;
}
.head
{
font-size: 24px;
color: #006;
line-height: 26px;
text-indent: 80px;
font-weight: bold;
}
.content
{
font-size: 16px;
color: #000;
margin-left: 20px;
font-weight: normal;
}
#product-tabs
{
position: absolute;
top: 224px;
left: 264px;
color: #000;
font-family: serif;
font-size: 20px;
line-height: 0px;
}
/* Hide from IE5-Mac \*/
#product-tabs
{
line-height: 26px;
}
/* End hide */
#product-tabs ul
{
list-style: none;
}
#product-tabs li a
{
text-align: left;
display: block;
}
#product-images
{
position: absolute;
top: 184px;
left: 438px;
}
//-->
</style>
</head>
<body>
<div id="title">
<img src="title800x158.jpg" alt="--- co.">
</div>
<div id="nav-bar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="technical.html">Technical</a></li>
<li><a href="product_guide.html">Product Guide</a></li>
<li><a href="new_products.html">New Products</a></li>
<li><a href="contact_us.html">Contact Us</a><li>
</ul>
</div>
<div id="news-box">
<p class="content"><span class="head">News:</span><br>- News item 1.
<br>- News item 2.</p>
</div>
<div id="product-tabs">
<ul>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('temp')" onmouseout="mouseOut()">Temperature</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('pressure')" onmouseout="mouseOut()">Pressure</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('flow')" onmouseout="mouseOut()">Flow Meters</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('sanitary')" onmouseout="mouseOut()">Sanitary</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('controls')" onmouseout="mouseOut()">Controls</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('valves')" onmouseout="mouseOut()">Valves</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('pneumatics')" onmouseout="mouseOut()">Pneumatics</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('heat_exchange')" onmouseout="mouseOut()">Heat Exchangers</a></li>
</ul>
</div>
<div id="product-images">
<img src="product_box/all_products.bmp" alt="product images" name="display">
</div>
</body>
</html>
Code:
<style type="text/css">
<!--
#product-tabs
{
position: absolute;
color: #000;
font-family: serif;
font-size: 20px;
list-style: none;
}
#product-tabs li a
{
text-align: left;
display: block;
}
//-->
</style>
<html>
<ul id="product-tabs">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
</html>