First of all, great site. I appreciate all the knowledge that is shared here. I hope I can be the target of some of that myself.

So, I'm working on building my second site using Dreamweaver 8. After getting the layout generally put together according to customer specs, I test in FireFox and find all my divs are out of whack. I come here searching for answers and find that Dreamweaver does this kind of stuff all the time. Sad moment for me. So now I'm handcoding the site (it's nothing complex) to get a good idea of HTML.

I guess my question really comes down to 1. how can I even use the visual portion of Dreamweaver when the layout it spits out is quite different from the 'correct' FireFox version, and 2. If I line up my divs to look good in FF, how can I fix vertical alignment in IE?

Thanks for any help.

There are multiple reasons why this happens. Yes, Dreamweaver can output some junk code, but cross browser computability is it's own animal.

I can assure you this won't be the first time you run into this. I use Dreamweaver all the time as a WYSIWYG editor. I like to preview as I'm doing it sort of. It might seem lazy to some, and I never trust Dreamweaver's view so here are some ideas.

I would say it's best you learn all you can about html css and w3c and then always double check Dreamweaver's output by pasting in Notepad or my favorite Notepad2 and check Dreamweaver's output code.

Another trick is to go to Dreamweaver's preferences and set the code rewrite to not rewrite your code. Go here for a little tutorial I found. I'm sure there are better one's

And always use W3C to validate your work and output. You might find just doing these little things help allot of your issues.

Good Luck!

Prior to DW CS3, DW used a very out-dated version of the IE rendering engine for it's internal preview. CS3 does a better job, but it's still going to show something different than what you'll see by previewing in the browsers themselves.

Vertical alignment in IE ? What exactly are you trying to do ?
I hope you're not using all absolute positioning......

Thanks for the help and the links.

I am debating whether to hand code the whole site, using the Dreamweaver version as a guide, or if I should try to correct its code. Unfortunately, there are things that I will never do the same way again (all the layers are just labeled layer1, layer2, etc, along with the styles), and I'm not sure how much I can fix without gutting the whole thing. The site looks fine in IE, but I've come to find out that IE normally stands alone, and all other browsers behave similar to each other.

Thanks again

Originally Posted by LadynRed

Prior to DW CS3, DW used a very out-dated version of the IE rendering engine for it's internal preview. CS3 does a better job, but it's still going to show something different than what you'll see by previewing in the browsers themselves.

Vertical alignment in IE ? What exactly are you trying to do ?
I hope you're not using all absolute positioning......

Thanks to this site, the absolute positioning that DW defaults to is one of the things I am attempting to correct.

What I'm trying to accomplish is very basic, and I'm likely making it harder than it needs to be... but that's how starting out programming tends to go. I have a menu on the left that is broken into 3 divs stacked vertically (ie, nothing to do with the z-index), and in IE/Dreamweaver, they line up how I want them. In FF, one is much lower than I'd like. All divs are using relative positioning except for my main div. And NOW, I've developed a new problem... in FF the text IN the div sits OUTSIDE the div.

I know that FF is the literally correct interpretation of the code, so I'm trying to establish what it was that I changed in the last day or two to move the div text, though I don't see how div text can be outside its div.

Thanks for the input on CS3. Unfortunately I have nowhere near the funds to upgrade at the moment, so I'm stuck debugging everything DW8 does for me.

All divs are using relative positioning except for my main div.

THAT is part of your problem. All that relative positioning simply isn't necessary. Learn to use the normal document flow and you'll save yourself some headaches. The document will flow top to bottom by default.

. in FF the text IN the div sits OUTSIDE the div.

Are you sure you have all your divs closed properly ?

Maybe if we could see all your code we could help you figure out what's happening.

Originally Posted by LadynRed

THAT is part of your problem. All that relative positioning simply isn't necessary. Learn to use the normal document flow and you'll save yourself some headaches. The document will flow top to bottom by default.

That's just what somebody who knew what they were doing would do!
I'm still trying to understand div placement just by document flow. I wish there was a way for me to see it visually. I will google more css/html when I have a chance... any top sites to illustrate this point that you can recommend?

Originally Posted by LadynRed

Are you sure you have all your divs closed properly ?

Maybe if we could see all your code we could help you figure out what's happening.

I thought they were properly closed. I'll have a closer look. I may end up posting the code when I get the necessary bravery.

I would recommend starting by doing dreamweaver's visual aspect and then really look at the code and see how the visual parts are being created. From there I would learn how to tweak the code to make it look appropriate in all browsers. After that you should be able to learn how to program with minimal or no visual interface. I know the people on this forum would be more than willing to help.

I'm still trying to understand div placement just by document flow.

Try poking around www.csszengarden.com -- look at the sample html, then look at some css files.

You might also try these: http://www.bluerobot.com/web/layouts/
http://www.glish.com/css/

Thank you both. I've spent many hours in the last couple days looking at w3schools.com. I went through the html lessons and most of the css lessons, and I've been coding like mad exploring what I've learned.

I've found that making all my divs have viewable borders has really REALLY helped understand layout of divs.

Let me ask... is it considered 'ok' to use margins to do my bidding and get proper flow? I imagine it must be, since there doesn't seem to be much else to work with.

Also, everything has been going as expected, and every time I hit a bump, I'm able to figure out how I screwed up. However, an old friend of mine showed up and I can't get him to go away. One of my divs has its content text showing up way too low in the div (pretty much going beyond the border). It's almost as if I have padding on the top that forces the text too low. Last time I had something similar, it was a missing 'px' in a previous line. I can't find any such issue this time. The div displays as expected in IE, just not in FF. Any common causes?

Thanks again... you people are life savers.

I've found that making all my divs have viewable borders has really REALLY helped understand layout of divs.

Most definitely helps. I use that method often so I can SEE where things are. Applying a temporary background color is also helpful and does not add any pixels to the box dimensions.

is it considered 'ok' to use margins to do my bidding and get proper flow?

Yes, margins and padding are keys to pushing things where you want them.

One of my divs has its content text showing up way too low in the div (pretty much going beyond the border).

That could be caused by a number of things. It's hard to say what your specific problem is w/o seeing the HTML and the CSS. Is the div floated ? If so, have you CLEARED the float ?

Well, I've hand coded the whole site, and despite the fact that I went about it the wrong way (I'm new to this, so the general method behind making a site is still rather foreign), IE7 now agrees with FF which both agree with just about every browser... except for IE6 and lower. It is FUBAR in those browsers. I don't have anything fancy, but it is really messed up. My divs are all misaligned and my pngs lose their transparency.

