Vertical-align, how to? 1

[1DMF]

i've added a vertical-align:middle on a div's CSS, only the image inside the div is still aligned top.

why is this...

    <div id="titlecell" style="width: 620px;" align="center">
        <img src="/images/hlp-ppp.jpg" alt="HLP Insurance Providers" />
         <br />Please select a provider you wish to use.
        <h1 onmouseover="window.status='Please choose a menu option'">&nbsp; HLP Pure Protection Partners</h1>
        <div class="boxl" style="height:65px;"><img src="/images/comm.gif" border="0" title="Logon to Commitments" alt="" /></div>
        <div class="boxr" style="height:65px;"><img src="/images/lifequote.gif" border="0" width="195" height="60" title="LifeQuote Online" alt="" /></div>
        <div class="boxl" style="height:65px;"><img src="/images/sp.gif" border="0" title="Select & Protect Information" alt="" /></div>
        <div class="boxr" style="height:65px;"><img src="/images/payshield.jpg" border="0" title="Payment Shield Information" alt="" /></div>
    </div>

CSS...

#titlecell
    {
    font-family: Arial, Verdana;
    font-size: 12pt;
    color: #000000;
    background-image: url('/images/tablebar.jpg');
    background-repeat: no-repeat;
    text-decoration: none;
    padding-bottom: 25px;
    background-position: bottom;
    }
        
#titlecell h1
    {
    font-family: Arial, Verdana;
    font-size: 15pt;
    color: #ffffff;
    background-image: url('/images/tablebar.jpg');
    vertical-align: middle;
    background-repeat: no-repeat;
    text-decoration: none;
    font-weight:normal;
    text-align:left;
    }
 
#titlecell div
    {
    margin: 2px;
    padding: 5px;
    width: 292px; 
    border-width: 1px;
    border-style: solid;
    border-color: #233e97;
    text-align: center;
    vertical-align: middle;
    color:#000000;
    }
    
div.boxl {
   float:left;
   vertical-align: middle;
}

div.boxr {
   float:right;
   vertical-align: middle;
}

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

vertical-align is not a valid attribute for divs

try giving this page a read:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[ca8msm]

Also, cory pointed out to you in thread215-1166264 that it would work well for images but not so much for text.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[1DMF]

why is this such an issue, it seems crazy css is meant to replace tables yet that don't have something as simple as the valign attribute.

oh well i'll just have to keep playing with it.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

That page also has a bunch of links at the bottom that might also offer more info for you.

(And I agree with you, horizontal alignment shouldn't be so difficult)

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

lol - don't you mean vertical ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

That too.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

well i've tried the nested div's which apart from being ugly as sin didn't work for me, also because of the psuedo class it puts borders around the nested div's which isn't wanted, so I'd have to re-write everything including the nice CSS you gave me which I'm not touching because it is working fine on the other pages.

I've also tried the height/width/left/right 50%,25% thing, that did nothing either.

As you pointed out what cory had said, this is an image and vertical-align:middle isn't working.

I've trawlled the internet and found a zillion people asking the same question and no-one having the answer.

So i'm beat, I happy to concede defeat and move, it really isn't worth the time or hastle, let's just hope CSS3 rectifies this global problem.

Regards,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

If you know the size of all the images you could just give your divs the appropriate padding for top and bottom, but that isn't a dynamic solution....

However, if it's not a dynamic situation then it doesn't really matter.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

that's a posibilty I guess.

I've been doing some serious investigating into this and it would seem , it's a know problem and the biggest bug bear people have with CSS, not only for the transition from Tables to CSS being duifficuly, but the main used browser I.E. not being CSS2 compliant. thus vertical-align not working.

I found a few interesting links...

http://www.webforumz.com/html-forum/3671-help-with-valign-middle-but-still.htm

http://www.siteexperts.com/forums/viewConverse.asp?d_id=15305&start=1

http://www.ozoneasylum.com/10934

all the same issue and generally the same answer - you cannot valign with CSS properly.

there is still the argument why does TABLE = EVIL (all users must die!), the fact off the matter is <table> is actually more cross browser compatible than any other method.

there are a few sites in those posts who have managed it, but wow all thos wrapper divs and CSS hacks (I.E. baby sitting) - i'm not sure it's worth the hastle.

if I remove all nested table and used only where absolutely necessary until CSS & Browsers work correctly, that is a fair and honest compromise.

getting validated and cleaner code is a very big step in the right direction and, will put me in good stead for when CSS is a real contender for total page control.

Alas those days are not here quite yet, just like 'flash' had to wait for broadband before it could shine!

as always thanks for all the help.

I'll let you know how i get on with the padding.

1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ca8msm]

the fact off the matter is <table> is actually more cross browser compatible than any other method.

When used properly (i.e. for tabular data) then yes it is but when used for page layout it's quite simply illogical.

If you are displaying tabular data, then go for it...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[rockyroad]

Hello.

I have been reading this thread, and I have looked around all over the place but I still can't seem to ascertain if there really is an answer to this problem.

Consider the following code:

.box { 
background-color: #FF0000;
float:left; 
width: 500px; 
min-height:220px; height:auto !important; */ height:220px;
margin:0;
padding:0; 
text-align:center; 
vertical-align:bottom; 
line-height: 10px;  
position:relative;
overflow:hidden; 
} 

.inner { 
/*height: 25px;*/
 min-height:25px; height:auto !important; height: 25px; 
width:100%; 
margin: 0; 
padding: 0;
position:absolute;
background-color: #FFFF00; 
bottom:0; 
overflow:hidden;
}

and the HTML

<div class="box">
 what about text in here?
 
 <div class="inner">test</div>
 
</div>

Now in Firefox, this looks vertically positioned just about correctly at the bottom...although if I increase text size the text spills over the inner DIV and overflow:hidden doesn't seem to correct in this case. But not the big problem.

The bigger problem is what the heck IE is doing to this code.

Can anyone please help? I love, I mean really really love .CSS and theory of seperation of content & presentation, and making pages accessible, but this whole vertically positioning nested divs is literally stressing me to the point of it adversely afffecting my health :-0

Does anyone know the answer???

Thanks, RR

 

[1DMF]

well for my problem I took Kaht's easy way out, I resized all the images to the same size, had to include some transparancy/whitespace in a couple so it didn't stretch the image all funny.

But with the images all the same size and having a margin:2px; on the div pseudo class they all line up very nicely indeed.

Not sure there is an easy or simple solution to this vertical-align issue, maybe IE.7 will have the answers.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.