Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Works in FF, IE bugs extremely weird

    I'm creating a design for a website and it works entirely in FF. Now in IE i have an extremely weird bug where the navigation is around 200 - 300 px high, even though the css states it should only be 23 px.

    Here's my css:

    Code:
    html,body
    {
        height: 100%;
    }
    
    body
    {
        background-image: url('http://www.tiniergoodies.com/v2/_img/bg.png');
        background-repeat: repeat-x;
        margin: 0;
        padding: 0;
    }
    
    img
    {
        border-style: none;
    }
    
    a
    {
       text-decoration: none;
       color: #9e9997;
       font-weight: bold;
    }
    
    a:active, a:active *
    {
      outline: none !important;
      -moz-outline-style: none !important;
    }
    
    a:focus, a:focus *
    {
      outline: none !important;
      -moz-outline-style: none !important;
    }
    
    #header
    {
        height: 195px;
        width: 962px;
    
        margin: auto;
        background-image: url('http://www.tiniergoodies.com/v2/_img/header.png');
        background-position: top center;
        background-repeat: none;
    }
    
    #logo
    {
        height: 46px;
        width: 280px;
        padding-top: 20px;
        padding-left: 10px;
    }
    
    #content
    {
      width: 960px;
      background-color: #ffffff;
      margin: auto;
      height: 100%;
      border-left: 1px solid #e4914f;
      border-right: 1px solid #e4914f;
    }
    
    #nav
    {
      width: 947px;
      height: 27px;
      margin: auto;
      background-image: url('http://www.tiniergoodies.com/v2/_img/nav.png');
      background-repeat: no-repeat;
    }
    
    #undernav
    {
        height: 16px;
        font-family: Arial;
        font-size: 14px;
        margin-left: 16px;
        margin-top: 8px;
    }
    
    #selfyBox
    {
      float: left;
      width: 233px;
      margin-left: 15px;
      margin-top: 15px;
    }
    
    #selfyHeader
    {
      height: 24px;
      background-image: url('http://www.tiniergoodies.com/v2/_img/selfy_bar.png');
      background-repeat: no-repeat;
      text-align: center;
      font-family: Arial;
      font-weight: bold;
      color: #58694b;
      font-size: 15px;
      line-height: 23px;
    }
    
    #selfyContent
    {
        text-align: center;
        background-color: #ffffff;
        border-left: 1px solid #6f9815;
        border-right: 1px solid #6f9815;
    }
    
    #selfyContent embed
    {
        padding-top: 11px;
    }
    
    #selfyBot
    {
        height: 11px;
        background-image: url('http://www.tiniergoodies.com/v2/_img/selfyBot.png');
        background-repeat: no-repeat;
    }
    
    #itemBox
    {
      width: 441px;
      margin-left: 268px;
      margin-top: 15px;
    }
    
    #itemHeader
    {
      height: 24px;
      background-image: url('http://www.tiniergoodies.com/v2/_img/item_bar.png');
      background-repeat: no-repeat;
      text-align: center;
      font-family: Arial;
      font-weight: bold;
      color: #0a3142;
      font-size: 15px;
      line-height: 23px;
    }
    
    #itemContent
    {
        padding: 5px;
        background-color: #ffffff;
        border-left: 1px solid #1e5266;
        border-right: 1px solid #1e5266;
    }
    
    #itemBot
    {
        height: 12px;
        background-image: url('http://www.tiniergoodies.com/v2/_img/itemBot.png');
        background-repeat: no-repeat;
    }
    
    #selectBox
    {
        width: 235px;
        margin-top: 35px;
        float: right;
        font-family: Arial;
        color: #615B5A;
        font-size: 14px;
        line-height: 22px;
    }
    
    #selectBox li
    {
        list-style-type: none;
    }
    
    #selectBox ul
    {
        padding: 0;
        margin: 0;
        margin-left: 5px;
    }
    
    #selectBox span.minus
    {
        background-image: url('http://www.tiniergoodies.com/v2/_img/bullet_minus.png');
        background-repeat: no-repeat;
        padding-left: 20px;
    }
    
    #selectBox span.plus
    {
        background-image: url('http://www.tiniergoodies.com/v2/_img/bullet_plus.png');
        background-repeat: no-repeat;
    }
    
    #divider
    {
      width: 960px;
      height: 1px;
    }
    
    .navlist
    {
        vertical-align: middle;
        padding: 0;
        margin: 0;
        padding-top: 1px;
        padding-left: 1px;
    }
    
    .navlist li
    {
      display: inline;
      list-style-type: none;
      padding-right: 0px;
    }
    And my html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title></title>
      <link href='_inc/_css/core.css' rel='stylesheet' type='text/css' />
    </head>
    
    <body>
        <div id="header">
            <div id="logo"><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/logo.png"</a></div>
        </div>
        <div id="content">
            <div id="nav">
                <ul class="navlist">
                    <li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/home.png" /></a></li>
                    <li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
                    <li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/activity.png" /></a></li>
                    <li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
                    <li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/dream.png" /></a></li>
                    <li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
                    <li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/contact.png" /></a></li>
                    <li><img src="http://www.tiniergoodies.com/v2/_img/divider.png" /></li>
                </ul>
            </div>
            <div id="undernav">
                <ul class="navlist">
                    <li><a href="#"><img src="http://www.tiniergoodies.com/v2/_img/house.png" /></a></li>
                    <li><img src="http://www.tiniergoodies.com/v2/_img/arrow_right.png" /></li>
                    <li><a href="#">Dream Selfy</a></li>
                </ul>
            </div>
            <div id="selfyBox">
                <div id="selfyHeader">
                    <span>Selfy</span>
                </div>
                <div id="selfyContent">
                    <object width="231" height="300" align="middle" id="avatar" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="always" name="allowScriptAccess"><param value="http://image2.tinierme.com/selfy.swf?account_id=6037892&amp;bgFlg=1&amp;pBaseURL=http%3A%2F%2Fimg.tinierme.com%2F" name="movie">
                        <param value="false" name="menu">
                        <param value="high" name="quality">
                        <param value="#ffffff" name="bgcolor">
                        <param value="transparent" name="wmode">
                        <embed width="231" height="300" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="avatar" bgcolor="#ffffff" quality="high" menu="false" src="http://image2.tinierme.com/selfy.swf?account_id=6037892&amp;bgFlg=1&amp;pBaseURL=http%3A%2F%2Fimg.tinierme.com%2F">
                    </object>
                </div>
                <div id="selfyBot"></div>
            </div>
            <div id="selectBox">
                <span class="minus">Types</span>
                <ul id="types">
        			<li>
        				<input type="checkbox" name="type" value="hair">Hairstyles
        			</li>
        			<li>
        				<input type="checkbox" checked="" name="type" value="face">Facial Features
        			</li>
        			<li>
        				<input type="checkbox" name="type" value="top">Shirts / Blouses
        			</li>
        			<li>
        				<input type="checkbox" name="type" value="coat">Jackets / Coats
        			</li>
        			<li>
        				<input type="checkbox" name="type" value="bottom">Trousers / Skirts
        			</li>
        			<li>
        				<input type="checkbox" name="type" value="shoe">Footwear
        			</li>
    		    </ul>
                <span class="minus">Accessories</span>
                <ul id="acces">
        			<li><input type="checkbox" name="type" value="hat">Bandana / Headgear</li>
        			<li><input type="checkbox" name="type" value="accef">Glasses</li>
        			<li><input type="checkbox" name="type" value="accen">Necklaces</li>
        			<li><input type="checkbox" name="type" value="acceh">Hand</li>
        			<li><input type="checkbox" name="type" value="back">Back</li>
        			<li><input type="checkbox" name="type" value="bg">Background</li>
    			</ul>
            </div>
            <div id="itemBox">
                <div id="itemHeader">
                    items
                </div>
                <div id="itemContent">
                    Content
                </div>
                <div id="itemBot"></div>
            </div>
    
            <div id="divider">a</div>
    
        </div>
    </body>
    </html>
    And here's the page where the bug happens:

    http://www.tiniergoodies.com/v2/


    Any idea what's going on? I'm lost here.
    Last edited by Collussus; 08-30-2010 at 04:58 PM.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    remove height:100% from #content, add "overflow:auto;"

    and see if that fixes it

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    remove height:100% from #content, add "overflow:auto;"

    and see if that fixes it
    That fixed the height issue, but now we somehow have 2 navigation bars..


  •  

    Posting Permissions

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