Forum Moderators: not2easy

Message Too Old, No Replies

well well well. here we go agagin

problem with placment of images and txt

         

rbblue8

6:26 pm on Mar 24, 2006 (gmt 0)



here is the html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://www.nightlance.com/pages/main_css.css" type="text/css"></link>
<title> I hope this works in the end </title>
</head>
<body>
<div id="logo"> <img src="http://www.nightlance.com/images/main_01.gif" alt="logo"/></div>
<div id="logo_spacer"><img src="http://www.nightlance.com/images/main_04.gif" width="71" height="77" alt=""/></div>
<div id="banner"><?php if(isset($error)){echo $error;}echo $banner;?></div>
<div id="logo_spacer1"><img src="http://www.nightlance.com/images/main_04.gif" width="71" height="35" alt=""/></div>
<div id="white_line"><img src="http://www.nightlance.com/images/main_07.gif" width="621" height="2" alt=""></div>
<div id="info_bar"><?php if(isset($support_error))echo $support_error;
else echo 'So far, '.$count.' people have shown there support! <a target="body" style="color:#00FF00" href="http://www.nightlance.com/pages/show_support.php">(click here to show support)</a>';?></div>
<div id="hit" align="right"><p><img src="http://www.nightlance.com/tinc?key=dvhjl0Hi" alt="hit counter" vspace="middle"/></p></div>
<div id="corss_bar"><img src="http://www.nightlance.com/images/main_09.gif" width="621" height="16" alt=""/></div>
<div id="spacer_side"><img src="http://www.nightlance.com/images/main_12.gif" width="117" height="15" alt=""/></div>
<div id="first_link"><a href="pages/contact.php" target="_self">Contact</a></div>
<div id="second_link"><a href="pages/help.htm" target="_self">Help Wanted</a></div>
<div id="third_link"><a href="pages/show_support.php" target="_self">Show Shpport</a></div>
<div id="side_bar"><img src="http://www.nightlance.com/images/main_12.gif" width="117" height="468"alt="side bar"/></div>
</body>
</html>

and the css


/* CSS Document */

Body
{background-color: #999999;
color:#FFFFFF;
text-decoration:none;
font-family:"Times New Roman", Times, serif;}

/*link information */
A{
color:#FFFFFF;
visited:none;
active:none;
inactive:color:#FF0000;
text-decoration:none;}

A:focus{
color:#00FFFF}

/*inactive link */
.dead{
color:#FF0000}

#logo{
position: absolute;
left:158;
top:31;}

#logo_spacer{
position:absolute;
left:437;
top:31;
width=:71;
height:70;}

#banner{
position:absolute;
background-color:#000000;
top:31;
left:508;
width:550;
height:76;
text-align:left;
clear:right}

#logo_spacer1{
position:absolute;
left:437;
top:109;
width:71;
height:30;}

#white_line{
position:absolute;
left:437;
top:107;}

#info_bar{
position:absolute;
left:508;
top:109;
vertical-align:middle;
background-color:#000000;
width:470;
height:35;
text-align:left;}

#hit{
vertical-align: middle;
position:absolute;
left:978;
top:109;
height:35;
padding:0;
background-color:#000000;}

#corss_bar{
position:absolute;
top:144;
left:437;}

#spacer_side{
position: absolute;
left: 158px;
top:160px;
height:19px;}

#first_link{
color:#FFFFFF;
position:absolute;
left:158;
top:173;
width:117;
height:25;
text-align:left;
background:url(http://www.nightlance.com/images/main_12.gif);
background-position:right;}

#Second_link{
color:#FFFFFF;
position:absolute;
left:158;
top:198;
width:117;
height:25;
text-align:left;
background:url(http://www.nightlance.com/images/main_12.gif);
background-position:right;}

#third_link{
color:#FFFFFF;
position:absolute;
left:158;
top:223;
width:117;
height:25;
text-align:left;
background:url(http://www.nightlance.com/images/main_12.gif);
background-position:right;}

#side_bar{
color:#FFFFFF;
position:absolute;
left:158;
top:243;
width:117;
height:468;}

the problem is... I can not get the txt to be placed in the middle. In IE it's at the top. in firefox it's at the bottom.

the one and only image that i wanted to be placed in the middle (css style #banner) will not place in the middle using vertical-align:middle (so i took it out).

Same thing with the txt. It's like vertical-align:middle means nothing!

thanks!

coopersita

6:57 pm on Mar 24, 2006 (gmt 0)

10+ Year Member



try putting px (or other unit) at the end of your numbers:

left:437px;
top:31px;
width:71px;
height:70px;

You have to specify the unit:

px
em
ex
*
in
cm
mm
pt
pc

Only 0 and z-index don't require units.

hope this helps