Browser issues

My website looks different in various browser, can anyone enlighten me as to why?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Please explain “different” a bit more, because this can mean just about anything. Also maybe a link where we can see the website?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In Safari it looks fine. In Firefox and Outlook Express the samples page and contact page have a series of white horizontal lines going through the red background.

www.reneebealevo.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Browsers each define what’s known as the user agent stylesheet. This
means that anything you did not explicitly style will take on a
certain native appearance. Form elements are one great example of
this. While you can go around the browser and change all manner of
visual attributes on form elements using CSS, it’s usually a usability
nightmare for the visitor, because the inputs no longer look like what
they expect a form field to appear. I’m sure you’ve seen some sites
where the search field is dolled up to look like something else, maybe
just a pale gray rectangle in one corner of the screen, and no other
clues that this is actually a form input.

Expect browsers to look different than one another. It’s actually a
feature. This is not print design, where each copy is identical. Web
pages are under the visitor’s express control, which is why my friend
Beverly, with her advanced Macular Degeneration, can still browse the
web (because a screen reader reads it out loud for her, or before it
got that bad, because she had her fonts cranked up to billboard-size).
Books can’t do that.

Walter

On May 13, 2011, at 10:35 AM, Joe Recchia wrote:

My website looks different in various browser, can anyone enlighten
me as to why?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you build these pages using layered construction rather than tables
(click the Layer checkbox in the Inspector for each element on the
page) then you shouldn’t see this issue. You are getting the stripes
because the elements are rendering at slightly different sizes
(because of the browser differences I mentioned earlier). The table
pulls apart to accommodate this new size, and the illusion is broken.

In future, click the CSS Layout button in the main toolbar so it turns
blue. This will force the layered layout, and your page should be rock-
solid in any browser.

Note that I recommend you change to add some actual HTML text
somewhere in this page. As it stands, while it looks really really
nice, it’s going nowhere fast in the search engines, because Google
can’t read pictures.

Walter

On May 13, 2011, at 10:45 AM, JMR wrote:

In Safari it looks fine. In Firefox and Outlook Express the samples
page and contact page have a series of white horizontal lines going
through the red background.

www.reneebealevo.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter. So if I understand you correctly, I should click the CSS layout button to eliminate the issues with the lines going through the background and that I should use html text so that the search engines can read it…correct?

How can I go back and correct these issue with what I’ve already done?

Thanks again!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Correct. Clicking the CSS Layout button will affect everything you
create after that point, but it won’t go back through your layout and
re-layer everything.

So what you will need to do in your existing pages is click on each
element in the page (easy way to do this is to click the header above
the Site pane so it changes to read Page, then click on each element
listed one at a time) and look in the left-most tab of the Inspector
to be sure that the Layer checkbox is on.

This may affect your layer order, in some cases quite dramatically, so
you may need to go through and re-order things by dragging them up
(which is counter-intuitively Back) or down in the list in the Page
pane. When you’ve finished one page, click on Page to turn it back
into Site, select the next page, click again on the header, and do the
whole thing over again on that next page.

This is a small site, so it shouldn’t take you too long once you get
the hang of it.

As far as getting HTML text into your page, it’s going to mess with
your very careful layout quite a lot. In some places, like the About
Me page, that shouldn’t be too bad. But on the home page (where you
need it badly for SEO reasons) it’s going to force you to reconsider
your layout a bit, I’m afraid.

What you might want to try is my Image Replacement Action (look on
ActionsForge). That lets you select a graphic text element and convert
it into one of the header levels with actual HTML text replacing the
image. Properly applied, it doesn’t look any different in a browser,
but the code is considerably more SEO-friendly.

You could use that for your main headline (A new era…) which I would
set as H1, your Finally… block which would be h2, and Renee’s name
and number, as H3. Make the other two blocks (below the red block) as
both h4. Leave the navigation as is, they don’t belong in the header
hierarchy.

I don’t know precisely what Google will make of a page that doesn’t
have any paragraphs between its headers, that’s sort of a semantic
equivalent of typing with the caps lock down. You’ll have to see how
it goes. But that technique, in conjunction with careful use of the
layer order to set the source order (the order that the HTML expresses
each tag) to match the reading order implied by the H1, H2, H3
hierarchy, should net you some positive results. The page will look
distinctly funky when printed, mind you, because while the layout will
be nearly identical, the headlines will all print out in the browser’s
default font, probably Times.

Walter

On May 13, 2011, at 11:23 AM, JMR wrote:

Thanks Walter. So if I understand you correctly, I should click the
CSS layout button to eliminate the issues with the lines going
through the background and that I should use html text so that the
search engines can read it…correct?

How can I go back and correct these issue with what I’ve already done?

Thanks again!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options