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
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE6 Positioning Issues

    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

  • #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
    Your url hasn't seemed to resolve yet or you have no index.html page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Duh... wrong URL:

    www.benworsleydesign.net

  • #4
    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
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Okay ...

    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

  • #6
    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
    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
    Code:
    * {
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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 ...

  • #8
    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 article will explain it all. http://www.autisticcuckoo.net/archiv...ively-absolute
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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