![]() |
![]() |
![]() |
|||||
![]() |
![]() |
![]() |
![]() |
![]() |
|||
| Welcome
to Tech Support Forum home to more then 136,000 problems solved. Issues
have included: Spyware, Malware, Virus Issues, Windows, Microsoft,
Linux, Networking, Security, Hardware, and Gaming Getting your
problem solved is as easy as: 1. Registering for a free account 2. Asking your question 3. Receiving an answer Registered members: * See fewer ads. * And much more..
|
| Want to know how to post a question? click here | Having problems with spyware and pop-ups? First Steps |
|
|||||||
| Web Design & Programming Discussion of web design, and server-side & client-side scripting |
![]() |
|
|
Thread Tools |
|
|
#1 (permalink) |
|
Registered User
Join Date: Jun 2008
Posts: 2
OS: mac osx
|
maincol alignment issues in ie6
I'm having huge maincol alignment issues on ie6 with my website found at http://sprpackaging.com/index.htm.
It renders fine in firefox, safari, and ie7, but in ie6 it does so horribly. I think it is something wrong with my maincol div, but I don't know. Here is the code for the page: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SPR Packaging</title>
<!-- All site contents, HTML, XHTML, CSS, XML, images, code, and text are copyright © 2008, SPR Packaging, LLC. All Rights Reserved.-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="SPR Packaging is a provider of flexible packaging to the food, industrial, and lawn and garden markets. Featuring a staff with a combined over one-hundred years of experience in the flexible packaging industry, SPR Packaging is comitted to providing a quality, cost-effective product with superior customer service." />
<meta name="copyright" content="© 2008 SPR Packaging LLC" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="spr packaging, plastics, steven rosenberg, flexible packaging, inexpensive flexible packaging, cost effective" />
<meta name="robots" content="all" />
<meta name="Rating" content="General" />
<meta name="revisit-after" content="20 Days" />
<style type="text/css" media="all">@import "style.css";}</style>
</head>
<body style="visibility: visible;">
<div id="container">
<a href="/" title="logo links to home"><img width="700" height="117" id="title" src="i/header.jpg" alt="SPR Packaging LLC" /></a>
<ul id="topnav">
<li id="first" class="on"><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="applications.htm">Applications</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="directions.htm">Directions</a></li>
</ul>
<div id="sidecol">
<img src="i/SPR_Logo_web.gif" alt="SPR Logo" width="170" />
<img id="location" src="i/building2.jpg" alt="building" />
<h3>Corporate & Plant Headquarters:</h3>
<p>1480 Justin Road</p>
<p>Rockwall, TX 75087</p>
<h3>Contact:</h3>
<p>p: 469 252 1070</p>
<p>f: 469 252 1069</p>
<p>e: <SCRIPT TYPE="text/javascript">
<!--
// protected email script by Joe Maller
// JavaScripts available at http://www.joemaller.com
// this script is free to use and distribute
// but please credit me and/or link to my site
emailE=('sales@' + 'sprpackaging.com')
document.write('<A href="mailto:' + emailE + '">' + emailE + '</a>')
//-->
</script>
<NOSCRIPT>
<em>Email address protected by JavaScript.<BR>
Please enable JavaScript to contact me.</em>
</NOSCRIPT></p>
</div>
<div id="maincol">
<h3>Welcome</h3>
<img src="i/silos.jpg" alt="plastic drums" />
<p>SPR Packaging is a provider of flexible packaging to the food, industrial, and lawn and garden markets. Featuring a staff with a combined over one-hundred years of experience in the flexible packaging industry, SPR Packaging is comitted to providing a quality, cost-effective product with superior customer service.</p>
<img src="i/rollers2.jpg" alt="rollers" />
</div>
<br />
<div id="clearfooter"></div>
<div id="footer">
<p>Copyright © 2008 SPR Packaging LLC | Designed by <a href="http://www.mediaoverexposure.com" target="_blank">David Fine</a></p>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4747681-1";
urchinTracker();
</script>
</body>
</html>
Code:
/* @override http://www.sprpackaging.com/style.css */
* {padding:0; margin:0;}
/* commented backslash mac hack \*/
html, body{height:100%;}
/* end hack */
body {
font: small/1.6em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #4e4e4e;
text-align:center;
height: 100%;
background: url(i/body-bg.gif) repeat;
}
* html body {font-size:x-small;f\ont-size:small}
html, body {height: 100%;}
a {color: #00f;}
img {border:0;}
#container {
position:relative;
margin:0 auto; padding:0;
width: 732px;
min-height:100%;
_height:100%;
background:#fff url(i/container-bg1.gif);
text-align:left;
}
img#title {
margin:0 0 0 16px;
padding:0;
border:0;
display:block;
}
ul#topnav {
margin:0 8px 0 16px;
display: inline;
padding: 0;
white-space: nowrap;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background: #fff url(i/nav-bg.gif) left bottom repeat-x;
float: left;
width: 700px;
height: 21px;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
background: #fff url(i/nav-bg.gif) left bottom repeat-x;
line-height: normal;
}
ul#topnav a {
background: none;
display: block;
float: left;
height: auto;
margin: 0;
padding: 3px 16px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
/* Commented Backslash Hack hides
rule from IE5-Mac, documented at
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html \*/
ul#topnav a { float: none; }
/* End hack */
ul#topnav a:hover {text-decoration: none;
background: url(i/nav-bg-on.gif) repeat-x;
}
ul#topnav .on a {text-decoration: none;
background: url(i/nav-bg-on.gif) repeat-x;
}
h1#banner {
clear:both;
font: 11px Arial;
margin: 0;
/*Size of the image*/ padding-top: 0; width: 732px;
/*The image*/ background-image: url(i/banner.gif); background-repeat: no-repeat;
/*Hide the text*/ overflow: hidden;
/* WIN IE5 hack */ height: 30px; voice-family: "\"}\""; voice-family:inherit;
}
h2 {
margin: 15px 15px 15px 5px;
font: normal small-caps 1.4em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #b0953a;
letter-spacing:1px;
}
h2#short-bar {font-size:1.2em; margin: 17px 20px 10px 10px;}
h2 span {font-size:.8em;}
/* ---------- Side Column ---------- */
#sidecol {
width: 179px;
margin:0 15px 0 16px;
display: inline;
float: left;
}
#sidecol p {
margin: 0 0 0 20px;
font: 11px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
#sidecol h3 {
margin: 15px 0 5px 10px;
color: #de7a18;
font: bold 1.2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#sidecol img#location {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: medium double #de7a18;
padding-bottom: 0;
padding-top: 0;
border-top: medium double #de7a18;
}
/* ---------- Main Column ---------- */
#maincol {
text-align: left;
width: 486px;
float: right;
display:inline;
margin-right: 16px;
}
#maincol p {text-indent: 0; margin: 5px 15px 5px 30px;
font-size: 1em;
}
#maincol ul#lists {border-bottom: 0;list-style: none;
white-space: nowrap;
opacity: 1;
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
display: inline;
width: 480px;
}
#maincol ul#lists li {
font-size: 1.2em;
margin: 5px;
border: medium dotted #de7a18;
border-right-style: none;
border-top-style: none;
padding-left: 1px;
border-left-style: none;
padding-right: 1px;
float: left;
}
#maincol ul#lists2 {border-bottom: 0;list-style: none;
list-style-position: inside;
opacity: 1;
margin-left: 40px;
font-size: 1.2em;
margin-bottom: 10px;
list-style-image: none;
float: left;
}
#maincol ul#lists2 li {
font-size: 1em;
margin: 5px;
border: medium dotted #de7a18;
border-right-style: none;
border-top-style: none;
padding-left: 1px;
padding-right: 1px;
border-left-style: none;
}
#maincol h3 {
margin: 15px 15px 5px;
color: #de7a18;
clear:both;
font: small-caps bold 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol a {color: #de7a18;}
#maincol p#contact {
margin: 0 16px 0 70px;
font: 10pt/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol h3#contact {
color: #fff;
background-color: #de7a18;
padding-left: 30px;
margin: 10px 0 5px 6px;
font: bold 1.3em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol img {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 6px;
border-bottom: medium double #de7a18;
padding-bottom: 0;
padding-top: 0;
border-top: medium double #de7a18;
}
#maincol iframe {
margin-top: 10px;
margin-left: 50px;
border: thin solid #4e4e4e;
}
#maincol small {
border-style: none;
border-color: #de7a18;
margin-left: 50px;
}
dl {
margin: 0 0 10px 10px;
_margin: 0 0 0 10px;
width: 400px;
float:left;
text-align:left;
}
.class {
}
dt {float:left;width:170px;}
dd {float:left;width:200px;}
.clear {clear:both;}
#footer {
width: 732px;
height: 40px;
position:absolute;
bottom:0;
margin: 0 16px 10px 100px;
}
#footer p {
font: 11px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
}
#clearfooter {height:80px;clear:both}/* to stop content overwriting footer*/
-David |
|
|
|
|
|
#2 (permalink) |
|
Design Team Member
Join Date: Feb 2008
Location: Deming, NM
Posts: 288
OS: XP SP2 & Vista
|
Welcome to TSF daf81289,
Wanted to give you a couple things to try in your code. Please make sure you make a backup before making these changes (granted it's only a couple of lines). Not sure if this will fix it, but there are a couple of things that I would try. First is to remove clear: both; from the maincol h3 style. I have bold-red it in below code. If that doesn't work I would recommend trying to float the maincol left and work with a left margin to see if that fixes the issue. I have bold-blue in below code. Let us know if that helps and if not I'll bring the code into dreamweaver and play around with. Code:
/* @override http://www.sprpackaging.com/style.css */
* {padding:0; margin:0;}
/* commented backslash mac hack \*/
html, body{height:100%;}
/* end hack */
body {
font: small/1.6em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #4e4e4e;
text-align:center;
height: 100%;
background: url(i/body-bg.gif) repeat;
}
* html body {font-size:x-small;f\ont-size:small}
html, body {height: 100%;}
a {color: #00f;}
img {border:0;}
#container {
position:relative;
margin:0 auto; padding:0;
width: 732px;
min-height:100%;
_height:100%;
background:#fff url(i/container-bg1.gif);
text-align:left;
}
img#title {
margin:0 0 0 16px;
padding:0;
border:0;
display:block;
}
ul#topnav {
margin:0 8px 0 16px;
display: inline;
padding: 0;
white-space: nowrap;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background: #fff url(i/nav-bg.gif) left bottom repeat-x;
float: left;
width: 700px;
height: 21px;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
background: #fff url(i/nav-bg.gif) left bottom repeat-x;
line-height: normal;
}
ul#topnav a {
background: none;
display: block;
float: left;
height: auto;
margin: 0;
padding: 3px 16px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
/* Commented Backslash Hack hides
rule from IE5-Mac, documented at
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html \*/
ul#topnav a { float: none; }
/* End hack */
ul#topnav a:hover {text-decoration: none;
background: url(i/nav-bg-on.gif) repeat-x;
}
ul#topnav .on a {text-decoration: none;
background: url(i/nav-bg-on.gif) repeat-x;
}
h1#banner {
clear:both;
font: 11px Arial;
margin: 0;
/*Size of the image*/ padding-top: 0; width: 732px;
/*The image*/ background-image: url(i/banner.gif); background-repeat: no-repeat;
/*Hide the text*/ overflow: hidden;
/* WIN IE5 hack */ height: 30px; voice-family: "\"}\""; voice-family:inherit;
}
h2 {
margin: 15px 15px 15px 5px;
font: normal small-caps 1.4em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #b0953a;
letter-spacing:1px;
}
h2#short-bar {font-size:1.2em; margin: 17px 20px 10px 10px;}
h2 span {font-size:.8em;}
/* ---------- Side Column ---------- */
#sidecol {
width: 179px;
margin:0 15px 0 16px;
display: inline;
float: left;
}
#sidecol p {
margin: 0 0 0 20px;
font: 11px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
#sidecol h3 {
margin: 15px 0 5px 10px;
color: #de7a18;
font: bold 1.2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#sidecol img#location {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: medium double #de7a18;
padding-bottom: 0;
padding-top: 0;
border-top: medium double #de7a18;
}
/* ---------- Main Column ---------- */
#maincol {
text-align: left;
width: 486px;
float: right; <-- I would try a left float and then change below marging to -left
display:inline;
margin-right: 16px;
}
#maincol p {text-indent: 0; margin: 5px 15px 5px 30px;
font-size: 1em;
}
#maincol ul#lists {border-bottom: 0;list-style: none;
white-space: nowrap;
opacity: 1;
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
display: inline;
width: 480px;
}
#maincol ul#lists li {
font-size: 1.2em;
margin: 5px;
border: medium dotted #de7a18;
border-right-style: none;
border-top-style: none;
padding-left: 1px;
border-left-style: none;
padding-right: 1px;
float: left;
}
#maincol ul#lists2 {border-bottom: 0;list-style: none;
list-style-position: inside;
opacity: 1;
margin-left: 40px;
font-size: 1.2em;
margin-bottom: 10px;
list-style-image: none;
float: left;
}
#maincol ul#lists2 li {
font-size: 1em;
margin: 5px;
border: medium dotted #de7a18;
border-right-style: none;
border-top-style: none;
padding-left: 1px;
padding-right: 1px;
border-left-style: none;
}
#maincol h3 {
margin: 15px 15px 5px;
color: #de7a18;
clear:both; <--- remove?
font: small-caps bold 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol a {color: #de7a18;}
#maincol p#contact {
margin: 0 16px 0 70px;
font: 10pt/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol h3#contact {
color: #fff;
background-color: #de7a18;
padding-left: 30px;
margin: 10px 0 5px 6px;
font: bold 1.3em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol img {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 6px;
border-bottom: medium double #de7a18;
padding-bottom: 0;
padding-top: 0;
border-top: medium double #de7a18;
}
#maincol iframe {
margin-top: 10px;
margin-left: 50px;
border: thin solid #4e4e4e;
}
#maincol small {
border-style: none;
border-color: #de7a18;
margin-left: 50px;
}
dl {
margin: 0 0 10px 10px;
_margin: 0 0 0 10px;
width: 400px;
float:left;
text-align:left;
}
.class {
}
dt {float:left;width:170px;}
dd {float:left;width:200px;}
.clear {clear:both;}
#footer {
width: 732px;
height: 40px;
position:absolute;
bottom:0;
margin: 0 16px 10px 100px;
}
#footer p {
font: 11px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
}
#clearfooter {height:80px;clear:both}/* to stop content overwriting footer*/
__________________
|
|
|
|
|
|
#3 (permalink) |
|
Registered User
Join Date: Jun 2008
Posts: 2
OS: mac osx
|
Re: maincol alignment issues in ie6
Thanks for the helpful response. The fixes you gave me didn't work as far as I can tell in IE6. I think the float left change made it worse. Anything else? Again, I really appreciate the help!
Below are what changes I made in the CSS in bold and red: Code:
/* @override http://www.sprpackaging.com/style.css */
* {padding:0; margin:0;}
/* commented backslash mac hack \*/
html, body{height:100%;}
/* end hack */
body {
font: small/1.6em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #4e4e4e;
text-align:center;
height: 100%;
background: url(i/body-bg.gif) repeat;
}
* html body {font-size:x-small;f\ont-size:small}
html, body {height: 100%;}
a {color: #00f;}
img {border:0;}
#container {
position:relative;
margin:0 auto; padding:0;
width: 732px;
min-height:100%;
_height:100%;
background:#fff url(i/container-bg1.gif);
text-align:left;
}
img#title {
margin:0 0 0 16px;
padding:0;
border:0;
display:block;
}
ul#topnav {
margin:0 8px 0 16px;
display: inline;
padding: 0;
white-space: nowrap;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background: #fff url(i/nav-bg.gif) left bottom repeat-x;
float: left;
width: 700px;
height: 21px;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
background: #fff url(i/nav-bg.gif) left bottom repeat-x;
line-height: normal;
}
ul#topnav a {
background: none;
display: block;
float: left;
height: auto;
margin: 0;
padding: 3px 16px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
/* Commented Backslash Hack hides
rule from IE5-Mac, documented at
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html \*/
ul#topnav a { float: none; }
/* End hack */
ul#topnav a:hover {text-decoration: none;
background: url(i/nav-bg-on.gif) repeat-x;
}
ul#topnav .on a {text-decoration: none;
background: url(i/nav-bg-on.gif) repeat-x;
}
h1#banner {
clear:both;
font: 11px Arial;
margin: 0;
/*Size of the image*/ padding-top: 0; width: 732px;
/*The image*/ background-image: url(i/banner.gif); background-repeat: no-repeat;
/*Hide the text*/ overflow: hidden;
/* WIN IE5 hack */ height: 30px; voice-family: "\"}\""; voice-family:inherit;
}
h2 {
margin: 15px 15px 15px 5px;
font: normal small-caps 1.4em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #b0953a;
letter-spacing:1px;
}
h2#short-bar {font-size:1.2em; margin: 17px 20px 10px 10px;}
h2 span {font-size:.8em;}
/* ---------- Side Column ---------- */
#sidecol {
width: 179px;
margin:0 15px 0 16px;
display: inline;
float: left;
}
#sidecol p {
margin: 0 0 0 20px;
font: 11px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
#sidecol h3 {
margin: 15px 0 5px 10px;
color: #de7a18;
font: bold 1.2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#sidecol img#location {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: medium double #de7a18;
padding-bottom: 0;
padding-top: 0;
border-top: medium double #de7a18;
}
/* ---------- Main Column ---------- */
#maincol {
text-align: left;
width: 486px;
float: left;
display:inline;
margin-left: 20px;
}
#maincol p {text-indent: 0; margin: 5px 15px 5px 30px;
font-size: 1em;
}
#maincol ul#lists {border-bottom: 0;list-style: none;
white-space: nowrap;
opacity: 1;
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
display: inline;
width: 480px;
}
#maincol ul#lists li {
font-size: 1.2em;
margin: 5px;
border: medium dotted #de7a18;
border-right-style: none;
border-top-style: none;
padding-left: 1px;
border-left-style: none;
padding-right: 1px;
float: left;
}
#maincol ul#lists2 {border-bottom: 0;list-style: none;
list-style-position: inside;
opacity: 1;
margin-left: 40px;
font-size: 1.2em;
margin-bottom: 10px;
list-style-image: none;
float: left;
}
#maincol ul#lists2 li {
font-size: 1em;
margin: 5px;
border: medium dotted #de7a18;
border-right-style: none;
border-top-style: none;
padding-left: 1px;
padding-right: 1px;
border-left-style: none;
}
#maincol h3 {
margin: 15px 15px 5px;
color: #de7a18;
font: small-caps bold 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol a {color: #de7a18;}
#maincol p#contact {
margin: 0 16px 0 70px;
font: 10pt/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol h3#contact {
color: #fff;
background-color: #de7a18;
padding-left: 30px;
margin: 10px 0 5px 6px;
font: bold 1.3em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#maincol img {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 6px;
border-bottom: medium double #de7a18;
padding-bottom: 0;
padding-top: 0;
border-top: medium double #de7a18;
}
#maincol iframe {
margin-top: 10px;
margin-left: 50px;
border: thin solid #4e4e4e;
}
#maincol small {
border-style: none;
border-color: #de7a18;
margin-left: 50px;
}
dl {
margin: 0 0 10px 10px;
_margin: 0 0 0 10px;
width: 400px;
float:left;
text-align:left;
}
.class {
}
dt {float:left;width:170px;}
dd {float:left;width:200px;}
.clear {clear:both;}
#footer {
height: 40px;
position: absolute;
bottom:0;
display: inline;
margin: 0 16px 10px 50px;
}
#footer p {
font: 11px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
}
#clearfooter {height:80px;clear:both}/* to stop content overwriting footer*/
|
|
|
|
![]() |
| Thread Tools | |
|
|