This is why I hate using DIVS/CSS over tables...

GravyMonster

GravyMonster

GravyMonster

Soldato
Joined
18 Oct 2002
Posts
16,030
Location
The land of milk & beans
Simple problem, i have a DIV of X by Y, in this div should be an image of A by B which should be aligned centrally horizontally and vertically which also has a link on it.

It'll align horizontally, but not vertically... I've found the reason why (line heights and textual rendering shenanegans) but not found any workaround that work.

here's the code...

Please excuse the bit of a mess the CSS is in, I've been googling the problem and found a hack that didnt work.
Code: 
			DIV#thumb_container {
				width: 135px;
				height: 137px;
				border: 1px dotted #999999;
				text-align: center;
				vertical-align: middle;
				line-height: 135px;
			}
			
			/* IE HACK */
			DIV#thumb_container > A IMG {vertical-align: middle;}
			
			DIV#thumb_container IMG {
				border: 1px solid #999999;
			}

  <div id="thumb_container">
    <a href="asset.asp?a=1"><img src="../assets/thumbs/tn.gif" border="0"></a>
  </div>
Any help appreciated before i scrap the lot and redo it with tables in about half the time this has taken.
 
It's things like this that put me off using CSS for layout, and I was previously a web developer for many years. Tables are far quicker and much more reliable in most situations, despite what the W3C says.

To answer your question, something like this will work but it's not perfect.

Code: 
<html>
    <head>
        <style>
            div.container { height:100%; width:100%; text-align: center; }	            
            div.centre { width:100px; height:100px; position:relative; top:50%; margin-top:-60px; margin-left: auto;margin-right: auto; border:1px solid black; }         
        </style>
    </head>
    <body>
      <div class="container">
          <div class="centre">
            <a href="asset.asp?a=1"><img src="../assets/thumbs/tn.gif" border="0"></a>
          </div>
      </div>
    </body>
</html>
 
Last edited:
I had the same problem a couple days ago. I ended up sticking a table in there because I couldn't get any CSS I tried to work, might have a look at this later though.
 
Tables are far quicker and much more reliable in most situations, despite what the W3C says
Click to expand...

This is largely down to the historical cr*pfest of poor browser support, not a failing of CSS itself. Once IE6 disappears things will be far far better.

If it wasn't for SEO reasons, i'm not sure quite how many would push the use of CSS...
Click to expand...
Scalability? Semantics? Cleaner markup? Bandwidth savings?
 
I beleive css is better once you get the hang of it. I love external style sheets and there is no <tr>'s and <td>'s everywhere.
 
LazyManc said:
This is largely down to the historical cr*pfest of poor browser support, not a failing of CSS itself. Once IE6 disappears things will be far far better.


Scalability? Semantics? Cleaner markup? Bandwidth savings?
Click to expand...
I couldn't agree more, but CSS has been pushed as a superior technology for a number of years now, despite being (until recently, and still is in some respects) inadequate in areas and also introduces a hole host of browser compatibility issues.
 
Browser compatability issues - i.e. MS doing the usual thing of playing ignorant to the rest of the world.

here is an example of how I align images within divs, and use graceful fallbacks. If I used tables, and someone tries to view this page with a mobile or similar device, well, they wouldn't be able to. Tables have more cross platform issues than css driven layout. The same goes for IMG tags.

http://www.pinesoft.co.uk/clients

CSS fallback gracefully, tables do anything but.
 
You must log in or register to reply here.
Back
Top Bottom