CSS - Anchor Styling ... Could Someone Please Help Me With This?

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 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;
}

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>

is there a way to style a <ul><li>nav link</li></ul> so that each item in the list has a dashed bottom border?

from this:
<ul>
<li>nav item 1 link</li>
<li>nav item 2 link</li>
<li>nav item 3 link</li>
</ul>

to this:

nav item 1
----------
nav item 2
----------
nav item 3
----------

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;
	}

Hi is there anyway of making the height of the textbox smaller. I know you an change the width of it

Thanks

Hello,

I am creating a simple navigation bar using a list.
My anchor tags inside each list item have a background and margin. The problem is they are overlapping.
I then added to the li tag margin-top: 20px.
The problem is that the bottom background of the last element disappears.

I think I might doing something wrong on my styling because when I fix something, something else gets wrong.

Could someone, please, help me out?

HTML:

<ul id="wmNavigation" class="Bar">
<li>
<a title="Page1" href="http://www.name.com/page1">Page1</a>
</li>
<li>
<a title="Page2" href="http://www.name.com/page1">Page2</a>
</li>
<li>
<a title="Page3" href="http://www.name.com/page1">Page3</a>
</li>
<li>
<a title="Page4" href="http://www.name.com/page1">Page4</a>
</li>
</ul>

CSS:

ul.Bar {}

ul.Bar li
{
font: normal 1.2em Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
margin-top: 20px;
}

ul.Bar li a
{
background-color: #202020;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
}

ul.Bar li a:link , ul.Bar li a:visited {}
ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus
{
background-color: #303030;
}

Thanks,
Miguel

I wrote a little div based expandable tree but am having trouble setting some of the conditional styling when a div has children.

What I'd like, is that when a div has children, the "font-weight" should be set to bold. Ideally, I'd also like to use the "div:after" property to append a '>' indicating that the div has children, but that's not critical.

I tried the following but it didn't work right:

Code:

/* Styles the child, not the parent */
div.tnode > .tnode {
	display: none;
	font-weight: bold;
	}

/* Doesn't do anything */
div.tnode:after > .tnode {
	content: '>';
	}

And here's the basic css with html

Code:

<html>
	<head>
		<style>
			/* Node container styles */
			div.tcontainer {
				width: auto;
				height: auto;
				font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
				font-size: 12;
				color: black;
				padding: 5 5 5 30;
				}
			
			/* Node styles */
			div.tnode {
				display: inherit;
				padding: inherit;
				}
			
			div.tnode:hover {
				cursor: pointer;
				}
			
			/* Node child styles */
			div.tnode > .tnode {
				display: none;
				font-weight: bold;
				}
			
			div.tnode:hover > .tnode {
				display: block;
				}
			
			/* doesn't work
			div.tnode:after > .tnode {
				content: '>';
				}
			*/
		</style>
	</head>
	<body>
		<div class='tcontainer'>
			<div class='tnode'>North America
				<div class='tnode'>USA
					<div class='tnode'><img src='http://images.infoplease.com/images/states_imgmap.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
				<div class='tnode'>Canada
					<div class='tnode'><img src='http://www.infoplease.com/images/mapcanada.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
				<div class='tnode'>Mexico
					<div class='tnode'><img src='http://www.infoplease.com/images/mmexico.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
			</div>
		</div>
	</body>
</html>

Any help appreciated

Thanks

Ken

Hi I wonder if you can help me im just doing some stuff with css as practice and need to know about table bordering basically i can border the intire table and all the cells but i just want to be able to put a border around the rows not the individual cells but the rows in the table

Hello,

I have built a new navigation system for this website I'm rehabbing. Please note that the new navigation is only currently installed on the Newsroom section.

I used this method (as was suggested by several people in this forum). I'm new to this method so now I need some help.

The menus appear to be working but I would like some help with styling these so they look awesome. Here is a list of things I'd like to do (help with any or all of these would be appreciated):

1. I'd like to add a small border around the drop-down menu without adding a border to the img buttons I have. These images fit perfectly in the Navigation div and if a border is added around each one, the Resource button goes to a second line... very undesirable.

