You are here: Re: inline list separators « HTML « IT news, forums, messages
Re: inline list separators

Posted by BootNic on 11/07/06 02:02

> dorayme <doraymeRidThis@optusnet.com.au> wrote:
> news: doraymeRidThis-9B49E7.12263407112006@news-vip.optusnet.com.au
> In article <FtP3h.23438$TV3.16929@newssvr21.news.prodigy.com>,
> "BootNic" <BootNic@bounce.prodigy.net> wrote:
>
>>> dorayme <doraymeRidThis@optusnet.com.au> wrote:
>>> news: doraymeRidThis-41C559.08471507112006@news-vip.optusnet.com.au
>>> [snip]
>>
>>>>>> http://members.optushome.com.au/droovies/test/footer.html
>>
>> [snip]
>>
>> Make sure you change #nav to #footer2 ;-)
>
> er yes... of course! (thanks)
>
> OK. So now is it ok in IE7?

Not onload, that is not at 100%, above or below works great. Appears
to be a line-height issue from here. Change it to 1.2 or more looks fine
on IE 7, look ok on IE 5.5 - IE 6 winxp, line-height seems to be ignored.

The following works in IE 5.01 - IE 7, FF 2.0, SeaMonkey 1.0.5 and
Opera 9.02 on winxp sp2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<link rel="stylesheet" href="default.css" type="text/css">

<title></title>
<style type="text/css">
body {
background: #8D8FB5;
color: #333;
line-height: 1.3;
margin: 0;
padding: 0;
}
#footer {
background: #8D8FB5;
color: #FFF;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
padding: 0px;
text-align: center;
}
#footer a, #footer2 a {
background: #8D8FB5;
color: #FFF;
font-size: .85em;
text-decoration: none;
}
#footer a:visited, #footer2 a:visited {
background: #8D8FB5;
color: #FFF;
font-size: .85em;
}
#footer a:hover, #footer2 a:hover {
background: #8D8FB5;
color: #F00;
font-size: .85em;
}
#footer a:active, #footer2 a:active {
background: #8D8FB5;
color: #0C0;
font-size: .85em;
}

</style>
<style type="text/css">
#footer2,#footer2 li, #footer2 li a {
list-style: none;
text-align:center;
margin: 0;
padding:0;
background: #8D8FB5;
color: #FFF;
}
#footer2 li {
display: inline;
line-height: 1.2;
}
#footer2 li + li:before {
content: "\00A0\007c\00A0";
}

</style>
<!--[if gte IE 5]>
<style type="text/css">
#footer2 li.firstListItem a {
border-left:none;
}
#footer2 li a {
border-left:0.09em solid #fff; /* if no JS use border */
border:expression('none'); /* remove border with JS */
line-height: 1; /* if no JS set line-height */
line-height:expression(''); /* set to auto with JS */
padding:0 0.5em 0 0.5em; /* if no JS add padding */
padding-left:expression('auto'); /* remove padding with JS */
}
#footer2 {
behavior:url(libefore.htc);
}
#footer2, #footer2 li {
zoom:1; /* set zoom for IE7, tis safe for other IE versions */
}
</style>
<![endif]-->

<style type="text/css">
span.c1 {font-size: .8em}
</style>
</head>

<body>
<div id="footer">
<a href="http://www.y.com.au">website design</a> <span class=
"c1">|</span> <a class="emailTo" href="mailto:admin@x.com.au"
title="...opens email message to contact us">email us</a> |
<a href="http://www.x.com.au/offices/offices.html" title=
"...phone numbers, addresses">contacts</a> | <a href=
"http://www.x.com.au/stockists/sunStockists.html" title="...all
our stockists">stockists</a> | <a href=
"http://www.x.com.au/termsOfTrade.html" title="...legal
document">terms of trade</a>
</div>

<ul id="footer2">
<li class="firstListItem"><a href="http://www.y.com.au">website
design</a></li>

<li><a class="emailTo" href="mailto:admin@x.com.au" title=
"...opens email message to contact us">email us</a></li>

<li><a href="http://www.x.com.au/offices/offices.html" title=
"...phone numbers, addresses">contacts</a></li>

<li><a href="http://www.x.com.au/stockists/sunStockists.html"
title="...all our stockists">stockists</a></li>

<li><a href="http://www.x.com.au/termsOfTrade.html" title=
"...legal document">terms of trade</a></li>
</ul>
<!-- libefore.htc content below
<public:component>
<script type="text/javascript">
var li=element.getElementsByTagName('li');
var liX=li.length;
var liY;
for (var i=1; i<liX; i++) {
liY=li[i];
// insert | before li firstChild
liY.insertBefore(document.createTextNode('|'),liY.childNodes[0]);
}

</script>
</public:component>
-->
</body>
</html>

--
BootNic Monday, November 06, 2006 9:01 PM

"No man's life, liberty, or property is safe while the legislature is
in session."
*Judge Gideon J. Tucker, 1866.*

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация