XHTML/CSS question

unremarkableunremarkable
Posted:
in Genius Bar edited January 2014
<div style="margin:0px;width:507px;height:10px;">

<img src="topbordland.png" alt="" width="507" height="10" />

</div>

<div style="margin:0px;width:507px;height:362px;">

<img src="pioneer2.jpg" alt="" width="507" height="362" />

</div>

<div style="margin:0px;width:507px;height:10px;">

<img src="bottbordland.png" alt="" width="507" height="10" />

</div>



That code looks like it's supposed to in IE--no margins between images--but in Safari there's a 4 pixel gap between the first and the second, and an 8 pixel gap between the second and the third. Why?

Comments

  • Reply 1 of 9
    ghost_user_nameghost_user_name Posts: 22,667member
    No gap here.



    You sure you don't have something somewhere else in your code? Another style-sheet throwing it off, perhaps?
  • Reply 2 of 9
    unremarkableunremarkable Posts: 220member
    Here:



    http://www.eccentrick.co.uk/test.html



    The 3 images are stretched, but you can see the problem--top and bottom images are not where they're meant to be (I put a 1px border around the DIVs containing each IMG so it's clearer).



    Oddly, making the images smaller fixes it.
  • Reply 3 of 9
    unremarkableunremarkable Posts: 220member
    Anyone?
  • Reply 4 of 9
    karl kuehnkarl kuehn Posts: 756member
    There seems to be a a bug in webcore (both the Panther and Jaguar versions) that has a problem with positioning images that are scaled down to less than 14 pixels tall, when the document has a proper doc-type for xhtml (looks correct to me, but I didn't verify).



    It seems that the layout engine thinks that the smallest scaled image can be 14pixels, and builds the image from the bottom up.



    For the mean time... my reluctant advice is to either re-do the images so that they are the correct size, or kill off the doc-type declaration. I would reccomend that you file the bug with Apple... I will send it in to the OmniGroup (who also exhibits the bug) so that they can add it to their regression tests.
  • Reply 5 of 9
    karl kuehnkarl kuehn Posts: 756member
    One more addition... with a xhtml transitional doctype this also goes away...
  • Reply 6 of 9
    ghost_user_nameghost_user_name Posts: 22,667member
    Quote:

    Originally posted by Karl Kuehn

    One more addition... with a xhtml transitional doctype this also goes away...



    Ah, okay. When I tested the snippet of code above, I had pasted it into a file with XHTML 1.0 transitional doctype. That's why it worked fine for me. I see now that under this page with 1.1, it doesn't.



    This looks like a simple bug in WebCore.



    Safari -> Report bugs to Apple...



    That's the only advice I can give other than switching doctypes.
  • Reply 7 of 9
    unremarkableunremarkable Posts: 220member
    Quote:

    either re-do the images so that they are the correct size



    If I use images the correct size, the behaviour still occurs.



    Bug report sent, cheers!
  • Reply 8 of 9
    karl kuehnkarl kuehn Posts: 756member
    Actually.. Someone just pointed out that this is the correct behavior (well.. mostly). The problem we are looking at is that images are implicitly inline objects in xhtml. This means that it is part of a piece of text and has "ascendent" and "decedent" space (space for the top of t's and the bottom of p's). WebCore seems to want to put the image as baselined, and so it is acting according to spec.



    The solution is to CSS the images into "display: block". This will correct the problem.





    Edit I forgot to include the link

    http://devedge.netscape.com/viewsource/2002/img-table/
  • Reply 9 of 9
    unremarkableunremarkable Posts: 220member
    Well!



    Thank you!



    I always thought images were block.







    Can also specify the DIVs' line-height to be 0px; prefer this solution.



    Thanks again!
Sign In or Register to comment.