I've been trying to solve this for the past two hours and couldn't do it.
I have created a horizontal css navigation menu using an UL and 'display' as table and tested it locally on all browsers: IE7, IE8, IE9, FF 9.0.1, Chrome and it displays perfectly.
However, when putting the code on my server I get a vertical white space between the <LI> elements only in IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Document</title>
<style type="text/css">
* {margin:0;padding:0;}
#navigation {
border: 0px solid #000000;
padding: 0;
width: 560px;
position: relative;
height:100%;
display:table;
}
#navigation li {
display: table-cell;
*width: 16.5%;
max-width:115px;
vertical-align: middle;
word-wrap: break-word;
text-align:left;
background: #008dde; /* Old browsers */
background: -moz-linear-gradient(top, #30a9ff 0% , #008dde 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30a9ff), color-stop(100%,#008dde)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #30a9ff 0%,#008dde 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #30a9ff 0%,#008dde 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #30a9ff 0%,#008dde 100%); /* IE10+ */
background: linear-gradient(top, #30a9ff 0%,#008dde 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30a9ff', endColorstr='#008dde',GradientType=0 ); /* IE6-9 */
*float: left;
list-style-type:none;
height:100%;
*border:0;
*height:50px;
position: relative;
}
#navigation li, {display:inline;zoom:1;vertical-align:middle;
display: inline-block;float: left;
}
#navigation li.middle
{
border-left:1px solid #52b4f9;
border-right:1px solid #005e9c;
}
#navigation li.first
{
border-right:1px solid #005e9c;
}
#navigation li.last
{
border-left:1px solid #52b4f9;
}
#navigation li a{
color: #FFFFFF;
display: block;
font-family: arial,verdana,sans-serif;
font-size: 11px;
font-weight: bold;
*padding-right:10px;
text-decoration: none;
height:100%;
}
#navigation a span
{
display: block;
padding: 5px 2px 5px 6px;
*padding-right:10px;
}
#navigation li:hover,#navigation li.selected
{
color:#fff;
background: #008dde; /* Old browsers */
background: -moz-linear-gradient(top, #818181 0% , #2d2d2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #818181 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #818181 0%,#2d2d2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #818181 0%,#2d2d2d 100%); /* IE10+ */
background: linear-gradient(top, #818181 0%,#2d2d2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<ul id="navigation">
<li class="first"><span>Home</span></li>
<li class="middle"><span>Channel Programs</span></li>
<li class="middle"><span>Partner Contract</span></li>
<li class="selected"><span>Operational Information</span></li>
<li class="middle"><span>Product & Pricing Information</span></li>
<li class="last"><span>Channel Marketing</span></li>
</ul>
</body>
</html>`
Unfortunately I couldn't fix this with existing solutions like float or changing the 'display' type because I really need this kind of approach for my menu which needs to be able to expand in height as the content in it is dynamic and for multiple languages and also to be vertically centered.
Thank you very much for the help.
I'd say that it's because of the default inline-block behavior. The browser will render inline-block elements just like a text and any white-space in your html will display as a non-breaking space in your website.
More info here
I was unable to open the first link. In case you can't as well, here is another.
Even though, floats with inline-blocks and etc is just too messed up, and will just cause more trouble down the road. I think you should choose one and stick with it.
While trying some other things, i've solved the issue by putting border-spacing:0 .
Related
I'm trying to implement the css inner-text shadow solution found here: http://dabblet.com/gist/1609945
Here's the twist:
I'm applying this to a submit button. I didn't think this would be an issue as the content: attr(title) simply becomes content: attr(value). I've commented out all possible conflicting styles as well, but it won't take - has anyone experienced difficulty applying this to a submit button? Here's my full rails3, html css code:
My html.erb:
<div class="row-submit" style="text-align: center">
<div class="form-create">
<table>
<tr>
<td class='facebox-save'>
<input id="lock_submit" class="btn-submit" type="submit" name="commit" value="Save">
</td>
</tr>
</table>
</div>
</div>
My css:
.form .row-submit .btn-submit{
display: block;
position: relative;
width: 600px;
height: 300px;
color: black;
font-family: sans-serif;
font-weight: 700;
font-size: 7em;
letter-spacing: 1px;
border-radius: 6px;
border: 1px solid #4e7732;
cursor: pointer;
background: #7faa3d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmYWEzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZTc3MzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7faa3d 0%, #4e7732 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7faa3d), color-stop(100%,#4e7732)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7faa3d 0%,#4e7732 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7faa3d 0%,#4e7732 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7faa3d 0%,#4e7732 100%); /* IE10+ */
background: linear-gradient(to bottom, #7faa3d 0%,#4e7732 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7faa3d', endColorstr='#4e7732',GradientType=0 ); /* IE6-8 */
}
.btn-submit:before, .btn-submit:after {
content: attr(value);
color: rgba(255,255,255,.5);
position: absolute;
}
.btn-submit:before{ top: 1px; left: 1px}
.btn-submit:after{ top: 2px; left: 2px}
The result: (no effect)
Maybe I just need another pair of eyes?
Thanks,
Sean
isn't it a bit easier mixing rgba() color and text shadow ? DEMO
HTML
<input id="lock_submit" class="btn-submit" type="submit" name="commit" value="Save">
CSS
[value] {
font-size:80px;
padding:1em 2em;
background:#4E772C;
font-weight:bold;
color:rgba(0,0,0,0.5);
text-shadow:2px 2px 1px gray;
}
I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.
Supposed HTML Tag:
<span class="tag tag-gray">FRETE GRÁTIS</span>
See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/
Thank's
Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
To get it to work with older (and other) browsers, you may want to add the prefixed versions of border-radius
To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of transform and transform-origin
The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
Due to using border-radius, you cannot set div.cut's overflow to hidden as the div's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)
a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)
Is this fiddle something similar to what you need?
Here is the code for it
`.tag.tag-gray {
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 300px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 300px;
border-radius: 5px;
border-top-right-radius: 300px;
}`
Try this:
<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>
CSS:
.tri {
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #ffffff;
position:absolute;
top:0px;
right:0px;
}
.rounded {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 6px 20px;
background: -moz-linear-gradient(
top,
#c0c0c0 0%,
#333333);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c0c0c0),
to(#333333));
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px solid #000000;
width:120px;
position:relative;
}
And for IE8, I'd use CSS3 PIE
If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:
.tag-grey {
background: grey url(triangle.png) no-repeat right top;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.
I'm having trouble with the show()/hide() function of jQueryUI. They basically deactivate my CSS for the duration of the animation.
jsFiddle link: http://jsfiddle.net/UBATE/1/
According to the API:
http://docs.jquery.com/UI/Effects/Drop,
I've built the following function:
updateTeamLists = function(args) {
// fade out -> rebuild the content -> fade in
$("#team1, #team2").hide("drop", {"direction": "right"}, 600, function() {
rebuildTeamLists(args);
$(this).show("drop", {"direction": "right"}, 600);
});
};
The child DOM nodes appear to lose all their CSS attributes in the beginning of the animation, i.e. they stop floating (or lose their inline-block display) and their backgrounds vanish instantly. However, the animation and the fading out of the text work fine.
HTML DOM structure:
<div id="teams">
<div id="team1">
<ul>
<li>Player 1</li>
<li>Player 2</li>
<li>Player 3</li>
<li>Player 4</li>
<li>0 Pts</li>
</ul>
</div>
<div id="team2">
<ul>
<li>Player 5</li>
<li>Player 6</li>
<li>Player 7</li>
<li>Player 8</li>
<li>0 Pts</li>
</ul>
</div>
</div>
CSS:
#content > #teams {
margin-top: 10px;
padding: 5px 5px 5px 22px;
width: 650px;
border: 2px solid #bfbfbf;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
#content > #teams > div {
margin-top: 5px;
display: block;
height: 28px;
}
#content > #teams > div:first-child {
opacity: 1.0;
}
#content > #teams > div:last-child {
opacity: 0.6;
}
#content > #teams > div > ul > li {
height: 25px;
width: 125px;
border-width: 1px;
border-style: solid;
margin-left: 5px;
display: inline-block;
}
#content > #teams > div > ul > li:first-child {
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#content > #teams > div > ul > li:last-child {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
width: 50px !important;
}
#content > #teams > #team1 > ul > li {
background: rgb(229,130,130); /* Old browsers */
background: -moz-linear-gradient(top, rgb(229,130,130) 0%, rgb(216,43,43) 51%, rgb(232,153,153) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,130,130)), color-stop(51%,rgb(216,43,43)), color-stop(100%,rgb(232,153,153))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* IE10+ */
background: linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* W3C */
border-color: rgb(229,130,130);
text-align: center;
padding-top:3px;
}
#content > #teams > #team2 > ul > li {
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
border-color: rgb(179,220,237);
text-align: center;
padding-top:3px;
}
Unfortunately I can't host the code online for a demo so I've posted up anything I got. I'm using Google Chrome 17.0.963.56 and Firefox 10.0.2.
I'm quite often having trouble with adding jQueryUI effects to my scripts, ending up not adding them. Though there might be some tricks/bugs preventing it from working (e.g. if your DOM node didn't have a class attribute, toggleClass animations wouldn't work).
Did I miss something? How would a workaround look like, would I have to iterate through all the child nodes?
Thanks in advance!
Harti
Jquery UI will add an extra div under the effected element. Example:
<div id="team1">
<ul>
...
<ul>
</div>
When the effect is applying, the structure will be:
<div id="team1">
<div class="jquery-ui something-else">
<ul>
...
</ul>
</div>
</div>
The solution is not to use the direct-child selector ">". See example here. You can compare it with your version :)
Really getting some unwanted behaviour from IE7 and IE8 on header and fotter vertical menu. Did this before without problem but while using Wordpress it's just not getting it right.
Here is the test site: http://examples.iamwebsitedeveloper.com/walkinmyshoes/
And here is the code used for #headerNav:
#headerNav {
display:block;
float: left;
margin: 0 auto;
width: 940px;
position: relative;
z-index:99999;
font: Verdana, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #894ba6;
background: -moz-linear-gradient(top, #894ba6 0%, #743a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#894ba6), color-stop(100%,#743a8f));
background: -webkit-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -o-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -ms-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: linear-gradient(top, #894ba6 0%,#743a8f 100%);
margin-bottom:20px;
behaviour:url(PIE.htc);
}
.ie7 #headerNav,.ie8 #headerNav{*display: block;*zoom:1;}
#headerNav ul{
font-size: 1.077em;
list-style:none;
margin:0;
padding:0px;
}
#headerNav li {
float: left;
position: relative;
border-right:1px solid #8B4DA7;
}
Moreover if you look at the footer segment the background color and block is not coming! Moreover the footer navigation is behaving the same way!
Using IE conditional classes as well as css3pie, I can't get it working properly.
Evan Vai,
Strange problem when i opening the debugger and closing it the css comes back. Its may be the execution of jQuery.
I am trying very hard to make this work but I can't see what is wrong. I have the following code:
<div id="ftr_btm">
<div id="ftr_ctr">
<div id="ftr_msg">
<ul>
<li>123</li>
<li></li>
</ul>
</div>
</div>
<div id="ftr_rgt">
<div id="ftr_msg">
<ul>
<li>ABC</li>
<li></li>
</ul>
</div>
</div>
</div>
and the following CSS:
#ftr_btm { height:24px; margin:0 auto; border-top: 1px solid #AAA;
background: #F6F6F6;
background: -moz-linear-gradient(top, #F6F6F6 0%, #F6F6F6 5%, #F0F0F0 6%, #F0F0F0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(5%,#F6F6F6), color-stop(6%,#F0F0F0), color-stop(100%,#F0F0F0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#F0F0F0',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* W3C */ }
#ftr_btm p { line-height:20px; text-align:center; margin:0px; padding:0px; color:#666; }
/* Footer Message */
#ftr_ctr {text-align: center; font-size:0.8em; }
#ftr_rgt {text-align: right; font-size:0.8em; top: 0px; position: relative;}
#ftr_msg { color:#666; display: inline-block; padding-top: 2px; height:24px; background: transparent;}
#ftr_msg ul { margin: 0; }
#ftr_msg ul li { float: left; overflow: inherit;position:relative; white-space: nobox; display:inline; line-height: 20px; }
#ftr_msg ul li a { color:#666; display:inline; padding: 0 10px; white-space: nobox; text-decoration: none; }
#ftr_msg ul li a:hover { color:#3985d4;}
The problem is that 123 and ABC are both supposed to appear within the footer. When I run it with this fiddle then you can see ABC is BELOW the footer. Can anyone see what I am doing wrong. I checked many times and still cannot see what's wrong.
Guessing your intent from what you have so far..
On #ftr_rgt, you need to set position to absolute, instead of relative.
On the parent of #ftr_rgt (which is #ftr_btm, you need to set position: relative.
Lastly, you need to add right: 0 to #ftr_rgt. You already have top: 0.
See: http://jsfiddle.net/a4Gar/1/
If you're trying to use relative/absolute positioning, you need to get your head around how it works:
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Lastly, I think that you could accomplish this layout in a simpler way with floats.
Here's your problem - block-level elements like divs will not appear next to each other unless you change the way they're displayed. Currently, #ftr_ctr is taking up the entire footer, and #ftr_rgt is appearing below it.
There are a couple ways to move #ftr_rgt up. Since it has position:relative;, you can give it a top:-20px; to slide it up. The downside it that it'll still reserve white space for itself below the footer.
You can make both #ftr_ctr and #ftr_rgt float:left;, and put a <div style="clear:both;"></div> after them. You'll need to adjust the widths of each of them to get them to line up right, though.
You can set both of them to have display:inline-block;
You may even be able to get away with just using display:inline as well.
#ftr_rgt {
text-align: right;
font-size:0.8em;
position: absolute;
top: 0px;
right: 0px
}
<div id="ftr_btm">
<div id="ftr_ctr">
<div id="ftr_msg">
<ul>
</ul>
</div>
</div>
<div id="ftr_rgt">
<div id="ftr_msg">
<ul>
<li>123</li>
<li></li>
<li>ABC</li>
<li></li>
</ul>
</div>
</div>
</div>
This might be what you are looking for, but I do not know exactly how you want the text formatted.