1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Containing an inline image element with another inline element.

Discussion in 'CSS' started by soulscratch, Oct 4, 2007.

  1. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #21
    ...............
    SEMrush
     
    soulscratch, Oct 4, 2007 IP
    SEMrush
  2. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #22
    margin auto applied to the floated element? That is supposed to center the floated element.
     
    Arnold9000, Oct 4, 2007 IP
  3. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #23
    Naaaa, nevermind. Wow, I've just witnessed an example where tables are far superior and easier than css. Never thought I would see it. Css has actually screwed you on this one. It's ashame because tables can easily handle this. Wow.
     
    Arnold9000, Oct 4, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #24
    Uh. Margin:0 auto doesn't horizontally center floats.
     
    soulscratch, Oct 4, 2007 IP
  5. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #25
    uh, it horizontally centers the element, not the float. Anyway, I've had enough of your condescending remarks. Go learn javascript and ajax which will return the width of the image dynamically and let you dynamically write the width of the div, okay?
     
    Arnold9000, Oct 4, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #26
    Which isn't what you said. You said it would horizontally center a float.

    P.S. - I do know Javascript and XHR, but why the hell would I need XHR (or as you call it AJAX) to do this? You would only need to find the width on DOM/page load .. you wouldn't need to use XMLHttpRequest. I wouldn't want to resort to Javascript anyway.

    I suggest next time you go to the page itself to see what I tried, instead of telling me stuff I already know.

    Regardless, I still appreciate your help.
     
    soulscratch, Oct 4, 2007 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #27
    ajax would be useful but maybe not necessary Waiting until after it loads to make adjustments would appear awkward. But you could embed the javascript right into the code so that it executes while the page is loading rather than after it loads. And sorry I blew up a little at you. I had a tough day yesterday with things other than this forum. If none of these are acceptable, and it appears that nothing but pure xhtml/css is acceptable, then it appears to me where this is a rare instance where tables are actually superior to css, and css has screwed you.It's a shame because obviously this problem is a snap in tables. When I was first learning css, I was surprised that I had to hard code the width to prevent the div from taking up the entire width of the page. Tables don't do this. I have no idea why they didn't provide the same flexibility for divs as tables have.
     
    Arnold9000, Oct 5, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #28
    Nah. There has to be a way.. deathshadow's method works perfectly except only in FF unless theres width/height attributes set on the image and when those are set the image appears instead of looking like a tiny sized block.. but even then when you click and drag on the image the height increases..
     
    soulscratch, Oct 5, 2007 IP
  9. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #29
    Found a partial solution to deathshadow's method and quirk in Firefox... when you set an explicit width/height attribute AND kill the outline on the anchor. That seems to fix it for Firefox which probably incorrectly calculates the height/width of the image when mixed with padding and margin (MY HEAD HURTS!) but it screws up on the rest of the browsers..

    I may have found another solution, which is display:table and margin:0 auto (on the anchor containing the image) found below:
    http://brunildo.org/test/#cen
    http://brunildo.org/test/shrink_img3.html

    Did find a way to get it to work with an extra container (ripped from brunildo).. STILL trying to get it to work with just 2 inline elements..
    http://205.209.146.77/image2/
     
    soulscratch, Oct 5, 2007 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,399
    Likes Received:
    1,875
    Best Answers:
    245
    Trophy Points:
    515
    #30
    The part people are missing is your terminology (or more specifically lack of) getting in the way... Let me reword this:

    1) cannot change the HTML

    2) image size CANNOT be predicted ahead of time

    3) there must be three borders total, an inner 1px white one, an outer 2px red one, and between those 1px black

    4) the anchor must fit the HEIGHT of any size image while at the same time being centered - that's what he means by 'must fit the image'. By default an anchor is inline, and inlines wrapping an image go to line-height instead of contstraining an image inside them.

    The big issue is the combination of centered, constrained to the image in both dimensions. Inline drops to line-height instead of image height, while the problems with block and float are obvious when it comes to centering.

    My solution was to make the anchor display:inline-block; (and include the two -moz versions) which works as always in everything EXCEPT firefux. Or more appropriately it works on a REFRESH in FF and once it works it's fine - until you close FF and re-open it. It only bombs on the first page load.

    The answer, feed gecko display:table and RoW display:inline-block; - I'd feed display:table to RoW and send inline-block to just IE, but Opera seems to have a rendering quirk on display:table...

    So:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Test</title>
    
    <style type="text/css">
    *	{
    	margin:0;
    	padding:0;
    }
    
    body {
    	margin:5em;
    	font:normal 76%/140% arial,helvetica,sans-serif;
    }
    
    .package { 
    	width:500px; 
    	overflow:hidden; 
    	margin:0 auto 1em;
    }
    
    .package-item { 
    	width:150px;  
    	float:left;
    	text-align:center;
    	position:relative;
    }
    
    .package-item a {
    	display:inline-block;
    	border:2px solid red; /* CANNOT REMOVE THIS BORDER! */
    }
    
    html:not([lang*=""]) .package-item a { 
    	/* 
    		fix GECKO - if sent to all, screws up Opera. Since Gecko is
    		only engine that NEEDS this, send to it only. Told you folks
    		I was hacking more for FF than IE these days.
    	*/
    	display:table;
    	margin:0 auto;
    }
    			
    .package-item img {
    	vertical-align:top;
    	border:1px solid black; /* CANNOT REMOVE THIS BORDER EITHER! */
    	background:#FFF;
    	padding:1px; /* FAKING A BORDER */
    }
    			
    .package-description { 
    	width:350px; 
    	float:left; 
    }
    
    </style>
    
    </head><body>
    
    <div class="package">
    	<div class="package-item">
    		<a href="#"><img src="images/package1.jpg" alt=""/></a>
    		<p>image caption.</p>
    	</div>
    	<div class="package-description">
    		<p>
    			Quis nostrud exercitation excepteur sint occaecat ut labore et dolore 
    			magna aliqua. Ullamco laboris nisi sunt in culpa mollit anim id est 
    			laborum. Velit esse cillum dolore ut enim ad minim veniam, excepteur
    			sint occaecat. Sed do eiusmod tempor incididunt qui officia deserunt
    			cupidatat non proident.
    		</p>
    	</div>
    </div>
    
    <div class="package">
    	<div class="package-item">
    		<a href="#"><img src="images/package2.jpg" alt="" /></a>
    		<p>image caption.</p>
    	</div>
    	<div class="package-description">
    		<p>
    			Quis nostrud exercitation excepteur sint occaecat ut labore et dolore
    			magna aliqua. Ullamco laboris nisi sunt in culpa mollit anim id est 
    			laborum. Velit esse cillum dolore ut enim ad minim veniam, excepteur
    			sint occaecat. Sed do eiusmod tempor incididunt qui officia deserunt
    			cupidatat non proident.
    		</p>
    	</div>
    </div>
    
    </body></html>
    
    Code (markup):
    Is what seems to work in this case. Another case of hacking for Gecko's shortcomings, not everybody else's - something I've been doing more and more. Probably ANOTHER reason people chant 'code for FF, hack for IE' like a bunch of retards - because if people started coding to all browser engines simultaneously the missing parts of the specifications, inconsistancies and outright incorrect handling of code by gecko (and therin FF) would be plain as day.
     
    deathshadow, Oct 5, 2007 IP
  11. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #31
    Well then i misunderstood. Here's the suggestion

    "get rid of the border on the anchor, and set the image to:
    background:#000; padding:1px; border:2px solid red;"

    This gives the appearance of an outside border and a colored padding space from a colored background which acts as a second border, but I thought you wanted a border around the image too? So I counted three borders. One around the image, one around the outer containing box, and space between the two, which would look like a third border or a separating space. That's what I was trying to do for you. Did you only want two borders with no space between them?

    Aaah, nevermind. i might be best to just leave this one alone. good luck.
     
    Arnold9000, Oct 5, 2007 IP
  12. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #32
    Great solution to a very obscure problem !!! You always da man !!! Do you know why they didn't make divs automatically stretch to the minimum width of their content like tables do and instead decided to default them to take up the entire width of the page? Just thought you might know the reason behind this apparent rigid shortcoming of the standards since you know css so well. I'm a little in awe to actually see a situation where tables are clearly more flexible and superior.
     
    Arnold9000, Oct 5, 2007 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,399
    Likes Received:
    1,875
    Best Answers:
    245
    Trophy Points:
    515
    #33
    Because for block level elements that is USUALLY the more desirable behavior... see all other block level/display:block elements.

    I just wish they gave us a flag to shrink block elements without floating them.... oh wait, they did, it's called display:inline-block - too bad mozilla is STILL dragging their heels on making it work properly in gecko.

    Tables are often superior for layouts in a number of circumstances. You have to ask yourself:

    Is the non table version more code than a table would be? It happens a LOT.

    Do I need dynamic height content centered vertically? CSS STILL can't pull that one off. (well, you can fake it in everything but IE with display:table-cell)

    Are faux columns going to be more headaches or hassles?

    You have to remember a lot of the arguements against tables don't hold water...

    "It's not tabular data" - does it have columns? SOUNDS like tabular data to me. Dictionary.com unabridged .9, American Heritage .11, etc, etc.

    "It's not semantic" - tables are to divide data into columns and/or rows, sounds semantic to me.

    "It takes more render time" - table-layout:fixed nixes most of that concern, as does declaring the size of your images, styling the table in CSS, and if it's less code I guarantee it will load faster.

    "It confuses search engines and can't be SEO" - search engines could give a **** if content is in a table or not, and as to SEO you can do it rather handily if you know how.
    http://battletech.hopto.org/for_others/3coltable_SEO/template.html

    It's a matter of the right tool for the right job - and throwing away a tool that works perfectly cross-browser back to 1995 because some people started making up bullshit excuses not to use it... That's just wrong.

    DIV based layouts have a LOT of advantages in a number of cases, but they are NOT the cure-all some people try to shoe-horn them into being. One look at the nightmarish CSS and source code some people use for them - sometimes exceeding 2-3k for something five lines of HTML and 10 lines of CSS could... well, that's just special.

    In the same way some olympics are special.
     
    deathshadow, Oct 5, 2007 IP
  14. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #34
    Thank you for a very thorough response. As far as any block level elements, I would rather have to explicitly tell it's width or explicitly set it to 100% as in the case of a table if I need it, rather than it defaulting to that. I think block level elements should only be as wide as they need to be to house their content, and if one needs it to be wider, then let them explicitly say so. Seems like in this one instance, they got it backwards and went away from the "push out" paradigm that I used to love when I was a tables layout guy. I always created my spacing from my inner most element in nested elements. Divs seems to be "pull in" or "push down". When i first started css, I remember thinking "do you mean I have to specify the width of a div??" It went against the general theories I knew at the time and was kind of anti flow control which is extremely important for dynamic database content (I do back end programming as well). I suspected certain limitations to this paradigm from the beginning, but fortunately have not run into them until this obscure situation. I knew it was a matter of time as soon as I saw that paradigm.
     
    Arnold9000, Oct 5, 2007 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #35
    Well then deathshadow, I do have some good news for you. Too bad for Linux users though since they won't get to see it with their "it must be free as in freedom" mentality (I'm sorry, but if it's going to be free, it better be free - AS IN BEER - since freedome comes with responsibility, which many among the open source community seem to forget about with their chanting and mantra of "free as in freedom" - you want your freedom you can have it as long as you pay for it). Firefox 3 will support inline-block.
     
    Dan Schulz, Oct 5, 2007 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,399
    Likes Received:
    1,875
    Best Answers:
    245
    Trophy Points:
    515
    #36
    Believe it when I see it - and from the Beta's I'm not seeing it. Yes, the property is there - but no, it's still buggy as hell on sizing elements inside it.
     
    deathshadow, Oct 5, 2007 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #37
    Rephrase that:
    "Too bad for Stallmanites though since they won't get to see it with their "it must be free as is freedom" mentality..."

    Plenty of us use Linux for the Beer alone. Though I don't see why something can't be Beer and Speech. Speech might give Opera a Dutch page ??? But I don't bitch too loudly because I'm not a programmer and couldn't fix Beer or Speech anyways. So long as I don't pay for it, the Beer can be a little flat and maybe even have a mouse body at the bottom of the bottle.
     
    Stomme poes, Oct 8, 2007 IP