Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   [решено] Высота контейнера и его заливка (http://forum.oszone.net/showthread.php?t=176009)

System Failure 18-05-2010 23:05 1416340

Высота контейнера и его заливка
 
Не пойму, почему у блока "content" заливка цветом идет не полная? Ведь, вставленная таблица должна его раздвинуть, соответственно и заливка должна расшириться на всю длину и ширину контейнера.

собственно вот код:
читать дальше »

HTML код:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="-1">
        <title>No Title</title>
<style>
 body
 {
 margin: 0;
 font-family:"Century Gothic",Arial,Helvetica,Geneva,Sans-serif;
 padding-left:10%;
 padding-right:10%;
 background-color: #000000;
 }
 a
 {
 color:#FFFFFF;
 }
 #header
 {
 position:relative;
 color:#FFFFFF;
 width:100%;
 height:75px;
 }
        #header #menu
        {
        color:#FFFFFF;
        padding-left:0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        text-align:left;
        position:absolute;
        width:auto;
        height:auto;
        left:0px;
        bottom:3px;       
        }               
                #header #menu a#current
                {
                color:#FF0000;       
                }
        #header #logo
        {
        font-size:58px;
        letter-spacing:0.15em;
        color:#FFFFFF;
        text-align:right;
        margin-right: 0px;
        padding-right: 0px;
        position:absolute;
        bottom:3px;
        right:0px;
        width: auto;
        height:auto;
        }
 #content
 {
 position:relative;
 clear:both;
 background:#999999;
 background-color:#80807e;
 color:#FFFFFF;
 width:100%;
 height:500px;
 }
        #content #leftcolumn
        {
        clear:both;
        float:left;
        width: 35%;
        }
        #content #maincolumn
        {
        float:right;
        overflow: hidden;
        width: 65%;
        }
 #footer
 {
 clear:both;
 color:#FFFFFF;
 width:100%;
 height:75px;
 }
        #footer #downmenu
        {
        position:absolute;
        padding-top: 3px;
        }
                #footer #downmenu a#active
                {
                color:#FF0000;
                }
                </style>       
</head><body><div style="display: none; position: absolute; top: 0pt; left: 0pt; z-index: 90; width: 100%;" id="overlay"><a href="#"><img style="position: absolute; z-index: 150;" id="loadingImage" src="/loading.gif"></a></div><div style="display: none; position: absolute; z-index: 100;" id="lightbox"><a title="Click to close" href="#"><img id="lightboxImage"><img style="position: absolute; z-index: 200;" id="closeButton" src="/close.gif"></a><div id="lightboxDetails"><div style="display: none;" id="lightboxCaption"></div><div id="keyboardMsg">press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close</div></div></div>

        <div id="header"><span id="menu"><a href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=3&amp;cat=18">Auxerrois</a>&nbsp;&nbsp;<a id="current" href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=4&amp;cat=9">Cabernet Sauvignon</a>&nbsp;&nbsp;<a href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=5&amp;cat=3">Chardonnay</a>&nbsp;&nbsp;<a href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=6&amp;cat=10">Cuvee</a>&nbsp;&nbsp;</span><span id="logo">Der Laden</span></div>
        <div id="content"><script type="text/javascript" language="javascript" src="/ajax/ajax.js"></script>
<div id="leftcolumn">

          <table class="datatable" width="100%">
  <tbody><tr><td><a class="plain" onclick="loadContent('3&amp;cat=9&amp;group=4')" href="#"><img class="imgleft" src="prodgfx/tn_3.jpg" alt=""></a></td></tr>        </tbody></table>

      <div style="text-align: right;"><img src="templates/leiling/images/photo.gif" alt=""> <em><small>Die Bilder sind nicht rechtsbindend auf das Produkt!</small></em></div>

 
     
  </div><div id="maincolumn">
    <table class="datatable" style="position: relative;" width="85%">
      <caption>Produkt Details</caption>
      <tbody><tr><td>
              <center>Produkt ID: 0528</center>                     
              <div style="text-align: center;"><a href="prodgfx/3.jpg" rel="lightbox" title="Produkt ID: 0528"><img class="borderimg" src="prodgfx/3.jpg" alt="" height="317" width="450"><br><br>Klicken für Vollbild</a>                     
                                      <br>

                <br>
                <table class="borderless" width="90%">
                  <tbody><tr><td class="borderless">
                      <div style="text-align: left;">
                            <em><strong>Beschreibung:</strong></em>
                            <ul><li><p><strong><span style="font-family: 'Century Gothic',Arial,Helvetica,Geneva,Sans-serif;">2005&nbsp;&nbsp; Cabernet Sauvignon</span></strong></p>                    <p><span style="font-family: 'Century Gothic',Arial,Helvetica,Geneva,Sans-serif; font-size: 12px;">FZ 0,2g/l, Säure 5,0g/l, Alkohol 12,5 % vol. </span></p> </li></ul>
                          </div>
                              </td></tr>
                </tbody></table>
              </div>     
              <br>
              <form method="POST" action="index.php?page=cart&amp;action=add">
                <div style="text-align: right;">
                  <input name="prodid" value="3" type="hidden">
                  <input name="prodprice" value="18.25" type="hidden">

                                <big><strong>Preis/Stck: ?18,25</strong></big><br><small>(?15,34 excl. Mwst)</small>                                          <br>
                                    <br>
                                    Menge: <input size="4" name="numprod" value="1" maxlength="4" type="text">&nbsp;<input value="Bestellung" name="sub" type="submit">
                                                            </div>
              </form>
                      </td>
                  </tr>
      </tbody>
    </table>
  </div>
</div>
        <div id="footer"><span id="downmenu"><a href="index.php?page=search">Suche</a>&nbsp;&nbsp;<a href="index.php?page=browse&amp;action=shownew"><font color="red"><b>Neue</b></font> Produkte</a>&nbsp;&nbsp;<a href="index.php?page=conditions&amp;action=show">AGB</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=shipping">Versand</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=aboutus">Impressum</a>&nbsp;&nbsp;<a href="index.php?page=contact">Kontakt</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=Anfahrt">Anfahrt</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=Geschichte">Geschichte</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=Team">Team</a>&nbsp;&nbsp;</span></div>

</body></html>


а вот схема веб страницы:

System Failure 19-05-2010 19:43 1416945

в общем определил, что такая ошибка имеет место быть в фаерфоксе. в ИЕ вроде все как и теоретически должно быть. вот упрощенная модель той-же ошибки, собственно:

HTML код:

<html>

<head>

<title></title>
<style>
 #content
 {
 position:relative;
 clear:both;
 color:#FFFFFF;
 width:100%;
 height:500px;
 background:#999999;
 background-color:#80807e;
 }
          #content #maincolumn
        {
        background-color : #FF8080 ;
        background : #FF8080 ;
        float:right;
        width: 65%;
        }
</style>
<script language="javascript" type="text/javascript">
function fillWithHTML()
{
document.getElementById("maincolumn").innerHTML="<br>1<br>1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>1<br><br>1<br><br><br><br><br><br><br><br><br><br>1<br><br><br><br><br><br><br>lol";
}

</script>
</head>

<body>

<div id="content"><div id="maincolumn"></div></div>
<input type="button" value="click" onclick="fillWithHTML()">

</body>

</html>

как мы видим, высота заливки родительского контейнера не расширяется, при наполнении дочернего объекта, контентом, по высоте превосходящим родительский объект.

таким образом приходится в JS добавить строчку, динамически изменяющую высоту родительского объекта:

HTML код:

document.getElementById("content").style.height=document.getElementById("maincolumn").offsetHeight+10;


Время: 02:12.

Время: 02:12.
© OSzone.net 2001-