I'm not sure what to do to fix it since I don't know what's causing it.

Just for the record, all divs are positioned using margins.

Any help would be appreciated.

The site is http://www.caribbeanislandcondo.com/Home.html

Keep in mind it's only my second site, so sugar coat the brutal criticism. ;-)

I think it looks pretty darn good for your second site. Shrug... Looks like your on the right track.

Just keep experimenting, reading and designing and the next thing you know, you'll have to learn to say no because you have so much work. Trust me....

Here's a little something I would change in your css :

 #MainHome {
    background-image: url("Home.jpg");
    width:750px;
    height:1232px;
    z-index:1;
    margin-right: auto;
    margin-left: auto;
}

Originally Posted by Sydpix

I think it looks pretty darn good for your second site. Shrug... Looks like your on the right track.

Just keep experimenting, reading and designing and the next thing you know, you'll have to learn to say no because you have so much work. Trust me....

Here's a little something I would change in your css :

 #MainHome {
    background-image: url("Home.jpg");
    width:750px;
    height:1232px;
    z-index:1;
    margin-right: auto;
    margin-left: auto;
}

Thanks for the kind words and the advice. I had originally had the site centered but never put it back in when I hand coded the whole thing.

I think I finally have everything bearable in all the major browsers. It's a strange thing trying to troubleshoot browser compatibility. I still don't get one of the bugs that's plaguing me, but I think I'll live throught it anyway.