5 replies [Last post]
bayridge
bayridge's picture
Offline
newbie
Last seen: 3 years 17 weeks ago
Timezone: GMT-4
Joined: 2016-03-17
Posts: 4
Points: 5

This is not working for me and I'm going nuts. I can't see what I'm doing wrong. I'm using text-decoration and it is still underlining the link. The one I'm referring to is 'New stuff goes here' about halfway down on the left sidebar The others are not working either but I'm sure it all related. The code is below and the link is http://bayridgemarket.com.

I know the CSS is working because it has the green text and the font-family. I was using a link but put it on the page to see it easier. It's just the text-decoration that is not working. Complete code is below. I just started wroking on building this page so I know it's not fancy. Thanks.

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Bay Ridge Shopper</title>
<!-- <link href="css/styles.css" rel="stylesheet" type="text/css" />	-->
<style type="text/css">
 
	body html {
		margin:0;
		padding:0;
		color:#000;
		background:white;
	}
	#wrap {
		width:1125px;
		margin:0 auto;
		background:white;
		text-decoration: none;		
	}
 
	#sidebar {
		margin:0 0 0 22px;
		float:left;
		width:200px;
		background:#e2e2c8;
		text-decoration: none:
	}
 
	.list {
		font-family: Verdana, Geneva, sans-serif;
		font-size: 13px;
		text-decoration: none;
		color: green;
		padding-left: 10px;
    }
 
	#content {
		float:left;
		width:880px;
		padding:10px;
		background:white;
	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:#cc9;
	}
	#footer  {
		margin:0;
    }
 
	* html #footer {
		height:100px;
	}
 
	.menus {
		text-decoration: none;
		color: red;
    }
 
	.bgleftnav	{
	background: url(../grfx/bg_leftnav.jpg) repeat-y;
	}
 
 
</style>	
 
<!-- SLIDESHOW START-->	
	<SCRIPT LANGUAGE="JavaScript">
 
	<!-- Begin
	// Set slideShowSpeed (milliseconds)
	var slideShowSpeed = 3000;
	// Duration of crossfade (seconds)
	var crossFadeDuration = 1;
	// Specify the image files
	var Pic = new Array();
	// to add more images, just continue
	// the pattern, adding to the array below
 
	Pic[0] = '/grfx/3rdavenue.jpg'
	Pic[01] = '/grfx/3rdavenue01.jpg'
	Pic[02] = '/grfx/3rdavenue02.jpg'
	Pic[03] = '/grfx/3rdavenue03.jpg'
	Pic[04] = '/grfx/3rdavenue04.jpg'
	Pic[05] = '/grfx/4thavenue.jpg'
	Pic[06] = '/grfx/4thavenue02.jpg'
	Pic[07] = '/grfx/5thavenue.jpg'
	Pic[08] = '/grfx/5thavenue02.jpg'
	Pic[09] = '/grfx/5thavenue03.jpg'
	Pic[10] = '/grfx/5thavenue04.jpg'
	Pic[11] = '/grfx/86thstreet02.jpg'
	Pic[12] = '/grfx/86thstreet03.jpg'
	Pic[13] = '/grfx/86thstreet04.jpg'
	Pic[14] = '/grfx/3rdavenue.jpg'
 
	// do not edit anything below this line
	var t;
	var j = 0;
	var p = Pic.length;
	var preLoad = new Array();
	for (i = 0; i < p; i++) {
		preLoad[i] = new Image();
		preLoad[i].src = Pic[i];
		}
 
	function runSlideShow() {
		if (document.all) {
			document.images.SlideShow.style.filter="blendTrans(duration=2)";
			document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
			document.images.SlideShow.filters.blendTrans.Apply();
			}
		document.images.SlideShow.src = preLoad[j].src;
		if (document.all) {
			document.images.SlideShow.filters.blendTrans.Play();
			}
		j = j + 1;
		if (j > (p - 1)) j = 0;
		t = setTimeout('runSlideShow()', slideShowSpeed);
		}
	//  End -->
	</script>
<!-- SLIDESHOW END -->	
</head>
 
<body onLoad="runSlideShow()">
 
<div id="wrap">
	<img src="grfx/header1.jpg"><img src="grfx/header1a.jpg">
<!-- This is the left SIDEBAR.  ------ -->
	<div id="sidebar">
		<div class="menus">
		<a href="//bayridgemarketplace.com/classads.php">Main Page</a>
		<p>
		<a href="//bayridgemarketplace.com/classads.php">Contact Us</a>
		<p>
		<a href="//bayridgemarketplace.com/classads.php">Classifieds</a>
		<p>
		<a href="//bayridgemarketplace.com/info.php?pnum=3">Real Estate Listings</a>
		<p>		
		<a href="//bayridgemarketplace.com/directory.php">Local Events</a>
		<p>		
		<a href="//bayridgemarketplace.com/pet.php">Guestbook</a>
		<p>		
		<a href="//bayridgemarketplace.com/calendar2.php">Schools Alumni</a>
		<p>		 
		<a href="//bayridgemarketplace.com/info.php?pnum=4">Local History</a>
		<p>		
		<a href="//bayridgemarketplace.com/classifieds.php">Sudoku Game</a>
		<p>		 
		<a href="//bayridgemarketplace.com/faq.php">FAQ</a>
		<p>		
		<a href="//bayridgemarketplace.com/">includes directory</a>
		<p>		
			<div class="list">
			<a href="//bayridgemarketplace.com/">New stuff goes here</a>
			<p>
			More new stuff
			<p>
			More new stuff
			<p>
			More new stuff
			<p>
			More new stuff
			</div>
		</div>
	<!--  put new stuff above this -->
<img src="grfx/bg_leftnavfiller.jpg" border="0" /></td>
 
		</div><p>
 
<!--  This is the main CONTENT. ------------------------------ -->
	<div id="content">
		<table border="0" cellpadding="0" cellspacing="0">
			<tr>
			<td id="VU" height=150 width=150>
			<img src="/grfx/3rdavenue.jpg" name='SlideShow' width=880 height=250>
			</td>
			</tr>
		</table>
 
	Pictures above are of some of the many shopping areas in Bay Ridge, Brooklyn NY. Bay Ridge is a small area in the southwest corner of Brooklyn, New York. It is only a little over 2 square miles but has thousands of local businesses and services. Fort Hamilton is now considered to be part of Bay Ridge instead of the separate neighborhood it was considerd to be years ago.
 
		<table cellspacing="10">
		<tr>
		<td><a href="http://bayridge.net/bryellow/restaurantList.php"><p><img src="/grfx/restaurants.jpg"></a></td>
		<td><img src="/grfx/realtybrokers.jpg"><p><p>
			&nbsp;&nbsp;<img src="/grfx/classads.jpg"></td>
		<td><img src="/grfx/supermarket.jpg"></td>
		</tr>
		</table>
 
			Accountants<br>
			Accountants ( 49 ) <br>
			Air Conditioning Service ( 1 ) <br>
			Alarms - Home ( 3 ) <br>
			Animal Care ( 1 ) <br>
			Animal Emergency Service ( 1 ) <br>
			Antiques ( 3 ) <br>
			Appliances ( 3 ) <br>
			Architects ( 4 ) <br>
			Automotive ( 1 ) <br>
 
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Oops!

You haven't set style rules for the links. Also, a menu or a list is a list, e.g.

<div id="sidebar">
  <ul>
    <li>
      <a href="//bayridgemarketplace.com/classads.php">Main Page</a>
    </li>
 
    <li>
      <a href="//bayridgemarketplace.com/classads.php">Contact Us</a>
    </li>
 
    …
 
  </ul>

And the css,

#sidebar a {
    text-decoration: none;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bayridge
bayridge's picture
Offline
newbie
Last seen: 3 years 17 weeks ago
Timezone: GMT-4
Joined: 2016-03-17
Posts: 4
Points: 5

Not getting it

I'm still not getting it. I don't want it as a list, i should be able to just list a bunch of links without using

    and
  • and get no underlines. I've made it as simple as can be and it still doesn't work here's code now.

http://bayridgemarket.com/testcss.php Here it is in fiddle https://jsfiddle.net/0veq9srp/

<html> 
<head>
<title>Bay Ridge Shopper</title> 
<style>
	.abcd {
		margin:0 0 0 22px;
		float:left;
		width:200px;
		background:#e2e2c8;
	}
 
	.abcd a {
		text-decoration: none:
	}
 
</style>
</head>
<body>
<div class="abcd">
<a href="//bayridgemarket.com/testcss.php">Item number1<p>
<a href="//bayridgemarket.com/testcss.php">Item number 2<p>
</div>
</body>
</html>

bayridge
bayridge's picture
Offline
newbie
Last seen: 3 years 17 weeks ago
Timezone: GMT-4
Joined: 2016-03-17
Posts: 4
Points: 5

Works inline

I just tried putting 'style' inline and it works. like in :

<a  href="//bayridgemarket.com/testcss.php" style="text-decoration: none;">Item number1<p>

I can't understand what is going on with this css. This code couldn't be simpler.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

markup vs style

If you're marking up your content according to how it looks, you're doing it wrong. HTML markup is for marking the content according to what it is, not by how it looks. Simply style your list without list markers and without the padding used to indent the list. See CSS lists and counters.

Do not expect stuff to work for invalid markup or css. See the W3C html validator, and W3C css validator.

.abcd {
		margin:0 0 0 22px;
		float:left;
		width:200px;
		background:#e2e2c8;
	}
 
	.abcd a {
		text-decoration: none:  /*note the closing colon instead
                                          of a semi-colon, broken style rule*/
	}

This does, indeed, work for valid markup.

.abcd a {
  text-decoration: none;
  }

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bayridge
bayridge's picture
Offline
newbie
Last seen: 3 years 17 weeks ago
Timezone: GMT-4
Joined: 2016-03-17
Posts: 4
Points: 5

Finally working

Great, I got it working in small example but it didn't work in first example. I changed # to . and used CLASS instead of ID and then it worked. I'm a novice at this and appreciate you guys taking time to help us.

I've been on other board where the people there think they were born knowing stuff and treat newbies like crap. Hopefully I will get better and be able to return the favor to someone one day. As Arnold says, I'll be back.

Thanks.