Xerxes

Well, that is actually the div that contains all of the content below the header. It isn't just a left div. So, when I put the width down to 200px, it screwed it up in every browser. Thanks for your help though!

any other suggestions out there?

I added the {margin: 0; padding: 0;} to the stylesheet (the margin and padding was already 0 in the body) I also added the overflow: hidden; to the #wrap:

#wrap {	width:910px;	background-image:url(graphics/wrap-bg.gif);	background-repeat:repeat-y;	margin: 0 auto;	overflow:hidden;	}

I even reduced the width of the #interior (main content div for interior pages) by 200 pixels to see if that would move everything up, but it didn't. still no luck.

Hey guys,This is the website I am working on: http://www.samplechamber.comIt looks great in everything except.. IE (why can't Microsoft just drop off the face of the earth??)Anyway, I was wondering if anyone could tell me why the content gets pushed way down to the bottom when you look at it in IE.Thank you!

Hello,I am working on http://stage.munciecivic.orgHere is the the nav bar I am working on for it: http://stage.munciecivic.org/testnav.htmlI am trying to get the navigation menu to look right, but I can't seem to figure it out completely. My Two biggest problems are the white space between the links and the background image showing up on the sublinks.It needs to be 720px wide.Here is a screenshot of what the dropdown menu needs to look like:Any help on getting this to look correctly would be greatly appreciated.Here is the CSS:

#nav ul {   margin: 0 auto;   border: 0 none;   width: 720px; /*For KHTML*/   list-style: none;   height: 33px;   z-index: 10000;}#nav ul li {   border: 0 none;   float: left; /*For Gecko*/   display: inline;   list-style: none;   margin: 0;   position: relative;   height: 48px;}#nav ul ul {   border: 0 none;   width: 100px;   list-style: none;   display: none;   position: absolute;   top: 32px;   left: -40px;   z-index: 100000;}#nav ul ul:after /*From IE 7 lack of compliance*/{   clear: both;   display: block;   font: 1px/0px serif;   content: ".";   height: 0;   visibility: hidden;}#nav ul ul li {   border-left: 1px solid #000;   border-right: 1px solid #000;   border-bottom: 1px solid #000;   width: 100px;   float: left; /*For IE 7 lack of compliance*/   display: block !important;   display: inline; /*For IE*/   height: 28px;}/* Root Menu */#nav ul a {   border-left: 1px solid #222;   padding: 16px 15px;   float: none !important; /*For Opera*/   float: left; /*For IE*/   display: block;   color: #fff;   text-align: left;   text-decoration: none;   height: auto !important;   height: 1%; /*For IE*/   line-height: 20px;}#nav ul li a.last {   border-right: 1px solid #222;}		 #nav ul ul a {			border: 0 none;		 }		 #nav ul ul a.last {			border-right: none;		 }/* Root Menu Hover Persistence */#nav ul a:hover,#nav ul li:hover a,#nav ul li.iehover a,#nav ul a#current {   background-color: #fff;   color: #fff;   text-decoration: none;}/* 2nd Menu */#nav ul li:hover li a,#nav ul li.iehover li a {   background-color: #5e605f;   float: none;   color: #fff;   padding: 0;   text-decoration: none;}/* 2nd Menu Hover Persistence */#nav ul li:hover li a:hover,#nav ul li:hover li:hover a,#nav ul li.iehover li a:hover,#nav ul li.iehover li.iehover a {   background-color: #fffbda;   color: #333;   text-decoration: underline;}/* 3rd Menu */#nav ul li:hover li:hover li a,#nav ul li.iehover li.iehover li a {   color: #666;}/* 3rd Menu Hover Persistence */#nav ul li:hover li:hover li a:hover,#nav ul li:hover li:hover li:hover a,#nav ul li.iehover li.iehover li a:hover,#nav ul li.iehover li.iehover li.iehover a {   color: #fff;}#nav ul ul ul,#nav ul ul ul ul {   display: none;   position: absolute;   top: 0;   left: 160px;}/* Do Not Move - Must Come Before display:block for Gecko */#nav ul li:hover ul ul,#nav ul li:hover ul ul ul,#nav ul li.iehover ul ul,#nav ul li.iehover ul ul ul {   display: none;}#nav ul li:hover ul,#nav ul ul li:hover ul,#nav ul ul ul li:hover ul,#nav ul li.iehover ul,#nav ul ul li.iehover ul,#nav ul ul ul li.iehover ul {   display: block;}.nav_about a {	width: 80px;	height:33px;	background: url(images/nav_about.gif) no-repeat;	}.nav_about a:hover {	background-position: 0 -33px;	}.nav_mainstage a {	width: 84px;	height: 33px;	background: url(images/nav_mainstage.gif) no-repeat;	}.nav_mainstage a:hover {	background-position: 0 -33px;	}.nav_studiotheatre a {	width: 115px;	height: 33px;	background: url(images/nav_studiotheatre.gif) no-repeat;	}.nav_studiotheatre a:hover {	background-position: 0 -33px;	}.nav_boxoffice a {	width: 85px;	height: 33px;	background: url(images/nav_boxoffice.gif) no-repeat;	}.nav_boxoffice a:hover {	background-position: 0 -33px;	}.nav_education a {	width: 85px;	height: 33px;	background: url(images/nav_education.gif) no-repeat;	}.nav_education a:hover {	background-position: 0 -33px;	}.nav_volunteer a {	width: 85px;	height: 33px;	background: url(images/nav_volunteer.gif) no-repeat;	}.nav_volunteer a:hover {	background-position: 0 -33px;	}.nav_backstage a {	width: 82px;	height: 33px;	background: url(images/nav_backstage.gif) no-repeat;	}.nav_backstage a:hover {	background-position: 0 -33px;	}.nav_contact a {	width: 104px;	height: 33px;	background: url(images/nav_contact.gif) no-repeat;	}.nav_contact a:hover {	background-position: 0 -33px;	}

And Here is the HTML:

<div id="nav">  <ul class="nav">	<li class="nav_about"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_mainstage"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_studiotheatre"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_boxoffice"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_education"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_volunteer"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_backstage"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>	<li class="nav_contact"><a href="#"></a>	  <ul>		<li><a href="#">Link 1</a></li>		<li><a href="#">Link 2</a></li>		<li><a href="#">Link 3</a></li>	  </ul>	</li>     </ul></div>

jesh,Thank you.. that worked like a charm.Your help is much appreciated!

When I load this in Firefox, this is the source I see for the search form:

	<div id="search">	 <img src="/images/search_top.gif" /> 	<img src="/images/search_advanced.gif"/><img src="/images/search_go.gif"/>	</div>

When I load this in IE6, this is the source I see:

	<div id="search">	 <img src="/images/search_top.gif" />	 <label>	 <input name="textfield" type="text" size="15" />	 </label> 	<img src="/images/search_advanced.gif"/><img src="/images/search_go.gif"/>	</div>

Maybe if the source was the same for both browsers, you'd get that same display glitch.

I think you may have just viewed it while I was uploading the index page. I tried taking the label out and seeing if that fixed any problems.

try adding to cssform {margin: 0; padding: 0;}

no go I tried taking out the search form entirely, and the line still showed up..

Hello,I am having a small issue that only happens in IE.Sports Card ChecklistThe seach box has a few pixels of the background color show up under it.In every other browser it is fine, but not IE (big suprise there)Here is the CSS for the search div:#search { background-color:#b16100; float:right; width:149px; height:auto; padding:0px; margin:0px; }Any ideas?Thank you

Here is what I have for the website so far:Sports Card Checklist (css included in source code for now)If you resize the window.. the website resizes as well. I need the white content area to resize properly. So the white edge on the right resizes equal to the ratio of the header.also, It does not look good in ie right now, so I am not sure what to do about that.If anyone has any suggestions or examples on how to better layout the website.. it would be greatly appreciated.

you can use this site to view what your page looks like in Safari..you will just have to play with it.http://www.browsrcamp.com/

Well, I have all the browsers on my computers.. so, I can test that way. Thanks for the tool though. What I really need to know is why the page doesn't display correctly in Safari and how to go about fixing that.

This page on the walker racing site works great in Firefox and even IE, but the Divs are not aligned correctly in Safari:http://www.walkerracing.com/programs/champcar.phpdoes anyone know a way to fix this?

I got it fixed. A designer at my office helped me out with it. Now, I just need to get everything to display correctly in IE

I doubt it. I'm guessing you're going to have to adjust the absolute setting and tweak your site accordingly.

How would I adjust it to work correctly though?

Your actual navigation text is centered but the div, or whatever it is, is aligned left... at least in Firefox 1.5

yeah, the position on it is absolute. I tried to make it a different position, but it just messes up the nav. It is aligned to the left because RahXephon suggested to put the "left: 4px" in there.Is it possible to make the position other than absolute without it getting messed up?

I think he was talking about the navigation. I also see it missed up in firefox.

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {font-size:10px;color:#FFFFFF;background-color:#000000;position:absolute;width: 750px;left: 4px;}

Try that CSS code. You have your position to absolute and are displaying the content you're using in dd ul and li tags, perhaps that's what is throwing you off. I added left: 4px; to you CSS code above, try it see if that helps out.

That left justified it. (above link updated) Since it is an "absolute" position... I think that is why it didn't left justify it within the div. Still can't figure out how to get it centered though

the layout is a bit messed up in Firefox too.

The layout is messed up in firefox? The layout looks fine to me in firefox, but not in IE yet. I can't get the nav to work correctly in either browser though

Hello,I am working on a website for walkerracing.com and I can't get this nav to work correctly.http://www.whitedrake.com/spinweb/projects...cing/index.htmlThe black box should be centered and it goes below each link. I am sure you can see what I am talking about. Does anyone know how to fix that problem? Thanks a lot.