I am doing a site in Dreamweaver CS4, and this is my first taste of Dreamweaver. I am having real problems getting the site to look the same in the two diffrent browsers. The site is here .

What I need to do is have the nav buttons line up with the red "contribute" arrow and the two white boxes line up.

Anybody have any suggestions to get me pointed in the right direction.

Thanks in advance,

Ed

Well, for one thing your conditional comments for IE are all wrong, they should be in this format:

<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /><![endif]-->

or

<!--[if IE ]>
rules go here

<![endif]-->

Remove the position:relative on #contribute, I don't see that it's at all necessary.

Thanks for the response. I fixed the conditional statement. I tried removing the position:relative, but it caused the two form fields to go into the header.

I apologize if I am asking too elementary questions, this is my first experience with DW.

Ed

I'm only looking in Firefox so everything below is based on how I see the site in FF.

For your first question look for the div with an id of contribute. Reduce the width of the div (looks like roughly 180px) and then give the div a left margin about the same as how much you reduce the width. The should bring the menu up to line up better with the red arrow.

For your second question the extra space in the main content area is being caused by the margin-top of the heading. Try:

h1 {margin-top:0}

If you have other h1's and you want to keep the margin, give this one a class or id and adjust the margin-top for the class or id.

Vangoh,

Thanks for the suggestions, I tried them but to no avail. Actually, I tried resizing the contribute div prior to reading your post.

As I said this is my first attempt with DW, I have been doing sites for years with a program called NetObjects Fusion and can line up everything I need. I figured I had better get into the 21st century and go with a CSS based site. I have a lot to learn. fog stands for florida old guy, hard learning new tricks.

NOF does EVERYTHING with position:absolute.. which is not good. You have a lot of stuff in there that you really don't need, sad to see that DW CS4 is still full of code bloat.
My approach to your layout would be different. There's really no need for the contribution stuff to be positioned absolutely at all, since the contribute box fits into the flow of the document just fine.

I would put the header graphic in as a background on the #header div rather than having it as an image in an h1 - which the search engines can't read.

Just my take on it anyway.

I played with the code quickly and was able to get things to line up how you'd like in Firefox. Here's the code:

#contributewrap {
	height: 50px;
	width: 550px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
}


ul.MenuBarVertical
{
	margin: -40px 0 0 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 161px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.thrColFixHdr #mainContent {
	background-color: #EBEBEB;
	margin-right: 320px;
	margin-bottom: 0;
	margin-left: 180px;
	background-image: url(../images/flagbkgd.gif);
	background-repeat: no-repeat;
	background-position: center top;
	color: #0a294f;
	margin-top: -25px;
	padding-left: 15px;
	width: 420px;
	padding-right: 10px;
}

Most of it is your code, but I made a couple changes to each block.

Hopefully it works for you.

LadynRed,

Again thanks, if I get to be a pest with beginner questions, chase me away. I will try changing the header to using the image as a background. Vangoh said there was a problem with the h1 in the header, but I could not find it. I change things to his recommendations, but that didn't help.

About the contribute items, I used a jpeg for the fields then added the form fields on top of them; on the contribute button, I used a hidden field to submit the form to the processing company. So, when I remove the absolute positioning the field go off of where they need to be. Do you have a suggestion on how I would go about this without the absoulte positioning?

I have had Dreamweaver for about a week, and I will say that it has taught me more about code than I ever imagined. I see more and more that I need to learn coding, and I do think that using DW and looking at the code view is a big help.

Thanks again for your input.

Vangoh,

Thanks for the code, things lined up in FF but IE is a mess. I ran the browser compatibility utility in DW and it said I had an issue of two floats in one div. I will fix that and give it another try.

Yep one float per div. When you develop sites it's usually easier to develop to the standards. It ends up being easier to add a couple of fixes or IE if the site is developed to the standards then it is to develop for IE first.

Hopefully fixing the float issue gets things looking right in both browsers.

Again thanks, if I get to be a pest with beginner questions, chase me away.

We wouldn't do that , asking questions is how we learn and that's part of what we're all here for.

What do you mean one float per div ?? I can put any number of floated things inside a div, and float them in different directions. However, if you had float:left and float:right applied to ONE single div, that would be a problem.

I may not be acurate in my description of the two floats per div, here is what I think I did wrong. I applied a float left to the container div and another float left to the nav div.

Here is the rest of the story. The site needs to be done as soon as possible, so we hired a "professional" at an advertising agency, with explicit instructions to make things line up in CSS NOT tables. We got the site back in tables. When I questioned him he said that he would need a couple of months to figure out how to do this in CSS.

I am going ahead with his versioin so we can launch this site, but I will contiue to work this out in CSS and update the site when I do.

Thanks for the suggestions. I will be making frequent visits to this board for advice and help.