Hi, i have two basic CSS problems one of which i have been trying to fix for days.

The site i am having problems with is: http://jenn.cnotecreations.com/csstest/test.html

1. Min/Max values (Works in Firefox; Doesn't work in IE)

I have set a minimum and maximum size for the content on the right hand side. This works beautifully in Firefox and at first did not work at all in IE. I have since been able to get the content to resize in IE using minmax.js to emulate the features. However, when the content reaches the minimum size, the content shifts down the page and is no longer in line with the nav bar.

Any solutions?


2. The nav bar background images. (Works in IE; Doesn't work in Firefox)

The background images do not display in Firefox for the nav bar using:
background: #cc3366 url(../top_nav.jpg);

Any help to either issue would be greatly appreciated.

1. your using px to define with, use % instead

2. I have viewed you page in IE and firefox, and they look the same, no background pics on either

The content by percent is a very simple yet it does work for my site, i cant believe i didn't think of that lol, Thanks for the reply, i do appreciate the help.

As for the nav bar, i didn't realize i had the paths wrong when i uploaded it, it is now fixed and i am still having the same problem but even more weird now.

The center graphic now works in Firefox for the nav bar but not the top and bottom using the exact same code, it works fine in IE.

On your leftnav, you really should use an unordered list <ul> for your menu items instead of paragraphs. You can then style the list items as you want to.

Your top and bottom graphics for you leftnav do not show up because you have spelled "height" incorrectly in the style rules:

#leftnav_top
{
float: left;
width: 190px;
margin: 0;
hieght: 14px;
background: #cc3366 url(../csstest/top_nav.jpg);
background-repeat: no-repeat;
background-position: bottom;
}

#leftnav_bottom
{
float: left;
width: 190px;
hieght: 18px;
margin: 0;
background: #cc3366 url(../csstest/bottomnav.jpg);
background-repeat: repeat-y;
background-position: top;
}