SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Andoya, Norway
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Field not showing

    Hi, I've come upon a little CSS-problem. Actually there are 2 problems. First of all I have a problem with my borders not showing up around my menu, second of all I have a problem in IE with one of my boxes moving.

    Link to the site

    Can anyone help me?
    Last edited by TiMMi-; Oct 3, 2004 at 03:47.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't see any borders in your code so I assume you were trying to put them around #menu. Just remember that when you add borders to an element then that will increase their width which may make them too big too fit in the allocated space.

    Also by declaring any element to be display:inline (except floats and the ie inline hack) the you effectively stop them from having widths and heights (except in ie5/5.5.).

    I assume this is what you were doing and barring any oversights ( as I seem to be making mistakes this morning lol) should behave like you want.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Siv.ing. fysmat @ NTNU</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
       margin: 0;
       padding: 0;
    }
    /* GENERELLE */
    /* commented backslash hack \*/ 
    html, body {height:100%;} 
    /* end hack */
    html, body {
       background-color: #F1F0F0;
       font-size: 100%;
     font-family: "Trebuchet MS", Arial, sans-serif;
     color: #000000;
     text-align: center;
    }
    h1 a {
      display: block;
      overflow: hidden;
      height: 0 !important;
      height /**/ : 100px;
    }
    #logo {
       display: inline;
       float: left;
       width: 250px;
       height: 100px;
       background: url(http://www.stud.ntnu.no/~kimjoarr/fy...ilder/logo.gif) no-repeat center;
    }
    h2 {
     font-size: 1.3em;
    }
    h3 {
     font-size: 1em;
    }
    p {
     font-size: 0.7em;
     text-align: justify;
    }
    p.date {
       color: #dadada;
       font-weight: bold;
       padding-top: 10px;
    }
    a {
     text-decoration: none;
    }
    a:hover {
     text-decoration: underline;
    }
    table {
     font-size: 0.7em;
     border: 0;
    }
    td {
     width: 100px;
    }
    td.beskrivelse {
     width: 130px;
    }
    td.link {
     width: 70px;
     font-weight: bold;
    }
    th {
     text-align: left;
     font-weight: bold;
     width: 100px;
    }
    /* DIV */
    div#container {
       min-height: 100%;
       height: auto;
       text-align: left;
       width: 701px;
       margin: 10px auto;
    }
    * html div#container {
       height:100%;
    }
    div#lefttop {
       width: 250px;
       float: left;
    }
    div#righttop {
       width: 440px;
       height: 210px;
       float: right;
       background-color: #ffffff;
       background-image: url(http://www.stud.ntnu.no/~kimjoarr/fy...r/righttop.gif);
       background-position: top;
       background-repeat: no-repeat;
    }
    div#header {
       width: 250px;
       height: 100px;
       overflow: hidden;
       background-color: #ffffff;
       background-image: url(http://www.stud.ntnu.no/~kimjoarr/fy...er/lefttop.gif);
       background-position: top;
       background-repeat: no-repeat;
       margin-bottom: 10px;
    }
    div.vspacer {
       width: 10px;
       height: 200px;
       /*margin: 5px;*/
       background-image: url(http://www.stud.ntnu.no/~kimjoarr/fy...r/prikkerv.gif);
       background-position: top;
       background-repeat: repeat-y;
       float: left;
    }
    .clearer {
       clear: both;
    }
    /* MENY */
    div#menu {
       overflow: hidden;
       width: 248px;
       height: 100px;
       background-color: #ffffff;
       background-image: url(http://www.stud.ntnu.no/~kimjoarr/fy...er/lefttop.gif);
       background-position: top;
       background-repeat: no-repeat;
       border:1px solid #000;
       float:left;
    }
    * html div#menu {width:250px;w\idth:248px}/* box model hack*/
    div#menu ul {
       width: 250px;
       height: 100px;
    }
    div#menu ul li {
       width: 50%;
       display: inline;
       float: left;
       list-style-type: none;
    }
    div#menu li a {
       font-size: 0.8em;
       color: #7292B4;
       display: block;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="lefttop"> 
    	<div id="header"> 
    	  <div id="logo">
    		<h1><a href="index.php">Fysmat</a></h1>
    	  </div>
    	</div>
    	<div id="menu"> 
    	  <ul>
    		<li><a href="index.php">Hovedside</a></li>
    		<li><a href="index.php">Profiler</a></li>
    		<li><a href="index.php">Fagene</a></li>
    		<li><a href="index.php">Forum</a></li>
    	  </ul>
    	</div>
      </div>
      <div class="vspacer"></div>
      <div id="righttop"> </div>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    (I've only used absolute addresses above so I could test locally so change them back to relative).

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •