CSS - Text Decoration Issue

hi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself

PHP Code:
<ul>
    <li><a href="?action=abouUs">about us</a>
        <ul>
            <li><a href="?action=press">press</a></li>
            <li><a href="?action=tellFriend">tell a friend</a></li>
            <li><a href="?action=feedback">feedback</a></li>
        </ul>
    </li>
    <li><a href="?action=new">fitting room</a></li>
    <li><a href="?action=offers">best sellers</a></li>
    <li><a href="?action=col">useful info</a>
        <ul>
            <li><a href="?action=pay">payment options</a></li>
            <li><a href="?action=delCharge">delivery charges</a></li>
            <li><a href="?action=retPol">returns policy</a></li>
        </ul>
    </li>
</ul> 





PHP Code:
/* LEFT NAV */
    
    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }
    
    #leftNav a {
        border-bottom: 1px solid #000;
        text-decoration: none;
        width: 120px;
    }
    
    #leftNav ul li ul a {
        border-bottom: none;
    }
    
    #leftNav ul {
        list-style: none;
        margin: 0;
        padding: 10px 0 0 10px;
        display: block;
        border: none;
    }
    
    #leftNav ul li {
        margin: 0;
        padding: 0 0 10px 0;
        width: 110px;
        font-size: 14px;
        font-weight: bold;
    }
    
    #leftNav ul li ul {
        margin: 0;
        padding: 5px 0 0 10px;
    }
    
    #leftNav ul li ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        font-weight: 300;
        width: 95px;
    }
    
    /* END OF NAV */ 





thanks for your help

Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF.

Here's the HTML:
Code:

<div class="prod_container">			
<div class="leftprods">
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div>&nbsp;</div>
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div>
</div>

<div class="rightprods">
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div>&nbsp;</div>
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div>
</div>
</div>

Here's the CSS:
Code:

.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }

.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }

.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }

.prod_container a:hover { text-decoration:underline; }

Thanks.

To emphasis a link I put a small image (its an "X") before the link. See attached picture.

GOOD
this works well for text links:
Code:

<a href="...">text</a> --->  X text

BAD
I integrate a picture and define the picture as link
Code:

<a href="..."><img src="..."></a> ---> X <image>

How can I avoid to show the X in front of the picture?

Here is my CSS code:
Code:

#content a {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;}
#content a:hover {
text-decoration: underline;}

Something like this does not solve the problem
Code:

01 #content img a { background-image: none; }
02 #content img>a { background-image: none; }

Any idea is greatly apreaciated.
Thanks.

Good Day,

I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added.

This is what the page looks like with limited text:

http://lisawesselsphotography.ca/services.html

It looks ok from here

This is what it looks like when a greater amount of text is inserted:

http://lisawesselsphotography.ca/services-test.html

Not so cool looking

Here is my css:

Code:

html, body {
		height: 100%;
}

body {
		margin: 0px;
		padding: 0px;
		background: #11121A url(images/bg1_01.jpg) repeat;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #5A5D6A;
}

h1, h2, h3 {
		margin: 0px;
		padding: 0px;
}

p, ol, ul {
		margin-top: 0px;
}

ol, ul {
		margin: 0px;
		padding: 0px;
}

p {
		line-height: 220%;
}

strong {
		font-weight: normal;
		color: #FFFFFF;
}

a {
		color: #A40000;
		outline: none;
}

a:hover {
		text-decoration: none;
}

a img {
		border: none;
}

img.border {
}

img.alignleft {
		float: left;
		padding-right: 25px;
}

img.alignright {
		float: right;
}

img.aligncenter {
		margin: 0px auto;
}

hr {
		display: none;
}

ul.style1 {
		margin: 0px;
		padding: 0px 0px 0px 15px;
}

ul.style1 li {
		padding: 3px 0px;
}

ul.style1 span {
		color: #FFFFFF;
}

/** WRAPPER */

#wrapper-content {
		background: url(images/bg1_02.jpg) repeat-x left top;
}

#wrapper {
		background: url(images/bg1_05.jpg) repeat-y center top;
}

#wrapper-bgtop {
		background: url(images/bg1_03.jpg) no-repeat center top;
}

#wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg1_04.jpg) repeat-y center bottom;
}

.homepage #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.homepage #wrapper-bgtop {
		background: url(images/bg3_01.jpg) no-repeat center top;
}

.homepage #wrapper-bgbtm {
		background: url(images/bg3_02.jpg) no-repeat center bottom;
}

.single #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.single #wrapper-bgtop {
		background: url(images/bg2_01.jpg) no-repeat center top;
}

.single #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg2_02.jpg) no-repeat center bottom;
}

.gallery #wrapper {
		background: url(images/bg4_03.jpg) repeat-y center top;
}

.gallery #wrapper-bgtop {
		background: url(images/bg4_01.jpg) no-repeat center top;
}

.gallery #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		padding-bottom: 60px;
		background: url(images/bg4_02.jpg) no-repeat center bottom;
}

.container {
		width: 900px;
		margin: 0px auto;
}

.clearfix {
		clear: both;
}

/** HEADER */

#header {
}

/** LOGO */

#logo {
		width: 300px;
		height: 174px;
}

.homepage #logo {
		width: 300px;
		height: 350px;
}

#logo h1, #logo p {
		margin: 0px;
		line-height: normal;
		text-indent: -9999em;
}

#logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 174px;
		background: url(images/homepage02.png) no-repeat left top;
}

.homepage #logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 350px;
		background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}		
		
}

/** MENU */

#menu {
		height: 45px;
		padding: 15px 0px 0px 40px;
}

#menu ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: normal;
}

#menu li {
		float: left;
		padding: 0px 30px;
}

#menu a {
		float: left;
		display: block;
		height: 23px;
		margin: 0px;
		padding: 6px 0px 0px 0px;
		line-height: 1;
		letter-spacing: -1px;
		text-decoration: none;
		text-transform: uppercase;
		text-shadow: #270000 -1px 2px 3px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
}

#menu a:hover {
		text-decoration: underline;
}

#menu .active {
		background: url(images/subpage1_02.jpg) repeat-x left top;
}

/** PAGE */

#page {
}

/** CONTENT */

#content {
}

.homepage #content {
		height: 290px;
		background: url(images/homepage022.jpg) no-repeat center top;
}

.gallery #content {
		padding: 0px 45px;
}

.single #content {
		padding: 100px;
}

/** SIDEBAR */

#sidebar {
}

/** FOOTER */

#footer-wrapper {
		height: 200px;
		background: url(images/bg1_06.jpg) no-repeat center top;
}

#footer {
		padding-top: 40px;
}

#footer p {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		line-height: 220%;
		color: #31343F;
}

#footer .column1 {
		float: left;
		width: 575px;
}

#footer .column2 {
		float: left;
		width: 50px;
		height: 82px;
		background: url(images/subpage1_03.jpg) no-repeat center top;
}

#footer .column3 {
		float: right;
		width: 275px;
		text-align: right;
}

#footer .copyright {
		padding-top: 5px;
		font-size: 10px;
		color: #252732;
}

#footer .copyright a {
		color: #252732;
}

.box-style {
}

.box-style .title {
		margin: 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 28px;
		font-weight: bold;
		color: #FFFFFF;
}

.box-style .byline {
		margin: -10px 0px 30px 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		color: #363945;
}

/*  GALLERY   */

#slideshow {
}

#gallery {
		position: relative;
		width: 804px;
		height: 337px;
		margin: 38px 0px 50px 0px;
}

#gallery .slide {
		width: 634px;
		height: 337px;
		position: absolute;
		left: 85px;
		top: 0px;
		background: url(images/gallery_01.jpg) no-repeat left top;
}

#gallery .output {
		position: absolute;
		top: 17px;
		left: 17px;
}

#gallery .border {
		width: 600px;
		height: 300px;
		position: absolute;
		top: 17px;
		left: 17px;
		background: url(images/gallery_borders.png) no-repeat left top;
}

