содержимое и оболочка не расширяются должным образом при расширении содержимого - PullRequest
Новая
       12

содержимое и оболочка не расширяются должным образом при расширении содержимого

0 голосов
/ 15 февраля 2010

У меня проблема с моей веб-страницей, потому что у меня есть обертка вокруг всех элементов страницы (заголовок, навигационное меню и контент), когда контент расширяется из-за объема данных, отображаемых на нем, он переходит через оболочку без нажатия вниз, но в IE7 он расширяет оболочку.

Это сводит меня с ума, и я не могу понять, почему это делает.

Извините за код, так как в нем может быть слишком много div, но я не знаю другого способа создать закругленный угол.

Код: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>



    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    *
    {
        padding:auto;
        margin:auto;
        text-align:center;
        }
    div
    {
        text-align:left;
        display:block;

        }
    </style>

</head>
<body style="">
    <form id="form1" runat="server">


    <!--Main div container-->
<div style="background-image:url('Images2/Content/WrapTop.gif');width:1210px;height:18px;background-repeat:no-repeat;margin-top:10px;" ></div>
<div style="background-image:url('Images2/Content/WrapMid.gif');width:1210px;min-height:900px;display:block;background-repeat:repeat-y;">
<!--Menu container-->
<!--Heading-->
<div style="width:1210px;height:132px;background-image:url('Images2/Heading/Heading.gif');background-repeat:no-repeat;">
<div style="width:1046px;height:6px;background-repeat:no-repeat;"></div>
<div style="width:1046px;height:96px;background-image:url('Images2/Heading/tiltle.gif');background-repeat:no-repeat;"></div>
<div style="width:1046px;height:3px;display:block;"></div>
<!--Top Menu-->
<div style="width:1200px;height:25px;text-align:justify;padding-bottom:-10px;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;display:block;float:left">&#160;</a>
</div>
</div>
<!--Container of menu and subcontainer-->
<div style="width:1212px;min-height:750px;margin-top:60px;margin-left:15px;">
<!--Menu-->
<div style="width:274px;float:left;">
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/menu/MenuTop.gif');color:White;"><asp:LinkButton ID="LinkButton1" runat="server" Text="Electronics" OnClientClick="FindSubCats(560864, 'SearchSubCatsOne');return false;" /></div>
<div id="SearchSubCatsOne" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsTwo" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsThree" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
</div>
<!--Content Menu-->
<div style="width:802px;float:left;min-height:650px">
<div style="float:left;margin-left:10px;">
<div style="width:800px;height:37px;background-image:url('Images2/Content/contentTop.gif');"></div>
<div   style="width:800px;min-height:650px;background-image:url('Images2/Content/contentMid.gif');background-repeat:repeat-y;display:block;">
<div id="Products" style="width:800px;min-height:650px;display:block;"></div>
</div>

<div style="width:800px;height:13px;background-image:url('Images2/Content/contentBottom.gif');"></div>
</div>
</div>


</div>
</div>
<div style="background-image:url('Images2/Content/WrapBottom.gif');width:1210px;height:15px;background-repeat:no-repeat;" ></div>



    </form>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 15 февраля 2010

При быстром взгляде это может быть вызвано тем фактом, что у вас есть плавающие элементы div внутри оболочки, что означает, что они с радостью всплывают за ее пределы.

Как быстрый взлом, добавьте это как последний элемент внутри вашей обертки: 

<div style="clear: both"></<div>

Если это решит проблему, вы можете добавить более чистое решение "clear: both" в свой CSS.

0 голосов
/ 15 февраля 2010

Возможно, вы ищете max-width или max-height, и для подобных проблем вы можете взглянуть на настройки переполнения.

Кроме того, FWIW, этот код будет очень трудным для вас, если вы продолжите поддерживать встроенный CSS. Вы должны использовать классы и идентификаторы с внешним файлом CSS. Таким образом, вы можете быстро изменить дизайн всего своего сайта - плюс информация должна загружаться и кэшироваться только один раз браузером клиента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...