Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page messed up in IE

    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;
    }
    Attached Files Attached Files
    Last edited by MitaDC; 11-27-2005 at 12:07 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by MitaDC; 11-27-2005 at 12:57 AM.

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Page is up and working, sorry for the wait

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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;
    }

  • #8
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •