Page 2 of 2 First 12
  • Jump to page:
    #16
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    72
    Rep Power
    11
    DaWei_M: I might not have made myself clear, since I have tweaked the example a few times while working on this. in my browser, the top of the image is lined up with the location in the text where I placed the SPAN. I have moved them to random locations (away from the beginning of paragraps) to test whether it works or not. However, if what you are seeing is a genuine error, I'd be interested. I'll see if I can tweak the example to make it clearer.

    Glide: I agree with your first point, but this would be a choice for the end-user. Re: the caption issue you mention, that is not quite the problem. If I omit the width declaration, the caption wraps one word to a line. Not sure why that is.

    Your alternative layout is fine, but I am simply not too fond of it. I like a constant line length, and no odd text block shapes.

    Of course, having figured that out, on trying to use it in a CMS based on a MS proprietary CONTENTEDITABLE DIV, everything has gone horribly wrong. Probably best for me to start a new thread on that, since it is a different problem entirely.

    Thanks for all the responses,

    Tom
    Last edited by tomchadwin; February 25th, 2004 at 05:43 AM.
  2. #17
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    56
    Rep Power
    11
    Originally Posted by tomchadwin
    Glide: I agree with your first point, but this would be a choice for the end-user. Re: the caption issue you mention, that is not quite the problem. If I omit the width declaration, the caption wraps one word to a line. Not sure why that is.

    Your alternative layout is fine, but I am simply not too fond of it. I like a constant line length, and no odd text block shapes.
    Those pesky end-users, eh? Life would be much simpler without them

    The reason you get the quirky behaviour when you omit the width is twofold as far as I can see. (http://www.w3.org/TR/CSS2/visudet.html)

    First. You have the span absolutely positioned inside an element that has been 'positioned' itself (relative). The edges of the containing box for the absolutely positioned element are supposed to be derived from the ancestor. You've overwritten the top and left values, but it's still picking up the bottom and right edges from the edges of either those <p>'s or the line box of the text depending on which CSS regards as the ancestor (i'm not sure which). Either way the right edge is now actually on the other side of the left edge, i presume containing boxes can't have negative widths so it's set to zero. So your img and text now wrap immediately.
    If you take the 'position: relative;' off the <p>'s this should correct this, as the absolutely positioned element now establishes its edges from the next ancestor which is positioned anything other than 'static', or the root element, in this case the <body> i think.

    Second. If you do remove the 'position: relative', IE being IE doesn't seem to behave how the CSS specs would suggest and goes its own way. Mozilla based browsers seem to work well though. To get around this IE awkwardness it seems you have to set a width on the .imageCol after all.

    So now you have the problem of what width to set it at. If you know all the images are going to be a certain size that's easy. However, if you have end users I guess you'll need a more generic solution. Personally, i'd set it at a width as wide as I could comfortably fit in my expected page width. You then get the problem of the caption text appearing to the right of the image. To get around this i'd make all images inside the .imageCol spans into block level elements which will automatically force the text below it. Image captions should now wrap nicely before the page's edge at whatever width you set, while images will ignore the width and be as big as they need to be... provided you don't set the overflow property to hidden on the spans of course.

    So the styles i'd end up with in your example page is...
    Code:
    		.main {
    			width: 30em;
    			margin-top: 0em;
    			margin-bottom: 1em;
    		}
    
    		.imageCol {
    			position: absolute;
    			left: 32em;
    			width: 200px;
    		}
    		.imageCol img {
    			display: block;
    		}
Page 2 of 2 First 12
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo