Hi all -

i have been coding websites with tables since the year dot and am now trying to get all this CSS into my head.

I like using Divs - i see what css can do and i want to learn more - BUT i am getting so frustrated - I am a VERY good .net programmer - but simply dont get CSS. The differences between IE and FF are soooooooooooooooooooooooooo annoying -

ok my problem and it is so simple i am sure but i have spent the last 3 hours gettng nowhere with this! - wanting to kill someone at this point!

here is my code

/* START style */

body
{
  background-color: #CBD9F1;
  font-family:Arial;
}

div#body
{
  margin:auto;
  width:900px;
  height: 650px;
  border:1px solid #1E3E79;
}

img#banner
{
  display:block;
  margin:1px 1px 0px 1px;
}

img#topGallery
{
  display:block;
  margin:1px 1px 0px 1px;
}

img#footer
{
  display:block;
  margin:426px 1px 1px 1px;
}

div#navArea
{
  display:block;
  background-color: #1E3E79;
  margin:1px 1px 0px 1px;
  height:50px;
  width:898px;
}

#nav
{
  clear: both;
  margin:0px;
  display: block;
}

#nav ul
{
  clear:both;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#nav ul li { display: inline; }

#nav ul li a
{
  text-decoration: none;
  background-color: #036;
  color: #FFFFFF;
  font-weight:bold;
}

#nav ul li a:hover
{
  background-color: #FFFFFF;
  color: #1E3E79;
}

/* END style */

/* START html */

<div id=“body”>
      images/topBanner.gif
      images/home_Galllery.jpg
      <div id=“navArea”></div>
      <div id=“nav”>
        <ul >
          <li></li>
          <li>About Us</li>
          <li>Treatments</li>
          <li>Contact</li>
        </ul>
      </div>
      <div id=“content”></div>
      images/footer.jpg
  </div>

/*END html */

I have gotten this UL menu code from hacking / trial and error and various sources on the web

The problem is that i have a 1px gap under the <div id=“navArea”></div> in Firefox and i dont have it in Internet Explorer - Why is this does anyone know?

I want to position the menu on top of the div, but when i try to move it upwards, it goes behind the div - must i use z-index ?

many thanks in advanvce

Gilesb

try setting line-height to 0px;

i have some of the same issues. Im getting soo frustrated as well! My problem is that the second UL in my list is shifted over to the left in IE but perfectly centered in Firefox. Ive been trying to figure it out for the past week now! Goodluck

css changes:
#nav ul li { float:left;}

#nav ul li a
{
text-decoration: none;
background-color: #036;
color: #FFFFFF;
font-weight:bold;
display:block;
}

html changes:
<div id=“nav”>
<ul>
<li>About Us</li>
<li>Treatments</li>
<li>Contact</li>
</ul>
<div style=“clear:left;”></div>
</div>

Suggestions:
Look into Eric Meyer’s css reset and adapt it accordingly to your specific needs. You would then replace the inline style I listed in the html changes with the class for clearing floats

Ive been trying to figure it out for the past week now! Goodluck.
______________________________________
WP Tweet Bomb