I have a CSS Based dropdown menu that works great in Firefox and Chrome, however, in IE it submenu's won't dropdown. I had it working for a SHORT while, but now again its not working. Please help!
URL: itsjust4me.com
CSS:
body,ul,li{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:left;}
#menu{
line-height:21px;
background:#ED7CD4;
border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
box-shadow:0 0 1px #EDF9FF inset;
height:50px;
list-style:none outside none;
margin:0;
padding:0 10px 0px 5px;
z-index:50000;
}
#menu li{border:medium none;display:block;float:left;margin-right:2px;margin-top:10px;margin-bottom:-3px;padding:4px 10px;position:relative;text-align:center;}
li.lessline{line-height:150%!important;margin-bottom:7px!important;}#menu li:hover{border-radius:5px 5px 0px 0px; background:#FCEFF9;border:1px solid #777777;padding:4px 9px;}#menu li a{color:#FFFFFF;display:block;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;outline:0 none;text-decoration:none;text-shadow:1px 1px 1px #000000;}#menu li:hover a{color:#B10D90;text-shadow:1px 1px 1px #FFFFFF;}#menu li .drop{background:url("img/drop.png") no-repeat scroll right 8px transparent;padding-right:21px;font-weight:700;}#menu li .noarrow{background:none!important;padding-right:0;font-weight:700;}#menu li:hover .drop{background:url("img/drop.png") no-repeat scroll right 7px transparent;}.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#FCEFF9;border-color:-moz-use-text-color #777777 #777777;border-image:none;border-radius:0 5px 5px 5px;border-right:1px solid #777777;border-style:none solid solid;border-width:medium 1px 1px;float:left;left:-999em;margin:4px auto;padding:10px 5px;position:absolute;text-align:left;box-shadow:0px 12px 10px #000;-moz-box-shadow:0px 12px 10px #000;-webkit-box-shadow:0px 10px 10px #000;}.dropdown_1column{width:140px;}.dropdown_2columns{width:280px;}.dropdown_3columns{width:420px;}.dropdown_4columns{width:560px;}.dropdown_5columns{width:700px;}#menu li:hover .dropdown_1column,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns{left:-1px;top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5{display:inline;float:left;margin-left:5px;margin-right:5px;position:relative;}.col_1{width:130px;}.col_2{width:270px;}.col_3{width:410px;}.col_4{width:550px;}.col_5{width:690px;}#menu .menu_right{float:right;margin-right:0;}#menu li .align_right{border-radius:5px 0 5px 5px;}#menu li:hover .align_right{left:auto;right:-1px;top:auto;}#menu p,#menu h2,#menu h3,#menu ul li{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:21px;text-align:left;text-shadow:1px 1px 1px #FFFFFF;}#menu h2{border-bottom:1px solid #B10D90;font-size:21px;font-weight:700;letter-spacing:-1px;margin:7px 0 14px;padding-bottom:14px;color:#B10D90;}#menu h3{border-bottom:1px solid #00ACED;font-size:14px;margin:7px 0 14px;padding-bottom:7px;color:#00ACED;}#menu p{line-height:18px;margin:0 0 10px;}#menu li:hover div a{color:#015B86;font-size:14px;}#menu li:hover div a:hover{color:#029FEB;}.strong{font-weight:bold;}.italic{font-style:italic;}.imgshadow{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #777777;box-shadow:0 0 5px #666666;margin-top:5px;padding:4px;}.img_left{float:left;margin:5px 15px 5px 5px;width:auto;}#menu li .black_box{background-color:#333333;border-radius:5px 5px 5px 5px;box-shadow:0 0 3px #000000 inset;color:#EEEEEE;padding:4px 6px;text-shadow:1px 1px 1px #000000;}#menu li ul{list-style:none outside none;margin:0 0 12px;padding:0;}#menu li ul li{float:none;font-size:12px;line-height:24px;margin:0;padding:0;position:relative;text-align:left;text-shadow:1px 1px 1px #FFFFFF;width:130px;}#menu li ul li:hover{background:none repeat scroll 0 0 transparent;border:medium none;margin:0;padding:0;}#menu li .greybox li{background:none repeat scroll 0 0 #FFE0F8;border:1px solid #EDC4E3;border-radius:5px 5px 5px 5px;margin:0 0 4px;padding:4px 6px;width:116px;}#menu li .greybox li:hover{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #AAAAAA;margin:0 0 4px;padding:4px 6px;}#menu .search{background:none!important;border:none!important;border-radius:0!important;padding:0!important; display:block;}#menu .search:hover{background:none!important;border:none!important;border-radius:0!important;padding:0!important;}
#menu th {background:#F7D7EF;border-right:solid 1px rgb(232, 208, 226); border-bottom:solid 1px rgb(232, 208, 226); color:#B10D90 !important;}
#menu td {border-bottom:dashed 1px rgb(232, 208, 226);}
.menutableright {border-right:dashed 1px rgb(232, 208, 226);}
.single {border-radius:5px 5px 5px 5px !important;}
HTML
in head
<link rel="stylesheet" type="text/css" href="../usermods/_INCstyles_.css" media="all">
<link rel="stylesheet" type="text/css" href="../usermods/stylemy.css" media="all">
<link rel="stylesheet" href="../menu/menu.css?v4" type="text/css" media="screen"/>
<style>
<!--[if IE]>
body {
background-color: #ED7ED7;
background-image: url(images-common/bgrd.jpg);
background-repeat: repeat-x;
dropdown_4columns {width:56ypx !important;}
behavior: url("http://wwww.itsjust4me.com/menu/csshover3.htc");
}
<![endif]-->
</style>
In Body
<ul id="menu">
<li class="single">Home
<li class="single">Products
<li>Shop By Category
<div class="dropdown_4columns">
<div class="col_1">
<ul>
<li class="lessline">Personalized Step Stools</li>
<li class="lessline">Personalized CD's</li>
<li class="lessline">Personalized Name Puzzles</li>
<li class="lessline">Personalized Coat Racks</li>
<li class="lessline">Personalized Kids Scrubs</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="lessline">Personalized Name Trains</li>
<li class="lessline">Personalized Crayola</li>
<li class="lessline">Personalized Sports Gifts</li>
<li class="lessline">Personalized Backpacks</li>
<li class="lessline">Fathead Decals</li>
</ul>
</div>
<div class="col_2">
<a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html" alt="Fathead Decals, Personalized Stools, Personalized CD's"/><img src="http://www.itsjust4me.com/prodimages/Fathead-Kids-sm.jpg" width="260" class="" alt="Fathead Decals" border="0"/></a>
<span style="width:100%; height:2px;"> </span>
</div>
<div class="col_4">
<div class="col_2" style="width:265px !important;">
<img src="http://www.itsjust4me.com/prodimages/Personalized-Stools-Img1.png" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/>
</div>
<div class="col_2" style="width:265px !important;">
<img src="http://www.itsjust4me.com/Scripts/images-common/hpcd.jpg" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></div>
</div>
</div>
</li>
<li>Shop By Theme
<div class="dropdown_2columns">
<div class="col_2">
<h2>Coming Soon</h2>
</div>
</div>
</li>
<li class="single">FAQ</li>
<li>Shipping
<div class="dropdown_4columns align_right">
<div class="col_4">
<H2>Product Delivery Times</H2>
</div>
<div class="col_4">
<table style="width: 100%; margin-top:-5px;">
<tr>
<th align="center">Product Type</th>
<th align="center">Manufacturing / Processing</th>
<th align="center" style="border-right:none !important;">Shipping</th>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized CDs</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Books</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Step Stools</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Boards</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Coat Racks</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Clocks</th>
<td align="center" class="menutableright">5-7 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Trains</th>
<td align="center" class="menutableright">2-5 Days</td>
<td align="center">3-4 Days</td>
</tr>
</table>
</div>
</div>
</li>
<li class="menu_right search"><form method="post" action="/scripts/chshowinfo.php" style="width:156px !important;">
<input name="txtsearch" id="txtsearch" style="border: 1px solid rgb(177, 13, 144); border-radius: 4px 4px 4px 4px; text-align: left; margin-top: 3px; padding: 4px 0px 4px 2px;" placeholder="Search Products" type="text" value=""/>
</form>
</li>
</ul>
#Sven You hit it right on the head! The DOCTYPE was declared but it was placed below some ASP includes... moved it to the top of the page & it did the trick!
Related
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I'm trying to put a shadow on each one of my table lines. But it's not working with the first one and I don't really understand why.
I put you the css inline as you can see the all things
{% for resultat in resultats %}
<tr style="background-color: #F0F0F0; box-shadow: 8px 8px 12px #aaa, 8px -8px 12px #aaa; -webkit-box-shadow: 8px 8px 12px #aaa;"
id="first_{{ nb }}>
<td>
<span class="fl marginTop8">
{{ resultat.missions.getDateReaPrev()|date('Y-m-d') }}
</span>
</td>
<td></td>
<td></td>
<td>
<span class="fl marginTop8">
{{ resultat.distance }} Km
</span>
</td>
<td></td>
<td class="badge fr" style="color: darkorange;">{{ resultat.nb_pdv }}</td>
</tr>
<tr style="background-color:white">
<td colspan="6"></td>
</tr>
{% endfor %}
Here is what I got with this code:
As you can see, the shadow is on the right both tr...but the border is only on the last tr.
I would like to get something like this one
Thanks for your help.
EDIT: For more precision there is a class tableEnquete on the table.
So there is too
.tableEnquetes tr:nth-child(2){ position:relative }
.tableEnquetes table{
border-radius: 0 0 15px 0;
box-shadow: 3px 3px 3px #AAA;
margin: 0;
table-layout: fixed;
}
Here is a fiddle of this problem: https://jsfiddle.net/wdwgn7ta/
You only need to change background-color:white to background-color:none
<tr style="background-color:none">
<td colspan="6"></td>
</tr>
I've been trying to make a transparent box behind a table, that I can use as a background for it, but it appears left to right side of my page and not only behind the table. Any ideas how I can fix that?
Here is HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<LINK href="Style/Boxes.css" rel="stylesheet" />
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav><br><br><br><br><br>
<div class="BlueBox">
<TABLE border="0" align="center" width="60%">
<TR>
<TD ROWSPAN="2" > </TD>
<TD valign="bottom" align="center"><b><i><FONT SIZE="6" COLOR="FFFFFF">What can I say about myself...</FONT></i></b></TD>
<TD ROWSPAN="2" > </TD>
<TD ROWSPAN="2"><IMG SRC="Pictures/Me.JPG" height="400"></TD>
</TR>
<TR>
<TD valign="middle" align="left" >
TEXT
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
Here is the CSS for the box:
.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}
Just simply remove **position:fixed;** from your css.
.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}
Your example is just a block element (table) inside another block element (div.bluebox)... nothing that should prevent your example from rendering as you expect it.
For debugging the design, I would recommend you to remove all other css files and the rowspans in the table to get a minimal example.
I want to click the image <img> w.r.t to the "TM100" mentioned in the td tag. Please can anyone give me the XPath.
I'm facing issue in the selecting the image. Because all the image are having the same xpath.
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">6073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM2</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">1073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM3</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">8073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM100</td>
</tr>
Please check this one, might be this could works for you:
//tr[descendant::td[contains(text(),'TM100')]]//img[#class='newassetIcon assetIcon linkable']
I have tested the above code using this:
//tr[descendant::td[contains(text(),'TM100')]]//td[contains(text(),'XX0172')]
If you want to get the img element you can use the following XPath
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a/img
If you want to click the image you might want to select the a, so the following works:
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a
just got stuck when creating multiple columns with .tried several ways but could not make it appropriate.
<h3>Staff / Administration</h3>
<div align="center" class="center-content"><ul style="border-bottom: 1px solid #CFCFCF;"><strong>Administration</strong><br /></div>
<div class="page-style"><ul style="border-bottom: 1px solid #CFCFCF;">
<li style="width: 15%; text-align: left;"><b>NICK</b></li>
<li style="width:12%; text-align: left;"><em>Chief Executive Officer</em></li>
<li style='width:12%; text-align: center'><em>Demos</em></li>
<li style='width:12%; text-align: center'>Maps</li>
<li style='width:12%; text-align: center'>Movies</li>
<li style='width:12%; text-align: center'>Server</li>
<li style='width:12%; text-align: center'>Website</li>
</ul></div>
desired output is
Staff / Administration
administration
-------------------------------------------------------------------------------------
NICK Chief Executive Officer Demos Maps Movies server Website
As Mr. Alien suggests, it might be more appropriate to use a table for this sort of information.
However, if you're sure you want to use a list, you can style the individual list items to either float, or flow as inline blocks. My personally preferred method is inline-block. The example below is slightly reformatted from yours, and I've pulled the inline-block styling out into an inline CSS block.
<style type="text/css">
ul.adminTable > li {
display: inline-block;
}
</style>
<h3>Staff / Administration</h3>
<div align="center" class="center-content"><ul style="border-bottom: 1px solid #CFCFCF;"><strong>Administration</strong><br /></div>
<div class="page-style">
<ul style="border-bottom: 1px solid #CFCFCF;" class="adminTable">
<li style="width: 15%; text-align: left;"><b>NICK</b></li>
<li style="width:12%; text-align: left;"><em>Chief Executive Officer</em></li>
<li style='width:12%; text-align: center'><em>Demos</em></li>
<li style='width:12%; text-align: center'>Maps</li>
<li style='width:12%; text-align: center'>Movies</li>
<li style='width:12%; text-align: center'>Server</li>
<li style='width:12%; text-align: center'>Website</li>
</ul>
</div>
As Mr. Alien suggested, just use the <table> element for this:
<h3>Staff / Administration</h3>
<table border="0">
<tr>
<th colspan="7">
Administration
</th>
</tr>
<tr>
<th>
Nick
</th>
<td>
<em>Chief Executive Officer</em>
</td>
<td>
<em>Demos</em>
</td>
<td>
Maps
</td>
<td>
Movies
</td>
<td>
Server
</td>
<td>
Website
</td>
</tr>
</table>
You use tabular-data after all, so definally the way to go.
jsFiddle
I cleared up some of your invalid html code and added following css:
.page-style{
vertical-align: top;
}
ul {
display: inline;
vertical-align: top;
}
ul li {
display: inline-block;
width: 100px;
vertical-align: top;
}
.administration-title {
width: 100%;
border-bottom: 1px solid gray;
}
See demo here:
http://jsfiddle.net/T5t7q/