We are re-designing our High School's website. The navigation bar is Javascript based. When we look at it on a 1024X768 resolution monitor it looks fine. But when we go to a bigger resolution it looks messed up. Any suggestions? Code maybe not right?

http://www.camas.wednet.edu/chs/temp/

Your problem is that you have a navigation menu that has a fixed left-margin. You need to get rid of the margin, get rid of any positioning, and put it inside of the container.

Oh, and lose all those tables while you're at it.

- Steve

Thanks, we tried your suggestions but it still does not look right. I have taken the properties of the table out. Below I have posted the CSS Style Sheet.

* {
padding : 0;
margin : 0;
}
body {
font : 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size : 13px;
background-image : url(images/body_bg.jpg);
background-repeat : repeat-y;
background-position : 50% 50%;
background-color : #c8c8c8;
}
.clear {
clear : both;
}
ul {
line-height : 165%;
}
#wrapper {
margin : 0 auto;
width : 932px;
}
#header {
color : #333;
width : 900px;
float : left;
height : 100px;
margin : 10px 13px 5px 15px;
background-image : url(images/black_header.jpg);
background-repeat : no-repeat;
}
.logo {
width : 240px;
text-align : center;
}
.logo h1.lineone {
font-size : 1.7em;
font-weight : lighter;
padding-top : 25px;
padding-left : 5px;
border : none;
letter-spacing : -1px;
color : #FFFFFF;
}
.logo h1.lineone span {
color : #3054c1;
}
.logo h2.linetwo {
padding-left : 5px;
font-size : 14px;
text-transform : none;
color : #990000;
}
.logo a {
color : #3054c1;
text-decoration : none;
}
#navigation {
float : left;
width : 100%;
color : #333;
padding : 0;
margin-bottom : 15px;
}
#leftcolumn {
color : #333;
margin : 8px 0 5px 23px;
min-height : 340px;
width : 207px;
float : left;
}
#leftcolumn h2, #rightcolumn h2, #rightcolumn h3 {
color : #FFFFFF;
font-size : 1.3em;
background-image : url(images/hbg.jpg);
background-repeat : no-repeat;
line-height : 30px;
text-indent : 5px;
}
.ver-nav ul {
margin : 0;
padding : 0;
list-style : none;
font-size : 14px;
}
.ver-nav li li {
padding-left : 10px;
background : url(images/menuimg.gif) no-repeat left center;
border-bottom : 1px dotted #cccccc;
}
.ver-nav a {
text-decoration : none;
}
.ver-nav a:hover {
color : #999999;
}
#content {
float : left;
color : #333;
background : #ffffff;
margin : 0 0 5px 5px;
padding : 10px;
min-height : 350px;
width : 441px;
display : inline;
}
.maintext {
background-image : url(images/mtbg.jpg);
background-repeat : repeat-x;
}
.maintext p {
font-size : 100%;
color : #333333;
text-align : left;
padding : 0 5px 0 5px;
}
.post {
background : #eeeeee;
padding : 3px;
margin : 20px 10px 20px 5px;
border : 0 dashed #8a795d;
font-size : 110%;
}
.post .date {
background : url(images/clock.gif) no-repeat left center;
padding-left : 20px;
margin : 0 15px 0 5px;
}
.post a {
color : #ff6c17;
}
.post .comments {
background : url(images/comment.gif) no-repeat left center;
padding-left : 20px;
margin : 0 15px 0 5px;
}
.post .readmore {
background : url(images/page.gif) no-repeat left center;
padding-left : 20px;
margin : 0 15px 0 5px;
}
#rightcolumn {
color : #333;
margin : 8px 5px 5px 5px;
min-height : 350px;
width : 207px;
float : left;
}
#rightcolumn h3 {
}
.thumbs {
border : 1px solid gray;
margin : 5px 8px;
padding : 1px;
}
.news h4 {
font-family : verdana;
font-size : 1.0em;
padding-top : 10px;
padding-left : 3px;
padding-bottom : 5px;
color : #990000;
margin-left : 10px;
}
.news p {
font-family : verdana;
font-size : 0.75em;
padding-left : 0px;
padding-bottom : 5px;
margin-left : 10px;
margin-right : 5px;
text-align : left;
padding-right : 0px;
background-color : #FFFFFF;
}
.news a {
float : right;
margin-right : 5px;
}
#footer {
width : 900px;
clear : both;
color : #333;
border : 1px solid #ccc;
margin : 5px 0 5px 17px;
padding : 10px 0;
background-image : url(images/footerbg.jpg);
background-repeat : repeat-x;
background-position : top 0%;
text-align : center;
}

Any suggestions would be great. Refer to the above post for the website URL.

There are a lot of inline styles in the code for the menu. Here is what I would do if you really want to use that menu script:

1. Remove "float:left" on #navigation (no need for this, just need to clear your floats)
2. Add "clear:left" on #navigation (really need to clear all your floats to avoid future problems you might encounter)
3. Add "position:relative" on #wrapper (this will let you use position:absolute inside the navigation menu without it breaking out of your wrapper)
4. Go in and adjust all the absolute positioning so everything aligns properly.

It's still messed up because the menu (which can be done w/o javascript!) is set to position:absolute. Set the #wrapper to position:relative, then adjust the left:xx values to bring it back where it belongs on the left.

You really don't need a div for every menu item, you do NOT need the tables. That menu can be achieved with CSS and unordered lists. Look up "son of suckerfish" for dropdown menus.

Originally Posted by LadynRed

It's still messed up because the menu (which can be done w/o javascript!) is set to position:absolute. Set the #wrapper to position:relative, then adjust the left:xx values to bring it back where it belongs on the left.

You really don't need a div for every menu item, you do NOT need the tables. That menu can be achieved with CSS and unordered lists. Look up "son of suckerfish" for dropdown menus.

That worked, now to deal with good old IE 7. If you preview in IE 7 it looks totally different than IE 8. The menu is halfway down the page. Any ideas why?

Sorry to double post here, thanks again for the help. I took the table out and it fixed the issue! The site will be up soon at http://www.camas.wednet.edu/chs/

IE8 is much more standards-compliant, closer (finally) to Firefox than it's predecessors. I don't have IE7 here, have to look at it from home.