SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser Image Different from DW Design View

    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

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,448
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    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.

    hook1C.png

    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.

    Don't serve your porridge and then go out for a walk.

  7. #7
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.

    hook1C.png

    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.

    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

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,448
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    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:

    Code HTML4Strict:
    <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.

    Code HTML4Strict:
    <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 -->
    Don't serve your porridge and then go out for a walk.

  9. #9
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,448
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    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:

    Code CSS:
    .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.
    Don't serve your porridge and then go out for a walk.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •