Vertical Align, Float & Border.

[1DMF]

I have a few alignment problems i hope someone can help with.

1. I have given a div "vertical-align:middle;", but the content doesn't center?

2. W3C says float:top / bottom are not valid yet FF, I.E & Opera do not align my divs correctly without using them.

3. Why is my border not showing.

#rightside
    {
    border-width:1px; 
    border-color:#233e97;
    border-style:solid;  
    }

thanks 1DMF



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

 

[ca8msm]

There's lots of ways of vertically aligning text in CSS. As Dan said, a simple search on google will show all of these different ways (e.g.

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

I really think you need to take notice of the advice that is being given to you here though about learning the basics. You seem to have jumped in head first and rather than try to learn why things don't work you've tried to apply certain methods that you have been told but not necessarily understood.

If you go back a step, learn how to use CSS (perhaps not even in your existing project so that you don't get caught up trying to modify existing layouts) then it may mean that you don't have to post question after question and post comments such as "Sorry, but DIV v TABLE, table wins!" as all that does is point out how much you haven't understood about CSS.


____________________________________________________________

Need help finding an answer?

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

 

[1DMF]

You right Dan, please accept my apologies, "Wasted my time" is not the correct thing to say.

Ever since I woke up this morning i've had dehli belly, due to the port and cheese I had before bed, consouling myself over Steve Davis's defeat last night in the final.

It's effected my mood today and left me with a low tolerance level for problems.

I'll go googling and see what i can find.

cheers
1DMF

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

 

[1DMF]

hmm I found this while searching...

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

is this really the solution, I have to create multiple nested div's and give them the style attribute to be a table?

this seems crazy, all this extra work and then having to use a CSS2 attribute to pretend to be a table, just to not use a table.

I'm really stuggling to justify DIV vs TABLE, but i'll try the proposed solution to see if it works.

I hope this will also rectify the "Center" align problem I have.


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

 

[LFI]

1DMF -

If you have a multiple-page site and you use tables to format every page, then you want to make a change and apply the change consistently to every page, you end up having to edit every page.

If, however, you've formatted using CSS and you want to make a change, then you need merely make the change to your CSS file, and the one change is applied across all your pages.

I believe that is probably the #1 touted reason for using CSS versus tables. There are probably several other compelling arguments, however.

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[1DMF]

I know dave, I'm trying very hard to convert, I'm just finding it far more difficult and frustrating than I ever thought possible.

I've never seen something achievable so easy with a table be so hard doing it another way.

Until browsers deprecate <table> , which even if it is going to happen , won't be for a very long time, as tables are fine for displaying tabular data, I think sometimes for ease and speed of doing something tables win hands down.

and CSS can be applied to tables for changing content, borders, fonts, etc.... so having tables doesn't remove the ability to use CSS, just some CSS functionality is hard to achieve if you have a load of nested tables.

but I shall soldier on till I get there, with the help of the nice folk here on Tek-Tips.




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

 

[LFI]

1DMF -

If you've got some time, I highly encourage spending some time studying what people are doing over at

http://www.csszengarden.com/.

It really shows off the "power of CSS"!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[1DMF]

well i've tried the so called fix for this alignment thing, and yes like usual I can't get it to work.

I don't like the supossed "Hack" that has to be used for a start, and I can't get it to align anyway, so this time, I'm accepting defeat , i'm going to put a table round it and be done.

thanks for the replies but I know when i'm beat!

i did the following but it just didn't work out.

HTML

        <div id="instructions">
            <div id="tablecell">
                <div id="cell">                
                    Use the menu above to navigate your commission statements.<br><br>The menu will only show an option if a statement is available.<br><br>Your latest statement is displayed by default.
                <div>
            </div>
        </div>

CSS

#instructions
    {
    width:160px; 
    height:200px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
    text-align:center;
    font-size:10pt; 
    font-family:Arial; 
    display: table;
    _position: relative;
    overflow: hidden;
    }
    
#tablecell
    {   
    vertical-align: middle;
    display: table-cell;
    _top: 50%;
    _position: absolute;
    }
    
#cell
    {
    _position: relative; 
    _top: -50%
    }

result in IE :

http://www.homeloanpartnership.co.uk/duff1.gif

result in FF :

http://www.homeloanpartnership.co.uk/duff2.gif

as you can see the two browsers render completely different, not even the menu will center, so I'm not sure even if i did manage to get it to work in one browser, it would render correclty in all of them, which was the goal I wanted to achieve and the reason for removing the nested tables to start with, at least there won't be loads of nested tables as there was before!

For me the only way of doing this is with a table, plain and simple!

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

 

[1DMF]

yup all i needed to do was this

<div id="instructions">
        <table id="instructions" style="border:none;"><tr><td valign="middle">
                    Use the menu above to navigate your commission statements.<br><br>The menu will only show an option if a statement is available.<br><br>Your latest statement is displayed by default.
         </td></tr></table>           
        </div>

and i get http:/

http://www.homeloanpartnership.co.uk/ok1.gif

i think the results speak for themselves!!!

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

 

[ca8msm]

And now, if you include this table on every page that you create and then decide that you don't want it vertically aligned anymore you simply have to change every page on your site instead of of one place in your CSS...oh how much fun that will be...


____________________________________________________________

Need help finding an answer?

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

 

[1DMF]

not really , it's the only page on the site that uses this template, it's for a specific application, there is no reason I would not want to center the text on this page.

It's also unlikely once I have the layout I want it will change again, and seings as I can't get it to work unless I use a table, the argument is pointless as without a table I wouldn't have a usable page!

As I said I accept defeat, I can't work it out, I can't get it alligned, to do it there seems to be attributes that are "Table Like", you have to apply hacks because of different browser rendering, all far to complicated and pointless when I can achieve my desired layout and functionallity with a simple table.

I'm fed up of trying to crack a walnut with a sledge hammer, I keep missing the walnut, so i'm going to use a simple nut cracker (table) and be done with it.

Congratulations to all who can do this without a table, your a better person than me. I hope you and your DIV's will be very happy together!

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

 

[ca8msm]

there is no reason I would not want to center the text on this page.

Maybe not now, but that's the point of using CSS. If, for any reason in the future you or anyone else wants to change this design, then the idea is to make it easy for them.

The idea of these forums is that you are asking for advice. We try to give the best advice we can based on our experiences. If you decide to ignore this advice, then this isn't a problem but it does mean that (personally) it seems pointless offering any more advice to you if you do choose to ignore it.


____________________________________________________________

Need help finding an answer?

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

 

[cLFlaVA]

agreed.

and all of your posts are extremely long, mostly due to the fact that 5 or 6 MVPs are continually trying to steer you in the right direction, yet you resist and attempt to tell us why it doesn't make sense to you.

it doesn't make sense to you because you need to take some time to learn proper, standard-based web development. but this has been said to you before.



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

No you miss the point - I WANT to get rid of these tables - I CAN'T.

I can't work out how to do it, it's far to complicated compared to a simple table, there is nothing wrong with the advice given, just my ability to understand it an implement it.

you can lead a horse to water, you can't make it drink!

I've spent over a week trying to layout my page with pure CSS and divs, i've failed miserably.

I can achieve what I want in 5 seconds using a table, and making any changes would be just as easy. Just in time alone, tables are more cost effective for me at present.

shame i know, but that's just the way it is.





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