No replies
Sergiones
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2009-01-20
Posts: 1
Points: 0

Hi all. Please, I'm burning my head trying to solve this, can anyone help?

When I run the aspnet page (masterpage) in fullscreen (1280x800) it works fine. When I resize ie7 width to 1024 works fine too, the float divs works, everything goes fine. But if I resize the ie to 500, the ie horizontal scrollbar appears and moving the scrollbar to the right, the overflow content disappear, a blank area is showed. I just want to scroll the screen to the right and see the rest of my page content. I've tried all options, overflow, position in all divs, but nothing seems to work. I'm really freaking out!!

Thanks!!

Note: I changed the background-image in code to background-color for divs recognition.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
<script type="text/javascript">
</script>
</head>
<body style="margin: 0px; padding: 0px; border: 0px">
    <form id="form1" runat="server">
    <div id="Tudo" style="width: 100%; font-family: Verdana; font-size: 15px; color: #ffffff">
        <div id="BarraTop" style="width: 100%; height: 45px; background-color: Beige ; color: #000000">This is a header
            <div id="TextoBarraTop" style="float: right; margin-right: 20px; color: #000000; margin-top: 19px; font-size: 15px">
            </div>
        </div>
        <div id="ImagensTop" style="width: 100%; height: 155px; background-color: Aquamarine  ">
            <div id="OrLogo" style="width: 261px; height: 108px; background-color: AliceBlue ; float: right; margin-right: 30px; margin-top: 23px; color: #000000">
                This is a floating Logo. Doesn&#39;t matter for now if it colides 
                with the menu on left when window is resized</div>
            <div id = "Menu1" style="position: absolute; top: 157px; clear: left; overflow: hidden; width: 655px; height: 39px; color: #ffffff">
                <div id="Menu1_1" style="position: relative; margin-left: 3px; width: 124px; height: 37px; background-image: url('images/Menu1_desativado.gif'); background-repeat: no-repeat; left: 0px; border: none; float: left" onclick="javascript: alert('Opa')">
                    <div id="TextoMenu1_1" style="margin-left: auto; margin-right: auto; margin-top: 10px; height: 17px; width: 48px;">Home</div>
                    </div>
                    <div id="Menu1_2" style="position: relative; margin-left: 7px; width: 124px; height: 37px; background-image: url('images/Menu1_desativado.gif'); background-repeat: no-repeat; border: none; float: left">
                    </div>
                    <div id="Menu1_3" style="position: relative; margin-left: 7px; width: 124px; height: 37px; background-image: url('images/Menu1_desativado.gif'); background-repeat: no-repeat; border: none; float: left">
                    </div>
 
                    <div id="Menu1_4" style="position: relative; margin-left: 7px; width: 124px; height: 37px; background-image: url('images/Menu1_desativado.gif'); background-repeat: no-repeat; border: none; float: left">
                    </div>
 
                    <div id="Menu1_5" style="position: relative; margin-left: 7px; width: 124px; height: 37px; background-image: url('images/Menu1_desativado.gif'); background-repeat: no-repeat; border: none; float: left">
                    </div>
            </div>
        </div> <!-- ImagensTop -->
        <div id="Menu2">
            <div id = "Menu2_barra" style="width: 100%; height: 42px; background-color: Blue ">
                This is a secondary menu</div>
        </div>
        <div id="corpo" style="width: 100%; height: 90px ;background-color: black">
            <div id="Conteudo" style="width: 100%; position: absolute">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
                </asp:ContentPlaceHolder>
            </div>
            This is the body, contentplaceholder is placed here</div> <!-- corpo -->       
        <div id="rodape" style="width: 100%; height: 99px; background-color: green">
            This is the botton</div>
    </div> <!-- Tudo -->
    </form>
    <p>
        * Notice that when the ie7 is resized and the scrollbar appears, the content 
        overflow disappear! Why?</p>
</body>
</html>