OK, here's the site, its on another sites server ATM..

http://www.dirtyalienproject.com/nteps

First problem, and the most confusing to me, is that ANY link i put in the body of the site has the characteristics of the menu.
i.e. look at the Google Map on the meetings page....

it shows up with the red and grey borders specified for the menu items.

it does that on text too


Second problem is that in Firefox and Safari, the search box doesnt float above the header, it moves down into it.


Anyone have any ideas? I took a CSS sheet from another site i did, and just modified it. I have gone back to the original several times, and these problems are still there.

Thanks for your help

I'm not exactly sure I can solve your first problem as I can't see the stylesheet. The only thing I can suggest is that maybe you haven't given the menu it's own class - you've just generalised the '<a>' tag.

As for your second problem, this is just something that happens between browsers. I suggest you duplicate the stylesheet, modify the parts in which there are problems on other browsers, and use a small piece of simple JavaScript to detect the users browser, and load the appropriate stylesheet.

If you view the page source of my website, http://www.raparcade.com, then you will see the JavaScript that you need.

Hope that helped

The reason your Google link shows up the way it does is because it's part of a div with a menu class (same with your Radisson link...by the way, the URL in that link has a typo in it.)

<div class="menu style4" id="centcol">
  <p align="center" class="style5">NORTH TEXAS ELECTROPHYSIOLOGY SOCIETY<br>
    <span class="style6">SCHEDULE OF EVENTS - 2007</span></p>
  <br>
    <br>
    <div align="left">
      <div id="rightcol">
        <div align="center">
          <p class="style7">Map it!</p>
          <p>&nbsp;</p>
          <p><a href="<A href="http://www.raddison.com">Radisson">http://www.raddison.com">Radisson Hotel</a></p>
          <p>6060 Hwy. 75 </p>
          <p>Dallas, TX 75206 </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p><a href="<A href="http://www.google.com/maps?q=6060+N+Central+Expy,+Dallas,+Texas+75206&ie=UTF8&z=16&ll=32.840709,-96.772664&spn=0.012764,0.027122&om=1&iwloc=addr"><img">http://www.google.com/maps?q=6060+N+Central+Expy,+Dallas,+Texas+75206&ie=UTF8&z=16&ll=32.840709,-96.772664&spn=0.012764,0.027122&om=1&iwloc=addr"><img src="images/map.jpg" alt="Map It!" width="160" height="198" border="0"></a><br>
            <br>
          Map by Google </p>

As far as your search box issue is concerned, you can define the width of the input box in CSS and that might help.

<input type="text" style="width:  250px;" />

One more thing - Javascript is not necessary to target IE vs. the other browsers for CSS. All you need are conditional comments to target the separate IE specific CSS files. The ONLY thing needed in those files are the 'fixes' needed to make IE toe the line.

Thanks for your help everyone.

I went through and cleaned up the code, and got rid of all the menu classes and span classes, and tried to implement everything via <h1> etc...

So the link issue is cleared up, though I want to keep my navigation text in white, while the links in the body in black, but Im not that worried about it at the moment.

However, defining the text box (at any size) in the CSS caused the box to float far right and not on the page at all, in all browsers.

So i took that back out.
IE doesnt have a problem.

heres my CSS:

/* ---------- components ---------- */
*	{
	margin:0;
	padding:0;
	}
a:link { color: #000000; text-decoration:underline;}
a:visited {color: #000000; text-decoration:underline;}
a:active { color: #000000; text-decoration:underline;}
a:hover { color: #666666; text-decoration: underline;}

body {
background:url(images/bg_repeat-x.jpg) repeat-x;
color: #000000;
font: 13px/1.4em Arial, Tahoma, Verdana, sans-serif;
}
 
h1	{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #871e20;
}

h2	{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #871e20;
}

h3	{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}

h4	{ 
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#666666;
}

/* ---------- divs ---------- */

/* <input type="text" style="width:  250px;" /> */

#container0 {
width: 820px;
margin: 0 auto;
position: relative;
background-position: top center;
}

#container1 {
width: 820px;
margin: 0 auto;
background:url(images/bg_repeat-y.jpg) repeat-y;
background-position: top center;
}

#searchimage {
width: 226px;
height: 40px;
background:url(images/search_header.jpg);
float:right;
background-position:right;
}

#searchbox {
width: 190px;
height: 20px;
float:right;
padding-top: 10px;
}

#header	{
width: 820px;
height: 235px;
background: #000000 url(images/header.jpg);
padding-bottom:0;
}

#leftcol	{
 width:150px; 
 float:left; 
 position:relative; 
 padding-top: 5px;
 padding-left: 5px;
}

 #centcol	{
 width:625px; 
 float:left; 
 position:relative; 
 padding-left: 15px;
}
 
