CSS - List Styling

hi all,

I want to show an ordered list in a particular way. I currently have an ordered on my site but instead of using <ol> and <li> tags, I am simply using text and <br>'s.

So what I would like to do is use the <ol> and <li> tags to build the list, but have it appear in exactly the same way as my current setup.

The list is only ever 5 items long, so all the extra spacing is not needed, it literally needs to look like this:

1. Item 1
2. Item 2
3. Item 3

and so on.

So far, I have:

Code:

.test ol {
	margin:5px 0px 5px 40px;	
	padding:0 0 0 2px;
	}	
.test ol li {
	color:#333333;
	margin:2px -3px 2px -17px;
	}	
.test ol li a:link, 
.test ol li a:active, 
.test ol li a:visited, 
.test ol li a:hover {
	text-decoration:underline;
	margin-left:-8px;
	}

[code]
<div class="test">
<ol>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
<li><a href="#">List item 4</a></li>
<li><a href="#">List item 5</a></li>
</ol>
</span>
[/div]

This looks perfect on IE, but there is still some left margin on the <li>s on FF and Opera and others. And I can't seem to get rid of it.

Hoping you can help.
Mark

On one of my pages I display an ordered list (see http://www.valleyspokesmen.org/cinderella_training2.php). I'd like to break up the twelve vertically displayed list items and display them six alongside six, with appropriate spacing between adjacent items, with item number 7 adjacent to item number 1, item 8 adjacent to item 2, etc. I searched this forum but found nothing addressing that sort of challenge.

On my web page, my left column is floated left, the right column is floated right, and the center column is....well.....just trying to stay afloat :-) With that in mind, can you offer any advice on how to break up my ordered list so that it appears in two blocks of six items?

thank you very much for your valuable time.

Hi, my xml code is:

<room>
<features>
<pool/>
<Aircon/>
<Radio/>
<DVD/>
<beds double="2"/>
</features>
</room>

<room>
<features>
<pool/>
<TV/>
<VCR/>
<beds twin="1" double="2"/>
</features>
</room>

i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list.

This is the code i have so far:

features{
}

features:before {
content:"Features";
font-weight:bold;
}

beds:before{
content:"Beds: ";
}

beds[sofa-bed]:after{
content:attr(sofa-bed)" x Sofa-bed ";
}

beds[double]:after{
content:attr(double)" x Double ";
}

beds[twin]:after{
content:attr(twin)" x Twin ";
}


The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed.

Any idea's?

I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet.

The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page.

Bottom of the Page
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code.

One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags.

The following class style did not produce the <textarea> desired attributes.

Code:

pre.CodeExample {
	/*background-color: transparent;*/
	border: medium inset #CCCCCC;
	font-family: "Courier New", Courier, monospace;
	margin: 1em 2em 1em 2em;
	overflow: auto;
	padding: .5em .5em .5em .5em;
	white-space: nowrap;
}

Please let me know what are the default CSS attributes for the <pre> and <textarea> tags.
Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link.

http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote

The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed.

div.ExampleOutput
pre.CodeExample

I see that layout on my site is completely broken in IE7...
funnyfurniture.net

Could anybody help me to fix my css...

I have a menu constructed <div><ul><li><a><img><p>.

The li is margined as 16% to space a given number of links across the page in the 100% div.

I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work.

Any ideas how I can get the <a> border to surround the <img><p> tags?

Hi Guys,

Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table.

All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad.

I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this?

Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table?

Charlie

Seems like most people use unordered lists for menus.
Code:

<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>

Others use definition lists. They claim it is less buggy with IE.
Code:

<dl>
<dt>menu1</dt>
<dt>menu2</dt>
<dt>menu3</dt>
</dl>

Any thoughts on whether unordered lists or definition lists are best?

Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag?
Code:

<ul>
<li><span>menu1</span></li>
<li><span>menu2</span></li>
<li><span>menu3</span></li>
</ul>

Thanks

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

I am displaying a Google feed on my site through an asp script that converts RSS to HTML. There is no room for images where the feed is, so we just take them out by setting display: none;. That solves one issue, but then the text is way off. I'm having trouble acessing the text after the picture so I can use absolute positioning and keep it left justified. See http://www.lsuhospitals.org/Hospitals/Bogalusa_Med_Center.htm for an example.

Here's the RSS to HTML source tabbed out as best I could. This conversion isn't perfect and still needs some work. What's in red is what I need CSS access to, but only when an image is present. Whew!

Code:

<html><head><title></title><LINK REL="StyleSheet" HREF="../../StyleSheets/HCSD.css" TYPE="text/css" MEDIA="screen"><style>body{margin: 0px; padding:0px; background-color:white;}</style></head><body>

<table width="140px" class="BodyTextHeading1" cellspacing="0" cellpadding="0">
	<tr>
		<td>
			BMC IN THE NEWS
		</td>
	</tr>
</table>

