Text boxes mix in Firefox

Text is landed on top of each other in Firefox. Safari, Opera and Chrome are fine. Explorer, naturally, I can’t find out. Can anybody explain what is happening? The page: http://www.sensual-photos.com/ordering.html
I’m grateful for any suggestions. Thanks.


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

On 11 Dec 2009, at 09:32, Jon wrote:

Text is landed on top of each other in Firefox. Safari, Opera and Chrome are fine. Explorer, naturally, I can’t find out. Can anybody explain what is happening? The page: http://www.sensual-photos.com/ordering.html
I’m grateful for any suggestions. Thanks.

If I try to load this in Safari, Safari quits instantly!

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/


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

Works fine for me in Safari, Firefox, Opera, Camino. In fact, I can only see that the lower curve of the cap S in Sensual disappears. What text is ‘landing on top of’ other text?

Neil
PS. Like the photos by the way.


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

Works fine for me (no text overlapping) in Safari 4.0.4, Firefox 3.5.5, Opera 10.10 and Chrome Beta (Snow Leopard).

Nathan Garner
Creative Director

Austin Wells Design Limited
One Elmgate Drive - Littledown - Bournemouth BH7 7EF
t 01202 301271 e email@hidden w http://www.austinwellsdesign.co.uk

Member of NAPP

On 11 Dec 2009, at 09:54, Paul Bradforth wrote:

On 11 Dec 2009, at 09:32, Jon wrote:

Text is landed on top of each other in Firefox. Safari, Opera and Chrome are fine. Explorer, naturally, I can’t find out. Can anybody explain what is happening? The page: http://www.sensual-photos.com/ordering.html
I’m grateful for any suggestions. Thanks.

If I try to load this in Safari, Safari quits instantly!

best wishes,

Paul Bradforth

Buy my eBooks at:
Hi, it's ebOOxa


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

When I load the homepage - Safari instantly quits. Chrome loads fine.

Nathan Garner
Creative Director

Austin Wells Design Limited
One Elmgate Drive - Littledown - Bournemouth BH7 7EF
t 01202 301271 e email@hidden w http://www.austinwellsdesign.co.uk

Member of NAPP

On 11 Dec 2009, at 09:54, Paul Bradforth wrote:

On 11 Dec 2009, at 09:32, Jon wrote:

Text is landed on top of each other in Firefox. Safari, Opera and Chrome are fine. Explorer, naturally, I can’t find out. Can anybody explain what is happening? The page: http://www.sensual-photos.com/ordering.html
I’m grateful for any suggestions. Thanks.

If I try to load this in Safari, Safari quits instantly!

best wishes,

Paul Bradforth

Buy my eBooks at:
Hi, it's ebOOxa


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

Thank you all, for your comments. This is strange; Browsers quitting (!) and Firefox working fine with others. Please, any suggestions what is happening? Is there any way of embedding a screenshot on this board, so I can show what is happening from my side? Thanks, Jon


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

Yes quits on me as well!

To add a screenshot use this code:


