S@m

Hi Chocolate 570, Thanks for your help. I get an "invalid value" for that.I am starting to wonder if I should just not worry about it.

I am running my css through the validator, and it says I am missing the background color for my a's and a hover etc.I thought that the default value for background color was transparent?So I enter:

background-color: transparent;

Still throws a warning. Should I just not worry about it?Thank you!

Well, I got this to work: css:

.searchform { 	margin: 0; 	padding: 5px 0px 0px 0px;	display: inline;	float: right;	}

html:

        <p class="headerNav"><a href="#">Home</a> | <a href="#">Locations</a>           | <a href="#">Contact Us</a> | <a href="#">Careers</a>| <a href="#">Français</a></p>    <br/>          <form action="/canada/en/search/process.do" method="get" class="searchform">    <img src="../images/caflag.gif" alt="Canada Flag"/>          <input name="queryString" type="text" id="queryString" value="Search" style="width:133px;" maxlength="133"/>          <input type="image" name="go" src="../images/search-button.gif" alt="go"/>          <input type="hidden" name="category"/></form>

Is is a "good idea" to put the image inside the form like that?I don't have the form inside a "p" tag, everything seems to work fine and checks out in validation as well. Thank you for your time Skemcin

I have a search form within a "p class". I need to keep the search field and the search button all on one line so I found this bit of code to keep it from inserting a line break:css:

.searchform { 	margin: 0; 	padding: 0;	display: inline; 	}

Then my html:

        <p class="headerNav"><a href="#">Home</a> | <a href="#">Locations</a>           | <a href="#">Contact Us</a> | <a href="#">Careers</a>| <a href="#">Français</a>           <br/>          <br/>          <img src="../images/caflag.gif" alt="Canada Flag"/>           <!--          <form action="/canada/en/search/process.do" method="get" class="searchform">          -->          <input name="queryString" type="text" id="queryString" value="Search" size="13" maxlength="50"/>          <input type="image" name="go" src="../images/search-button.gif" alt="go"/>          <input type="hidden" name="category"/></form>          </p>

That works fine, but when I validate the html, it doesn't like the fact that I have a class on the form inside of the p class. Is there a better way to do this?If I remove the class on the form, it puts in a line break. :)Thank you for your time and help!

Hey thanks Dan!That didn't work, but it gave me other ideas to try and I got somthing that works. I changed the class to an "id" and changed the css a little...

#captionLink {	font-family: arial, helvetica, sans-serif;	font-size: 12px;	font-weight: bold;	color: #ffcc66;	}	#captionLink a {	color: #ffcc66;	text-decoration: none;	}#captionLink a:hover {	color: #ffcc66;	text-decoration: underline;	}

Then I just did a span id="" type thing.If that is a bad idea, let me know.Thanks for your help!!

Well, I need the ">" to be in the same class. (color, style, weight etc)That's why I kept them all in one span class then just gave the "a" a separate class.If I should do it another way, I'm all for it. I'm somewhat of a rookie if you haven't noticed. :)Thanks for your time Dan!

Try this LINK out.I'ts in German, but you should be able to get what you are looking for.

html:

<span class="captionLink">> <a href="#">Learn More</a></span>

css:

.captionLink {	font-family: arial, helvetica, sans-serif;	font-size: 12px;	font-weight: bold;	color: #ffcc66;	}	.captionLink a {	font-family: arial, helvetica, sans-serif;	font-size: 12px;	font-weight: bold;	color: #ffcc66;	}	.captionLink a:hover {	font-family: arial, helvetica, sans-serif;	font-size: 12px;	font-weight: bold;	color: #ffcc66;	text-decoration: underline;	}

FF works fine. It has an orage text with orange underline on rollover.IE keeps the default rollover colors that I set earlier in the css file.However, if I make the font a different size, both browsers pick that up. It's just the font color that IE won't see. Is there a trick to fix that?Thank you much for your time and help!!

Hello everyone,I am "fairly" new to working with css, so I won't try to be too difficult.I hope this is in the correct spot. If not, could an admin please move it?I want to build a page like THIS.Mainly the image and orange bars.I have the image and dark orange bar all set up:HTML:

    <div id="contentHeader">    <span class"imageBar"><img src="../images/handshake.jpg" alt="Handshake"/></span>    </div>

I just don't know how to get the smaller (light) orange bars in there.I can get them to be right under the image, but never in line like I want.I tried using display: inline, but that wasn't the winner either. I can post my css for that code if you need.I am kind of stuck. Any suggestions would be great.Thank you for your time!