Web Analytics Made Easy - StatCounter Resolved - Absolute Position IE 8 off - CodingForum

Announcement

Collapse
No announcement yet.

Resolved - Absolute Position IE 8 off

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Resolved - Absolute Position IE 8 off

    Hello,

    Bear with me as this is my first site that I've gone into the code on a site builder (like Weebly, which I'm using now) and changed more than the font colors.

    My problem is with the circle buttons on the home page of this site: flipsweb.weebly.com

    Looks like I want it to in Firefox, Safari, and Opera. IE 8 is another story. All of the buttons are about 20 pixels too far to the right on IE 8. Also, the logo on the top has a blue border around it .. no idea where that came from.

    Any ideas? Or - is there a way I can create the same kind of circular menu that would be a bit more stable (the original was in Flash, but I don't have that so I rebuilt the images and am trying just CSS).

    This is on Weebly. THANKS!!!

    CSS (most relevant code is at the bottom)

    [CODE]

    *|* {
    margin:0pt;
    padding:0pt;
    }

    body {
    font-size:11px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#003366;
    }

    p {
    font-size:1.15em;
    }

    h1 {
    font-size:2em;
    font-weight:bold;
    }

    h2 {
    font-size:1.875em;
    font-weight:bold;
    }

    #wrapper {
    width: 960px;
    background-color:#FFFFFF;
    margin-top: 10px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    }

    #header {
    padding: 5px;
    margin: 0px;
    text-align: center;
    }

    #navigation {
    width: 960px;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    }


    #navigation ul {
    font-size:1.25em;
    display:block;
    list-style-type:none;
    margin:0;
    padding:8px 15px;
    padding-top:6px;
    padding-bottom:6px;
    }

    #navigation li {
    display:inline;
    text-align:center;
    border-left:1px solid #fff;
    }

    #navigation a:link, a:visited {
    font-weight:bold;
    color:#FFFFFF;
    background-color:#003366;
    text-align:center;
    padding:6px;
    text-decoration:none;
    }

    #navigation a:hover, a:active {
    background-color:#cc6600;
    }

    #content {
    width: 900px;
    min-height: 500px;
    _height: 500px;
    padding: 19px 30px 25px 30px;
    }

    #content a:link {
    color:#cc6600;
    text-decoration: none}

    #content a:visited {
    color:#cc6600;
    text-decoration: none}

    #content a:active {
    text-decoration: none}

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

    #quotebox {
    margin:0;
    padding:10px;
    border:4px solid #E8ECF1;
    /*background: url(images/startquote.gif) no-repeat;*/
    }

    .quote {
    font: bold 11px Verdana,Arial,Helvetica,sans-serif;
    color:#003366;
    margin:10px 20px 10px 20px;
    }

    .quote .emp {
    font: bold italic 11px Verdana,Arial,Helvetica,sans-serif;
    }

    #footer{
    width: 960px;
    padding: 36px 0px 20px 0px;
    text-align: right;
    color: #666666;
    font-size: 12px;
    }

    #footer a{
    color: #ff6633;
    text-decoration: none;
    }

    #footer .weebly-footer a{
    color: #666666;
    }

    #circle {
    height: 500px;
    background-image:url('homecircle.gif');
    background-repeat:no-repeat;
    background-position: center;
    }

    #buttons {position:relative;}
    #buttons li {margin:0;padding:0;list-style:none;position:absolute;}
    #buttons li, #buttons a{height:97px;display:block;}

    #buttonscompany{position:absolute;top:0px;left:305px;width:97px;}
    #buttonscompany{background:url('icons.gif') 0 0;}
    #buttonscompany a:hover{background: url('icons.gif') 0 -97px;}

    #buttonsprocess{position:absolute;top:0px;left:545px;width:97px;}
    #buttonsprocess{background:url('icons.gif') -97px 0;}
    #buttonsprocess a:hover{background: url('icons.gif') -97px -97px;}

    #buttonsvalues{position:absolute;top:150px;left:210px;width:97px;}
    #buttonsvalues{background:url('icons.gif') -194px 0;}
    #buttonsvalues a:hover{background: url('icons.gif') -194px -97px;}

    #buttonsclients{position:absolute;top:150px;left:650px;width:97px;}
    #buttonsclients{background:url('icons.gif') 291px 0;}
    #buttonsclients a:hover{background: url('icons.gif') 291px -97px;}

    #buttonsresults{position:absolute;top:350px;left:250px;width:97px;}
    #buttonsresults{background:url('icons.gif') -388px 0;}
    #buttonsresults a:hover{background: url('icons.gif') -388px -97px;}

    #buttonsresources{position:absolute;top:350px;left:600px;width:97px;}
    #buttonsresources{background:url('icons.gif') -485px 0;}
    #buttonsresources a:hover{background: url('icons.gif') -485px -97px;}
    [CODE]

    and the HTML

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>{title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <a href="http://www.businesscultureconsultants.com">
    <img src="/files/theme/masthead.gif" alt="Business Culture Consultants logo" align="center"></a></div>
    <div id="sitename">{title}</div>
    <div id="circle">
    <ul id="buttons">
    <li id="buttonscompany"><a href="http://flipsweb.weebly.com/company.html"></a></li>
    <li id="buttonsprocess"><a href="process.html"></a></li>
    <li id="buttonsvalues"><a href="values.html"></a></li>
    <li id="buttonsclients"><a href="clients.html"></a></li>
    <li id="buttonsresults"><a href="results.html"></a></li>
    <li id="buttonsresources"><a href="resources.html"></a></li>
    </ul>
    </div>

    <div id="content">{content}</div>
    <div id="footer">{footer}</div>
    </div>

    <div style='display:none;'>{menu}</div>
    </body>
    </html>
    [CODE]
    Last edited by orangesoup; Sep 6, 2011, 05:45 PM.
    Tags: absolute position, ie 8
  • #2
    I think you can get rid of the border explicitly and it should clear the problem in IE8:
    Code:
    img {border:0px;}
    Specify a Class or Id if you have other images that need borders.

    I think the spacing issue is a padding issue with IE rendering it differently.. Not sure if you want to use an ie workaround to fix this.. not sure if there are proper ways to handle this

    Comment

    • #3
      It's because of the default margin that IE applies to a ul element - other browsers use padding. Try adding:

      Code:
      #buttons {
    position: relative;
    [COLOR="Red"]margin:0[/COLOR]
}
      PS: It helps if you wrap your code in # tags when posting.
      Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
      Read Steve Krug's book Don't Make Me Think - essential reading on web usability
      I don't recommend much, but I do recommend Clook for UK web hosting

      Comment

      • #4
        Thank you coding geniuses! Both little lines of code fixed the problem.

        Comment

        Previous template Next
        Working...
        X
        😀
        🥰
        🤢
        😎
        😡
        👍
        👎