CSS - Unwanted Underlined Text

I've got two questions of which one is to gather some opinions to help me decide what's best.

1) color notation in CSS:
Any recommendations as to what notation I should use?

examples:
color: rgb(255,234,0)
color: slateblue
color: #FF99CC
color: #F9C

Is there some recommendation here? I'm quite used to the long hex notation e.g. #FF99CC. Is the short notation also very much accepted? And should I be using those at all or should I prepare myself with a new site to switch to rgb().

2) text-decoration yes or no?
I was thinking the following:
A) when it's absolutely clear that some text presents a link, like e.g. in a menu or some newscolumn with a brief description and a bold title, then it's "okay" to set text-decoration: none. Maybe an underline or colorchange when hovering.
B) When it's not absolutely clear what's a link, like some word in a paragraph text, use underline or at least some other colour which is consistent over the website for being a link.

Also, with point B I was thinking of choosing:
A new link: text-decoration with color and text-decoration gone with hover, for a nice effect.

With a visited link:
I) text-decoration but normal paragraph color and again text-decoration gone when hovering OR...
II) no text-decoration, but still with that color and text-decoration when hovering.

It troubles me coz I can't make up my mind. Something keeps telling me that I should try to keep those text-decorations like with B-I and simply remove the colour, instead of relying on colour to indicate a link. So forget about B-II?! Ah, it was this site which works on my conscious not to rely on color for links: http://lists.w3.org/Archives/Public/www-style/2003Mar/att-0002/01-part#colorunits

Anybody got some comments or tips? And yes also some tip on the CSS I want things to be "user-friendly" enough, but this also means that I don't want text to be broken up too much. Some people even suggested that I should take ALL links out of the paragraph and simply mention them below the paragraph. All good points, but which way to go

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

Thanks!

Hi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts.

Here's the html/css:

Code:

<TD style='vertical-align:top; text-align:left;'>
  <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'>
  <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a>
  </div>
</TD>
</TD>

I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance!

Hello, im working on styling an unordered list into a file tree. So far, so good.


However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted.

Code:

/* -- FILE BROWSER -- */
			
			#browseFiles {
				padding: 0 0 0 20px;/* 000pix handles indent */
			}
			#browseFiles ul {
				font: 10px sans-serif;
				color: #000;
				list-style:none;
				margin: 0;
				padding: 0;				
			}
			#browseFiles li {
				/*display:compact;
				height: 18px;*/
				padding: 0;
				margin: 0;
			}
			#browseFiles .fileDiv {
				height: 18px;
				background: url(images/elbow2.gif) no-repeat scroll 0 0;
			}
			#browseFiles .fileLink {
				padding: 0 0 0 13px;
				margin: 3px 0 0 0;
			}
			#browseFiles .dir {
				list-style:none;
				font: bold 10px sans-serif;
				margin:0;
				padding:0;
			}
			#browseFiles .file {
				padding: 0 0 0 3px;
				margin:0;
			}

Heres the html

Code:

<div id='browseFiles'>
  <ul>
    <li class='file'>
      <div class='fileDiv'>
        <a class='fileLink'>
          <img class'fileIcon' src='images/file.gif' />
        </a>
      </div>
    </li>
    <li class='file'>
      <div class='fileDiv'>
        <a class='fileLink'>
          <img class'fileIcon' src='images/file.gif' />
        </a>
      </div>
    </li>
    <li class='file'>
      <div class='fileDiv'>
        <a class='fileLink'>
          <img class'fileIcon' src='images/file.gif' />
        </a>
      </div>
    </li> 
  </ul>
</div>

Thank you for the help in advanced.

I've read many forum replies to help getting rid of indents in li & ul items. None of the solutions are working for me. PLease help!

I have a footer divided into 3 columns. The text inside each column is left-aligned with no padding/margin except for my twitter feed, which shows up with a ~41px indent. I've tried every combination of padding & negative margin in the CSS, nothing works. Currently:

#twitter_update_list li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside}

#twitter_update_list ul li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside}

#twitter_div {padding:-41px 0 0 0; text-indent:0px; margin-left:0 0 0 0; overflow:hidden; display:inline; text-align:left;}

My website is marinaporter.blogspot.com

Thanks so much...

hello all,

I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine.

Can someone see what is happening...I hope so!

You can see the site at www.obsign.com

Here is the code that I am working with:

Code:

<body>


<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }

</script>
<table class="boundaries">
	<tr>
		<td class="vertical">

			<center>
			<div id="site">
			<div class="padding">
			<div class="navigation"><div class="navigation">
		
	<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg" 
	width="94" height="30" border="0" /></a>

</div>			
	


</div><div class="locations"><img alt="Cincinnati, Ohio  -  Cleveland, Ohio  -  Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg" 
	width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg" 
	width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg" 
	width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg" 
	width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg" 
	width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg" 
	width="533" height="22" border="0" /></div></div>
			<div class=""><h1>HOME&nbsp;BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
			</div>
			</div>
			</center>

		</td>
	</tr>
</table></body>
</body>

