Site is working fine in mozilla and safari but not in Internet explorer. I am also trying to figure out how to put a picture next to the name on the other side.
Below is the css and the xhtml codes
CSS
/* layoutstyles.css */
/* Background color of box images: #b0c4d0
Border of box images: #7e97a6 */
/* Eliminate browser default margins and padding */
*{
margin:0;
padding:0;
}
body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
/* Reducing the font size here, rather than in navbar and other styles,
can make it easier to avoid pixel slop across browsers when using
complex elements and styles like navbars and drop-down menus. Remove
font-size properties from those elements after reducing the font size here.
See other comments throuhout this style sheet.*/
font-size:80%;
}
#wrapper{
/* At 80% font size, 58em just about fills the width on an 800x600 display */
width: 68em;
background-color: #fff;
/* Set right and left to auto for centering */
margin: 1em auto;
position:relative;
}
/********** Major layout divisions **********/
#branding{
/* For absolutely-positioned hyperlinks */
position:relative;
color:blue;
text-align:center;
}
#branding img{
width:100%;
height: 2.5em;
}
/********** Branding division styles **********/
#branding a{
/* Postions are set in tags in layout.htm */
position:absolute;
text-decoration:none;
color:#000;
}
#branding h1{
font-family: Impact,'Arial Black', Charcoal, Sans-serif;
font-size:3em;
}
#branding a:link, #branding a:visited{
color:#000;
}
#branding a:hover{
color:#090;
}
#branding a:active{
color:#1bb498;
}
/* Fixes the mysterious image gap */
#branding img{
display:block;
}
/* Fixes the mysterious image gap */
#branding img{
display:block;
}
/********** branding2 styles **********/
#branding2 {
width:100%;
height: 6em;
position:relative;
color:blue;
text-align:left;
}
#branding2 h1{
font-family: Impact,'Arial Black', Charcoal, Sans-serif;
font-size:3.5em;
}
/********** Leftcolumn division styles **********/
#leftcolumn{
/* Remember, content and navbar left
margins must match this width */
width:13.5em;
float:left;
/* Center images and text inside this div */
text-align:center;
/* For absolutely-positioned leftcolumn */
position:absolute;
top:15em;
left:0;
}
/* Matches background color and borders to those in
the sidebarBottom.gif and sidebarTop.gif images */
#leftcolumncontent{
background:#b0c4d0;
border-left:solid 0.1em #7e97a6;
border-right:solid 0.1em #7e97a6;
}
/* Applies to images in the leftcolumn div */
#leftcolumn img{
width:80%;
}
/* Applies to paragraphs in the leftcolumn division */
#leftcolumn p{
padding:0 0.2em;
width:80%;
margin:0.5em auto;
text-align:left;
}
/********** Navbar division styles **********/
#navbar{
background:transparent;
height:2em;
/* For absolutely-positioned navbar */
position:absolute;
top:11.5em; /* Whatever it takes to the navbar into the rounded box image */
left:0;
width:68em; /* Same as layout width */
z-index:100;
border:none;
}
/* Style for rounded box image in the navbar div */
#navbar img{
position:absolute;
top:0;
left:0;
width:100%; /* Same as wrapper width */
z-index:101;
}
/* Get the navbar items in the rounded box image */
#navbar ul{
list-style-type:none;
position:relative;
left:1em;
top:1px;
z-index:101;
}
/* List items in the navbar */
#navbar li{
float:left;
/* Required for drop-down menus */
position:relative;
}
/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
text-decoration:none;
font-family:Verdana, Geneva, Arial, Sans-Serif;
color:#000;
background:transparent;
display:block;
height:2em;
width:6em;
border-right:solid 1px #7e97a6;
line-height:1.85em;
margin-top:2px;
text-align:center;
outline-style:none;
}
/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
background:#7e97a6;
color:#fff;
}
/* Drop-down menu styles */
/* Applies to drop-down menus in navbar */
#navbar li ul{
position:absolute;
z-index:200;
visibility:hidden;
border:solid 1px #aaa;
border-right:solid 2px #7e97a6;
border-bottom:solid 2px #7e97a6;
}
/* Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{ /* IE6 hack */
visibility:visible;
top:1.95em; /* Slightly less than navbar height */
left:0;
}
/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{ /* IE6 hack */
background: #7e97a6;
color:#fff;
text-align:left;
display:block;
width:10em;
margin-top:0;
padding:0 0 0 1em;
height:auto;
}
/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover,
#navbar li a:hover ul li a:hover{ /* IE6 hack */
background: #aaa;
color:#000;
}
/* IE6 hack applies to its table drop-down */
#navbar table {
margin:-1px;
border-collapse:collapse;
position:absolute;
top:0em;
left:0;
z-index:200;
}
/********** Content division styles **********/
#content{
/* Left margin must match leftcolumn width */
margin-left:12.5em;
background-color:#fff;
color:#000;
padding:6em 10px 10px 20px;
}
/* Applies to paragraphs in the content division */
#content p{
font-size:1.2em;
margin:0.5em;
line-height:1.25em;
}
/* Applies to all lists in the content division */
#content ul, #content ol{
font-size:1.2em;
padding:0.25em 0 0 40px;
}
/* A little extra space between lines in list */
#content li, #content li{
padding-bottom:0.5em;
}
/* Styles h1, h2, and h3 style rules in the content division */
#content h1, {
font-family: 'Brush Script MT', 'Apple Chancery', Cursive;
color:#7e97a6;
}
#content h2, {
font-family: Cursive, Impact, sans-serif;
color:#7e97a6;
}
#content h3{
font-family: Cursive, Impact, sans-serif;
color:#7e97a6;
}
#content h4{
font-family: Charcoal, Impact, sans-serif;
color:#7e97a6;
}
/* Size h1 headings in the content division */
#content h1{
font-size:2.6em;
}
/* Size h2 headings in the content division */
#content h2{
font-size:2.2em;
}
/* Size h3 headings in the content division */
#content h3{
font-size:1.75em;
}
/* Size h4 headings in the content division */
#content h4{
font-size:1.5em;
}
/********** Footer division styles **********/
/* Needs some extra styling to handle the rounded box image */
#footer{
position:relative;
left:0;
text-align:center;
font-size:1.2em; /* Slightly larger font in the page footer */
height:3em;
}
/* This is the style for the footer's rounded box image */
#footer img{
position:absolute;
top:0;left:0;
width:100%;
z-index:100;
}
/* Footer unvisited and visited links */
#footer a,
#footer a:link,
#footer a:visited{
/* No underline on links */
text-decoration:none;
position:relative;
top:0.4em;
z-index:102;
border:dotted 1px #b0c4d0;
}
/* Footer hover and active links */
#footer a:hover,
#footer a:active{
color:#0c0;
border:dotted 1px #333;
}
/*************** General styles ************/
.hotkey{
text-decoration:underline;
}
/* Acronyms and abbreviations */
acronym,abbr{
border-bottom:dotted 1px #333;
cursor:help;
}
/*********** Printer-Friendly Styles **********/
@media print{
/* Start printer-friendly styles */
/* Printer only-Make wrapper the full page width */
#wrapper{
width:100%;
}
/* Printer only-Hide leftcolumn, navbar,and footer */
#leftcolumn,
#navbar,
#footer{
display:none;
}
/* Printer only-Get rid of content div margins and
padding. Use a different font for print */
#content{
margin:0;
padding:0;
font-family:'Century Schoolbook', Times, Serif;
font-size:1em;
}
/*End printer-friendly styles */
}XHTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Thobanco Technologies - IT Staffing, Web Design, Web Development, Custom Built Computers</title>
<meta name="keywords" content="west bloomfield, Web Design, Web Development, Custom built computers, detroit, commerce, pontiac, canton, plymouth, bloomfield hills, birmingham, southfield, rochester, metro detroit, IT Staffing, HTML, XHTML, CSS, PHP, Flash, Photoshop, Java, .net, creative, small business" />
<meta name="revisit-after" content="1 day" />
<meta name="expires" content="never" /> <meta name="Description" content="west bloomfield, Web Design, Web Development, Custom built computers, detroit, commerce, pontiac, canton, plymouth, bloomfield hills, birmingham, southfield, rochester, metro detroit, IT Staffing, HTML, XHTML, CSS, PHP, Flash, Photoshop, Java, .net, creative, small business" />
<meta name="copyright" content="Copyright ? 1997 - 2010 Thobanco Technologies - Thobanco.com All rights reserved." />
<link href="layoutRounded.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Wrapper sets the layout width -->
<div id="wrapper">
<div id="branding">
<!-- Rounded box image and text for branding bar up top -->
<img src="images/brandingImg.gif" alt="" />
</div><!-- End branding -->
<div id="branding2">
<!-- Rounded box image and text for branding bar up top -->
<h1>Thobanco <br /> Technologies <h1>
</div><!-- End branding2 -->
<div id="content">
<br />
<h3>Professional Information Technology Staffing is our business.</h3>
<br />
<img src="images/home_h.gif" alt="Creative" />
<ul>
<li>We provide <strong>the best IT Professionals</strong> on a Contract, Contract to Hire, and Permanent Hire basis.</li>
</ul>
<ul>
<li><strong>We provide Professional web development services including Web Design, Web Development, Website Re-design, and E-commerce Solutions.</strong> </li>
</ul>
<ul>
<li> We specialize in finding and providing the best JAVA, PHP, Ruby on Rails, .Net, AS400, Oracle, Unix, Linux and IBM Mainframe developers.</li>
</ul>
<ul>
<li>We provide experienced associates with PHP, Ruby on Rails, JAVA, ASP.Net, VB.Net, C#, SQL Server, Visual Basic, C/C++, COBOL, RPG, Lotus Notes and ABAP programming languages. </li>
</ul>
<ul>
<li>We provide <strong>expert Personnel in all areas of IT:</strong> from programming and development to architecture, database administration, system analysis, business analysis, project management, networking, security, and quality Assurance.</li>
</ul>
<ul>
<li>We can provide ERP implementation and upgrade specialists for SAP, Oracle, Peoplesoft, and JD Edwards software.</li>
</ul>
<ul>
<li><strong><em>We are Experts in HTML, XHTML, CSS, PHP, FLASH, and MY/SQL</em></strong></li>
</ul>
<p align="center"><strong><br />
<h4> We are now Posting all our jobs on <a title="" href="http://www.ultimatejobs.com">UltimateJobs.com </h4></a></strong></p>
</div><!-- End content -->
<div id="footer">
<!-- Rounded box in footer -->
<img src="images/navFooterImg.gif" alt="" />
<a href="#" id="alternativeNav">Home</a>
<a href="#">About</a>
<a href="#">Links</a>
<a href="#">Portfolio</a>
<a href="#" accesskey="m">Site <span class="hotkey">M</span>ap
</a>
</div><!-- End footer -->
<!-- Absolutely positioned left column -->
<div id="leftcolumn">
<!-- Images at top and bottom of sidebar provide rounded corders -->
<!-- Only images go here. Everything else goes in #leftcolumcContent div below -->
<img src="images/sidebarTop.gif" style="position:absolute;top:0;left:0;width:100%;" alt=""/>
<img src="images/sidebarBottom.gif" style="position:absolute;bottom:0;left:0;width:100%;" alt=""/>
<div id="leftcolumncontent">
<p>
<br />
Thobanco Technologies is a leading provider of staff augmentation solutions, Web Site Development and Web Hosting. <br /><br />
<br /> With customers ranging in size from start-ups to Fortune 500 enterprises, we understand the ever increasing need for talented professionals and workforce solutions. <br /> <br /><br />We are in business to help you maintain your competitive advantage by cost-effectively delivering highly skilled consultants and solutions when and how you need them most.
<br /><br />
</p>
</div><!-- End leftcolumncontent -->
</div><!-- End leftcolumn -->
<!-- Absolutely positioned navbar -->
<div id="navbar">
<!-- Rounded box image for navbar -->
<img src="images/navFooterImg.gif" alt="" />
<ul>
<li><a href="index.htm#">Home</a></li>
<li><a href="#">About<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><!-- Start About drop-down menu -->
<li><a href="#">Mission</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">About Option3</a></li>
</ul><!-- End About drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><!-- End About -->
<li><a href="#">Staffing<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><!-- Start Links drop-down menu -->
<li><a href="#">Employment Services</a></li>
<li><a href="#">Client Services</a></li>
<li><a href="#">Business Strategy</a></li>
<li><a href="#">Benifits</a></li>
</ul><!-- End Links drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><!-- End Links -->
<li><a href="#">Web Sites<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Hosting<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Computers<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Careers<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><!-- Start Links drop-down menu -->
</ul><!-- End Links drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Contact<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><!-- End Portfolio -->
</ul>
</div><!-- End navbar div -->
</div><!-- End wrapper -->
</body>
</html>