#gallery .captions {
		width: 600px;
		height: 55px;
		position: absolute;
		left: 17px;
		top: 262px;
		background: url(images/gallery_caption.png) repeat left top;
		font: 12px Arial, Helvetica, sans-serif;
		text-transform: uppercase;
}

#gallery .captions p {
		margin: 0px;
		padding: 22px 0px 0px 0px;
		line-height: 1;
		text-shadow: #000000 0px 2px 0px;
}

#gallery .captions .left {
		float: left;
		padding-left: 20px;
		color: #FFFFFF;
}

#gallery .captions .right {
		float: right;
		padding-right: 20px;
		color: #777777;
}

#gallery .prev, #gallery .next {
		display: block;
		width: 68px;
		height: 106px;
		position: absolute;
		top: 116px;
		text-indent: -9999em;
}

#gallery .prev {
		left: 0px;
		background: url(images/gallery_02.jpg) no-repeat left top;
}

#gallery .next {
		right: 0px;
		background: url(images/gallery_03.jpg) no-repeat left top;
}

#gallery-thumbnails {
		width: 750px;
		margin-left: 30px;
}

#gallery-thumbnails ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		text-align: center;
}

#gallery-thumbnails li {
		float: left;
		display: block;
		width: 120px;
		height: 60px;
		padding: 15px;
		position: relative;
}

#gallery-thumbnails img {
}

#gallery-thumbnails .border {
		display: block;
		width: 130px;
		height: 70px;
		position: absolute;
		left: 10px;
		top: 10px;
		background: url(images/gallery_borders.png) no-repeat left bottom;
}

#gallery-thumbnails .active .border {
		background-position: -130px 100%;
}

I'm trying to get all the text lowercase on a page (client's wishes, not mine)

I thought it was working just fine until I tried IE6 on a PC.

I have a "text-transform: lowercase" in the body section of my css file.

Visit this URL to see what I mean: http://matthiaslot.com/calendar

On a mac, FF/Safari work great. On a PC, FF is great. IE however keeps things capitalized...

Any idea? I'm pretty sure IE supports this...not sure what's going on. Thanks.

Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with.

Here is my xhtml
And here is my css

I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly.

Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc.

Cheers

I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color.

here is the css for header and the text code.

Code:

#topsection {
       background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
       height: 90px;       
}

span.htext {
        font-color: #3300CC;
        font-size: 30px;
        text-decoration: none;
        letter-spacing: 1px;
        text-align: left middle;
}

anyone know how to fix this.

Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me.

The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this:

My History Website

The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written:

Code:

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

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>History Through The Ages: 1865-1900</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Ethan Mick">
	<!-- Date: 2008-05-21 -->
	<!-- I will eventually put this style sheet into its own external CSS file.-->
	<style type="text/css">
	<!--
	body {
		background:gray;
	}
	p {
		color:white;
		text-align:left;
		position:top;
		text-indent:1cm;
		vertical-align:top;
	}
	h2 {
		color:black;
		text-align:center;	
	}
	
	.sidebar {
		position:relative;
		
		
		
	}
	
	.ads {
		display:block;
		margin-left:auto;
		margin-right:auto;	
	}
	.imageright {float:right;}
	.imageleft {float:left;}

	-->
	</style>


</head>
<body>
	<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
	<table width="800" border="0">
		<tr>
			<td width="150" height="300">

				<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />

				<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>	
				
				
			
			</td>
			<td width="*">
				<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
				<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865.  Photograph by Thomas C. Roche">
				<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences.  Over half a million people were killed in the war.  The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>				
				<p>This time period set up the United States for many years to come.  During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before.  The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market.  The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
				<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union.  During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK.  The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th.  Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination.  To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
				<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
				<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba.  The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts.  The only interesting points of the war was the Philippines and Cuba.  In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause.  However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well.  In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>				
				<p>My family on both sides was in the United States at this point, but I am not positive where they were.  My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery.  Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois.  This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
								
				
			</td>
			
			
	</table>
	<img class="ads" src="file:///Users/Ethan/image_1.png">
	
	