</html>

Code:

html {
	width:100%;
	height:100%;
}

body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
	background-repeat:repeat
}

img {
	margin-bottom: 0px;
}


#site {
	text-align:left;
    width:770px;
	padding:0px;
	border:0px;
	margin:0px;
	background:#ffffff;
	border:1px solid #CFC9C0;
}

table {
    font-size: 100%;
}

a.breadcrumb {
    color: #444444;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-decoration:none;
}

a.breadcrumb:visited {
    color: #888888;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-decoration:none;
}

ul {
	margin-bottom:5px;
	margin-top:5px;
	padding:0px;
	border:0px none;
	list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}

li {
	padding-top:3px;
}

.text_highlight {
	background: #FDFD00;
	color: #000000;
}

.clear {
	clear:both;
}

.gentext {
    font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
    color:#666666;
}

.gentext a {
    font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
    color:#666666;
}

input.liteoption	{
	background: #efefef;
	font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
	color:#444444;
	text-align:center;
	padding: 1px;
	border: 1px solid #dddddd;
	border-bottom: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
}

input.searchoption	{
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	background-color : #eeeeee;
	color : #000000;
	border: 1px solid #000000;
}

input.text {
	font: normal 105% Verdana, Helvetica, Arial, sans-serif;
	border: 1px solid #dddddd;
	border-top: 1px solid #aaaaaa;
	border-left: 1px solid #aaaaaa;
}

select {
	font: normal 100% Verdana, Helvetica, Arial, sans-serif;
	color: #000000;
}

.form_label {
	font:bold 100% Verdana, Helvetica, Arial, sans-serif;
	display:inline;
	color:#000000;
}


.search_text{
	font:normal 9px Verdana, Helvetica, Arial, sans-serif;
	color:#000000;
	border-top:#000000;
	border-left:#000000;
}

.boundaries {
	width:100%;
	height:99%;
}

.vertical {
	vertical-align:middle;
}

.padding{
	padding:16px;
}

.navigation{
    border:0px;
	margin:0px;
	float:left;
	width:376px;
}

.locations{
    border:0px;
	margin:0px;
	float:right;
	width:362px;
}

.logo{
	padding:10px 10px 10px 0px;
	float:left;
    border:0px;
	margin:0px;
}

.image {
	padding:10px 0px 10px 0px;
    border:0px;
	margin:0px;
}

.main_1{
	float:right;
	background:#EAE3DB;
    border:0px;
	white-space:nowrap;
	margin:0px;
	padding:0px;
}

Hi everyone.

I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE.

Here's my CSS code:
Code:

body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}

#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}

#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}

#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}

#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}

#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}

and my markup:

Code:

<div id="content">
<div id="header">
<img src="images/header.jpg" width="738" height="100" /></div>
<div id="nav">
<ul>
<li>Home</li>
<li>Register</li>
<li>Go Play!</li>
</ul>
</div>

I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list.

Does anyone have any ideas?

Thanks,

-Brian

Please look at
http://certified.tmhdesign.com/know.asp in FF

I have a div element with an id of "know" that is appearing under an h1 element with an id of know_header

In Firefox there is an unwanted top margin on the div#know (or a bottom margin on the H1 element).

I can't seem to understand why?

T

Hi there,

I'm building a page that requires 100% width & height, and absolutely NO margins on any side. I've applied the following inside my CSS:

body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: 000000;
}

For this to work in Firefox, I've also had to add the same code just above the head tag (inconvenient, but I don't mind).

My problem is the unwanted right margin that appears in IE. I have no idea how to remedy this.

You may view the page here. Thanks so much!

Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems.

However todays problem I thought I'd ask about.

There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either.

www.asticafe.com

Can anyone tell me why the right column is clearing the left images? It only happens in IE, not modern browsers like Firefox or Safari. What's causing it and how can I fix it? I've tried playing around with "clear:none" and "float:right" properties for the right column, but it just makes the problem worse.

Hi all,

I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited.

The test page is here

You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text.

Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color.

BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited.

Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this?

CSS file is here

Thanks!

Chris

EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks

Please take a look at this page:

http://www.4xp.net/template2/

I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF.

Here is my css

PHP Code:
 body {
    margin-top: 5px;
    margin-bottom: 5px;
    background-image: url('images/bg.jpg');
}

#header {
    width: 900px;
    height: 90px;
    padding: 0;
    margin: 0;
    text-align: left;
    background-image: url('images/header_bg.jpg');
}

img {
    padding: 0;
    margin: 0;
}

#menu {
    border-top: 1px solid #003366;
    border-bottom: 1px solid #003366;
    width: 100%;
    height: 25px;
    background: url('images/menu_bg.jpg');
    background-repeat: repeat-x;
    text-align: left;
}

.menulink {
    margin-left: 20px;
    height: 25px;
}

#page {
    width: 900px;
    border: 1px solid #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#status {
    width: 900px;
    height: 25px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #003333;
    margin: 0;
    padding: 0;
    border: 0;
} 





Any help would be very much appreciated. Thanks everyone!