Page messed up in IE

MitaDC · 11-27-2005, 12:04 AM

Hey guys, just working on a page layout idea and it displays semi-correct in Firefox, but not in IE.

The menu messes up in IE, as you will see (when you mouse over) and also the Home heading isn't showing up. There is a problem in both browsers with the system div. I want the systems to sit next to each other so I would have 2 rows and 2 columns containing 4 systems. I don't know a better way to do this than create something like <div id="system></div> and repeat it 4 times. If you look at my code, you will probably be able to understand. Anyways here is the file(s). BTW, the pages show up fine in Dreamweaver

Thanks!

Here is the page HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Welcome to A-LanTech</title>
<!-- InstanceEndEditable --><link href="styles.css" rel="stylesheet" type="text/css">

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>
<!-- InstanceBeginEditable name="Editable" -->
<div id="container">
  <div id="Header"></div>
  <div id="menu">
    <h3>Home</h3>
	<a href="index.html">Home</a>
      <h3>Products</h3>
	  	<a href="basic.html">Basic Systems</a>
	    <a href="gaming.html">Gaming Systems</a>
		<a href="workstation.html">Workstations</a>
		<a href="laptops.html">Laptops</a>
		<a href="handheld.html">Pocket PC's</a>
    <h3>
      About Us</h3>
	  <a href="about.html">Our Company</a>
	  <a href="testemonials.html">Testemonials</a>
      <h3>Customizer</h3>
	  	<a href="cbasic.html">Basic Systems</a>
	    <a href="cgaming.html">Gaming Systems</a>
		<a href="cworkstation.html">Workstations</a>
		<a href="claptops.html">Laptops</a>
      <h3>Services</h3>
	  	<a href="spyware.html">Clean-up</a>
	    <a href="upgrades.html">Upgrades</a>
		<a href="networking.html">Networking</a>
	    <a href="web.html">Web Development</a>
      <h3>Contact US </h3>
	  	<a href="mailto:mprusek@a-lantech.com">General</a>
	  	<a href="mailto:sales@a-lantech.com">Sales</a>
	    <a href="mailto:technical@a-lantech.com">Technical</a>
	    
  </div>
  <div id="main">
  <h1>Basic Systems<br>
  </h1>
  <p class="p">All Systems are custom built by A-LanTech Computers. These systems are ideal for web browsing, listening to music, burning cd's and more! You have the option of either Intel based systems and AMD based systems. </p>
  	<div id="system">
    <h2><a href="alt1000.html">ALT-xxxx</a></h2>
    <p>Processor: Spec <br>
      Memory: Spec<br>
      Hard Drive: Spec<br>
      Operating System: Spec<br>
      CD/DVD Drive: Spec<br>
      Warranty:
Spec</p>
  <p class="price"><a href="alt1000.html">Starting at: $</a></p>
  	</div>
  	<div id="system">
      <h2><a href="alt1000.html">ALT-xxxx</a></h2>
      <p>Processor: Spec <br>
    Memory: Spec<br>
    Hard Drive: Spec<br>
    Operating System: Spec<br>
    CD/DVD Drive: Spec<br>
    Warranty: Spec</p>
      <p class="price"><a href="alt1000.html">Starting at: $</a></p>
    </div>
  	</div>
  <div id="footer">Copyright (c) 2005 A-LanTech <br>
    Website Created by A-LanTech, Drivebutton Technologies </div>
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

Here is the CSS:

Code:

