...

View Full Version : IE6 Positioning Issues



BenDesign
11-06-2006, 06:39 PM
I'm working on a site and am having trouble with absolute positioning in IE6. The text in question is the line "Test Products International". The nav bar is also not working quite right either.

I have validated the CSS and the HTML, and I think it's okay... the only issues seem to be in the java script for the drop-downs, which is code I found online.

Thanks in advance for your help!

www.benworsleydesign.com

_Aerospace_Eng_
11-06-2006, 06:48 PM
Your url hasn't seemed to resolve yet or you have no index.html page.

BenDesign
11-06-2006, 06:52 PM
Duh... wrong URL:

www.benworsleydesign.net

_Aerospace_Eng_
11-06-2006, 06:57 PM
Validate your code first. Moving your JS to an external js file will get rid of erros 1-7 but then you are left with the paragraph in the span tag. You can't do that.

BenDesign
11-06-2006, 07:42 PM
I converted the javascript to an external file and it now validates okay. Sorry about the span around the <p> tag -- it was an attempt at a work-around that I forgot to remove when it didn't help any.

Would I be better off using relative positioning and making it a <div> instead of a class?

Thank you again for your help!!!! I really appreciate it.

Ben

_Aerospace_Eng_
11-06-2006, 08:23 PM
Your external js file should have a .js extension not .java. Java and Javascript are two totally different languages. DO NOT confuse them. Try this for your CSS

* {
margin:0;
padding:0;
}

body,td,th {
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#666;
}

body {
background-color:#CCC;
height:100%;
width:100%;
margin:0;
}

a:link {
color:#e93419;
font-weight:700;
text-decoration:none;
}

a:visited {
text-decoration:none;
color:#8d2011;
}

a:hover {
text-decoration:underline;
color:#dce14e;
}

a:active {
text-decoration:none;
color:#e93419;
}

#nav {
list-style:none;
float:right;
margin-bottom:0;
padding-top:60px;
position:relative;
}

#nav ul {
list-style:none;
z-index:99;
position:absolute;
overflow:visible;
left:20px;
display:none;
width:250px;
margin:0;
padding:0;
}

#nav li {
position:relative;
float:left;
width:130px;
display:block;
height:auto;
text-align:center;
margin:0;
}

#nav ul li {
background-color:#424242;
color:#333;
font-variant:normal;
height:auto;
width:auto;
}

#nav a {
text-decoration:none;
display:block;
width:130px;
height:11px;
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size:7.5pt;
font-weight:700;
clear:none;
margin:0 0 0.2em 0.1em;
padding:0.4em 0.1em 0.4em 0.5em;
}

#nav a:hover,#nav li:hover {
text-align:center;
clear:none;
color:#e93419;
}

#nav ul li:hover,#nav ul li a:hover {
background-color:#666;
clear:none;
text-align:left;
color:#FFF;
}

#nav ul ul,#nav ul ul ul {
display:none;
position:absolute;
margin-top:-10px;
margin-left:100px;
color:#FFF;
clear:none;
}

#nav ul li>ul,#nav ul ul li>ul {
margin-top:-10px;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul,#nav li:hover ul ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav ul li:hover ul,#nav ul ul li:hover ul,#nav ul ul ul li:hover ul,#nav ul ul ul ul li:hover ul {
display:block;
clear:none;
}

li>ul {
top:auto;
left:auto;
}

#nav ul li a {
color:#FFF;
text-align:left;
height:auto;
}

#container {
background-color:#FFF;
width:750px;
display:block;
background-image:url(/images/mastHead.jpg);
background-repeat:no-repeat;
background-position:center top;
border:1px solid #000;
height:600px;
position:relative;
margin:0 auto;
}

#topbar {
background-image:url(/images/mastHead.jpg);
background-repeat:no-repeat;
display:block;
}

p.tpiText {
font-family:Impact, Arial, Helvetica, sans-serif;
font-size:11pt;
text-transform:uppercase;
color:#FFF;
letter-spacing:1pt;
position:absolute;
top:59px;
left:119px;
}

#content {
height:100%;
width:750px;
margin-top:90px;
}

#rightBox {
float:right;
width:220px;
background-color:#eee;
display:inline;
border:1px solid #000;
margin:20px;
padding:0;
}

#leftBox {
float:left;
width:220px;
background-color:#eee;
display:inline;
border:1px solid #000;
margin:20px;
}

#centerBox {
float:left;
width:220px;
background-color:#eee;
margin-top:20px;
margin-bottom:20px;
border:1px solid #000;
}

.boxHeader {
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
text-transform:uppercase;
color:#000;
background-image:url(/images/boxHeaderbg.jpg);
background-repeat:repeat-x;
height:12px;
width:180px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#000;
font-weight:700;
margin:0;
padding:12px 0 0;
}

#moreInfoBox {
float:right;
width:180px;
background-color:#eee;
border:1px solid #000;
display:inline;
margin:20px;
padding:0;
}

#content h1 {
font-size:14pt;
line-height:35px;
height:35px;
width:355px;
margin-right:20px;
margin-left:20px;
color:#666;
background-color:#EEF592;
text-indent:20px;
float:left;
}

#downloadBar {
float:right;
margin-right:20px;
width:310px;
margin-top:12px;
display:inline;
}

.downloadBar {
height:38px;
vertical-align:middle;
margin-right:20px;
padding-bottom:15px;
}

.boxHeader2 {
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
text-transform:uppercase;
color:#000;
background-image:url(/images/boxHeaderbg.jpg);
background-repeat:repeat-x;
height:12px;
width:140px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#000;
font-weight:700;
margin:0;
padding:12px 0 0;
}

#centerColumn {
float:right;
width:220px;
margin-top:10px;
margin-bottom:20px;
margin-left:20px;
display:inline;
}

#productFeaturesBox {
background-color:#EEF592;
margin-bottom:20px;
padding:10px 20px;
}

#productImage {
margin-left:20px;
margin-bottom:20px;
display:inline;
}

#containerSub {
background-color:#FFF;
width:750px;
display:block;
background-image:url(/images/mastHead.jpg);
background-repeat:no-repeat;
background-position:center top;
border:1px solid #000;
margin:0 auto;
}

#nav ul ul li,#nav ul ul li:last-child {
border-width:1px;
}

#leftBox p,#centerBox p,#rightBox p,#moreInfoBox p {
padding-right:20px;
padding-left:20px;
}
I added and adjusted some margins/ padding on your paragraph next to your nav. I also made your #container div position:relative.

BenDesign
11-06-2006, 09:32 PM
AWESOME! Thanks a lot!

Can you quickly explain to me how the relative positioning on the container works. I assume it's relative to <body>, and it works fine, I'm just unclear about the logic behind it. It helps me in my future problem solving if I can "think" like CSS does ...

_Aerospace_Eng_
11-06-2006, 10:52 PM
This article will explain it all. http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum