Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Well this nav menu is really starting to annoy me. Sorry to come here again, but I've played with this and for some reason in SOME IE7 browsers, like the one at my school my horizontal nav menu is gong vertical. I've tried different widths and displays in the CSS, but to no avail.

    Attached is a screenshot.

    URL: http://www.beta.essentialselfsolutions.com.au

    HTML:
    HTML 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" xml:lang="en" lang="en" >
    <head>
    <title>Welcome to Essential Self Solutions! | Essential Self Solutions</title>
    <link rel="stylesheet" href="mainstyle.css" type="text/css" media="all" />
    </head>
    <body>
    <div id="WhiteWrapper">
        <div id="ContentWrapper">
            <div id="Header">
            <a href="index.html" title="Essential Self Solutions"><img src="general-pics\logo.png" width="486" height="44" border="0" /></a>
            </div>
            <div id="navcontainer">
            <ul>
            <li><a href="index.html"><span>Home</span></a></li>
            <li><a href="feelthefear.html"><span>About &amp; Feel The Fear&reg;</span></a></li>
            <li><a href="other.html"><span>Other Workshops</span></a></li>
            </ul>
            </div>
            <div class="spacer">
            </div>
            <h1>Welcome to Essential Self Solutions!</h1>
            <div id="pic-container">
            <img src="general-pics\pic-container.png" width="559" height="107" alt="" />
            </div>
            <p>
            I'm Cornelia Ramsay and thank you for visiting my website. Here you will find information about how to uplift and motivate you, to educate you, to brighten your spirit, and to help you move forward with your life in a joyous and loving way. You will learn about most effective tools to help you push through your fears and other negative emotions and to become the person you want to be.
            </p>
            <p>
            You will also find <a href="#">About Cornelia</a>, information about <a href="#">Feel the Fear and Do it Anyway<sup>&reg;</sup></a> and various <a href="#">other workshops and writing skills</a> such as resumes, interview techniques and dealing with transition workshops for job seekers and migrants and management workshops for start-up managers. 
            </p>
            <p>
            If you are looking for inspiration, direction and support, Essential Self Solutions may be your answer today.
            </p>
            <div class="spacer">
            </div>
            <div class="spacer">
            </div>
            <h2>Contact</h2>
            <p>
            For bookings for workshops and general enquiries, please contact <strong>Cornelia Ramsay</strong>:
            </p>
            <table class="contact">
            <tr>
            <td class="left">
            Mobile:
            </td>
            <td class="right">
            0458673859
            </td>
            </tr>
            <tr>
            <td class="left">
            E-mail:
            </td>
            <td class="right">
            <a href="mailto:cornelia@essentialselfsolutions.com">cornelia@essentialselfsolutions.com</a>
            </td>
            </tr>
            </table>
            <p>
            For website enquiries, please contact <strong>Nick Every</strong>:
            <table class="contact">
            <tr>
            <td class="left">
            E-mail:
            </td>
            <td class="right">
            <a href="mailto:web@essentialselfsolutions.com">web@essentialselfsolutions.com</a>
            </td>
            </tr>
            </table>
            <div class="spacer">
            </div>
            <div class="spacer">
            </div>
            <div class="spacer">
            </div>
        </div>
    </div>
            <div id="footer">
            <p>
            <a href="index.html">Home</a> <span class="bld">|</span> <a href="feelthefear.html">About &amp; Feel The Fear<sup>&reg;</sup></a> <span class="bld">|</span> <a href="other.html">Other Workshops</a>
            </p>
            <p>
            Copyright &copy; 2010 Nick Every for website design. 
            </p>
            <p>
            Feel The Fear And Do It Anyway<sup>&reg;</sup> is the registered trademark of Susan Jeffers Ph.D. and is being used with her expressed permission. These workshops are licensed and based on the teachings of Susan Jeffers Ph.D. as contained in her international bestseller.
            </p>
            </div>
    </body>
    </html>
    CSS:
    Code:
    body {
    background: #444444;
    margin: 0;
    padding: 0;
    }
    
    a:link,
    a:visited,
    a:active
    {
    color: #339900;
    text-decoration: underline;
    }
    
    a:hover
    {
    color: #339900;
    text-decoration: none;
    }
    
    
    
    div#WhiteWrapper {
    background: #ffffff;
    width: 950px;
    margin: 0 auto;
    padding: 0 auto;
    }
    
    div#ContentWrapper {
    background: #ffffff;
    margin: 0 auto;
    padding: 25px 20px 25px 20px;
    width: 800px;
    }
    
    div#Header {
    width: 100%;
    clear: both;
    margin-bottom: 30px;
    }
    
    div#navcontainer {
    width: 100%;
    text-align: center;
    }
    
    div#navcontainer ul 
    {
    margin: 0;
    /* min-width: 800px; */
    padding: 0;
    }
    
    div#navcontainer ul li 
    {
    list-style-type: none;
    display: inline-block;
    margin: 0 10px 0 0;
    width: 209px;
    height: 39px;
    }
    
    div#navcontainer ul li a,
    div#navcontainer ul li a:link,
    div#navcontainer ul li a:active,
    div#navcontainer ul li a:hover, 
    div#navcontainer ul li a:visited
    {
    display: inline-block;
    width: 209px;
    height: 39px;
    background-image: url(nav.png);
    text-decoration: none;
    }
    
    div#navcontainer ul li a span 
    {
    display: block;
    padding: 15px 0;
    text-align: center;
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    font-weight: normal;
    }
    
    div.spacer {
    width: 100%;
    height: 30px;
    clear: both;
    }
    
    h1 {
    font-family: arial narrow;
    color: #339900;
    font-size: 180%;
    }
    
    h2 {
    font-family: arial narrow;
    color: #339900;
    font-size: 140%;
    }
    
    p {
    font-family: arial;
    color: #333333;
    font-size: 90%;
    line-height: 130%;
    }
    
    div#pic-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
    text-align: center;
    }
    
    span.byline {
    font-family: arial;
    color: #555555;
    font-size: 80%;
    }
    
    span.underline {
    text-decoration: underline;
    }
    
    span.bold {
    font-weight: bold;
    }
    
    table.contact {
    width: 500px;
    }
    
    table.contact tr {
    width: 100%;
    }
    
    table.contact tr td.left {
    width: 250px;
    font-family: arial;
    color: #333333;
    font-size: 90%;
    font-weight: bold;
    padding: 15px 0px 15px 0px;
    }
    
    table.contact tr td.right {
    width: 250px;
    font-family: arial;
    color: #333333;
    font-size: 90%;
    padding: 15px 0px 15px 0px;
    }
    
    div#footer {
    width: 910px;
    clear: both;
    background: #444444;
    text-align: center;
    padding: 40px 20px 40px 20px;
    margin: 0 auto;
    }
    
    div#footer p {
    font-family: arial;
    color: #ffffff;
    font-size: 70%;
    line-height: 180%;
    }
    
    span.bld {
    padding: 0px 8px 0px 8px;
    font-weight: bold;
    }
    
    div#SubNavcontainer {
    float: left;
    width: 200px;
    display: inline;
    }
    
    div#SubNavcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    div#SubNavcontainer ul li {
    display: block;
    }
    
    div#SubNavcontainer ul  li a:link,
    div#SubNavcontainer ul  li a:active,
    div#SubNavcontainer ul  li a:visited
    {
    display: block;
    width: 200px;
    font-family: arial;
    color: #339900;
    font-size: 12px;
    padding: 4px 0px 6px 0px;
    border-bottom: 1px solid #339900;
    text-decoration: none;
    }
    
    div#SubNavcontainer ul li a:hover, 
    div#SubNavcontainer ul li a#current
    {
    display: block;
    width: 200px;
    font-family: arial;
    color: #339900;
    font-size: 12px;
    padding: 4px 0px 6px 0px;
    border-bottom: 1px solid #339900;
    background: #dddddd;
    }
    
    div#right-content {
    width: 580px;
    float: right;
    display: inline;
    }
    
    ol li {
    font-family: arial;
    color: #333333;
    font-size: 100%;
    }
    
    ul li {
    font-family: arial;
    color: #333333;
    font-size: 100%;
    }
    
    div.news-image {
    float: left;    
    }
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Diddy,
    I don't think IE has the same support for "inline-block" as FF does. Especially between different IE versions. I myself go for the float method which seems to be more reliable with all browsers. However, if you change to float now, you have to pretty much rebuild your whole navbar which I'm guessing you don't want to do.

    I found this regarding inline block. I just browsed it and if you search Google, there is more.

    If you want a couple of examples of my floated navbars for future reference, then check these out. One, Two, Three

  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Also, this is redundant.
    div#SubNavcontainer {
    float: left;
    width: 200px;
    display: inline;
    }
    Float left and display inline will do the same thing. This should be put on the li tag anyway. I know this is not for the nav in question but I just happened to see it.

    Remember this thread? Start with the bare bones.

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Thanks Aero. I'll have to try it in a few days when I get back to school, as there's the problem, for some reason.

    I skimmed over that article you linked, but I can't find the relevance for me. I'm trying to get them to display horizontally and my problem is that in IE they're getting vertical, but that article seems to be talking about giving things vertical alignment. *shrug*

    Is there any simple fix?

    And thanks for pointing out the redundant errors in the other menu. I'll fix that up.

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I think if you add the natural display, "display: inline;" along with it, it may fix it. I can't test for IE right now, but give that a shot.

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Quote Originally Posted by aeroweb99
    I think if you add the natural display, "display: inline;" along with it, it may fix it. I can't test for IE right now, but give that a shot.
    I'm pretty sure I tried that but it was a couple of days ago. When I get access to the browser I'll test it to make sure.

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Another tidbit I found, inline block is not supported with FF2. Nor IE6/7 (without the display inline with it)

  9. #8
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Quote Originally Posted by aeroweb99
    Another tidbit I found, inline block is not supported with FF2. Nor IE6/7 (without the display inline with it)
    So do you mean that all I need to do is this:

    Code:
    display: inline-block;
    display: inline;

  10. #9
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Yes, from what I can gather in a short time.

  11. #10
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, thanks. I'll try it when I get back to school where I can test it and let you know.
    Thanks for your help.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com