HTML and CSS Help

diddy · February 6 '10, 01:45 AM (#1)

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;    
}

aeroweb99 · February 6 '10, 02:23 AM (#2)

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

aeroweb99 · February 6 '10, 02:28 AM (#3)

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.

diddy · February 6 '10, 02:33 AM (#4)

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.

aeroweb99 · February 6 '10, 02:36 AM (#5)

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.

diddy · February 6 '10, 02:39 AM (#6)

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.

aeroweb99 · February 6 '10, 02:43 AM (#7)

Another tidbit I found, inline block is not supported with FF2. Nor IE6/7 (without the display inline with it)

diddy · February 6 '10, 02:46 AM (#8)

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;

aeroweb99 · February 6 '10, 02:54 AM (#9)

Yes, from what I can gather in a short time.

diddy · February 6 '10, 02:56 AM (#10)

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.

aeroweb99 · February 6 '10, 02:59 AM (#11)

What inline-block does is make the li's display horizontally and make them block so you can give them width and height. The catch is, that it's not fully supported yet.

Now normally you would give the li display: inline, then give the "a" tag display: block.

HTML and CSS Help

*sigh* IE's at it again with my navigation menu

sigh IE's at it again with my navigation menu