</body>
</html>

I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me.

So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know.

Hi everyone,

this problem has been annoying me for some time now, and I have finally decided to address the issue. but it has only become more annoying!

I have a right sidebar on my site which for some reason always aligns any text in it centrally. i have scoured my css for anything that says text-align=centre, but everything is text-align=left

nothing is telling it to align centrally!

If anyone can spot the problem it would be a huge help!!

here is a link to the page i am referencing, onyahead.com/arsenal

if need be I can post the css, but there is a lot of it!

I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image.

Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post.

It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it.

Any help or guidance is appreciated.

Hi there,

I'm new to CSS, and I have stumbled myself to where I am now, but I have two issues which are causing me problems.

You can see the problem he

URL

http://img.photobucket.com/albums/v227/Fynci/ffsargh.jpg

The code I am using is:

Code:

<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Rack & Ruin records</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
   margin: 0px;
   padding: 0px;
   background-color: #B8C0D1;
   text-align: center;
   width: 780px;
}
#header {
  width: 100%;
}
#leftcol {
   float: left;
   width: 350px;
   height: 500px;
}
#biographyinfo {
   font-size: 80%;
   text-align: justify;
   padding-top: 10px;
}
#rightcol {
   float: left;
   width: 420px;
   height: 500px;
}
#biography {
   font-size: large;
   color: #000000;
   float: left;
   width: 300px;
   text-align: left;
}
#artistimage {
   height: 300px;
   width: 300px;
   float: left;
   padding-bottom: 10px;
}
#content {
   float: left;
   width: 30px;
   height: 500px;
}
#artistname {
   font-size: large;
   color: #000000;
   text-align: left;
   padding-bottom: 10px;
}
#footer {
  clear: both;
  width: 100%;
}
#albumart {
   float: left;
   height: 100px;
   width: 100px;
   padding-right: 5px;
}
#artistnews {
   font-size: 60%;
   text-align: justify;
   float: left;
   width: 330px;
}
#links {
   font-size: large;
   color: #000000;
   float: left;
   width: 300px;
   text-align: left;
   padding-top: 10px;
}
#artistnewsheader {
   font-size: large;
   text-align: left;
   width: 350px;
   padding-top: 10px;
   padding-bottom: 10px;
}
#Linksarea {
   font-size: 80%;
   text-align: justify;
   padding-top: 10px;
}
#albmuinfo {
   font-size: 60%;
   height: 100px;
   text-align: left;
   width: 350px;
}
#otherheader {
   font-size: large;
   text-align: left;
   width: 350px;
   padding-top: 10px;
   padding-bottom: 10px;
}
#othertext {
   font-size: 60%;
   text-align: justify;
   float: left;
   width: 330px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../new.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="header"><a href="../index.html"><img src="../images/rackandruinlogo.gif" alt="Rack & Ruin records" width="780" height="127" border="0" /></a></div>
  <div id="nav">
<ul>
      <li><a href="../news.php">News</a></li>
      <li><a href="../artists.php">Artists</a></li>
      <li><a href="../releasesfull.php">Releases</a></li>
      <li><a href="../live.php">Live</a></li>
      <li><a href="../links.php">Links</a></li>
      <li><a href="../about.php">About</a></li>
      <li><a href="../contact.php">Contact</a></li>
      <li><a href="http://www.myspace.com/rackandruinrecords" target="_blank">Myspace</a></li>
      <li><a href="http://www.rackandruinrecords.com/forum/" target="_blank">Forums</a></li>
      <li><a href="http://rsspect.com/rss/rackandruinrssfeed.xml" target="_blank">RSS</a></li>
    </ul>
  </div>
  <div id="artistname"><!-- TemplateBeginEditable name="Name" -->Artist<!-- TemplateEndEditable --></div>