body {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: small;
	background-color: #f2f4ee;
	background-image: url(images/bg2.gif);
	background-repeat: repeat-x;
}
#Header {
	width: 800px;
	background-color: #FFFFFF;
	height: 123px;
	visibility: visible;
	background-image: url(images/header.gif);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #525252;
	clear: both;
	margin-bottom: 18px;
}
#container {
	font-family: tahoma, arial, helvetica, sans-serif;
	margin-left: auto;
	width: 800px;
	background-color: #FFFFFF;
	margin-right: auto;
	visibility: visible;
}
#menu {
	float: left;
	width: 178px;
	background-color: #727272;
	margin-top: 0px;
	height: 800px;
}
#menu h3 {
	font-size: 15px;
	font-weight: 600;
	font-variant: small-caps;
	text-align: center;
	background-image: url(images/menuh3.gif);
	color: #FFFFFF;
	height: 22px;
	margin-bottom: 18px;
	margin-top: -18px;
}
#menu h4 {
	font-size: 12px;
	text-decoration: none;
	text-align: center;
}
#menu a:link, a:visited {
	background-color: #999999;
	display: block;
	width: 178px;
	height: 20px;
	color: #000000;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	margin-top: -18px;
	margin-bottom: 18px;
	font-weight: bold;
	text-decoration: none;
}
#menu a:hover {
	background-color: #727272;
	color: #FFFFFF;
	text-decoration: underline;
}
#main {
	margin-left: 188px;
}
#System {
	float: left;
	overflow: hidden;
}
#system h2 {
	font-size: 16px;
	font-weight: 400;
	font-variant: small-caps;
	background-color: #999999;
	width: 250px;
}
.price {
	font-size: 14px;
	font-weight: 400;
	font-variant: normal;
	color: #333333;
	text-decoration: none;
}
h1 {
	font-size: 18px;
	text-align: center;
	height: 50px;
}
#system a:link, a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: 400;
}
#system a:hover {
	text-decoration: underline;
}
#footer {
	clear: both;
	height: 40px;
	width: 800px;
	background-color: #999999;
	display: block;
	text-align: center;
}
.p {

	font-size: 12px;
}

_Aerospace_Eng_ · 11-27-2005, 12:07 AM

Get a free host upload your html and images. That will be easier. I don't tend to download files too often. Then give us the link to the site.

MitaDC · 11-27-2005, 12:10 AM

the link will be up in a minute; it will be: www.a-lantech.com/temp/basic.html

Sorry; I am on Dial-up and the server is screwin up; it will be up in a couple

I would like the ALT-XXXX's next to each other (Trying to figure it out, I deleted the other 2). Also, on my menu, the links for home and basic systems look different from the others even though the a:link, and a:visited are in the same style.

MitaDC · 11-27-2005, 12:56 AM

Page is up and working, sorry for the wait

_Aerospace_Eng_ · 11-27-2005, 01:10 AM

This

Code:

#menu a:link, a:visited {
	background-color: #999999;
	display: block;
	width: 178px;
	height: 20px;
	color: #000000;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	margin-top: -18px;
	margin-bottom: 18px;
	font-weight: bold;
	text-decoration: none;
}

should be this

Code:

#menu a:link, #menu a:visited {
	background-color: #999999;
	display: block;
	width: 178px;
	height: 20px;
	color: #000000;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	margin-top: -18px;
	margin-bottom: 18px;
	font-weight: bold;
	text-decoration: none;
}

Also you can't use an id more than once you have done so for your system divs. If you must use the same styles more than once use a class. Once you do that you will need to float your system divs to the left. Okay you already float them left but CSS is case sensitive which is why its not work but still you need to do something about your ids.

MitaDC · 11-27-2005, 01:16 AM

Thanks Aero,

I still can't figure out why the menu screws up when u hover in IE, also the <h3>Home</h3> isn't showing up in IE. Everything works fine in Firefox now though. Thanks again

_Aerospace_Eng_ · 11-27-2005, 01:20 AM

Its likely your negative margins causing the problem. Try this for the relevant CSS

Code:

#menu h3 {
	font-size: 15px;
	font-weight: 600;
	font-variant: small-caps;
	text-align: center;
	background-image: url(images/menuh3.gif);
	color: #FFFFFF;
	height: 22px;
        margin:0;
        padding:0;
        clear:both;
        position:relative;
}
#menu h4 {
	font-size: 12px;
	text-decoration: none;
	text-align: center;
}
#menu a:link, #menu a:visited {
	background-color: #999999;
	display: block;
	width: 178px;
	height: 20px;
	color: #000000;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
#menu a:hover {
	background-color: #727272;
	color: #FFFFFF;
	text-decoration: underline;
}

MitaDC · 11-27-2005, 01:22 AM

Perfect, Thanks Aero, I think I changed everything except for that. The reason I hadn't thought about it is cuz when I did that it looked wrong in Dreamweaver; I didn't think of checking it in a browser :S. Thanks again!