7 Replies Latest reply on Jun 11, 2014 10:19 AM by Nancy OShea

    Item visually appears "like" <hr> tag, unwanted, how to remove?

    SatGraphics Art Level 1

      To the Dreamweaver Forum,

       

      I posted, earlier today, a question to the PVII forum, as I use their products. The reply was not only not answered in a helpful way, but in a manner in which I found offensive.

       

      I will post the question, and their answer, and eagerly await this forum response.

       

      ——————Begin Post—————————

       

      MacPro
      DW CS6
      PMM3
      IGM2

      Find/delete unwanted <hr> tag - Or, identify what/where it originated.

      Originally had <hr> tags as separators between each nav section, here:
      http://0343be5.netsolhost.com/MickeyHarrisArt/pages/artGalleries.html

      After synchronization of local to remote server, I noticed an “apparent” <hr> at the top of each gallery page, as follows: http://0343be5.netsolhost.com/MickeyHarrisArt/pages/auto_truck.html

      Performed search and delete of all <hr> tags in site, (which I had only inserted on the Gallery navigation sitemap page) and yet on viewing the actual galleries, I continue to see this tag, or what appears to be a horizontal row separator, at the very top of each page, and it should not be there; especially as I did not physically insert on initial build of any individual gallery page, as follows:
      http://0343be5.netsolhost.com/MickeyHarrisArt/Galleries/auto_gallery/American_Pride/americ an_pride.html

      I’ve combed through the code, examined the template page, and can’t figure out what it is. And I’ve no memory of what could have created it without my having written it in. I do not see an empty div with color, and might not be able to “see the forest for the trees” here.

      Appreciate any help…

      ———End Original Query—————

      ————Answered as Follows——————

      Why oh why do our customers use open source code? Your entire page is inside a clearfix element. I'm not sure why you list PMM3 and IGM2 as this issue is not related to our products. I assume you are using Adobe's Fluid Grids? If so, do yourself a very large favor in the future and don't use them :-)

      —————End PVII Reply———————

      Now... Just how, as an Adobe CS Suite user, primarily an image specialist NOT A CODER by trade, but versed enough to enable working within the structure provided by the product, supposed to approach the project of which the links to test pages are provided in the initial query?

      Thanks in Advance...

        • 1. Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
          Jon Fritz II Adobe Community Professional & MVP

          It's not an <hr> tag at all, it's your .gridcontainer collapsing due to floating your content within it. You can either remove all floats from the content within your .gridcontainer, or add the following css to your .gridcontainer class...

           

          overflow:hidden;

           

          Monkeying around with your fluid grid css can cause unexpected results, so make sure you don't modify anything else.

          1 person found this helpful
          • 2. Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
            SatGraphics Art Level 1

            Thank you sir.

             

            Your response is exactly what I look for when in need of direction; short, concise, and professional.

            • 3. Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
              Nancy OShea Adobe Community Professional & MVP

              Al Sparber (from PVII) has publicly expressed deep dissatisfaction with the FluidGrid Layouts in DW many times in this forum.  So it's no surprise that you received the reply you did.  It's not personal.  It's just his opinion that nobody should use FGLayouts. 

               

              From personal experience with FGLayouts, you need to understand the underlying HTML & CSS media queries.  If you don't, you'll get into trouble in a hurry.  As Jon said, don't tamper with the temperamental FGLayout.css or boilerplate.css files.  Use a separate, external style sheet for all your content styes.

               

              My advice is to use the built-in boilerplate.css clearfix class on your floated divs.  This will prevent the margin-collapse that you're experiencing.

               

               

              Nancy O.

              • 4. Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
                SatGraphics Art Level 1

                Thank you Nancy.

                     As always, my interaction with this forum invariably leads to satisfactory conclusions. And, as I expressed in a private communication with PVII, I do not take it personal. However, I do reserve the right to respond outside the forum environment, whenever possible, at those few times I feel someone has overstepped the bounds of civil personal discourse, and express my displeasure at such times. If I am wrong, I can easily be ignored. If right, one might themselves modify their future interactions with their paying customer base.


                     As to your advice, in addition to Jon Fritz helpful answer, your informing me that the clear fix could be used on other floated divs, simple though it is, is something of which I was unaware. I will put that in my toolbox and use it.


                Thank You

                • 5. Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
                  Nancy OShea Adobe Community Professional & MVP

                  Just to clarify, the clearfix class should be applied to your .gridContainer like this.

                   

                  <div class="gridContainer clearfix">


                  In addition, you can use clearfix class on any floats that will require clearing at the end of them.  An example would be the last <div> before your <footer>.

                   

                  If you need further help with using clearfix, please provide a link to your test page and we can provide you with more specifics.

                   

                   

                  Nancy O.

                  • 6. Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
                    SatGraphics Art Level 1

                    Thanks for the offer to review test site, located at:

                     

                    Base Template-> http://0343be5.netsolhost.com/MickeyHarrisArt/Templates/mainTemplate.dwt

                     

                    Home Page->   http://0343be5.netsolhost.com/MickeyHarrisArt/index.html

                     

                    Gallery SiteMap-> http://0343be5.netsolhost.com/MickeyHarrisArt/pages/artGalleries.html

                     

                    Auto Art SiteMap-> http://0343be5.netsolhost.com/MickeyHarrisArt/pages/auto_truck.html

                     

                    1 of ?? Galleries-> http://0343be5.netsolhost.com/MickeyHarrisArt/Galleries/auto_gallery/American_Pride/americ an_pride.html

                     

                    This is the basic structure of which I will follow throughout the entire exhibition.

                     

                    After reviewing your previous suggestion, I took a look at the boilerplate, and something had been changed. I didn’t bother trying to figure out exactly what, but set a new site definition, created a new boilerplate, copied and pasted into my test site, and voila… all worked as I had previously desired. (This might well be a clumsy approach, but did so more on intuition than certainty.)

                     

                    Note: Although I do know enough to avoid consciously poking around in boilerplate, I did use Modify/Page Properties to change link color set. Possible I may have made a mistake on late night mission.

                     

                    On w3c validation of no errors, no warnings, a voice said to me STOP NOW. I didn’t have to use the overflow:hidden or <div class="gridContainer clearfix"> (though you may well suggest otherwise) but on checking the css, I see I chose to use as follows:

                     

                    #divRow1

                    I used clear:both on this div ID. This I used on multiple divs on the Gallery SiteMap page, and I think your suggestion to use overflow: hidden on last div would (might) apply here. But I didn’t see anything unsettling as to appearance as is, but I would certainly like your guidance at this point.

                     

                    #lftColumn I used clear :both (floated left, but this div ID currently unused)

                    #rtColumn I used clear: right (floated right, but this div ID currently unused)

                     

                    Your general observations at to any bulk in the code, or any other obvious mistakes would of course be greatly appreciated. This is my first foray into responsive site, and I have found the forums help to be an invaluable asset. Tables and cells all seem so… distant and far, far in the past now.

                     

                    Thank You, and all the other participating members, for the selfless giving of your time and expertise.

                     

                    Joe Satterwhite

                    • 7. Re: Re: Item visually appears "like" <hr> tag, unwanted, how to remove?
                      Nancy OShea Adobe Community Professional & MVP

                      This is obsolete code.  Links should be defined in your CSS, not your HTML.

                      <body link="#3CF" vlink="#369" alink="#933">


                      Change it to this:

                      <body>


                      I think the amazing airbrushed car would look better centered on screen.  Change your desktop CSS to this:


                      #content {

                          clear: both;

                          float:left;

                          margin: 0 auto;

                          width: 80%;

                          display: block;

                      }

                       

                      Otherwise, looking good!

                       

                       

                      Nancy O.