Zoom and text box overlap - Page 5 -...

Jan 5th, 2011 at 01:49 PM
User 103173 Photo

Scott Swedorski
VP of Software Development
0 posts

This is just something you are going to have to work through by cleaning things up. Also, these changes will have no major impact on the zoom issue. What this will fix is any overlapping issues of text boxes and having your pages look identical in all browsers using relatively reasonable display font sizes in your browser.

If you really want your page to look perfect when zooming +200% you will simply need to switch from VSD to an HTML Editor and start coding in CSS. There is absolutely no fix, tweak or adjustment that can be or will be made to VSD to correct that.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Jan 5th, 2011 at 03:07 PM
User 373928 Photo

Raputtak
Registered User
141 posts

I uninstalled Build 11 and re-installed Build 8, re-published the raputtak site. The problem went away on my XP machine. It zooms correctly without weird breaks to all zoom levels, and no overlaps.

It is still there on the Vista machine. Weird breaks at all zoom levels. And the overlaps.

Funnily enough, on my Droid phone, there are no overlaps, just a few (not all) of the weird breaks.


Does sound like it is operating system related.

I guess I'll wait until another build comes out...

...OK. Time to go play my bass.
I have an inferiority complex - but it is not a very good one.
Feb 28th, 2011 at 05:21 PM
User 2120786 Photo

Robert Ryals
Registered User
26 posts

Having the same zoom issues. At 100%, the site looks great. At 125%, some of the text boxes start to wrap and cover the text below it. I am assuming that I need to leave some space at the end of the boxes and lines to give it room to expand? Note that all the text was typed into the boxes, with no hard returns. The site is Foodserviceradio.net.

Thanks.
Feb 28th, 2011 at 05:44 PM
User 2120786 Photo

Robert Ryals
Registered User
26 posts

OK, read back earlier in the posts and will try it with more width and slightly smaller fonts.
Thanks.
Mar 20th, 2011 at 02:58 PM
User 2180659 Photo

Christi Farmer
Registered User
5 posts

Not sure if this is the ultimate issue in this case, but I'm having a very similar issue and I think I've narrowed my problem down to a object style width issue as opposed to a line <br> issue.

I have a text box on a page that is absolutely not overlapping anything. It is a single line with no return at the end.

The object properties in VSD show the text box as a width of 380 (I made it wider than actual text). The actual text within the box is 330 px in width, i.e. if I make the box 329 px in width, the last word gets returned to the next line. When the website is coded and I view the source code, the reference under object style lists the text object as 325px which results in the last word being returned to the line below.
div.Object15768 { position:absolute; top:376px; left:524px; z-index:22; text-align:left; width:325px; }

If I select the text box, select "allow advanced text", shadow the exact same text, and recode, I get the correct text because the enhanced text is encoded as a jpg file.

I have tried deleting the text box, resizing the text, changing the font, widening the text box, moving the text box on the page, and NOTHING keeps the last word from being moved a line below.

Here's the kicker. If I add an additional 2,3,4,5 words to the end on the line, the last word is still showing up on the line below, but ONLY the last word.

So, In summary:
If no preference for color, we will choose what looks best
becomes
If no preference for color, we will choose what looks
best

and
If no preference for color, we will choose what looks best test test test
becomes
If no preference for color, we will choose what looks best test test
test

I'm not a HTML guru by any means, but that doesn't seem to be a <br> issue since the break is not static and only affects the last word.
Mar 20th, 2011 at 05:02 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Christi, Can you post a link to the page so we can look at it?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 28th, 2011 at 09:27 PM
User 2180659 Photo

Christi Farmer
Registered User
5 posts

www.theclassypolkadot.com

The formatting issue is not present on our home Win 7 desktop, but is present on 3 friend's Macs and also on our iphones.

Attached are JPGs that show the home page on my Win Vista laptop and our friends Mac.


