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.

 

[cLFlaVA]

vertical-align middle only works well with images - it is quite quirky with other elements, but seems to work occasionally with table cells.

you will need to find another method of aligning / positioning your divs.

we'll probably need to see more code, like your #rightside element.



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

 

[BabyJeffy]

Regarding the third point... you can initially use !important rules to see if the issue is one of specificity or not. Try this:

#rightside
    {
    border-width:1px[b]!important[/b];
    border-color:#233e97[b]!important[/b];
    border-style:solid[b]!important[/b];  
    }

If this works, then you need to read up about specificity (because you don't want to leave those !important statements in there for a production site).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[cLFlaVA]

may i suggest whittling down your code to a skeleton, then post it here so we can point you in the right direction for replacing the vertical-align, float:top, and other css issues.



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

 

[1DMF]

!important - didn't work, whats specificity?

here is the code

<div id="wrapper">   
   <div id="leftside">
        <div id="menu">
        <div><div><div style="display:none;"><ul id="imenus0" style="width:95px; z-index:3;">
        
            <li  style="width:95px;"><a style="text-decoration:none;">March</a>
                
                    <div><div style="width:65px;top:-18px;left:80px;"><ul style=""><li><a>2005</a><div><div style="width:140px;top:-18px;left:50px;"><ul style="">
                        
                            <li><a onclick="getAjax('URL','VARS','10/03/2005')">Period Ending 10/03/2005</a></li>
                        
                    </ul></div></div></li>
                
            </ul></div></div>
         
        </li></ul><div style="clear:left;"></div></div></div></div>         
        </div>
        
        <div id="printButton">
            To print statement use the button below.<br>
            <img src="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/printstat1.png"[/URL] name="printit" onmouseover="document.printit.src='[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/printstat2.png'"[/URL] onmouseout="document.printit.src='[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/printstat1.png'"[/URL] title="Print Current Statement" onclick='print();' style="cursor:pointer">
        </div>

        <div id="instructions">
            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 id="rigthside">
        <div id="CurStat"></div>
        <div id="statement">
            No statements available!
        </div>
    </div>
</div>

CSS file..

body
	{
	color: #000000;
	font-family: Arial, Verdana;
	font-size: 12pt;
	background-color: #ffffff;
	}

.titlecell
	{
	font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;
	}

hr {
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
	background: #233e97;
}
			
.txt1	
    { 
    font-weight:bold; 
    text-decoration:underline; 
    }
			
.txt2	
    { 
    text-decoration:underline; 
    }
   
#leftside
    {
    position:absolute;
    float:left;
    z-index:2;
    }
    
#rightside
    {
    border-width:1px!important;
    border-color:#233e97!important;
    border-style:solid!important;  
    }
    
#statement
    {
    overflow:auto; 
    overflow-y:scroll;  
    border-width:1px; 
    width:799px; 
    height:540px;
    display: block;
    float:right; 
    position:absolute;
    margin-left:170px;
    z-index:0;
    border-color: #233e97;
    float:bottom;
    text-align:center;
    vertical-align:middle;
    }
    
#menu
    {
    width:160px; 
    height:240px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
    text-align:center;
    }  

#printButton
    {
    width:160px; 
    height:60px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
	border-top-width:0px;
    border-bottom-width:0px;
    text-align:center;
    font-size:10pt; 
    font-family:Arial;
    }  
    
#instructions
    {
    width:160px; 
    height:200px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
    text-align:center;
    font-size:10pt; 
    font-family:Arial;    
    }
    
#CurStat 
    {
    text-align:center;
    font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;    
	margin-left:170px;
	float:top;
    }    

#wrapper 
    {
    float:left;
    width:95%;
    }

html * 
    {
    margin:3;
    padding:3;
    }

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

 

[1DMF]

d'oh found one error - should try spelling "right" correctly!

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

 

[1DMF]

why is the border for #rightside, not bordering the 2 child nodes #CurStat & #statement, do i have the divs nested correctly?

here is a screen shot

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

as you can see the div is only bordering "#CurStat" and also is covering the left hand menu?

i'm getting close with this, but i'm still having trouble laying out the page, at least the @media Print CSS works - lol.

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

 

[BabyJeffy]

Here is a pretty good explaination of specificity:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

A quick example:

div#container { color:red; }
div { color:green; }
...
<div id="container">What colour am I?</div>

The text in the div will be red. This is because the definition div#container is more specific than just div alone. The link at the top explains this a LOT better... but the fact you didn't see anything new when you used !important says to me that the problem is most likely not one of specificity.

I really like saying that word .

Have a good one,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[1DMF]

no it wasn't specificity (which I find a mouthfull), it was a typo, but now i can't understand why my border is where it is.

it should wrap 2 div's but it is only doing 1, also to get the dive to align to the right, I was given margin-left:170px; , but it seems when you put a border round the div, that is ignored.

laying out the page with CSS and DIV's is not an easy task!!

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

 

[BillyRayPreachersSon]

What DOCTYPE do you have?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

in where the CSS file or the HTML (which is set to XHTML - Strict)

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

 

[BillyRayPreachersSon]

in where the CSS file or the HTML

CSS files do not have DOCTYPEs, so if you do have one in there, you should remove it.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

I don't have a doctype in the CSS file, sorry I thought you knew I was running this as XHTML Strict, which is why I was confused as to where you were referring.

I didn't know if a CSS was meant to have one or not, ALL my files don't have a DOCTYPE, be them HTML, PERL, JS or CSS, but that's all about to change, starting with this current statements project!

Unfortunately the code from foamy, doesn't work properly.

I think it has something to do with the margin command, I'm going to re-do the page again and see what I get.

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

 

[1DMF]

I've taken the margin away, this is even worse, I can't work out why the div is being placed way over to the far right, can anyone explain what is happening.

css

body
	{
	color: #000000;
	font-family: Arial, Verdana;
	font-size: 12pt;
	background-color: #ffffff;
	}

.titlecell
	{
	font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;
	}

hr {
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
	background: #233e97;
}
			
.txt1	
    { 
    font-weight:bold; 
    text-decoration:underline; 
    }
			
.txt2	
    { 
    text-decoration:underline; 
    }
   
#leftside
    {
    float:left;
    z-index:2;
    width:160px;
    } 
    
#rightside
    {
    float:right;
    border-width:1px;
    border-color:#233e97;
    border-style:solid;
    }
    
#statement
    {
    overflow:auto;  
    width:799px; 
    height:540px;
    display: block;
    position:absolute;
    z-index:0;
    float:bottom;
    text-align:center;
    vertical-align:middle;
    }
    
#menu
    {
    width:160px; 
    height:240px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
    text-align:center;
    }  

#printButton
    {
    width:160px; 
    height:60px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
	border-top-width:0px;
    border-bottom-width:0px;
    text-align:center;
    font-size:10pt; 
    font-family:Arial;
    }  
    
#instructions
    {
    width:160px; 
    height:200px;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
    text-align:center;
    font-size:10pt; 
    font-family:Arial;    
    }
    
#CurStat 
    {
    text-align:center;
    font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;    
	float:top;
    }    

html * 
    {
    margin:3;
    padding:3;
    }

but I get the second div floating off the screen to the right - screen shot can be viewd here(

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

)

why is the div all the way over to the right, the left div is only 160px wide?

here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<title>Commission Statements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Expires" content="0" /> 
<!-- Generic Scripts -->
<script type="text/javascript" src="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/scripts/comms_def.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/scripts/ajax.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/scripts/domain.js"></script>[/URL]
<!-- Page Specific Script -->
<script type="text/javascript">
// <![CDATA[

function ajaxok(ret) {
    // Update Statement    
    document.getElementById('statement').innerHTML='' + ret + '';        
}
    
function getAjax(url,vars,disp){
    // call Ajax
    makeRequest(url,vars);
       
    // Update Now Viewing text
    document.getElementById('CurStat').innerHTML='Viewing Statement : Period Ending ' + disp + '';
}     
  
  // ]]>   
</script>                
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/commissions.css"[/URL] />
<link rel="stylesheet" type="text/css" media="print"  href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/statprint.css"[/URL] />
</head>
<!-- Main Content -->
<body onload="getAjax('url','params','10/03/2005');">
  
   <div id="leftside">
        <div id="menu">
        <div class="titlecell">Select Statement</div>
            <div><div><div style="display:none;"><ul id="imenus0" style="width:95px; z-index:3;">
            
                <li  style="width:95px;"><a style="text-decoration:none;">March</a>
                
                    <div><div style="width:65px;top:-18px;left:80px;"><ul style=""><li><a>2005</a><div><div style="width:140px;top:-18px;left:50px;"><ul style="">
                        
                            <li><a onclick="getAjax('url','params','10/03/2005')">Period Ending 10/03/2005</a></li>
                        
                    </ul></div></div></li>
                
                </ul></div></div>
             
            </li></ul><div style="clear:left;"></div></div></div></div>         
        </div>       
        <div id="printButton">
            To print statement use the button below.<br>
            <img src="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/printstat1.png"[/URL] name="printit" onmouseover="document.printit.src='[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/printstat2.png'"[/URL] onmouseout="document.printit.src='[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/printstat1.png'"[/URL] title="Print Current Statement" onclick='print();' style="cursor:pointer">
        </div>
        <div id="instructions">
            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 id="rightside">
        <div id="CurStat"></div>
        <div id="statement">No statements available!</div>
    </div>
<script type="text/javascript" src="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/scripts/draw_menu.js"></script>[/URL]
</body>
</html>

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

 

[1DMF]

i've sorted the layout now, by removing half the CSS, why does float behave the way it does?

anyway, the main problem I have is how on earth do you vertical align text in a div?

valign="middle" doesn't work and vertical-align:middle; doesn't either.

So what command is there for doing this?

thanks
1DMF

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

 

[1DMF]

nope it looks fine in IE, but not other browsers, I give up, I put a table round the whole code and it works fine in ALL browsers.

I've wasted over a week trying to do this with DIV's and I just cannot seem to do it, one little table and everything is great.

Sorry, but DIV v TABLE, table wins!

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

 

[BillyRayPreachersSon]

It's a shame you consider it wasted time - why not look at it as time well spent learning more about how, when you're ready, you can make the transition from tables easier?

Sorry, but DIV v TABLE, table wins!

That depends on the intended use for the tables, doesn't it?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

I can't make anything in a div center or vertical align, is there a command I don't know about?

valign : doesn't work
text-align : doesn't work
vertical-align : doesn't work

what else is there but to put a table around it and use those attributes, that's why i've given up.

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

 

[BillyRayPreachersSon]

I'd suggest searching on Google for "vertical centering css" - there are many examples out there... you just need to choose one that is right for your needs and browser audience. You might even choose to use merge multiple methods.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Or how about going back to what I suggested in another thread.

Rather than trying to shoehorn the techniques you have used in the past into a standards driven layout start with the basics. Get yourself some books and learn the basic why's and wherefores behind the whole shebang of Web Standards.

Web Standards and CSS layout is much more than learning a code syntax. It's a whole way of thinking about how a webpage is constructed. You need to take an holisitc approach.

You will save yourself so much heartache if you just take the time to get the fundamentals down first.

Seriously, I didn't suggest it on a whim.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK