st3ady
08-18-2006, 01:03 AM
Hey There,
I was assigned the job of putting the site together and I built it while looking back and forth in Firefox, and now that I'm done, I checked it in Internet Explorer and of course it has issues.
Here is how it is supposed to look (Firefox):
http://img205.imageshack.us/img205/7446/ffokou4.jpg
and here are the errors in Internet Explorer:
http://img205.imageshack.us/img205/7559/ieerryy9.jpg
There is something going on that is pushing the end of the navigation bar (the star image) down a row, and also, down near the footer, the background image is being pushed down about 3 pixels.
Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>321: Global Branding</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="321: Global Branding" />
<style type="text/css" media="all">@import "css/about.css";</style>
</head>
<body class="about">
<div id="page-container">
<div id="logo">
<a href="index.html"><img src="images/headers/logo2.jpg" alt="321TakeOff" /></a>
</div>
<div id="main-nav">
<div align="right"><img src="images/nav/brandlaunch.gif" alt="Brand Launch" /><br /><br />
<dl>
<dt id="about"><a href="about.html"></a></dt>
<dt id="brandslam"><a href="brandslam.html"></a></dt>
<dt id="ourwork"><a href="ourwork.html"></a></dt>
<dt id="capabilities"><a href="capabilities.html"></a></dt>
<dt id="connect"><a href="connect.html"></a></dt>
</dl>
<div align="left"><img src="images/nav/star.gif" alt="star" /></div>
<img src="images/nav/orangeline1.gif" alt="orangeline" /></div>
</div>
<div id="leftmenu">
<a href="why.html">WHY CHOOSE 321</a><br /><br />
<a href="testimonials.html">TESTIMONIALS</a><br /><br />
<a href="team.html">EXECUTIVE TEAM</a><br /><br />
</div>
<div id="image">
<img src="images/image/authentic.jpg" alt="transact" />
</div>
<div id="content-top">
ABOUT 321
</div>
<div id="content-bot">
<p>Authentic is having honest conversations with your customers. Authentic is being faithful to your history. Authenticity is essential to motivating employees, captivating customers and differentiating your brand from the competition. We are uniquely positioned to uncover brands' distinct identity because we aren’t afraid to explore the unknown, the whatif’s.</p>
<p>321 bridges that gap with a perfect blend of big agency experience and the agility, quality, and precision of a boutique shop.</p>
</div>
<div id="footer">
<b>{ <a href="why.html">See why clients choose 321</a> }<img src="images/footer/22.gif"></b>
</div>
</div>
</body>
</html>
And here is the CSS:
html, body {
margin: 0;
padding: 0;
}
img { border:0px; }
body {
font-family: Arial;
font-size: 10px;
}
#page-container {
width: 800px;
background: white;
}
#logo {
background: white;
padding-left: 43px;
padding-top: 7px;
float: left;
height: 123px;
width: 199px;
}
/* Main Navigation */
#main-nav {
height: 114px;
width: 519px;
line-height: 9px;
padding-top: 20px;
float: left;
background: white;
}
#main-nav dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/
#main-nav { padding-left: 21px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
#main-nav dt { float: left; }
#main-nav dt a {
display: block;
height: 0px !important;
height /**/:64px; /* IE 5/Win hack */
padding: 64px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}#main-nav dt a:hover {
background-position: 0 -64px;
}
#main-nav dt#about,
#main-nav dt#about a { width: 94px; background-image: url(../images/nav/about.gif); }
#main-nav dt#brandslam,
#main-nav dt#brandslam a { width: 95px; background-image: url(../images/nav/brandslam.gif); }
#main-nav dt#ourwork,
#main-nav dt#ourwork a { width: 80px; background-image: url(../images/nav/ourwork.gif); }
#main-nav dt#capabilities,
#main-nav dt#capabilities a { width: 95px; background-image: url(../images/nav/capabilities.gif); }
#main-nav dt#connect,
#main-nav dt#connect a { width: 80px; background-image: url(../images/nav/connect.gif); }
body.about dt#about,
body.about dt#about a,
body.brandslam dt#brandslam,
body.brandslam dt#brandslam a,
body.ourwork dt#ourwork,
body.ourwork dt#ourwork a,
body.capabilities dt#capabilities,
body.capabilities dt#capabilities a,
body.connect dt#connect,
body.connect dt#connect a {
background-position: 0 -128px;
}
#leftmenu {
float: left;
width: 106px;
height: 256px;
padding-left: 17px;
padding-top: 10px;
background: white;
background-image: url(../images/leftmenu/bg1.gif);
background-repeat: no-repeat;
}
#leftmenu a {
color: #57768C;
text-decoration: none;
}
#leftmenu a:hover {
color: #57768C;
text-decoration: none;
}
#image {
float: left;
width: 274px;
height:204px;
background: white;
}
#content-top {
float: left;
width: 370px;
height: 20px;
padding-left: 14px;
padding-top: 10px;
background: white;
background-image: url(../images/content/topbg1.gif);
background-repeat: no-repeat;
}
#content-bot {
float: left;
width: 370px;
height: 164px;
padding-left: 14px;
padding-top: 10px;
background: white;
background-image: url(../images/content/botbg1.gif);
background-repeat: no-repeat;
overflow: auto;
}
#footer {
float: left;
width: 658px;
height: 78px;
background-image: url(../images/footer/bigbottom.gif);
background-repeat: no-repeat;
text-align: right;
padding-top: 10px;
text-decoration: none;
}
#footer a {
color: #FF3000;
text-decoration: none;
}
#footer a:hover {
color: #FF3000;
text-decoration: none;
}
Any help would be greatly appreciated!
Also, how do I add some padding to the right of the content div? I tried doing padding-right and it made the whole div go down a line. :confused:
Also, anyone know how to make custom sidebars using images? :rolleyes: thats up next.
I was assigned the job of putting the site together and I built it while looking back and forth in Firefox, and now that I'm done, I checked it in Internet Explorer and of course it has issues.
Here is how it is supposed to look (Firefox):
http://img205.imageshack.us/img205/7446/ffokou4.jpg
and here are the errors in Internet Explorer:
http://img205.imageshack.us/img205/7559/ieerryy9.jpg
There is something going on that is pushing the end of the navigation bar (the star image) down a row, and also, down near the footer, the background image is being pushed down about 3 pixels.
Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>321: Global Branding</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="321: Global Branding" />
<style type="text/css" media="all">@import "css/about.css";</style>
</head>
<body class="about">
<div id="page-container">
<div id="logo">
<a href="index.html"><img src="images/headers/logo2.jpg" alt="321TakeOff" /></a>
</div>
<div id="main-nav">
<div align="right"><img src="images/nav/brandlaunch.gif" alt="Brand Launch" /><br /><br />
<dl>
<dt id="about"><a href="about.html"></a></dt>
<dt id="brandslam"><a href="brandslam.html"></a></dt>
<dt id="ourwork"><a href="ourwork.html"></a></dt>
<dt id="capabilities"><a href="capabilities.html"></a></dt>
<dt id="connect"><a href="connect.html"></a></dt>
</dl>
<div align="left"><img src="images/nav/star.gif" alt="star" /></div>
<img src="images/nav/orangeline1.gif" alt="orangeline" /></div>
</div>
<div id="leftmenu">
<a href="why.html">WHY CHOOSE 321</a><br /><br />
<a href="testimonials.html">TESTIMONIALS</a><br /><br />
<a href="team.html">EXECUTIVE TEAM</a><br /><br />
</div>
<div id="image">
<img src="images/image/authentic.jpg" alt="transact" />
</div>
<div id="content-top">
ABOUT 321
</div>
<div id="content-bot">
<p>Authentic is having honest conversations with your customers. Authentic is being faithful to your history. Authenticity is essential to motivating employees, captivating customers and differentiating your brand from the competition. We are uniquely positioned to uncover brands' distinct identity because we aren’t afraid to explore the unknown, the whatif’s.</p>
<p>321 bridges that gap with a perfect blend of big agency experience and the agility, quality, and precision of a boutique shop.</p>
</div>
<div id="footer">
<b>{ <a href="why.html">See why clients choose 321</a> }<img src="images/footer/22.gif"></b>
</div>
</div>
</body>
</html>
And here is the CSS:
html, body {
margin: 0;
padding: 0;
}
img { border:0px; }
body {
font-family: Arial;
font-size: 10px;
}
#page-container {
width: 800px;
background: white;
}
#logo {
background: white;
padding-left: 43px;
padding-top: 7px;
float: left;
height: 123px;
width: 199px;
}
/* Main Navigation */
#main-nav {
height: 114px;
width: 519px;
line-height: 9px;
padding-top: 20px;
float: left;
background: white;
}
#main-nav dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/
#main-nav { padding-left: 21px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
#main-nav dt { float: left; }
#main-nav dt a {
display: block;
height: 0px !important;
height /**/:64px; /* IE 5/Win hack */
padding: 64px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}#main-nav dt a:hover {
background-position: 0 -64px;
}
#main-nav dt#about,
#main-nav dt#about a { width: 94px; background-image: url(../images/nav/about.gif); }
#main-nav dt#brandslam,
#main-nav dt#brandslam a { width: 95px; background-image: url(../images/nav/brandslam.gif); }
#main-nav dt#ourwork,
#main-nav dt#ourwork a { width: 80px; background-image: url(../images/nav/ourwork.gif); }
#main-nav dt#capabilities,
#main-nav dt#capabilities a { width: 95px; background-image: url(../images/nav/capabilities.gif); }
#main-nav dt#connect,
#main-nav dt#connect a { width: 80px; background-image: url(../images/nav/connect.gif); }
body.about dt#about,
body.about dt#about a,
body.brandslam dt#brandslam,
body.brandslam dt#brandslam a,
body.ourwork dt#ourwork,
body.ourwork dt#ourwork a,
body.capabilities dt#capabilities,
body.capabilities dt#capabilities a,
body.connect dt#connect,
body.connect dt#connect a {
background-position: 0 -128px;
}
#leftmenu {
float: left;
width: 106px;
height: 256px;
padding-left: 17px;
padding-top: 10px;
background: white;
background-image: url(../images/leftmenu/bg1.gif);
background-repeat: no-repeat;
}
#leftmenu a {
color: #57768C;
text-decoration: none;
}
#leftmenu a:hover {
color: #57768C;
text-decoration: none;
}
#image {
float: left;
width: 274px;
height:204px;
background: white;
}
#content-top {
float: left;
width: 370px;
height: 20px;
padding-left: 14px;
padding-top: 10px;
background: white;
background-image: url(../images/content/topbg1.gif);
background-repeat: no-repeat;
}
#content-bot {
float: left;
width: 370px;
height: 164px;
padding-left: 14px;
padding-top: 10px;
background: white;
background-image: url(../images/content/botbg1.gif);
background-repeat: no-repeat;
overflow: auto;
}
#footer {
float: left;
width: 658px;
height: 78px;
background-image: url(../images/footer/bigbottom.gif);
background-repeat: no-repeat;
text-align: right;
padding-top: 10px;
text-decoration: none;
}
#footer a {
color: #FF3000;
text-decoration: none;
}
#footer a:hover {
color: #FF3000;
text-decoration: none;
}
Any help would be greatly appreciated!
Also, how do I add some padding to the right of the content div? I tried doing padding-right and it made the whole div go down a line. :confused:
Also, anyone know how to make custom sidebars using images? :rolleyes: thats up next.