8 Replies Latest reply on Feb 23, 2015 12:21 PM by noaho29675868

    How to fix text that appears vertical on website

    noaho29675868

      I am not very familiar with Dreamweaver so bear with me. I am trying to update our website to the new year. After I finished everything and put the site on our server, the text appears vertically in the browser. Below is a picture of what the text looks like. Any ideas how to fix that? Thanks

      Screen Shot 2015-02-23 at 10.47.36 AM.png

        • 1. Re: How to fix text that appears vertical on website
          MurraySummers Level 8

          Most likely the solution his that the container for that text is so narrow that it is forcing line breaks at short intervals. To know for sure what the problem is and how to solve it, we would need to see the page and its underlying code. The best way to do this is to post a link to the live page. Failing that you would need to paste the code (all of it) in a reply here on the web forum (email won't work).

          • 2. Re: How to fix text that appears vertical on website
            noaho29675868 Level 1

            The link to the live site is www.saloncruises.com

             

            Here is the code from Dreamweaver:

             

            <!DOCTYPE html>

            <html class="html" lang="en-US">

            <head>

             

             

              <script type="text/javascript">

               if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musemenu.js", "jquery.musepolyfill.bgsize.js", "index.css"], "outOfDate":[]};

            </script>

             

              <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>

              <meta name="generator" content="2014.2.1.284"/>

              <link rel="shortcut icon" href="images/favicon.ico?4134301328"/>

              <title>Home</title>

              <!-- CSS -->

              <link rel="stylesheet" type="text/css" href="css/site_global.css?48316683"/>

              <link rel="stylesheet" type="text/css" href="css/master_a-master.css?263817178"/>

              <link rel="stylesheet" type="text/css" href="css/index.css?4260919613" id="pagesheet"/>

              <!-- Other scripts -->

              <script type="text/javascript">

               document.documentElement.className += ' js';

            var __adobewebfontsappname__ = "muse";

            </script>

              <!-- JS includes -->

              <script type="text/javascript">

               document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/bebas-neue:n4:all;abel:n4:all.js" type="text/javascript">\x3C/script>');

            </script>

              <!--[if lt IE 9]>

              <script src="scripts/html5shiv.js?4241844378" type="text/javascript"></script>

              <![endif]-->

               </head>

            <script>

              (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

              })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

             

             

              ga('create', 'UA-59978523-1', 'auto');

              ga('send', 'pageview');

             

             

            </script> <body>

             

             

              <div class="rgba-background clearfix" id="page"><!-- column -->

               <div class="clip_frame colelem" id="u11760"><!-- image -->

                <img class="block" id="u11760_img" src="images/WEBSITE BANNER.png" alt="" width="960" height="179"/>

               </div>

               <nav class="MenuBar clearfix colelem" id="menuu5808"><!-- horizontal box -->

                <div class="MenuItemContainer clearfix grpelem" id="u5809"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix colelem" id="u5810" href="index.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5811-4"><!-- content --><p>Home</p></div></a>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5837"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5838" href="gallery.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5841-4"><!-- content --><p>Gallery</p></div><div class="grpelem" id="u5840"><!-- image --></div></a>

                 <div class="SubMenu  MenuLevel1 clearfix" id="u5842"><!-- vertical box -->

                  <ul class="SubMenuView clearfix colelem" id="u5843"><!-- vertical box -->

                   <li class="MenuItemContainer clearfix colelem" id="u13586"><!-- horizontal box --><a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u13587" href="gallery-2013.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u13589-4"><!-- content --><p>Gallery 2013</p></div></a></li>

                  </ul>

                 </div>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5816"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5819" href="speakers.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5822-4"><!-- content --><p>Speakers</p></div></a>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5823"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5824" href="the-ship.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5827-4"><!-- content --><p>The Ship</p></div></a>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u11545"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u11548" href="itinerary.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u11551-4"><!-- content --><p>Itinerary</p></div></a>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5875"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5878" href="pricing.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5880-4"><!-- content --><p>Pricing</p></div><div class="grpelem" id="u5881"><!-- image --></div></a>

                 <div class="SubMenu  MenuLevel1 clearfix" id="u5876"><!-- vertical box -->

                  <ul class="SubMenuView clearfix colelem" id="u5877"><!-- vertical box -->

                   <li class="MenuItemContainer clearfix colelem" id="u12621"><!-- horizontal box --><a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u12622" href="pricing---availability.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u12624-4"><!-- content --><p>Pricing &amp; Availability</p></div></a></li>

                   <li class="MenuItemContainer clearfix colelem" id="u6008"><!-- horizontal box --><a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u6009" href="travel-protection.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u6011-4"><!-- content --><p>Travel Protection</p></div></a></li>

                  </ul>

                 </div>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5889"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5892" href="air-travel.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5893-4"><!-- content --><p>Air Travel</p></div></a>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5903"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5904" href="contact.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5905-4"><!-- content --><p>Contact</p></div></a>

                </div>

                <div class="MenuItemContainer clearfix grpelem" id="u5910"><!-- vertical box -->

                 <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u5913" href="faqs.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u5915-4"><!-- content --><p>FAQs</p></div><div class="grpelem" id="u5916"><!-- image --></div></a>

                 <div class="SubMenu  MenuLevel1 clearfix" id="u5911"><!-- vertical box -->

                  <ul class="SubMenuView clearfix colelem" id="u5912"><!-- vertical box -->

                   <li class="MenuItemContainer clearfix colelem" id="u12669"><!-- horizontal box --><a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u12670" href="frequently-asked-questions.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u12672-4"><!-- content --><p>Frequently Asked Questions</p></div></a></li>

                   <li class="MenuItemContainer clearfix colelem" id="u6020"><!-- horizontal box --><a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u6021" href="passport-requirements.html"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u6023-4"><!-- content --><p>Passport Requirements</p></div></a></li>

                  </ul>

                 </div>

                </div>

               </nav>

               <div class="clearfix colelem" id="ppu6223-6"><!-- group -->

                <div class="clearfix grpelem" id="pu6223-6"><!-- column -->

                 <img class="colelem" id="u6223-6" alt="WELCOME CRUISERS

            SALON OWNERS, STYLISTS" width="334" height="75" src="images/u6223-6.png"/><!-- rasterized frame -->

                 <div class="clearfix colelem" id="u2709-26"><!-- content -->

                  

                   <p>Say good-bye to traditional beauty industry education and hello to the adventure of a lifetime. Join salon owners, booth renters and stylists from around the country to learn from the industrys very best. Add four fabulous ports, world-class shows, extraordinary dining plus sun, fun and more fun. </p>

                   <p>We couldnt be more pleased to offer professionals the opportunity to join us for this one-of-a-kind gateaway, the ultimate in combing business and pleasure. As we prepare for our 16th annual sailing, we look forward to seeing you. </p>

                   <p>All the best, </p>

                   <p>Supernatural Salon Cruise Team</p>

            <p> </p>

            </div>

                 <img class="colelem" id="u6224-6" alt="COME JOIN US" width="334" height="45" src="images/u6224-6.png"/><!-- rasterized frame -->

                 <div class="clearfix colelem" id="u6222-8"><!-- content -->

                  <p>Join us for seven days of incredible luxury on Princess</p>

                  <p>Cruise line’s Regal Princess February 7-14, 2016. The glamorous ports include Princess Cays in the Bahamas, Grand Cayman, Costa Maya and Island of Cozumel. </p>

                  <p> </p>

                 </div>

                </div>

                <div class="clearfix grpelem" id="pu14990"><!-- column -->

                 <div class="clip_frame colelem" id="u14990"><!-- image -->

                  <img class="block" id="u14990_img" src="images/rp_the_sea_walk_int_lg.jpg" alt="" width="359" height="220"/>

                 </div>

                 <div class="clip_frame colelem" id="u14995"><!-- image -->

                  <img class="block" id="u14995_img" src="images/rp_the_sanctuary_lg.jpg" alt="" width="359" height="220"/>

                 </div>

                 <div class="clip_frame colelem" id="u15000"><!-- image -->

                  <img class="block" id="u15000_img" src="images/1545200_771267639554129_2042298719_n.jpg" alt="" width="359" height="220"/>

                 </div>

                </div>

               </div>

               <div class="clearfix colelem" id="pu10291"><!-- group -->

                <a class="nonblock nontext museBGSize grpelem" id="u10291" href="http://www.saloncruises.com/disckit.htm" target="_blank"><!-- simple frame --></a>

                <a class="nonblock nontext museBGSize grpelem" id="u14956" href="assets/FULL%20CRUISE%20BROCHURE%202016.pdf" target="_blank"><!-- simple frame --></a>

                <a class="nonblock nontext museBGSize grpelem" id="u10293" href="https://bookcruisesdirect.com/ssc16" target="_blank"><!-- simple frame --></a>

               </div>

               <div class="clip_frame colelem" id="u6232"><!-- image -->

                <img class="block" id="u6232_img" src="images/Cruise 2016 Logo.png" alt="" width="248" height="90"/>

               </div>

               <div class="clearfix colelem" id="u1339-8"><!-- content -->

                 <p><span id="u1339">           Copyright © 2015 Supernatural Salon Cruises.</span> <span id="u1339-5">All Rights Reserved.</span></p>

               </div>

              </div>

              <div class="preload_images">

               <img class="preload" src="images/info%20button%20flat-hover.png" alt=""/>

               <img class="preload" src="images/brochure%20button%20flat-hover.png" alt=""/>

               <img class="preload" src="images/application button flat-hover.png" alt=""/>

              </div>

              <!-- JS includes -->

              <script type="text/javascript">

               if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');

            </script>

              <script type="text/javascript">

               window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');

            </script>

              <script src="scripts/museutils.js?3777594392" type="text/javascript"></script>

              <script src="scripts/jquery.musemenu.js?415733523" type="text/javascript"></script>

              <script src="scripts/jquery.musepolyfill.bgsize.js?4259541792" type="text/javascript"></script>

              <!-- Other scripts -->

              <script type="text/javascript">

               $(document).ready(function() { try {

            (function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt( a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1 ]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');

            for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),k=g&&g[1]?g[1]:null,g=g&&g[2]? g[2]:null;switch(g.toLowerCase()){case "css":k=k.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(k);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splic e(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClas s(k);break;case "js":k.match(/^jquery-[\d\.]+/gi)&&

            typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();if(Muse.assets.outOfDate.length||Muse.assets.required.length)c="Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.",(d=location&&location.search&&location.search.match&&location.search.match(/muse _debug/gi))&&Muse.assets.outOfDate.length&&(c+="\nOut of date: "+Muse.assets.outOfDate.join(",")),d&&Muse.assets.required.length&&(c+="\nMissing: "+Muse.assets.required.join(",")),alert(c)})()})();

            /* body */

            Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */

            Muse.Utils.prepHyperlinks(false);/* body */

            Muse.Utils.initWidget('.MenuBar', function(elem) { return $(elem).museMenu(); });/* unifiedNavBar */

            Muse.Utils.showWidgetsWhenReady();/* body */

            Muse.Utils.transformMarkupToFixBrowserProblems();/* body */

            } catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});

            </script>

               </body>

            </html>

            • 3. Re: How to fix text that appears vertical on website
              Nancy OShea Adobe Community Professional & MVP

              This was built with Muse 

               

              OK.  Add this to the bottom of index.css file.

               

              p {

              width: 450px;

              border: 1px solid green ;/** for demo purposes only, you can remove this border**/

              }

               

               

               

              Nancy O.

              • 4. Re: How to fix text that appears vertical on website
                MurraySummers Level 8

                Add this to your CSS -

                 

                div#u2709-26 {

                     width:400px

                }

                 

                See if that helps. By the way, I get this alert when browsing to your site -

                 

                SafariScreenSnapz046.jpg

                 

                That's probably related to this -

                 

                [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (info button flat-hover.png, line 0)

                [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (application button flat-hover.png, line 0)

                [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (brochure button flat-hover.png, line 0)

                 

                although I have never seen Safari throw a message like that merely for a missing image or two.

                • 5. Re: How to fix text that appears vertical on website
                  Ken Binney Adobe Community Professional & MVP

                  My solution would be to change the width at line 335 in index.css from 0.01px as it is now

                  to 400px as shown here:

                   

                  #pu6223-6 {

                   

                   

                      margin-right: -10000px;

                   

                      margin-top: 2px;

                      padding-bottom: 0;

                      position: relative;

                      width: 400px;

                  }

                  1 person found this helpful
                  • 6. Re: How to fix text that appears vertical on website
                    MurraySummers Level 8

                    My solution would be to never try to edit Muse HTML with DW!

                    • 7. Re: How to fix text that appears vertical on website
                      Nancy OShea Adobe Community Professional & MVP

                      My solution would be to never try to edit Muse HTML with DW!

                      Ditto.  The code is horrible.

                       

                       

                      N

                      • 8. Re: How to fix text that appears vertical on website
                        noaho29675868 Level 1

                        I never knew the code was built in Muse but thanks to all the help!