SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot Pozor's Avatar
    Join Date
    Apr 2004
    Location
    Switzerland
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE works, firefox and nestscape not?

    Hi,

    i started with css a month ago. now i run in a problem.
    http://www.boelsterli.biz/test/e2000...9&content=list

    looks in IE ok, but in Firefox and Netscape not. In IE the divs in the center div
    are all wrapped up by the center div. In Firefox and Netscape the center div
    is to small and the divs inside are partially shown outside of thecenter div!

    why they show outside of the center div? very strange!


    Code:
    body {
    margin: 0;
    padding: 0;
    background: #FFE5BF;
    }
    #top {
    margin: 10px 10px 10px 10px;
    padding: 0 0 0 10px;
    background: #ccc;
    height: 75px;
    overflow: hidden;
    background: #FFD599;
    }
    #left {
    position: absolute;
    left: 10px;
    top: 90px;
    padding: 10px 5px 10px 5px;
    width: 145px;
    background: #FFE5BF;
    }
    #center {
    margin-left: 170px;
    margin-right: 10px;
    padding: 5px 0px 5px 0px;
    background: #CCC;
    }
    #footer {
    margin: 10px 10px;
    text-align: center;
    visibility: hidden;
    background: #FFCB80;
    }
    #top h1 {
    position: relative;
    top: -65px;
    left: 5px;
    font-size: 60px;
    display: inline;
    padding: 10px 0 0 0;
    }
    #top h2 {
    position: relative;
    font-size: 60px;
    display: inline;
    padding: 10px 0 0 0;
    color: #AAA;
    }
     
    /*Naviagation CSS*/
    /*#FFE5BF*/
    #navigation ul a{
    display: block; 
    width: 119px;
    font-weight: bold;
    overflow: hidden;
    }
    #navigation ul ul a{
    display: block; 
    width: 107px;
    }
    #navigation ul ul ul a{
    display: block; 
    width: 95px;
    }
    #navigation ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    }
    #navigation ul li { 
    border-bottom: 1px solid #FFE5BF; 
    } 
    #navigation ul a:link, 
    #navigation ul a:visited { 
    padding: 5px 5px 5px 0.5em; 
    border-left: 12px solid #BF8530; 
    border-right: 1px solid #BF8530;
    background-color: #FFCB80; 
    color: #BF8530; 
    text-decoration: none;
    } 
    #navigation ul a:hover { 
    background-color: #BF8530; 
    color: #FFFFFF; 
    border: 1px solid #FFE5BF;
    border-left: 12px solid #FFCB80;
    } 
    #navigation ul a:active{
    color: #FF0000;
    } 
    #navigation ul ul { 
    margin-left: 12px; 
    } 
    #navigation ul ul li { 
    border-bottom: 1px solid #BF8530;
    margin:0; 
    } 
    #navigation ul ul a:link, 
    #navigation ul ul a:visited { 
    padding: 5px 5px 5px 0.5em; 
    border-left: 12px solid #BF8530; 
    border-right: 1px solid #BF8530; 
    background-color: #FFE5BF; 
    color: #BF8530; 
    text-decoration: none;
    } 
    #navigation ul ul a:hover { 
    background-color: #BF8530; 
    color: #FFFFFF; 
    border: 1px solid #FFE5BF; 
    border-left: 12px solid #FFCB80;
    }
    #navigation ul ul a:active{
    color: #FF0000;
    } 
    /*third level navigation*/
    #navigation ul ul ul a:link, 
    #navigation ul ul ul a:visited { 
    padding: 5px 5px 5px 0.5em; 
    border-left: 12px solid #BF8530; 
    border-right: 1px solid #BF8530;
    background-color: #FFCB80; 
    color: #BF8530; 
    text-decoration: none;
    } 
    #navigation ul ul ul a:hover { 
    background-color: #BF8530; 
    color: #FFFFFF; 
    border: 1px solid #FFE5BF;
    border-left: 12px solid #FFCB80;
    } 
    #navigation ul ul ul a:active{
    color: #FF0000;
    }
    /*time design*/
    .generatetime{
    color: #FFE5BF;
    font-weight: bold;
    }
    /* Removes default top margin from left/right column paragraphs in Mozilla */
    div > p {
    margin-top: 0;
    }
    /*experimental for Adress design*/
    .inlinediv {
    width: 300px;
    margin: 5px;
    float:left;
    background: #D5D5D5;
    padding: 5px;
    border: 1px solid #AAA;
    }
    .inlinediv h2{
    display: inline;
    color: #666;
    font-size: 1em;
    }
    .displaylabel {
    /*color: white;*/
    font-weight: bold;
    float: left;
    width: 30%;
    font-size: 90%;
    }
    .displayvalue {
    /*color: browne;*/
    font-weight: bold;
    float: right;
    width: 65%;
    font-size: 90%;
    }
    .displaylabeltstamp {
    color: #AAA;
    font-weight: bold;
    font-size: 60%;
    float: left;
    width: 30%;
    margin: 10px 0 0 0;
    }
    .displayvaluetstamp {
    color: #AAA;
    font-weight: bold;
    font-size: 60%;
    float: right;
    width: 65%;
    margin: 10px 0 0 0;
    }
    .clearcontact{
    clear: both;
    }
    .note {
    font-weight: bold;
    float: left;
    }
    /*finish display design*/
    /*Input Contact design*/
    input {
    float: right;
    width: 60%;
    background: white;
    border: 1px solid #AAA;
    padding: 1px 2px 1px 3px;
    }
    textarea {
    float: right;
    width: 90%;
    height: 80px;
    background: white;
    border: 1px solid #AAA;
    padding: 1px 2px 1px 3px;
    }

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey.
    You need to clear the floats.

    html
    Code:
          <div class="inlinediv yellow">
            <h2>Note:&nbsp;Privat </h2>
            <span class="note">Lorem
    ipsum dolor sit amet, consectetuer adipiscing elit. Sed in lorem. Nunc
    aliquet nulla sit amet mi. Nunc sem. Quisque tristique diam et mauris.
    Mauris pulvinar.</span>
            <div class="clearcontact"></div>
            <span class="displaylabeltstamp">Last modified:</span>
            <span class="displayvaluetstamp">17:24 29.11.2004</span>
          </div>
    <div id="clearer"></div>
    css
    Code:
    #clearer {clear:both; height:1px; margin-top:-1px;}
    I hope this helps.

  3. #3
    SitePoint Zealot Pozor's Avatar
    Join Date
    Apr 2004
    Location
    Switzerland
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured out that it has to do with the float property. it seems that it
    displys it wrong??? (partially outside of the enclosing div)

    greez Pozor

  4. #4
    SitePoint Zealot Pozor's Avatar
    Join Date
    Apr 2004
    Location
    Switzerland
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    that doesn't help really, it has still the same problem.

    greez Pozor

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Zealot Pozor's Avatar
    Join Date
    Apr 2004
    Location
    Switzerland
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    so i got it right, thanks now it works fine.

    greez Pozor


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
  •