Topic: Wrong box pos in FF!

Hello!

I have a little problem with my forum.

If you go to http://www.transwarp.se/forum/ with IE it works alright.
If you go there with FireFox you will se that the news box is melted together with the menu box.

What can i do to fix this??

Here is my main.tpl:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<style type="text/css">
    #left {
        width: 120px;
        float: left;
    }
    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }
</style>
</head>
<body>
 
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
 
<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>
 
<div id="container">
    <div id="main">
    
        <pun_announcement>
    
        <pun_main>
        
    </div>    
</div>
 
<div id="left">    
<div class="block">
        <h2 class="block2"><span>Whos Online?</span></h2>
        <div class="box">
        <pun_online>
        </div>
</div>

<div id="left">    
    <div class="block">
        <h2><span>Menu</span></h2>
        <div class="box">
        <pun_sidelinks>            
        </div>
    </div>
    </div>

    <div class="block">
        <h2 class="block2"><span>News</span></h2>
        <div class="box">
            <div class="inbox">
            More news here soon.       
            </div>
        </div>
    </div>
    <div class="block">
        <h2 class="block2"><span>More Links</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Link 1</a></li>
                    <li><a href="index.php">Link 2</a></li>
                    <li><a href="index.php">Link 3</a></li>
                    <li><a href="index.php">Link 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
</div>
 
<div class="clearer"></div>
 
<pun_footer>
 
</div>
</div>
 
</body>
</html>

Re: Wrong box pos in FF!

Try putting a <br /> after the last </div> of the news section.

Re: Wrong box pos in FF!

It didn't work. sad
I tried to put a <br /> before too but it did not work.

Re: Wrong box pos in FF!

Try this as main.tpl:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<style type="text/css">
    #left {
        width: 120px;
        float: left;
    }
    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }
</style>
</head>
<body>
 
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
 
<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>
 
<div id="container">
    <div id="main">
    
        <pun_announcement>
    
        <pun_main>
        
    </div>    
</div>
 
<div id="left">    
    <div class="block">
        <h2 class="block2"><span>Whos Online?</span></h2>
        <div class="box">
            <pun_online>
        </div>
    </div>

    <div class="block">
        <h2><span>Menu</span></h2>
            <div class="box">
                <pun_sidelinks>            
            </div>
    </div>

    <div class="block">
        <h2 class="block2"><span>News</span></h2>
        <div class="box">
            <div class="inbox">
            More news here soon.       
            </div>
        </div>
    </div>
    <div class="block">
        <h2 class="block2"><span>More Links</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Link 1</a></li>
                    <li><a href="index.php">Link 2</a></li>
                    <li><a href="index.php">Link 3</a></li>
                    <li><a href="index.php">Link 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
</div>
 
<div class="clearer"></div>
 
<pun_footer>
 
</div>
</div>
 
</body>
</html>

Re: Wrong box pos in FF!

That worked. Thanks elbekko. smile

Re: Wrong box pos in FF!

The problem is you use the div with id "left" inside another box with id "left". The left-box is for the whole sidebar on the left, not for each element smile