Hi there!
I am working on a website for a local fishing baitshop and am having difficulty getting what I see in DW to translate to various web browsers and look the same. Can someone please help? I will be happy to supply code, etc. so you can help me figure out where I have gone wrong.
Thank you.
~Brenda Murphy
Are the various web browsers’ rendering the site drastically differently, or can you accept small differences? We haven’t ironed out all the browser changes across the board on our end, but all the changes are minor and don’t affect the site or the user’s use of the site in different browsers.
Steven:
Thank you for your reply. The differences are noted in different browsers and they are significant enough that the page doesn’t look very professional when rendered through a browser. For example, the nav bar moves from the bottom of an image to above it, wrapped and floated items don’t stay where they’re supposed to, etc. I’ve checked my divs and css and they seem right (as viewed in DW) but the story changes when I render it out.
Thanks.
~Brenda Murphy
Whatever you see in DW is very unreliable. You need to test a site in browsers to know what you are going to get. Feel free to post a link to the site so that we can take a look. 
Thank you for your reply Ralph. Here is the link. When I am back at my computer, I’ll upload my HTML and CSS, too. www.hooklineandsinkershop.com/index.html and /hotproducts.html. I am in the process of developing the hot products page. The problem with that page is I can’t get “product 1a” to sit next to “product 1b”.
Thank you.
~Brenda Murphy
[FONT=Verdana]I’m seeing various problems on those pages, but there’s nothing wrong with the product alignment, as far as I can tell. I’ve checked on Firefox and Chromium.
I used Dreamweaver briefly a number of years ago when I was first learning Web design. On one occasion, I was going demented, because no matter what I did, Dreamweaver kept displaying my supposedly-horizontal menu links as a kind of staircase, diagonally across the page. I eventually discovered that the problem was not my code, but DW. Every browser I tested displayed correctly, but DW did not. So I’m in full agreement with ralph.m - test in browsers and ignore DW’s screen view.
I’d also recommend running your code through the W3C Validator. Code errors and minor typos can produce all kinds of unexpected results. 
[/FONT]
Thanks for the response TechnoBear. I’m fairly new to website building (if you couldn’t tell from my code) so any help is much appreciated. I’ve noted everyone’s comments regarding the unreliability of DW and would like to inquire about more suitable WYSIWYG web building programs. I understand the need to check in all browsers but it is time consuming and next to impossible to get them all given the various versions of each still in play. Getting a fairly reliable look for each step of the way is a helpful way for me to learn. I have read there are some code fixes that may address some of the discrepancies I note in different browser renderings. Do you have any suggestions?
Thank you.
~Brenda Murphy
[FONT=Verdana]Well, my first advice would be not to use a WYSIWYG editor at all, I’m afraid. They mostly churn out iffy code that’s going to cause you problems at some stage, so it’s really much better to learn HTML and CSS properly and code things yourself. If you run into problems, we’re here to help.
Secondly, I really would run your pages through the Validator before you go any further. For example, you have this for your navigation:
<div class="navMain">
<ul>
<a> href="#">About Us</a>
<a> href="#">Hot Products</a>
<a> href="#">Fun Stuff</a>
<a> href="#">Tips Links</a>
<a> href="#">Brag Board</a>
</ul>
</div> <!!--END navMain-->
Those links should be wrapped in <li> tags, as they’re part of a <ul>. The links are also malformed, as is the comment at the end.
<div class="navMain">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Hot Products</a></li>
<li><a href="#">Fun Stuff</a></li>
<li><a href="#">Tips Links</a></li>
<li><a href="#">Brag Board</a></li>
</ul>
</div> <!-- END navMain -->
[/FONT]
Thank you. I was aware of those errors. I haven’t set them up properly yet since I can’t get the nav bar to stay where I want it. For example, in IE9 it jumps to the top of the screen (where I don’t want it) and with the compatibility button pushed it goes back where it belongs.
I am mostly coding it myself without the help of DW. I only have used DW as a quick check and file manager but am seeing that is not good. What programs do you recommend instead of DW?
I am also noticing my block of text jumps around, too. Sometimes it’s where it belongs, other times it jumps up into the header graphic and other times it overlaps the image beside it. It seems these variances occur in the different browsers. Is there a code fix I can use to keep things where I want them when viewed in any browser?
[FONT=Verdana]If you’re only using DW as a code editor and not in WYSIWYG mode, then you should be OK with it.
You really shouldn’t need separate coding “fixes” for modern browsers such as IE9. I don’t have IE handy to test at the moment, to see what’s happening. At the risk of sounding like a broken record, fix your code errors and see if that makes any difference. I think IE is possibly more likely than other browsers to throw a wobbly if it encounters mistakes such as the stray closing > in your links and the malformed comments. You need to fix them sometime, so why not sooner rather than later?
Edit: I’ll add to that, and say validate your CSS, too. http://jigsaw.w3.org/css-validator/
You have this:
.productBucket1B {
width:458px;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-style:normal
list-style-position: outside;
text-indent: 10px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
}
You’re missing the semi-colon after font-style:normal and you have a stray extra } at the end. They could be causing your product alignment problems.[/FONT]
You should also consider validating your HTML using the validator at http://validator.w3.org/ which will detect most of the vlidation errors that could cause the page to be processed differently by different browsers.