<div id="leftcol">
  <div id="artistimage"><!-- TemplateBeginEditable name="Artistimage" --><img src="" alt="Artist" name="artistimage" width="300" height="300" class="imageborder" style="background-color: #B8C0D1"><!-- TemplateEndEditable --></div><div id="biography">Biography
    <div id="biographyinfo"><!-- TemplateBeginEditable name="biography" -->Content for  id "biographyinfo" Goes Here<!-- TemplateEndEditable --></div>
  </div>
 

  <div id="links">Links
    <div id="Linksarea"><!-- TemplateBeginEditable name="Linksarea" -->Content for  id "Linksarea" Goes Here<!-- TemplateEndEditable --></div>
  </div>
</div>
<!--Left section -->

<div id="rightcol">
  <div id="albumart"><!-- TemplateBeginEditable name="albumart1" --><img src="" alt="" name="albumart" width="100" height="100" style="background-color: #B8C0D1"><!-- TemplateEndEditable -->  </div>
 
  <div id="albmuinfo"><!-- TemplateBeginEditable name="albuminfo" -->Content for  id "albuminfo" Goes Here <!-- TemplateEndEditable --></div>
  <div id="gap"></div>
  <div id="artistnewsheader"><!-- TemplateBeginEditable name="artistnewsheader" -->Artist News<!-- TemplateEndEditable -->
    <div id="artistnews"><!-- TemplateBeginEditable name="artistnews" -->Content for  id "artistnews" Goes Hee<!-- TemplateEndEditable --></div>
  </div>
  <div id="gap"></div>
  <div id="otherheader"><!-- TemplateBeginEditable name="otherheader" -->Other<!-- TemplateEndEditable -->
    <div id="othertext"><!-- TemplateBeginEditable name="othertext" -->Other text<!-- TemplateEndEditable --></div>
</div><!--Right section -->
  <div id="gap"></div></div>
<div id="footer"><img src="../images/Base.gif" alt="Creative Commons" width="90" height="33" /><br />
  <span class="footertext">(c) 2008/2009 <a href="mailto:dean@rackandruinrecords.com">D.Birkett</a></span></div>
</body>
</html>

and the new.css file is:

Code:

body {
   background-color: #B8C0D1;
   text-align: center;
   width: 780px;
   margin-right: auto;
   margin-left: auto;
}
.dateinfotext {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: medium;
   color: #000000;
}

a:link {
   text-decoration: none;
   color: #000000;
}
#nav {
   background-color: #B8C0D1;
   text-align: center;
   padding: 10px;
   margin-bottom: 10px;
}
#nav ul {
   margin: 0px;
   padding: 0px;
}
#nav li {
   display: inline;
   list-style-type: none;
   margin-right: 10px;
   margin-left: 10px;
}
#nav a {
   color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   font-size: 85%;
}
#nav a:hover {
   color: #FFFFFF;
   font-size: 85%;
   text-decoration: none;
}


a:visited {
   color: #000000;
}
a:hover {
   color: #000000;
}
#gap2 {
   text-align: center;
   padding: 5px;
   clear: both;
}
.albuminfo {
   font-size: 60%;
}


a:active {
   color: #000000;
}
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: medium;
}
.imageborder {
   border-top-width: 2px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 2px;
   border-top-style: ridge;
   border-right-style: ridge;
   border-bottom-style: ridge;
   border-left-style: ridge;
}
#gap {
   text-align: center;
   padding: 5px;
   clear: both;
}
#footer {
   text-align: right;
   float: right;
   margin-right: 30px;
   margin-top: 30px;
   margin-bottom: 150px;
   vertical-align: bottom;
}
.texttop {
   vertical-align: text-top;
}

a {
   color: #000000;
   text-decoration: none;
}

.footertext {
   font-size: small;
}
.normaltext {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   text-decoration: none;
}

Any help or advice would be greatly appreciated!

How's it going,

If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image:

http://www.trophyfishingcharters.com/test/

Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off?

Thank you.

After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this?

I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>???

Here is a link

http://casadelmar.tmhdesign.com

Thanks.

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!