SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css browsers show different...

    Hi this is probably something that is mentioned a lot .. but even with reading some of the tutorials I'm stuck ..

    I have some HTML and css below..

    The problem is that it works in IE but in Firefox it only works in the first box but after that the word "details" gets lower and lower and shifts out of the box..

    I should know better but I'm stuck and can't find it anymore....

    thanks
    peanuts

    HTML Code:
    <div class="box" >
    <div class="legend">title1</div>
    <div class="boxcontent">
    <div class="floatright">
    <a href="somewhere">
    <img src="someimg"   border=0 class="product_img"  />
           <br /> Details</a></div>
    <p class="product_description">description</p>
        </div></div>
     
    <div class="box" >
    <div class="legend">title2</div>
    <div class="boxcontent">
    <div class="floatright">
    <a href="somewhere">
    <img src="someimg"   border=0 class="product_img"  />
           <br /> Details</a></div>
    <p class="product_description">description</p>
        </div></div>
     
     
    and ofcourse some css to do layout and styling

    Code:
                .box {
                font-family:verdana,sans-serif;
                border-width:1px; 
                border-style:solid; 
                border-color:white;
                padding: 0px 10px 10px 10px;
                margin-top:15px;
                margin-right:10px;
                font-size: 14px;
                }
                .box h1{
                margin-top:25px;
                margin-bottom:15px;
                font-size: 12px;
                font-family:verdana,sans-serif;
                font-weight:bold;
     
                }
     
                .product_detail {
                 font-family:verdana,sans-serif;
                 font-size:10px;
                 padding:0px;
                 margin-top: 1px; 
                 margin-left: 0px; 
                 margin-right: 0px; 
                 margin-bottom: 0px;
                }
                .product_description {
                    font-family:verdana,sans-serif;
                 font-size:10px;
                 padding:10px;
                 margin-top: 0px; 
                 margin-left: 0px; 
                 margin-right: 0px; 
                 margin-bottom: 0px;
                }
     
                .product_img {
                float: right;
       font-family:verdana,sans-serif;
                font-size:60&#37;;
                width: 90px;
       margin: 0 0 10px 10px;
       background-color: transparent;
       padding: 10px;
       }
    .floatright
    {
    float: right;
    width:20%;
    background-color: transparent;
    display:block;
    font-size:60%;
    color:inherit;
    font-family:verdana,sans-serif;
    text-align:center;
    }
     
     
                .legend {
                font-family:verdana,sans-serif;
                display:inline;
                padding:5px;
                font-weight:normal;
                font-size:13px;
                height:20px;
                position:relative;
                z-index:101;top:-12px;
                background-color:#fff;
                color:inherit;
                }
     
                .boxcontent
                {
                font-family:verdana,sans-serif;
     
                min-height:100px;
         height:auto !important;
         height:0px;
                }
    the neigbours (free) WIFI makes it just a little more fun

  2. #2
    SitePoint Zealot loathsome's Avatar
    Join Date
    Jul 2008
    Location
    Norway
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link we could check out?
    Time you enjoy wasting is not wasted time.

    Loathsome Systems

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You aren't clearing your floats :
    Code:
    .boxcontent {
    	font-family:verdana,sans-serif;
    	min-height:100px;
    	overflow: hidden;
    }
    * html .boxcontent {
    	height: 100px;
    	overflow: visible;
    }

  4. #4
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi .. sorry no link .. it's on my test environment

    I knew I was forgetting something.. THanks Centauri...
    the neigbours (free) WIFI makes it just a little more fun


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
  •