1 2 Previous Next 44 Replies Latest reply: Jul 11, 2013 2:44 PM by GESYMSB RSS

    Why looks bigger than the div?

    GESYMSB Community Member

      Hello folks, I got a little problem here, I got div boxes one on the left and one on the right, they are both exactly

      the same the only differents is the location. On the left, text and a picture with phone number, on

      the right just a picture, why does the picture on the right looks bigger than the div box? I even try display:block; tag

      but still looks the same.   ( Using IE-10 )

      problem.jpg

        • 1. Re: Why looks bigger than the div?
          Jon Fritz II CommunityMVP

          There are a number of reasons that can happen. Chances are your font is simply displaying slightly smaller in IE than in DW and your actual <div> tags are the same height (if you set one in the css). It's also possible your image is larger than your div height and it is overflowing out of the container.

           

          Hard to say without seeing the actual page.

           

          Could you post a link?

          • 2. Re: Why looks bigger than the div?
            GESYMSB Community Member

            There are no fonts on the right box, nothing wrong with the leftone, shows as it shold be, the right box contains ONLY a picture
            on DREAMWEAVER everything shows PERFECT, when I test the page on IE, then as you can see on that pict above, looks

            bigger, on dreamweaver the phone picture on the left match the bottom of the picture on the right.

            BTW the picture is SMALLER than the div box.

            • 3. Re: Why looks bigger than the div?
              Jon Fritz II CommunityMVP

              Like I mentioned, it's hard to say without seeing a link to the page, without access to the code, it's all guesswork.

               

              Do you have somewhere you could upload it to and post a link for it here?

              • 4. Re: Why looks bigger than the div?
                GESYMSB Community Member

                I do NOT have that page on my server, I working on it on my computer, but take a lot a this picture
                I could copy and paste here any part of the code that you wish, this is the view on Dreamweaver
                compare to the view above on Internet Explorere.

                problem.jpg

                 

                #LEFTBOX {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 10pt;
                font-weight: bold;
                color: #FFF;
                margin: 0px;
                padding: 0px;
                height: 650px;
                width: 546px;
                border-top-width: 0px;
                border-right-width: 0px;
                border-bottom-width: 0px;
                border-left-width: 0px;
                border-top-style: 0;
                border-right-style: 0;
                border-bottom-style: 0;
                border-left-style: 0;
                border-top-color: #424242;
                border-right-color: #424242;
                border-bottom-color: #424242;
                border-left-color: #424242;
                position: absolute;
                top: 62px;
                left: 0px;
                }

                <div id="RGHTBOX"><img src="GEITEMS/GEMPIC2.jpg" width="428" height="648" align="top" /></div>

                • 5. Re: Why looks bigger than the div?
                  Jon Fritz II CommunityMVP

                  The picture really doesn't help that much, but to me, it appears as though your web text in the left cell is displaying slightly differently, especially the spacing, in IE, which can be cause by a few different things.

                   

                  Keep in mind, Design View is not 100% accurate. Even Live View is only showing you an approximation of the display in a Webkit browser. The only way to truly see what your page will look like in each browser, is to preview them in each browser.

                   

                  If you are not currently using line-spacing in your css, it may be a good thing to add to minimize the difference between browsers.

                  • 6. Re: Why looks bigger than the div?
                    GESYMSB Community Member

                    I just added the code take a look again to previous post

                    • 7. Re: Why looks bigger than the div?
                      Jon Fritz II CommunityMVP

                      I see a few problems, your border-styles are invalid. You have them set as "0" when they should be set to "none". The use of absolute positioning is going to make you rip your hair out continuously.

                       

                      APDIvs (<div> tags using position:absolute), thankfully, were removed from the most recent version of DW to help new web designers move away from an extremely flawed layout method. I would redo the layout and stay away from any positioning being used, use margins, floats and padding instead.

                       

                      It still looks to me like the spacing is differing between the Design View and IE. Adding a line-spacing attribute and value may help, but it could also be caused by the default padding/margin of your <p> tags if you haven't overridden them in your css.

                       

                      If you could please put your page into a test folder and upload it to your server, we could be of more help. Code snippets and pictures really aren't the best way to debug a display problem.

                       

                      Speaking of debugging, you should also run the validators to catch problems in your html and css...

                       

                      CSS: http://jigsaw.w3.org/css-validator/

                      HTML: http://validator.w3.org/

                       

                      Code errors can cause a lot of display problems.

                      • 8. Re: Why looks bigger than the div?
                        GESYMSB Community Member

                        I just put the project on my server: http://www.getechserv.com/tester/

                         

                        I just change the Os to none, still the same.

                         

                        BTW: You mean dreamweaver is using wrong code?  ( Not Correct )

                        • 9. Re: Why looks bigger than the div?
                          Nancy O. CommunityMVP

                          Replace the CSS code you have now with this:

                           

                          body {

                          font-family: Arial, Helvetica, sans-serif;

                          padding: 0;

                          width: 1000px;

                          margin:0 auto;  /**with width, this is centered**/

                          background-color: #424242;

                          color:#FFF;

                          font-size: 14px;

                          font-weight: bold;

                          }

                           

                          #LEFTBOX {

                          margin: 75px 0;

                          float:left;

                          padding: 0 1%;

                          width: 47%;

                          border-right: 1px dotted #999

                          }

                           

                          #RGHTBOX {

                          margin: 75px 0;

                          float:left;

                          padding: 0 1%;

                          width: 47%;

                          }

                           

                           

                           

                          Nancy O.

                          • 10. Re: Why looks bigger than the div?
                            Nancy O. CommunityMVP

                            Font-sizes in pt are only used in Print. 

                            For better appearance on screen use font-sizes in px.

                             

                            Height is determined by content; not explicit values.  Never use height on containers that hold text as this will limit how much content they can hold.

                             

                            APDivs are pure poison in primary layouts.  Learn to use floats & margins to align elements.  In the long run, you'll have fewer problems.

                             

                             

                            Nancy O.

                            • 11. Re: Why looks bigger than the div?
                              GESYMSB Community Member

                              Your code does not match the way I want the page, whatever the case I just changed the code according to

                              W3C CSS Validation Service and everything looks exactly the same, the big picture at the right looks

                              bigger thant the div box as picture above on this posts, but ALWAYS SHOWS OK on dreamweaver.

                              • 12. Re: Why looks bigger than the div?
                                GESYMSB Community Member

                                I just read your new post, the point if that no matter what, both div boxes are the same size

                                and on IE the right one looks bigger

                                • 13. Re: Why looks bigger than the div?
                                  Jon Fritz II CommunityMVP

                                  GESYMSB wrote:

                                   

                                  BTW: You mean dreamweaver is using wrong code?  ( Not Correct )

                                   

                                  Not exactly. The brilliant marketing minds at Macromedia/Adobe used APDivs as a gimmick to sell DW to print designers as the perfect way to get the exact look between browsers. In practice, APDivs are just not the correct way to do things in a world where the final product varies by the viewer looking at it. A simple increase in the font size of a browser generally destroys an APDiv layout and wide variations in screen sizes makes it extremely difficult to make a website respond appropriately for very small or very large screens when using APDivs.

                                  • 14. Re: Why looks bigger than the div?
                                    Jon Fritz II CommunityMVP

                                    The image is not bigger. The image is unchanged. IE is displaying your font slightly smaller than DW displays it and that is causing the text block to be shorter than the image.

                                    • 15. Re: Why looks bigger than the div?
                                      GESYMSB Community Member

                                      Tha makes sense, but if you specify a size and NOT auto for a div box, dont they should stay the specify size?

                                       

                                      Then should I stay the old way......... Tables  & Cells

                                      • 16. Re: Why looks bigger than the div?
                                        Nancy O. CommunityMVP

                                        I think you're splitting hairs here.  I just checked your page in FF22, IE9, IE8 and IE7 at normal Zoom level (100%).  I don't see any big differences.  However, if I increase text size, the LEFTBOX become longer which is expected.  There's nothing you can do about people's browser settings.

                                         

                                         

                                        Nancy O.

                                        • 17. Re: Why looks bigger than the div?
                                          GESYMSB Community Member

                                          I just change the size of the font on Dreamweaver and the div did not change the size or anything, no matter what

                                          IN DREAMWEAVER the divs shows the same size, but when tested on IE, the right box with the big pict shows bigger.

                                          Take a futher step and remove the right div box, tell dreamweaver to position the big picture like it was before.

                                          When tested on IE again the picture seens bigger

                                          • 18. Re: Why looks bigger than the div?
                                            GESYMSB Community Member

                                            Nancy, how is that the box become longer when according to DW they both have a fix size?

                                            • 19. Re: Why looks bigger than the div?
                                              Jon Fritz II CommunityMVP

                                              GESYMSB wrote:

                                               

                                              Tha makes sense, but if you specify a size and NOT auto for a div box, dont they should stay the specify size?

                                               

                                              Then should I stay the old way......... Tables  & Cells

                                               

                                              The actual divs themselves are staying the same size, the content of the left div is what is slightly smaller in IE.

                                               

                                              If you put the text in a left cell and the image in a right cell of a table, you would get the exact same thing as you see now, a block of text that appears slightly smaller in IE than it does in a webkit browser next to an image.

                                              • 20. Re: Why looks bigger than the div?
                                                Nancy O. CommunityMVP

                                                Welcome to browser variation 101.   When I increase text size in my Firefox browser, this is how your page renders.

                                                 

                                                Gondar.jpg

                                                 

                                                Everyone uses different browsers and preference settings. There's nothing you can do about this.  Learn to live with it.

                                                 

                                                 

                                                Nancy O.

                                                • 21. Re: Why looks bigger than the div?
                                                  GESYMSB Community Member

                                                  Then there is no solution to this problem, because if you try to fix this for IE, will look different on other browsers

                                                  • 22. Re: Why looks bigger than the div?
                                                    GESYMSB Community Member

                                                    Wait a minute, according to the picture above, when you increased the font, so did the div, but you said they stay

                                                    the same, well if they stay the same, how that picture shows a bigger left div box?

                                                    • 23. Re: Why looks bigger than the div?
                                                      Jon Fritz II CommunityMVP

                                                      The div does not change size.

                                                       

                                                      Unless you set overflow:hidden, the text simply "breaks out" of the container.

                                                       

                                                      Here is an example, I added a 1 pixel border, then increased the text size, the <div> is the same height you set, the text simply breaks out...

                                                       

                                                      broken.jpg

                                                      • 24. Re: Why looks bigger than the div?
                                                        Nancy O. CommunityMVP

                                                        Right. 

                                                         

                                                         

                                                         

                                                        Nancy O.

                                                        • 25. Re: Why looks bigger than the div?
                                                          GESYMSB Community Member

                                                          Now we talking, so that's the trick, but still I dont get why the picture on the right box shows bigger ( IE-10) than in dreamweaver
                                                          in DW everything shows perfect.

                                                          • 26. Re: Why looks bigger than the div?
                                                            Jon Fritz II CommunityMVP

                                                            GESYMSB wrote:

                                                             

                                                            ...still I dont get why the picture on the right box shows bigger ( IE-10) than in dreamweaver...

                                                             

                                                            Simple, it doesn't.

                                                             

                                                            The text is shrinking, the divs and image are staying the correct set sizes.

                                                            • 27. Re: Why looks bigger than the div?
                                                              GESYMSB Community Member

                                                              I see, so there is really no solution to this problem, I guess instead of two pararell div box, how about one on top

                                                              and want on the bottom, do that will fix somehow the problem, or are there any other options?

                                                              • 28. Re: Why looks bigger than the div?
                                                                Nancy O. CommunityMVP

                                                                Why is this such a critical concern to you?  On the web, nobody cares if one division is slightly longer than the other.

                                                                 

                                                                 

                                                                Nancy O.

                                                                • 29. Re: Why looks bigger than the div?
                                                                  GESYMSB Community Member

                                                                  Because there wold be more on the bottom of box div boxes, that's why they should match

                                                                   

                                                                  Click here: http://www.getechserv.com/

                                                                  • 30. Re: Why looks bigger than the div?
                                                                    Nancy O. CommunityMVP

                                                                    You're really painting yourself into a corner with this layout approach.  APDivs are the single worst thing you could do to yourself or your site visitors.  If you just build the page normally without positioning, content will naturally fall into place without any problems.

                                                                     

                                                                     

                                                                     

                                                                    Nancy O.

                                                                    • 31. Re: Why looks bigger than the div?
                                                                      GESYMSB Community Member

                                                                      So go back to tables & cells

                                                                      • 32. Re: Why looks bigger than the div?
                                                                        Nancy O. CommunityMVP

                                                                        So go back to tables & cells

                                                                         

                                                                        Noway!

                                                                         

                                                                        That's the 1990's way of doing things.  Use default CSS positioning which is none or static.  When you position elements with CSS you remove them from the normal document flow.  They have no relationship with any other elements on the page.  They're like rogue vessels all going in their own directions.

                                                                         

                                                                        If you build the layout with floats and margins as I suggested in post #9, you won't have any of these problems. Content will naturally fall into place without overlapping or colliding into other elements.   This is pretty basic stuff.

                                                                         

                                                                         

                                                                         

                                                                        Nancy O.

                                                                        • 33. Re: Why looks bigger than the div?
                                                                          GESYMSB Community Member

                                                                          On the old webpage, I was using a table, and the same way I saw it on dreamweaver

                                                                          the same way will show on IE, now with Div this is not the case.

                                                                          • 34. Re: Why looks bigger than the div?
                                                                            GESYMSB Community Member

                                                                            I did another test, on post 26 Jon said that the text is shrinking.

                                                                             

                                                                            I took a screenshot of both webpages side by side and compared on Photoshop.

                                                                            As you can see below, both text, the one on the table and the div box MATCH

                                                                            The text is NOT shrinking at all.

                                                                            As you can see text size is the same, text separation is the same.

                                                                            And on the Table webpage, everythingl match. ( http://www.getechserv.com/ )

                                                                            In Dreamweaver and on IE, what you see is what you get. Not the case with DIvs

                                                                            COMPA.jpg

                                                                               Using Table   -------------------  Using Div

                                                                            • 35. Re: Why looks bigger than the div?
                                                                              mytaxsite.co.uk CommunityMVP

                                                                              I have corrected your HTML syntax errors and produced this page:

                                                                               

                                                                              <http://www.mytechnet.talktalk.net/GESYMSB.html>

                                                                               

                                                                              I have not changed anything else; Nor have I tried to use "best practice" to create this simple page.  All I have done is to match your p tags and removed br tags that were placed inside the p tags.

                                                                               

                                                                              Have a look in IE10 and tell me whether it looks exactly as you expect it to be.

                                                                              • 36. Re: Why looks bigger than the div?
                                                                                GESYMSB Community Member

                                                                                I am using IE-10 and the photo above is the two web pages side by side, shift-print screen

                                                                                to capture the screen and then compare the size and spacing of the font characters & lines.

                                                                                The point still is the same, why the page at http://www.getechserv.com/ shows perfect

                                                                                in dreamweaver and IE but not the page at http://www.getechserv.com/tester/

                                                                                 

                                                                                If I take the content of "Tester" the one using divs, and put it on two cells ( table ) will

                                                                                look ok like http://www.getechserv.com/

                                                                                 

                                                                                http://www.getechserv.com/        <--------------- Using a Table

                                                                                 

                                                                                http://www.getechserv.com/tester/  <------------ Using to Div ( Left & Right Box )

                                                                                 

                                                                                Have to be something related with the picture, since everything else match between

                                                                                both pages, including text, header, whatever but the right box / cell which

                                                                                contain NOTHING MORE than a Picture.

                                                                                 

                                                                                ( The address you give me shows exactly like mine, the pict bigger than the div )

                                                                                ( Thanks for the addresses to W3C, I dint know about the one for CSS )

                                                                                 

                                                                                Well this is getting weird now, I took the content of the left div and the content of

                                                                                the right div ( the picture ) and put it on a single table with an split cell.

                                                                                Tested and guess what, it shows the picture bigger !  ( Like with the divs )

                                                                                Then how come http://www.getechserv.com/ shows perfect in dreamweaver and IE?

                                                                                • 37. Re: Why looks bigger than the div?
                                                                                  MurraySummers CommunityMVP

                                                                                  Is this like trying to nail jelly to the wall? You will never be able to perfectly match the height of a column of text with an adjacent image as far as I know. The problem is related to the slight difference in the way various browsers render text, and the much more significant difference between how your browsers are configured and how mine are.

                                                                                   

                                                                                  (sorry - I'm jumping in a bit late. If I've missed a discussion of these issues earlier I apologize for the redundant comments)

                                                                                  • 38. Re: Why looks bigger than the div?
                                                                                    osgood_ CommunityMVP

                                                                                    I'm not really understanding what it is that you're trying to achieve. If you are trying to ensure the height of both divs are equal then its an almost impossible task as browsers interpret the text slightly differently which means the height of the text divs will most likely vary across browser.

                                                                                     

                                                                                    Since the image/text is on a black background which matches the pages background color you cannot use a faux background or javascript to solve an equal height problem.

                                                                                    • 39. Re: Why looks bigger than the div?
                                                                                      Jon Fritz II CommunityMVP

                                                                                      GESYMSB wrote:

                                                                                       

                                                                                      I did another test, on post 26 Jon said that the text is shrinking.

                                                                                       

                                                                                      I took a screenshot of both webpages side by side and compared on Photoshop.

                                                                                      As you can see below, both text, the one on the table and the div box MATCH

                                                                                      The text is NOT shrinking at all.

                                                                                      As you can see text size is the same, text separation is the same.

                                                                                      And on the Table webpage, everythingl match. ( http://www.getechserv.com/ )

                                                                                      In Dreamweaver and on IE, what you see is what you get. Not the case with DIvs

                                                                                      COMPA.jpg

                                                                                         Using Table   -------------------  Using Div

                                                                                       

                                                                                      I think you're confusing yourself.

                                                                                       

                                                                                      Your original problem was with IE displaying text slightly smaller  than what DW shows, so your image above should be of 4 text blocks (not just a div vs a table in IE, which should be identical). You would need to show IE in a table vs DW in a table and  IE in a div vs DW in a div and, very likely, it will show again that IE renders your text slightly smaller in both situations.

                                                                                      1 2 Previous Next