-
1. Re: Why looks bigger than the div?
Jon Fritz II Jul 9, 2013 8:45 AM (in response to GESYMSB)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 Jul 9, 2013 9:24 AM (in response to Jon Fritz II)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, looksbigger, 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 Jul 9, 2013 9:28 AM (in response to GESYMSB)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 Jul 9, 2013 9:46 AM (in response to Jon Fritz II)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.#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 Jul 9, 2013 9:47 AM (in response to GESYMSB)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 Jul 9, 2013 9:48 AM (in response to Jon Fritz II)I just added the code take a look again to previous post
-
7. Re: Why looks bigger than the div?
Jon Fritz II Jul 9, 2013 10:00 AM (in response to GESYMSB)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 Jul 9, 2013 10:14 AM (in response to Jon Fritz II)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. Jul 9, 2013 10:39 AM (in response to GESYMSB)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. Jul 9, 2013 10:43 AM (in response to Nancy O.)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 Jul 9, 2013 10:46 AM (in response to Nancy O.)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 Jul 9, 2013 10:47 AM (in response to Nancy O.)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 Jul 9, 2013 10:50 AM (in response to GESYMSB)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 Jul 9, 2013 10:54 AM (in response to GESYMSB)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 Jul 9, 2013 11:07 AM (in response to Jon Fritz II)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. Jul 9, 2013 11:09 AM (in response to GESYMSB)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 Jul 9, 2013 11:16 AM (in response to Nancy O.)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 Jul 9, 2013 11:18 AM (in response to GESYMSB)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 Jul 9, 2013 11:21 AM (in response to GESYMSB)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.
-
-
21. Re: Why looks bigger than the div?
GESYMSB Jul 9, 2013 11:28 AM (in response to Jon Fritz II)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 Jul 9, 2013 11:33 AM (in response to GESYMSB)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?
-
-
24. Re: Why looks bigger than the div?
Nancy O. Jul 9, 2013 11:39 AM (in response to GESYMSB)Right.
Nancy O.
-
25. Re: Why looks bigger than the div?
GESYMSB Jul 9, 2013 11:40 AM (in response to Jon Fritz II)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 Jul 9, 2013 11:42 AM (in response to GESYMSB)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 Jul 9, 2013 11:49 AM (in response to Jon Fritz II)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. Jul 9, 2013 11:57 AM (in response to GESYMSB)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 Jul 9, 2013 12:00 PM (in response to Nancy O.)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. Jul 9, 2013 12:16 PM (in response to GESYMSB)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 Jul 9, 2013 12:18 PM (in response to Nancy O.)So go back to tables & cells
-
32. Re: Why looks bigger than the div?
Nancy O. Jul 9, 2013 1:16 PM (in response to GESYMSB)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 Jul 9, 2013 3:55 PM (in response to Nancy O.)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 Jul 9, 2013 5:01 PM (in response to Nancy O.)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
Using Table ------------------- Using Div
-
35. Re: Why looks bigger than the div?
mytaxsite.co.uk Jul 9, 2013 7:18 PM (in response to GESYMSB)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 Jul 10, 2013 4:57 AM (in response to mytaxsite.co.uk)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 Jul 10, 2013 8:36 AM (in response to GESYMSB)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_ Jul 10, 2013 9:09 AM (in response to GESYMSB)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 Jul 10, 2013 9:26 AM (in response to GESYMSB)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
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.








