Click to See Complete Forum and Search --> : continuing adventures of a CSS newb!


r0k3t
02-08-2008, 09:35 AM
Hi there,

Well - I have done some great stuff with the help of this board but I have run into some more issues... I am now able to get my layout the way I want it but I am having trouble with the test in the tabs... I tried several things but all I can think is something else might be causing it to ignore the vertial-align property? not sure... Here is the code, maybe someone can see what I have messed up.


<html>
<head>
<title>div test for website...</title>
<link rel=StyleSheet href="./divTestStyle.css" type="text/css">
</head>

<body style="background-image: url('./images/tile.png'); background-repeat: repeat; margin: 0px; font-family: Arial; font-size: 11px;">
<div style="background-image: url('./images/back.jpg'); background-repeat: repeat-x; height: 130px; width:100%;">
<div style="vertical-align: middle; text-align: center; float: right; background-color: #cfcf99; width: 100; height: 30; margin-top: 95px; margin-left: 10px; margin-right: 25px;">
la la la
</div>

<div style="float: right; background-color: #cfcf99; width: 100; height: 30; vertical-align: bottom; margin-top: 95px; margin-left: 10px; text-align: center;">
This is a link
</div>

</div>
<div style="clear:both; margin-top: 0px; margin-left: 12px;">
<div style="float:left; border-right: 1px; border-right-style: solid; height: 450px; padding-right: 4px;">
<p>link to something</p>
<p>Another link</p>
<p>click me!!!</p>
</div>
</div>
</body>
</html>



Thanks...

gil davis
02-08-2008, 10:12 AM
Your width and height do not have units.

r0k3t
02-08-2008, 10:15 AM
Hmm? Just fixed it, no change... The text is centered (always was) but still forced to the top of the div...

WebJoel
02-08-2008, 12:20 PM
A bit rough, but works x-browser...

....<div style="float: right; background-color: #cfcf99; width: 100px; height:2.0em; margin-top: 95px; margin-left: 10px; text-align: center;">
<p style="line-height:2.0em; margin:0; padding:0;">This is a link</p>
</div>....
Margin:0; padding:0; required to, ironically enough, work in Firefox. It's usually IE that benefits the most from zero-ing out these two Selectors...