Bloody Internet Explorer!

JasonKing

Hi Guys!

I am very near finishing my site www.ultimategripstrength.com. I am having 2 Hic-ups, both of which ONLY happen in IE.


Problem 1: All my page content is pushed down by my main header

Problem 2: The Second Lines within the NavBar List Block do not follow its margin settings


I would Appreciate it very much if someone can provide solution for this.

Best
Jason

Lchad

Why the nav is falling below the header in IE is just about math. You have an #imgheader of 623 pixels and your nav is 155 px wide. Plus add in margins, you just don't fit into that area. If you reduce the nav by 5 pixels or the header by 5 pixels it will fit in nicely.

As far as the lists not following the block format, it's probably because you have divs inside the lists.

Lists should look like this:

Code: Select all

<div id="NavBar"> 
      <ul>
        <li><a href="Welcome.html">Home</a></li>        
        <li><div align="left"><a href="Stretches.html">Stretches</a></li>
        <li><a href="Exercises.html">Exercises</a></li>
        <li><a href="Equipment.html">Equipment</a> </li>
        
      </ul>
    </div>

All the styling should be in the css. Once you sort that, I think the longer links will align.

__________________
Maine-ly Web Design- My Photos

JasonKing

Thank you so much! Got the header problem sorted now! Had been baffling me for weeks now .

I have taken the div tags out the list block but the second line within the block is still displaying funny.


Below is the NavBar CSS:

#Container #Header #NavBar {
height: 230px;
width: 150px;
background-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #E3FFCB;
margin-top: 5px;
float: left;
clear: none;
text-align: left;
}
#Container #Header #NavBar ul {
display: inline;
text-align: left;
list-style-type: none;
vertical-align: middle;
}
#Container #Header #NavBar li {
display: block;
padding-bottom: 8px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}
#Container #Header #NavBar li:hover {
background-color: #515151;
}

#Container #Header #NavBar a {
color: #E3FFE3;
text-decoration: none;
}
#Container #Header #NavBar a:hover {
font-weight: normal;
color: #FFFFFF;
}


Thank You Again
Best
Jason