<table>
	<tr>
		<td class="rsscontainer">
		<br>

		<table border=0 width= valign=top cellpadding=2 cellspacing=7>
			<tr>
				<td valign=top>
					<a href="http://news.google.com/news/url?sa=T&ct=us/0-0&fd=R&url=http://www.edailynews.info/articles/2007/01/04/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">
					Two perish in accidents  as 2006 comes to close
					</a>

					<br>
					<font size=-1>
					<font color=#6f6f6f>
					Bogalusa Daily News,&nbsp;LA&nbsp;-
					</font>
					<nobr>
					Jan 4, 2007
					</nobr>
					</font>
					<br>

					<font size=-1>
					Bonnett said the incident is still being investigated and 					oxicology tests are still being conducted. The initial  911 call 					was made to WPSO and came from the LSU-<b>Bogalusa Medical 					Center</b> where Johnson had been brought by private vehicle.
					</font>
					<br>
		</table>
				</td>
			</tr>

	<tr>

		<td class="rsscontainer"><br>

		<table border=0 width= valign=top cellpadding=2 cellspacing=7>

		<tr>

			<td width=80 align=center valign=top>

				<a href="http://news.google.com/news/url?sa=T&ct=us/1i-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">

				<img src=http://news.google.com/news?imgefp=lpU8D0_YzTEJ&imgurl=www.edailynews.info/content/articles/2007/01/02/news/news04.jpg width=79 height=37 alt="" border=1>

				</a>

			</td>

			<td valign=top>

				<a href="http://news.google.com/news/url?sa=T&ct=us/1-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">Tim Augustine, Regina Runfalo to reign over MCCA XXVII festivities</a>

				<br>
				<font size=-1>
				<font color=#6f6f6f>
				Bogalusa Daily News,&nbsp;LA&nbsp;-
				</font> <nobr>Jan 2, 2007
				</nobr>
				</font>
				<br>
				<font size=-1>Runfalo, a registered nurse, serves as assistant 				administrator of LSU <b>Bogalusa Medical Center</b>, where she has been 				employed 26 years.
				</font>
				<br>
		</table>
			</td>
				</tr>
</table>

And here are the relavent styles that I created. I have consulted my book "The Web Professional's Handbook" by glasshaus publishing. They have a decent CSS section (selectors on pgs. 96-97), but to no avail.

Code:

.rsscontainer {
	font-family: Verdana;
	color: black;
	width: 140px;
	background-color: white;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

.rsscontainer table tr td font{
	font-size: 10px;
	line-height: 1.3;
	}

.rsscontainer table tr td a img {
	display:none;
	}

.rsscontainer table tr td a {
	font-family: Verdana;
	font-size: 10px;
	color: #461D7C;
	text-decoration: underline;
	}
	
.rsscontainer table tr td a:hover {
	font-family: Verdana;
	font-size: 10px;
	color: #7549B1;
	}
.rsscontainer table tr td a:visitied {
	font-family: Verdana;
	font-size: 10px;
	color: #7549B1;
	text-decoration: underline;
	}

Hello,

I am applying a style to a anchor tag. This anchor is created by an
ASP.NET page and is inside a list item.
I know the style is working because I applied it to the anchor in a
page that has only this.

.Test
{
background-color: #101010;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
font: normal 1.2em Verdana, Geneva, sans-serif;
}

<a href="Test.aspx" class="Test">Testing</a>

However, when I apply it to the anchor inside the list item I don't
get the bottom margin unless I add "display: block" to the style! But
then the background is extended 100%.

I don't know what is going on. I tried everything I could think off.
Here is the code where the Test style is giving me problems:
...
<li>
<label for="tbMessage" id="lMessage">Mensagem<span
class="Required">*</span></label>
<textarea name="tbMessage" rows="4" cols="20" id="tbMessage"></
textarea>
</li>
<li>
<a id="lbSubmit" class="Test"
href='javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$ctl00$cphSite$cfSendContact$lbSubmit",
"", true, "ContactForm", "", false, true))'>
Send
</a>
</li>
</ul>

Any idea why this is happening?

All I am trying to do is to make my anchor look as a simple button.

Thank You,
Miguel

I am trying to add sub navigation to my footer area. I tried codes below but didnt work. http://www.pearl.ru/isdunyasi/

#footer {
width:800px;
font-size:10px;
color:#aaaaaa;
}
#footer .navigation{
width:800px;
background:#aaaaaa;
}
#footer .navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#footer .navigation li a{
display:block;
padding:0 5px;
font-size:12px;
text-transform:uppercase;
color: #FFFFFF;
}
#footer p {
padding:0;
margin:0;
text-align:center;
}

Hello all, need a little help on a small link styling issue I am having. I am using the following style for links with the target="_blank" attribute, and it is working fine, but it is also applying itself to images that are linked with the _blank attribute:

Code:

article.post a[target~="_blank"],
article.post a[target~="_blank"]:visited {
	background:url(/Images/web/template/body2alt/external.png) center right no-repeat;
	padding-right: 12px; 
	color: #0066CC;
	text-decoration:underline;
}

Is there another line I can add to my CSS file so it will only apply this style to text and not images? I tried the following, but it didn't help:

Code:

article.post img a[target~="_blank"],
article.post img a[target~="_blank"]:visited {
	background:none;
	padding:0;
}

Thanks for any help you can offer.

Hi All,

I have 2 questions, 1st one is I have a caption above my table, which sits on the extreme left. I also want to have the word 'Download' in the caption but want this to sit on the extreme right any ideas?

Also I have lots of data to display so have designed up my css so all the table look the same. The only issue is that because some of the headings aren't very long some of the data is moving onto the next line, do I have to manually set a column width in pixels/percent inside every single table? Or can I add something to my css?

This is how my caption looks...

[code]
<table width="700" border="0" cellspacing="0" cellpadding="0">
<caption>MEMBERS - SEARCH Download Details</caption>
<thead>
<tr>
<th scope="col" class="left">NAME</th>
<th scope="col">DOB</th>
<th scope="col">ADDRESS</th>
<th scope="col">PHONE</th>
<th scope="col" class="right">MOBILE</th>
</tr>
</thead>

I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size)..

Is there an easy way to do this?

for example

http://member.classifieds.com/userjoin.php

the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this.