The difference between IE and FF is small but enough to be annoying.  The vertical padding or margins are off by a few pixels, so the links are not centering the way I want them to (vertically centering, not horizontally).  The site is temporarily parked at webovator(dot)com/lisa if you want to look.  I am using floats, too, although this is leftover from when I was going to use a vertical navbar on the side, so I suppose the floats are now unnecessary.  I have never used absolute positioning before, would that help me to align the links better, or would the difference still be there, between IE and FF?  I think it just has something to do with default line heights but I do not know for sure.

At the risk of posting in the wrong section, any other suggestions or comments are welcome, I have thick skin, and I know it needs a lot of work, but I didn't think I should post the same site in the reviews section quite yet, don't want to be redundant... It's just this one issue that is really bugging me for now...  I know there is not necessarily a "right" way to do a horizontal navigation bar, but there are definitely "wrong" ways, and I think I have used one of them, just because it's my first attempt and I don't have an instruction guide, I am doing it intuitively. 

My next question will be how do I make it look like different tabs are at the front depending on the page you are on, but I will look around the net for tutorials first (not trying to be babysat or hand-held

Thanks!

Chris
PS.  this is only my 2nd post here, but I've been a subscriber and lurker for several months.

Hello moxie,

I have looked at the page and yes, IE has trouble with second grade math.

While looking at your stylesheet I noticed a few things that could cause problems.

First in the #container you have styled all 4 sides margin to be set at 0px and then you set the sides to be auto. Correct this by having only one margin style element.
margin:0 auto; This styles the top and bottom margins at 0 and the sides are automatically set so that the container is centered. Next minor problem here is the height of 850px.and overflow:hidden. What will happen if there is more content than can be contained in 850px? Any content that is over the 850px will be invisible including the footer.Removing the overflow:hidden will allow the content to display but the page will break and the content will display without the pinkish background.
So I would suggest that you remove both the height and the overflow this will allow the page to be fluid for what ever amount of text you place in it.

#container {

background-color:#FFeeee;

margin:0 auto;

padding:0;

width: 790px;

}

With your #navbar you have done the same thing with the padding styles. Make a single instance just like above - padding:0 10px; Change the height to match your image of 33px.

Next, In the #main rather than use float:left; change this to text-align:left; you can also shorten the padding styling down. You can change it to padding:0 35px;

#main {

text-align:left;

width: 730px;

padding:0 35px;

}

With padding and margin you can style them individually or as a group Example;
To set all sides equally to 10px you just need padding:10px;
To set the top and bottom to 5px and the sides to 10px you would use padding:5px 10px;
Anther option for setting all four sides, you can use padding:5px 10px 5px 10px; This works in a clockwise direction starting at the top. margin works the same way.

Go through the rest of your CSS and correct these duplicate elements. Let us know if this corrected your problem.

About the overflow:hidden selector, I only added this because DreamWeaver suggested it when I ran the browser compatibility check.  However, I took your advice and deleted that, and ran the check again and it said no issues were found. 

I would like to do away with the height:850px specification but this was the only easy way I could think of, to get the #footer to "dock" to the bottom of the #container.  Before it was either too far down, or not down far enough.  I will google this issue though. 

And I will post once more when I finish up, but I will probably move this thread to the reviews section (assuming it is ready for review).

Thanks again!

Chris

Ok, I condensed the margin and padding attributes to single lines as you recommended, but the positioning difference is still off for the #navbar.  So I tried using relative positioning, and got close with top:0px; left:0px, but the difference is still there.  In IE, the #navbar sits a few pixels lower than in FF, makng a gap between the top banner and the links.  I could mask this by adding a strip along the bottom of the top banner which is the same color as the top of the #navbar background .gif, but I feel like this would be cheating.  So what would best practice be?  Do I need to use a conditional IE statement that makes the #navbar's top position something like negative 3px? 

Edit:
I just tried this, setting a negative position for the top, and it only affected FF, nothing changed in IE.

#navbar {

position:relative;

top:-10px;

left: 0px;

width: 770px;

text-align:center;

margin:0px;

padding:0 10px;

height: 32px;

background-image:url(images/navbar.png);

color:#666666;

}

So it looks as though IE will ALWAYS have a slight space between the top banner and the #navbar div.  The only other solution I can think of at the moment is setting my img margins and paddings to 0, and making a separate class for images that need padding.  But I didn't think images had any default padding or margins in IE...  I am at a loss...

Chris

Yes, you may have to use the IE conditional statement giving the amount of padding need to get it where you want it.

Things would be so much easier if IE could do basic math.

Regarding the footer.

The footer section will automatically move down when more text is added to the page. If you hav content on the left or right that is going to be longer than the main content you can then use the 'clear' element.

To have it fall under the left side you would use clear:left;
To fall under the right clear:right;
and to clear both left and right clear:both;

Try setting a conditional staement in the head section of the page.

<!--[if lte IE 7]>

<style type="text/css">

#navbar {

position:relative;

top:-5px;

}

</style>

<![endif]-->

Actually, I just got done doing this. Only I specified IE7 too, not just the previous versions.  Everything is looking much better now, so thank you once more for taking all the time to help me resolve this.  I added the conditional statement to the head of each page and in the ienav.css file I used this code:

#navbar {

position:relative;

height:33px;

top:-4px;

}

Now everything's right.  Next time though I think I will combine the top banner and the nav bar into a single image, and just have text on top of the background using the z-index.  Have a great evening!

Chris