![alt text](http://www.yoursite.com/yourscreenshot.jpg)

You will need to upload the screenshot to your site and provide the path to the file in the code above.

David


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

Your text boxes are layers and with increased/different font sizes different browser rendering - the text boxes expand and the contents overlap.

Either change the layout to allow expansion or use a box model or use a table based structure.

But I don’t know what is causing Safari to crash. Your code shows duplicate references to the favicon.ico

You could also update to the latest version of FW - you are a few behind.

David


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

You can also use a service like NetRenderer to see what your pages will look like in various versions of IE Moved

But you will only get a static version like a snapshot.

David


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

Or you can sign-up for Adobe’s BrowserLab – again a static image, but with a ‘2-up’ view you can compare. Plus it has Onion skin view which is excellent.

http://labs.adobe.com/technologies/browserlab/

Nathan Garner
Creative Director

Austin Wells Design Limited
One Elmgate Drive - Littledown - Bournemouth BH7 7EF
t 01202 301271 e email@hidden w http://www.austinwellsdesign.co.uk

Member of NAPP

On 11 Dec 2009, at 12:35, DeltaDave wrote:

You can also use a service like NetRenderer to see what your pages will look like in various versions of IE Moved

But you will only get a static version like a snapshot.

David


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

Thank you all for your input.
DeltaDave, you’re mentioning a “box model”. Would you care to elaborate a little on that? Cheers, Jon


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

The ‘Box Model’ as it is commonly referred to is the construction method whereby all elements (divs) are placed inline from each other.

The advantage of this being that changes in text/box sizes push the other elements about to accommodate this growth.

DanJ has a tutorial on this method - though I see he is going to start charging for these services - and has moved the free version.

But you can construct a page that will allow for this expansion by simply making the page in Table Layout mode.

David


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

Thank you for that, Delta Dave. An update: On all the other pages I have set Georgia as the font, but for some reason I’ve left the font on the order page to “proportional”. Some weeks ago I changed the default font in Firefox from Times
to Verdana, so this must be the reason for the mishap. It’s all my fault, on my machine. Sorry, folks. But I am still a little confused why Firefox should interpret the font as Verdana… And the Safari quitting is still a mystery and somewhat scary.


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

As a side note:

The box model series, vol 1 will be free on my site down the road. Right now I’m re-encoding them all and that’s why they aren’t there anymore. Don’t worry. Both free and paid screencasts will be found on my site, probably more free than paid.

But with about 8,733 downloads (total downloads across all videos since 12/01/09) from people benefiting from all of my FREE screencast’s, it’s hard not to try to make a little something off of them for the time I spent.

As far as this thread:

One other problem I see on the ordering page is that ‘Captcha Codes’ off near the pasteboard is still on the page in Firefox so you can scroll all the way over to the right and your site disappears. Delete that to bring the scroll-bars back.

Also, my Safari doesn’t quit when loading this up. Perhaps it’s been adjusted.


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

Please help!
My background colour is Burgundy red.
A white background, round cornered box holds the page info.
On this box I am trying to place graphic objects and html boxes (the
page information).

Strange things happen to their position and/or stripes appear
horizontally through the page.
Whenever anything overlaps I get this problem, so I need to understand
the principle of
how to overlap items to avoid this problem.

Items break apart and gaps appear across the elements…
http://www.jamesmarshallgolfacademy.co.uk/equipment.html

I’ve managed to create a white panel where all items are visible and
don’t break apart,
but then the white panel does not move when the window is resized…
http://www.jamesmarshallgolfacademy.co.uk/shop.html

If I create a table to hold the items, it moves when the window is
resized,
but I’m left with the nasty square box instead of the round cornered
box I want…
http://www.jamesmarshallgolfacademy.co.uk/shopfields.html

Thanks (desperately),
Adrian


Club Type
http://www.clubtype.co.uk
email@hidden


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

Are you working from a Master page?

It doesn’t look like you are because your different pages are set with different alignments - this is part of your problem.

I think I would construct my Master page with an HTML box with the round cornered box as a background image - sized large enough to accommodate the page with the most content.

If you reduce the width of your navigation buttons dramatically (just a bit wider than the widest text you will have in them) then you will be able to have a wider white box in the middle without spoiling your look. (Which I think is good).

You also have quite a mix of HTML and graphic text and you should decide which way you want to go - html for SEO or graphic for looks.

Because you have created the page in Table Layout mode you will get more problems (stripes appear horizontally through the page)

If in the View Menu you turn on HTML layout you will see the places that are likely to break apart.

David


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

Sometime around 11/12/09 (at 12:46 -0500) Jon said:

for some reason I’ve left the font on the order page to “proportional”.

Some weeks ago I changed the default font in Firefox from Times to Verdana

I am still a little confused why Firefox should interpret the font as Verdana

“Proportional” simply means “not mono-width”; the horizontal space
each character takes is proportional to its shape. A letter i takes
less width than a letter M, for example.

Mono-width or fixed-width fonts use the same horizontal space for all
characters. A letter i will take the same space as a letter M.

Courier is a mono-width font. Times, Helvetica, Verdana, Georgia, and
roughly 99% of all other fonts are proportional-width designs.

So - specifying “proportional” as the typeface simply tells your
browser to use whatever it wants to as long as it isn’t a mono-width
face. That’s all. Normally browsers default to Times. However, your
copy of Firefox was told to use Verdana as its default… so it did.
That’s still a valid proportional font, remember. :slight_smile:

k


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

Dan J and thatKeith: Thank you, that was a lot of useful information. Like the “proportional” stuff. I have just changed it to whatever font I wanted to use and never thought more about it. I learn something every day…


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

David,

Your solution for the background works fine now (background image with
masthead and main text box) - thanks.
BUT… when I place any boxes onto the Master page the View > HTML
shows me there are dotted lines
around the boxes, all finishing in the top left. When Previewed, the
boxes don’t move when the window is resized.
They stay put on the left of the screen. I’ve tried checking “layer”
and unchecking but that’s not working.

Again, I don’t understand why the HTML boxes/images placed on the
Master page behave like this.

Advice would be much appreciated.
Thanks,
Adrian

On 12 Dec 2009, at 16:33, DeltaDave wrote:

Are you working from a Master page?

It doesn’t look like you are because your different pages are set
with different alignments - this is part of your problem.

I think I would construct my Master page with an HTML box with the
round cornered box as a background image - sized large enough to
accommodate the page with the most content.

If you reduce the width of your navigation buttons dramatically
(just a bit wider than the widest text you will have in them) then
you will be able to have a wider white box in the middle without
spoiling your look. (Which I think is good).

You also have quite a mix of HTML and graphic text and you should
decide which way you want to go - html for SEO or graphic for looks.

Because you have created the page in Table Layout mode you will get
more problems (stripes appear horizontally through the page)

If in the View Menu you turn on HTML layout you will see the places
that are likely to break apart.

David


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

Background image successfully added to Master page.
Now trying to add items that move when the window is resized.
I have uploaded a basic example of the problem…
http://www.clubtype.co.uk/jmtemp

Nothing I do works. It’s driving me insane!!!
Adrian


Club Type
http://www.clubtype.co.uk
email@hidden


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