I've got a parent table and a child div:
Code
<table>
<tr>
<td>
<div>
content
</div>
</td>
</tr>
</table>
<tr>
<td>
<div>
content
</div>
</td>
</tr>
</table>
and the problem is the content ends up aligning in the middle (vertically).
HELP!
Watch
GitHub Core
Show your support for Zikula! Sign up at Github account and watch the Core project!
GitHub Modules
Forum Activity
- mesteele101 responded to »ERR (3): E_USER_ERROR: Smarty error: [in pagesvar:pagesitem2en line XXX]…« 07:01 AM
- mazdev responded to »Pages 2.5.0 and updating - Page not found« 06:41 AM
- ehdwma created topic »Hide "Register new account" and change template to 3 col« 06:27 AM
- mesteele101 responded to »Zikula 1.3.3 - Selecting a category in Pages not working« 01:29 AM
- mdee created topic »How to implement returnpage ?« 01:00 AM
- nestormateo responded to »Fillters in Clip« 24. May
- damon responded to »Can the Updated Version Check be Turned Off (Z 1.3)« 24. May
Zikula Blog
- Anatomy of Open Source Projects on Mar 07
- Continuous Review on Mar 01
- Not Invented Here on Feb 24
- How to Contribute Your Code at Github on Jan 13
- 10 Steps to Coding-Nirvana: Tips for Successful Module Writing on Nov 12
- Submitting Bug Report Tickets That Get Results on Aug 17
- Cozi Tricks #1: Syntax Highlighting on Aug 07
Login
replace valign?
-
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Mar 02, 2005 - 07:13 AM
what CSS property can be used to 'float' a div to the top of its parent? the float property only goes left and right, the vertical-align property only applies to inlinve elements (so div is right out).
I've got a parent table and a child div:
and the problem is the content ends up aligning in the middle (vertically).
HELP! -
- Rank: Expert
- Registered: Mar 15, 2003
- Last visit: Oct 21, 2009
- Posts: 1221
Posted: Mar 02, 2005 - 10:47 AM
-
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Mar 02, 2005 - 10:55 AM
I did that and it didn't work either... -
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Mar 02, 2005 - 03:55 PM
this turned out to be a problem with some of the content that was above where I thought the problem was - it grew unnaturally long, making it look like the valign didn't do anything. weirdness... -
**unknown user**
- Rank: Helper
- Registered: Mar 16, 2002
- Last visit: Oct 21, 2009
- Posts: 569
Posted: Mar 04, 2005 - 01:53 PM
craig put different color borders on everything. border=5 bordercolor=yellow, blue, green
You'll get a good visual.
You can align table, td, and div
the default is dead center I believe
hangon a sec, I'll get you an official answer -
**unknown user**
- Rank: Helper
- Registered: Mar 16, 2002
- Last visit: Oct 21, 2009
- Posts: 569
Posted: Mar 04, 2005 - 02:03 PM
here
http://www.htmlgoodies.com/tutorials/html_401/article.php/3479671#ehex
and you can't v-align a div, I thought you could. Think Ive made that mistake before. see this master list
http://www.htmlgoodies.com/beyond/reference/article.php/3472981
BTW Good reference page to add to "favorites" in my opinion -
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Mar 04, 2005 - 02:06 PM
well bri, if you can help that would be great. I had done some troubleshooting using firefox's developer tools, and thought I had it licked (see above). Unfortunately, IE still does the same behavior.... grrrr....
here's the whole page of code:
Code
<table align="left" border="0" cellspacing="0" cellpadding="0" class='mainBodyTable'><!-- main content table -->
<tr>
<td rowspan="2" class='leftcol'>
<!-- Left Block Start -->
<div id="ls_block">
<!--[$leftblocks]-->
</div>
<!-- Left Block end -->
</td>
<td width="600" height="90" align="left" valign="top" style='background-color:#ffffcc;'>
<!-- START BUTTON header -->
<table width="600" height="90" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="10"><img src="<!--[$imagepath]-->/butter_header_01.gif" width="600" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="<!--[$imagepath]-->/butter_header_02.gif" width="9" height="78" alt=""></td>
<td colspan="8"><a href="/"><img src="<!--[$imagepath]-->/butter_header_03.gif" width="584" height="52" alt=""></a></td>
<td rowspan="2"><img src="<!--[$imagepath]-->/butter_header_04.gif" width="7" height="78" alt=""></td>
</tr>
<tr>
<td><img src="<!--[$imagepath]-->/butter_header_05.gif" width="6" height="26" alt=""></td> <!-- left of DROP MENU -->
<td width="106" class="butter_buttonbar" style="background-image:url(<!--[$imagepath]-->/butter_header_06.gif);">
<ul id="nav">
<li>
<div><a href="">DROP MENU</a></div>
<ul>
<li><a href="index.php?module=htmlpages&func=display&pid=1">About Us</a></li>
<li><a href="index.php?module=htmlpages&func=display&pid=2">Contact Us</a></li>
<li><a href="modules.php?op=modload&name=PNphpBB2&file=index">Forums</a></li>
<li><a href="modules.php?op=modload&name=gallery&file=index">Photo Gallery</a></li>
<li><a href="index.php?module=pnFlashGames&func=main">Video Games</a></li>
<li><a href="modules.php?op=modload&name=Members_List&file=index">Member List</a></li>
<li><a href="modules.php?op=modload&name=UpDownload&file=index">Downloads</a></li>
<li><a href="modules.php?op=modload&name=Web_Links&file=index">Web Links</a></li>
</ul>
</li>
</ul>
</td>
<td><img src="<!--[$imagepath]-->/butter_header_07.gif" width="24" height="26" alt=""></td> <!-- DROP ARROW -->
<td width="82" class="butter_buttonbar" style="background-image:url(<!--[$imagepath]-->/butter_header_08.gif);">
<a class="butter_buttonbar" href="index.php">HOME</a></td>
<td width="118" class="butter_buttonbar" style="background-image:url(<!--[$imagepath]-->/butter_header_09.gif);">
<a class="butter_buttonbar" href="modules.php?op=modload&name=PostCalendar&file=index">CALENDAR</a></td>
<td width="83" class="butter_buttonbar" style="background-image:url(<!--[$imagepath]-->/butter_header_10.gif);">
<a class="butter_buttonbar" href="http://guard.westernbands.net/">GUARD</a></td>
<td width="82" class="butter_buttonbar" style="background-image:url(<!--[$imagepath]-->/butter_header_11.gif);">
<a class="butter_buttonbar" href="http://www.baycitywestern.com/" target="_blank">WHS</a></td>
<td width="83" class="butter_buttonbar" style="background-image:url(<!--[$imagepath]-->/butter_header_12.gif);">
<a class="butter_buttonbar" href="http://www.bcschools.net/" target="_blank">BCPS</a></td>
</tr>
<tr>
<td colspan="10"><img src="<!--[$imagepath]-->/butter_header_13.gif" width="600" height="2" alt=""></td>
</tr>
</table>
<!-- end BUTTON header -->
</td>
<td class="rightcol">
<div id="rs_block">
<!-- Right Sidebox Start -->
<div class="block">
<div class="title"><h2>Site Search</h2></div>
<div class="content" style="height: 45px;">
<form method="post" action="modules.php">
<div style="padding-top:10px;">
<input type="hidden" name="op" value="modload" />
<input type="hidden" name="name" value="Search" />
<input type="hidden" name="file" value="index" />
<input type="hidden" name="action" value="search" />
<input type="hidden" name="overview" value="1" />
<input type="hidden" name="active_comments" value="1" />
<input type="hidden" name="active_downloads" value="1" />
<input type="hidden" name="active_faqs" value="1" />
<input type="hidden" name="active_weblinks" value="1" />
<input type="hidden" name="active_stories" value="1" />
<input type="hidden" name="stories_topics" value="" />
<input type="hidden" name="stories_cat" value="" />
<input type="hidden" name="stories_author" value="" />
<input type="hidden" name="active_users" value="1" />
<div style="text-align:center;">
<input type="text" name="q" size="14" />
<input type="image" name="search_submit" src="<!--[$imagepath]-->/go_button.gif" value="Search" />
</div>
</div>
</form>
</div>
</div>
<!-- Right Sidebox end -->
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" style='background-color:#ffffcc;'>
<div id="mainbody">
<!-- begin main content -->
<!--[$maincontent]-->
<!-- end main content -->
</div>
<!-- start footer -->
<div id="footer">
<!--[footmsg]-->
</div>
<!-- end footer -->
</td>
</tr>
</table> <!-- end main content table --> -
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Mar 04, 2005 - 02:16 PM
and the relevant parts of the CSS file:
(and by the way - I added the height attribute after my initial message - that's what I thought fixed the problem.
Code
td.butter_buttonbar,
a.butter_buttonbar:link,
a.butter_buttonbar:visited {
font-family:arial, helvetica, tahoma, verdana, sans-serif;
font-size:14px;
text-align:center;
font-weight:bold;
padding-bottom:5px;
color:black;
background-color:transparent;
text-decoration:none;
}
a.butter_buttonbar:hover,
a.butter_buttonbar:active {
color: #666633;
}
.mainbodytable {
/* padding: 8px; */
vertical-align: top;
}
.leftcol {
vertical-align: top;
background-color:#cccc99;
width:150px;
padding:5px
}
.rightcol {
vertical-align: top;
background-color:#ffffcc;
padding:5px
}
#mainbody {
padding: 6px;
vertical-align: top;
}
#table1,
#table2 {
border: 1px solid #666633;
margin: 0;
padding: 8px;
vertical-align: top;
}
/* BLOCK STYLINGS */
.block a:link,
.block a:visited,
#footer a:link,
#footer a:visited {
color: #000000;
text-decoration: underline;
}
.block a:hover,
.block a:active,
#footer a:hover,
#footer a:active {
color: #000000;
text-decoration: none;
}
#cc_block div.block {
margin:4px 8px 4px 8px;
background: #ffffcc url(/pn750/themes/xButter/images/butter_lr.gif) no-repeat bottom right;
}
#rs_block .block .title,
#cc_block .block .title {
text-align: left;
background: black url(/pn750/themes/xButter/images/butter_ur.gif) no-repeat top right;
margin: 0;
padding: 0;
}
#rs_block .block .title_alt,
#cc_block .block .title_alt {
text-align: left;
background: url(/pn750/themes/xButter/images/butter_ur.gif) no-repeat top right;
margin: 0;
padding: 0;
} -
**unknown user**
- Rank: Helper
- Registered: Mar 16, 2002
- Last visit: Oct 21, 2009
- Posts: 569
Posted: Mar 04, 2005 - 05:14 PM
first glance, no valign in the initial table
td tag by td width=600 is not closed or I missed it.
Gonna try and run it thru tidy -
**unknown user**
- Rank: Helper
- Registered: Mar 16, 2002
- Last visit: Oct 21, 2009
- Posts: 569
Posted: Mar 04, 2005 - 05:28 PM
tidy is here
http://validator.aborla.net/index.php5?lang=en
it's a script you can get at tidy.sourceforge.net
I pasted your code in my editor ignore the top or header of the document.
I uploaded it to my site at http://www.footballhangout.com/craig.html to test it.
Feel free to plug in these yourself. -
**unknown user**
- Rank: Helper
- Registered: Mar 16, 2002
- Last visit: Oct 21, 2009
- Posts: 569
Posted: Mar 04, 2005 - 05:38 PM
generally, ya don't use height with table instead you specify td heights
I do like you. I just believe there's some unwritten rule about it.
The 600 by 90 table has a td 600 by 90, that's conflicting make it a smidge less at least.
I see the ending td tag
f tidy, I found it here, swap this code with yours
HOME
CALENDAR
GUARD
WHS
BCPS -
**unknown user**
- Rank: Senior
- Registered: Mar 16, 2002
- Last visit: Oct 21, 2009
- Posts: 2330
Posted: Mar 05, 2005 - 11:16 AM
...to force div position use the position rule:
position: relative (or absolute)
...you can do some pretty tricky stuff with it...
- Moderated by:
- Support