2. Is there a way to widen the drop-down menus? As you can see, most of the categories in each menu don't fit on one line.

3. I also is there a way to add a hover background color to the links?

Thank you for your insight!

Hi folks.
I need some help with css.
I have a wordpress template that has a thumbnail populated on a home page.
The problem is that it looks like this:
URL
http://i55.tinypic.com/aoulhf.png

and what I would like it to look like is this :

URL
http://i55.tinypic.com/2wd22r8.png

And the code of the page is he

Code:

				
                
				<strong><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></strong><br>
				<?php get_the_image( array( 'image_scan' => true,'width' => '75', 'height' => '75' ) ); ?><?php the_content_limit(80, ""); ?>

I know I should use DIV tags and css but I don't know how. Please ,anybody help.
Thanks

Hi Guys,

I'm getting a weird formatting problem with IE.

I'm trying to create an H2 element, and it's working fine in Chrome and FF.

But in IE, it's all spaced out. For the life of me I can't figure out why.

Check out this link in IE and FF (or chrome)

http://details.at/h2_test.cfm

In FF/Chrome, it looks right. Title, underlined, and a button floated to the right. They are all level. in IE, it seems to push the button below the title text, but then floats it to the right.

Here's the code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<STYLE>

#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #146eb4;
font-size: 1.2em;
width:100%;
}

.h2_button
{ 
font: .9em Arial, Helvetica, sans-serif; 
background-color: #FFFFFF; 
color: #146eb4; 
border: 1px solid #146eb4; 
float:right;
margin: 0 0 0 0;
}

</STYLE>
<title>Untitled</title>
</head>

<body>
<div id="content">
<H2>This is a test <INPUT class="h2_button" type="submit" name="Go" value="Create"></H2>

<P>brown fox jumps over fat piggie</P>
</div>

</body>
</html>

Hi,

Im trying to style the button tags, mainly to obtain rounded corners, using images. I can't use '<a>' links to style, which would be simpler, as the button is being used for a program written specifically to use button tags.

I have the button working in IE 5, 8 and 9 and firefox but other incarnations do not.

body { behavior:url( hover.htc ); }

Code:

/* REQUIRED BUTTON STYLES: */                   
button {
            position: relative;
            color:#000000;
            border: 0;
            padding: 0;
            cursor: pointer;
            overflow: visible; /* removes extra side padding in IE */
            outline: 0;
 
}
 
button::-moz-focus-inner {
            border: none;  /* overrides extra padding in Firefox */
}
 
button span {
            position: relative;
            display: block;
            white-space: nowrap;    
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
            /* Safari and Google Chrome only - fix margins */
            button span {
                        margin-top: -1px;
            }
}
 
 
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */                 
button.submitBtn {
            padding: 0 15px 0 0;
            margin-right:5px;
            font: normal 12px Tahoma;
            color:#000000;
            text-align: center;
            background: transparent url(btn_sprite2.gif) no-repeat right -140px;
}
           
button.submitBtn span {
            padding: 3px 0 7px 15px;
            height:15px;
            background: transparent url(btn_sprite2.gif) no-repeat left top;
            color:#000;
           
}
           
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
            background-position: right -210px;
}
           
button.submitBtn:hover span, button.submitBtnHover span {
            background-position: 0 -70px;
}
 
button.submitBtn:active, button.submitBtnActive { /* the redundant class is used to apply the hover state with a script */
            background-position: right -140px;
}
           
button.submitBtn:active span, button.submitBtnActive span {
            background-position: left top;
}

Code:

<button value="submit" class="submitBtn"><span>Submit</span>

The above is the method i have used so far. Does anyone know how i could improve on this, or another method that maybe beneficial?

Any help will be appreciated.

Cheers.

Hi,
This will be a quick question. Why cant I style ul inside a div as:
.css-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
background:#EFEFEF none repeat scroll 0 0;
}

<!-- Left column -->
<div class="floatLeft width73">
<!-- the tabs -->
<ul class="tabsss">
<li><a href="#first">Tab 1</a></li>
<li><a href="#second">Tab 2</a></li>
<li><a href="#third">Tab 3</a></li>
</ul>
</div>