Here is the source code taken from a friend's mac this :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="keywords" content="Custom,Embroidery,Personalized,Gifts,Polka,Poka,Classy,Mugs,polkadot,wedding gift,teacher,personal">
<meta name="description" content="Custom Embroidery Items That Make Great Gifts">
<meta name="generator" content="CoffeeCup Visual Site Designer, Version 7.0 Build 18 for Windows">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="generator" content="CoffeeCup Visual Site Designer (www.coffeecup.com)">
<meta name="created" content="Sun, 20 Mar 2011 13:57:54 GMT">


<title> The Classy Polka Dot </title>

<style type="text/css">

/* TEXT STYLES */

.textstyle0 {font-family:Arial;font-weight:normal;font-style:normal;font-size:8pt;text-decoration:none;color:#888888;}
.textstyle1 {font-family:Arial;font-weight:normal;font-style:normal;font-size:14pt;text-decoration:none;color:#000000;}
.textstyle2 {font-family:Arial Baltic;font-weight:normal;font-style:normal;font-size:24pt;text-decoration:none;color:#000000;}
.textstyle3 {font-family:Arial Baltic;font-weight:normal;font-style:normal;font-size:14pt;text-decoration:none;color:#000000;}


/* OBJECT STYLES */

div.Object18981 { position:absolute; top:296px; left:38px; z-index:0; }
div.Object18982 { position:absolute; top:971px; left:35px; z-index:1; }
div.Object18983 { position:absolute; top:0px; left:0px; z-index:2; }
div.Object18984 { position:absolute; top:965px; left:35px; z-index:3; }
div.Object18985 { position:absolute; top:69px; left:378px; z-index:4; }
div.Object18986 { position:absolute; top:976px; left:886px; z-index:5; text-align:center; width:30px; }
div.Object18987 { position:absolute; top:977px; left:353px; z-index:6; text-align:left; width:246px; }
div.Object18988 { position:absolute; top:69px; left:663px; z-index:7; }
div.Object18989 { position:absolute; top:976px; left:733px; z-index:8; text-align:center; width:28px; }
div.Object18990 { position:absolute; top:69px; left:805px; z-index:9; }
div.Object18991 { position:absolute; top:976px; left:836px; z-index:10; text-align:center; width:34px; }
div.Object18992 { position:absolute; top:69px; left:520px; z-index:11; }
div.Object18993 { position:absolute; top:976px; left:777px; z-index:12; text-align:center; width:44px; }
div.Object18994 { position:absolute; top:42px; left:37px; z-index:13; }
div.Object18995 { position:absolute; top:976px; left:777px; z-index:14; text-align:center; width:44px; }
div.Object18996 { position:absolute; top:116px; left:0px; z-index:15; }
div.Object18997 { position:absolute; top:547px; left:492px; z-index:16; text-align:left; width:150px; }
div.Object18998 { position:absolute; top:578px; left:67px; z-index:17; text-align:center; width:327px; }
div.Object18999 { position:absolute; top:221px; left:239px; z-index:18; text-align:center; width:480px; }
div.Object19000 { position:absolute; top:292px; left:468px; z-index:19; text-align:left; width:452px; }



/* BODY STYLES */

body {
margin:0px;
padding :0px;
text-align:center;
height:100%;
width:100%;
background-color: #000000;
}


/* LINK STYLES */

A:link { color:#990000; text-decoration:none; }

A:visited { color:#990000; text-decoration:none; }

A:active { color:#990000; text-decoration:none; }

A:hover { color:#888888; text-decoration:none; }




/* IMAGE STYLES */

img { border:0 none}



/* CONTAINER RULES */

#container { position:relative; margin:0px auto 0 auto; height:1000px; width:960px; text-align:left; padding-left:0px;}

</style>
</head>

<body>
<div id="container">
<div id="background" style="position:relative; top:0px; left:0px; z-index:0;">
<table style= "height:1000px; background-color:#ffffff;" width="960px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<br>
</td>
</tr>
</table>
</div>

<div class="Object18981"><img src="files/Box.jpg" alt="" width="387px" height="258px"></div>

<div class="Object18982"><img src="files/IMG_1.jpg" alt="" width="885px" height="2px"></div>

<div class="Object18983"><img src="files/IMG_2.jpg" alt="" width="960px" height="80px"></div>

<div class="Object18984"><img src="files/IMG_3.jpg" alt="" width="885px" height="2px"></div>

<div class="Object18985"><a href="Products.html" onMouseOver='img_mo0.src="files/mo_IMG_4.jpg"' onMouseOut='img_mo0.src="files/IMG_4.jpg"'><img src="files/IMG_4.jpg" name="img_mo0" alt="" width="123px" height="43px"></a></div>

<div class="Object18986"><span class="textstyle0"><a href="About.html">About<br>
</a></span></div>

<div class="Object18987"><span class="textstyle0">2011 The Classy Polka Dot, Inc. All rights reserved.<br>
</span></div>

<div class="Object18988"><a href="Gallery.html" onMouseOver='img_mo1.src="files/mo_IMG_5.jpg"' onMouseOut='img_mo1.src="files/IMG_5.jpg"'><img src="files/IMG_5.jpg" name="img_mo1" alt="" width="123px" height="43px"></a></div>

<div class="Object18989"><span class="textstyle0"><a href="index.html">Home<br>
</a></span></div>

<div class="Object18990"><a href="About.html" onMouseOver='img_mo2.src="files/mo_IMG_6.jpg"' onMouseOut='img_mo2.src="files/IMG_6.jpg"'><img src="files/IMG_6.jpg" name="img_mo2" alt="" width="123px" height="43px"></a></div>

<div class="Object18991"><span class="textstyle0"><a href="Design.html">Design<br>
</a></span></div>

<div class="Object18992"><a href="Design.html" onMouseOver='img_mo3.src="files/mo_IMG_7.jpg"' onMouseOut='img_mo3.src="files/IMG_7.jpg"'><img src="files/IMG_7.jpg" name="img_mo3" alt="" width="123px" height="43px"></a></div>

<div class="Object18993"><span class="textstyle0">Products<br>
</span></div>

<div class="Object18994"><img src="files/TCPD_Logo_Black-RGB.png" alt="" width="243px" height="57px"></div>

<div class="Object18995"><span class="textstyle0"><a href="Products.html">Products<br>
</a></span></div>

<div class="Object18996"><img src="files/Ribbon.jpg" alt="" width="960px" height="78px"></div>

<div class="Object18997"><span class="textstyle1">&bull; babies<br>
&bull; teachers<br>
&bull; friends<br>
&bull; kids<br>
&bull; wedding parties <br>
&bull; and more<br>
</span></div>

<div class="Object18998"><img src="files/IMG_10.jpg" alt="" width="333px" height="13px"></div>

<div class="Object18999"><span class="textstyle2">Welcome to The Classy Polka Dot<br>
</span></div>

<div class="Object19000"><span class="textstyle3">The Classy Polka Dot creates custom, personalized
gift items designed to make people smile.<br>
<br>
Every person is unique and special and we hope to
capture this in our line of gifts. <br>
<br>
Customers choose many aspects of the design to
create a one-of-a-kind gift reflecting the personality of
the recipient. <br>
<br>
Items make great gifts for: <br>
</span></div>
</div>

</body>
</html>
Mar 28th, 2011 at 09:29 PM
User 2180659 Photo

Christi Farmer
Registered User
5 posts

I had trouble attaching the files to the previous post.
Here is the Windows Vista appearance of the home page.
Attachments:
Mar 28th, 2011 at 09:30 PM
User 2180659 Photo

Christi Farmer
Registered User
5 posts

Here is the appearance of the home page on a macbook pro.
Attachments:
Mar 28th, 2011 at 09:38 PM
User 103173 Photo

Scott Swedorski
VP of Software Development
0 posts

Christi Farmer wrote:
Here is the appearance of the home page on a macbook pro.

Please see this discussion over here at http://www.coffeecup.com/forums/designe … something/
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.