Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Site viewed on Chrome is slightly Off.

  1. #1
    Junior Member
    Join Date
    Jan 2013
    Posts
    9

    Default Site viewed on Chrome is slightly Off.

    I created my website with NOF2013 using HTML4. Viewed with IE8 everything looks great. But viewed with Chrome, things are a little off. Pictures and Text on a Layout Region are shifted slightly DOWN on the Layout Region. Does anyone have a fix for my problem?

  2. #2
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default

    No way to even guess without seeing what's going on. Can you post a URL?
    Ray Cambpell
    Sounds In Sync
    Linked in

  3. #3
    Junior Member
    Join Date
    Jan 2013
    Posts
    9

    Default

    Here you go Ray.
    http://www.acutraksolutions.com/
    Try viewing with IE, and it looks fine.
    Try it with Chrome, and you'll see all kinks of objects drooping down the page.
    Tell me what you think.

  4. #4
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default

    Hmmm.... Hard to say exactly what is happening. What I do notice (which may be contributing to the problem) is you seem to be using a lot of inline styling. What I mean is basically using the NOF Page Layout screen like you would MS Word -- select some text, change the size, make it bold, tweak the font, etc. I did this for my first couple of sites, and learned that this is the absolute wrong way to go about it.

    All elements (especially text elements) used in a site should be defined in your CSS, through Style View and/or through Style -> Manage Styles.. menu.

    Ensure you define ALL aspects of a text element. When you set parameters for Heading 1 for example, explicitly set Font, Size, Color, Alignment, Spacing, Padding, etc. Anything you do not set will be interpreted by the browser based on the browser defaults, which you have absolutely no control over. Well, you have control over your browser, but no control over how anyone else viewing the site will have their browser set. So if your body text font is defined as "automatic", a site visitor may see your entire site in Courier New if that is what their browser is set to use.

    Here's the rule of thumb: When you want to affect the way a piece of text looks, you should only select from the Style: dropdown or Tag dropdown in the Text Properties box. If you can't get what you want, you should go to the Style -> Manage Styles.. menu and create a style for it. You can bend or break this rule (and I do, mostly out of laziness), but be aware when you do.

    Click image for larger version. 

Name:	text-properties.jpg 
Views:	160 
Size:	17.6 KB 
ID:	1575

    For example, the shifted text: For all your pro audio needs should simply be an <H1> for styling and for SEO.

    What you appear to have is regular paragraph text <p>, which is the re-sized, set to black, made bold and centered, via inline styling.

    What you get is a style, plus modifications, plus whatever is left out is interpreted by the user settings and/or the browser.

    Could this be causing your shifting? Yes... maybe. Have a look at this thread where this sort of thing was being blamed on Hot Spots, which came down to lack of attention to styling.

    Changing it will be ugly because you'll have to go through and select each snippet of text, clear the formatting and apply a pre-defined style. It may not fix your problem... but it just might.
    Ray Cambpell
    Sounds In Sync
    Linked in

  5. #5
    Senior Member franko's Avatar
    Join Date
    Apr 2010
    Location
    Tasmania Australia
    Posts
    2,613

    Default

    And I bet you're using HTML 4.01 as your publishing method. Unless you have a real reason to do so use either HTML 5 or HTML 4.01 with tables to publish.
    Last edited by franko; 09-11-2013 at 05:03 AM.

  6. #6
    Junior Member
    Join Date
    Jan 2013
    Posts
    9

    Default

    Thanks for the help Ray. Whether TEXT STYLES is the cause of my problems or not, I DO need to learn about the proper use of STYLES. That being said;

    I created a test copy of my site file, and on my home page I deleted the text paragraph "For all your pro audio needs". Then I did a local publish so I could preview with Chrome.
    Even with this text removed, all of the PICTURE element on the Layout Region are shifted down when viewed with Chrome. Other design elements that are NOT on Layout Regions are NOT shifted down.
    (The different Layout Regions are the wide grey frames.)
    It seems that with Chrome, Text or Pictures on a Layout Reagion are shifted down. I believe this happens with Safari also. I check when I get home to my Mac.

    I know I have a lot to learn about web design and about NetObjects, but this shifting down of objects is bugging me.

  7. #7
    Senior Member franko's Avatar
    Join Date
    Apr 2010
    Location
    Tasmania Australia
    Posts
    2,613

    Default

    It also doesn't render properly in Safari so it seems it's a problem with Webkit based browsers. NoF uses the Microsoft Trident engine as its layout engine and so you would expect that IE would render the same as NoF. However, Chrome, Opera and Safari use Webkit and Firefox uses the Gecko engine so you sometimes see differences in the rendering of web pages by the various engines (and there are a whole bunch of other minor ones).

    I also suspect you are using absolute positioning to publish your web site (used to be called fixed position in NoF; now called html 4.01) and this usually causes problems because the engine is trying to place objects in fixed positions relative to other objects. When the browser window is resized (and especially if somebody is viewing the site on a smartphone or tablet) the site tends to break with objects overlapping.

    I think if you change your publishing method to html 4.01 with tables then you'll get a better result across the board.

  8. #8

    Default

    Thanks Ray for this answer, I checked the Styles and the publishing, check. Here is my link. www.drvconsulting.wellmanworks.com My concern is the black lines that I've drawn appear jagged in IE 10 and Chrome. Would you mind taking a peak? I suppose I could make the line in photoshop.....

    Thank you very much. I'm off to convert a .ogg to html5 wish me luck.

  9. #9
    Junior Member
    Join Date
    Jan 2013
    Posts
    9

    Default

    Franko, thanks for the help.
    My site IS published using html 4.01 with tables, and am having the positioning problems. As you suggested, I tried html 5 (only as a Local Publish test so far). At first I thought this solved all of my positioning problems, but then I discovered a couple of pages that were missing the Main Navigation Bar from the Master Border. How could THAT be?

  10. #10
    Junior Member
    Join Date
    Jan 2013
    Posts
    9

    Default

    Hello again Ray,
    I have a new question for you, in my quest to learn. I thought I was publishing using "html 4.01 with tables".
    I used drop-down menu Tools/Options/Current Site/Site Generation and chose html 4.01 with tables.
    But when I go to the Properties Pane, and click on the html icon, it says: <!doctype html public "-//w3c//dtd 4.0 transitional//en">. That makes me think I'm publishing with html 4.0.
    Set me straight.

Tags for this Thread

Posting Permissions

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