#rightcol	{
 width:150px;  
 float:right; 
 position:relative; 
 padding-right: 13px;
 border-left-style:double;
 border-left-color:#CC0000;
 border-left-width:medium;
 padding-left: 15px;
} 

#footer	{
width: 820px;
height: 20px;
background:url(images/footer.jpg);
clear: both;
}

/* ---------- nav ---------- */

.menu {
list-style-type: none;
margin: 0;
padding-left: 14px;
}

.menu a {
  display: block;
  width: 123px;
  height: 22px;
  font-family: geneva,helvetica,sans-serif;
  font-size: 16px;
  text-align: center;
  padding-left: 5px;
  padding-top: 0px;
  color: #000000;
  margin-top: 0px;
  text-decoration: none
  border-top: 4px solid #b1b7be;
  border-bottom: 4px solid #b1b7be;
  background-color: #871e20; 
}

.menu a:link, .menu a:visited {
 text-decoration: underline;
}
.menu a:hover {
 background-color: #a93b3d;
 text-decoration: underline;
}

and heres the code for one of the simple pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>North Texas Electrophysiology Society - Our Sponsors</title>
<meta name="description" content="Sponsors of NTEPS, the North Texas Electrophysiology Society, based in Dallas, Texas at Parkland hospital.">
<meta name="keywords" content="sponsors, NTEPS, north, texas, electrophysiology, electrophysics, society, parkland, hospital">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="nteps.css" />

</head>

<body>
<div id="container0">
<div id="searchimage">
<div id="searchbox">
<input name="search" type="text" value="search here" size="23" maxlength="35"><input type="image" src="images/gobutton.gif" alt="Submit" border="0">
</div></div>
<div id="container1">
<div id="header"></div>
<div id="leftcol"><br>
<img src="images/button_top.jpg" width="156" height="77">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="members.htm">Our Members </a></li>
<li><a href="sponsors.htm">Our Sponsors </a></li>
<li><a href="meetings.htm">Our Meetings </a></li>
</ul>
<img src="images/button_bottom.jpg">
</div>
<div id="centcol">
  <p align="center">NORTH TEXAS ELECTROPHYSIOLOGY SOCIETY</p>
  <br>
    <br>
    <div align="left">
    Founded in 1990, the North Texas Electrophysiology Society is a group of physicians, nurses, technicians and industry representatives from the North Texas region brought together by a common interest in the diagnosis and management of cardiac arrhythmias.  
    
    Our Mission is to provide continued education in all aspects of cardiac arrhythmias accomplished through a 
    lectures series given by renowned national figures in Pacing and Electrophysiology.  </div>
</div>

<div id="footer"> 
<img src="images/spacer.gif" width="8" height="8">copyright &copy; 2007 NTEPS</div>
</div>	
</div>
<div align="center">site by: <a href="mailto:colin_r2001@sbcglobal.net">Croix Media Solutions</a></div>
</body>
</html>

This is going to sound like a dumb question, but the answer to your search box question may be stunningly simple: what if you took it out? If your site is only going to be 4 static pages, what exactly does a search function accomplish in this instance?

As far as your navigation links are concerned, in your case you can get away with this:

ul.menu a {
   color:  #FFFFFF;
}

The reason this will work is because it will only affect unordered lists with the menu class. It will have NO effect on divs or anything else with the same class assigned.

Mind you, if you only want a specific area affected, you may want to assign an id to that unordered list and go from there. Something like.

ul#main-menu a {
   color:  #FFFFFF;
}
...
...
...
<ul id="main-menu">

well, the site is going to be much larger...
There are 50+ doctors that will each have their own page, plus a few more static pages to add

I guess I can move the search box somewhere else if this isnt going to be possible.

Now, as far as the links go, this is the portion that is affecting my links sitewide:

a:link { color: #000000; text-decoration:underline;}
a:visited {color: #000000; text-decoration:underline;}
a:active { color: #000000; text-decoration:underline;}
a:hover { color: #666666; text-decoration: underline;}

I would think that this:

ul.menu a {
display: block;
width: 123px;
height: 22px;
font-family: geneva,helvetica,sans-serif;
font-size: 16px;
text-align: center;
padding-left: 5px;
padding-top: 0px;
color: #FFFFFF;
margin-top: 0px;
text-decoration: none
border-top: 4px solid #b1b7be;
border-bottom: 4px solid #b1b7be;
background-color: #871e20;
}

would override the links color for the menu, but it doesnt

and if i change the link color in the first part to white, then links in the body are white and thus invisible.

Hmmm. That should have worked.

Try ul.menu li a instead.

Also, on your site, the link colour for the menu section is set to #000000 and you're missing a semi-colon after text-decoration: none;

Pseudo classes must also be defined is a specific order:
Link, Visited, Hover, Active -- just remember LoVeHAte