FireFox css help

Discussion in 'CSS' started by dnahosting, Oct 25, 2006.

0
  1. #1
    After reading posts in here I know its a problem with IE and not Firefox, lol.
    It looks right in IE but links don't work in fx.
    w3c css validated except for some warnings for background colors.

    http://www.dna-hosting.com/temp/main.html

    any advice?
     
    dnahosting, Oct 25, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    The first step in building a css-positioned page is to group the major areas. Use the flow of the document rather than removing everything by using absolute positioning. That's usually a poor method, especially if you're new to css and don't fully understand the gotchas of AP.

    Get the groups in place before starting to style the elements in those groups. The groups are independent contexts and can be styled without affecting other groups.

    Start over with this skeleton layout: 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=UTF8" />

  <title></title>
  <style type="text/css">
  /*<![CDATA[*/

  html, body {
    margin: 0;
    padding: 0;
    }
    
#centerDoc { 
    width: 90%;
    margin: 0 auto;
    } 
    
#navcolumn {
    width: 210px;
    float: left;
    border-right: 1px solid #c6ec8c;
    }
    
#navcolumn h2,
#navcolumn h3 {
    font-size: 1.2em;
    border-bottom: 1px solid #c6ec8c;
    color: #800;
    background-color: white;
    }

#navigation {
    } 

#links { 
    } 
    
#content {
    margin-left: 220px;
    }
    
#footer {
    text-align: center;
    clear: both;
    }


  /*]]>*/
  </style>
</head>

<body>
  <div id="centerDoc">

  <div id="navcolumn">
  <div id="navigation">
    <h2>Select your Vice</h2>

    <ul>
      <li><a href="http://www.mysite.com/">Home</a></li>

      <li><a href="page2.html">2</a></li>

      <li><a href="page3.html">3</a></li>

      <li><a href="page4.html">4</a></li>

      <li><a href="page5.html">5</a></li>

      <li><a href="page6.html">6</a></li>

      <li><a href="page7.html">7</a></li>
    </ul>

    <ul>
      <li><a href="page8.html">lower link</a></li>
    </ul>
  </div>

  <div id="links">
    <h3>Partners</h3>

    <ul>
      <li><a href="http://www.partner1.com">p1</a></li>

      <li><a href="http://www.partner2.com">p2</a></li>

      <li><a href="http://www.partner3.com">p3</a></li>

      <li><a href="http://www.partner4.com">p4</a></li>

      <li><a href="http://www.partner5.com">p5</a></li>
    </ul>
  </div>
  </div> <!-- end navcolumn -->
  
  <div id="content">

    <h1>My Site</h1>

    <p>Welcome to mysite....</p>

    <h2>Recent Submissions &#8230;</h2>


    <p>This page was last updated on 10-25-2006</p>
  </div> <!-- end content -->

  <p id="footer">Powered by: <a href="http://www.scriptsite.com/"
         title="">This Script</a></p>

    </div> <!-- end centerDoc -->
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Oct 25, 2006 IP
  3. dnahosting

    dnahosting Active Member

    Messages:
    385
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #3
    thanks gary I will implement that into it. Yea I am new to css lol

    ps. and thanks for getting that "powered by " back to the bottom, lol
     
    dnahosting, Oct 25, 2006 IP