Søg
Avatar billede steen_hansen Forsker
08. oktober 2006 - 14:25 Der er 16 kommentarer og
1 løsning

Virker ikke i FF, Mozilla og Opera, men i MSIE

Jeg forsøger at lave en padding: 0px 30px 30px 30px; "middlethird", men det virker som sagt kun i MSIE. Nogen gode forslag?






<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<link rel="stylesheet" type="text/css" href="/includes/............css">
<title>Forside</title>
</head>

<body>

<div class="upperthird">
    <div class="divbanner">
        <div class="divlogo">
            <a href="/.........../" class="blocklink" title="...........">
                <img src="/images/general/logo.gif" class="logo" alt="...........">
            </a>
        </div>
        <div class="divbanneradd">
            <a href="#" onClick="window.open('http://.........../');" onfocus="this.blur();" title="...........">
                <img src="/............gif" class="banneradd" alt="...........">
            </a>
        </div>
        <div class="clearer"></div>
    </div>
    <div class="divbannermenu">
        <div class="divbannermenuwidthleft"><a href="/members/report/" onfocus="this.blur();" class="bannermenuleft" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="divbannermenuwidthright"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
        <div class="clearer"></div>
    </div>
    <div class="divcontext">Context:</div>
</div>
<div class="middlethird">
    <div class="divmenu">
        <div class="divmenuborder">
            <div class="divmenuhead">...........</div>
            <div class="divmenucontent">...........</div>
            <div class="divmenucontent">...........</div>
            <div class="divmenubottom">...........</div>
        </div>
    </div>
    <div class="divcontent">
        <div class="divcontentnewsheadline">Seneste nyt: ...........</div>
       
        <div class="divcontentnewsintro">...........</div>
       
        <div class="divcontentnews">........... ...</div>
    </div>
    <div class="tdsummary">
        <div class="divmenuborder">
            <div class="divmenuhead">...........</div>
        </div>
    </div>
    <div class="clearer"></div>
</div>

</body>

</html>



CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #d7d7d7 url('/images/general/bodybg.gif') repeat-x;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}


/****************************************/
/*            UPPERTHIRD              */
/****************************************/
.upperthird {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
border-bottom: 1px solid #7b7b7b;
}
.divlogo {
width: 380px;
float: left;
}
.logo {
width: 380px;
height: 88px;
border: 0px;
}
.divbanneradd {
width: 580px;
height: 75px;
line-height: 90px;
float: right;
padding: 15px 30px 0px 0px;
}
.banneradd {
width: 468px;
height: 60px;
border: 0px;
float: right;
}
.divbannermenu {
width: 990px;
height: 30px;
}
.divbannermenuwidthleft {
width: 108px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divbannermenuwidthright {
width: 110px;
height: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.divbannermenuwidth {
width: 110px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
}
a.bannermenu, a.bannermenu:link, a.bannermenu:visited {
display: block;
width: 110px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/out.gif');
}
a.bannermenuleft, a.bannermenuleft:link, a.bannermenuleft:visited {
display: block;
width: 108px;
height: 30px;
text-decoration: none;
color: #000;
background-image: url('/images/banner/out_left.gif');
}
a.bannermenu:hover {
width: 110px;
height: 30px;
display: block;
text-decoration: none;
color: #000;
background-image: url('/images/banner/on.jpg');
}
a.bannermenuleft:hover {
width: 108px;
height: 30px;
display: block;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on_left.gif');
}
.activeMenu {
display: block;
width: 110px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 110px;
text-decoration: none;
}
.activeMenuLeft {
display: block;
width: 108px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menuLeft, a.activeMenuLeft, a.menuLeft:hover, a.activeMenuLeft:hover {
width: 108px;
text-decoration: none;
}
.divcontext {
width: 948px;
height: 50px;
line-height: 50px;
padding-left: 40px;
color: black;
font-weight: bold;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/



/****************************************/
/*            MIDDLETHIRD              */
/****************************************/
.middlethird {
/* width: 988px;*/
width: 928px;
padding: 0px 30px 30px 30px;
margin: 0px auto;
background-color: #fff;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/
/*                MENU                  */
/****************************************/
.divmenu {
width: 150px;
float: left;
vertical-align: top;
/* padding: 0px 30px 30px 30px;*/
padding-right: 30px;
}
.divmenuborder {
width: 148px;
border: 1px solid #7b7b7b;
}
.divmenuhead {
width: 138px;
height: 26px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
background-image: url('/images/menu/menubg.jpg');
border-bottom: 1px solid #7b7b7b;
}
.divmenucontent {
width: 133px;
height: 22px;
padding: 5px 0px 0px 15px;
vertical-align: top;
background: #e0e0e0 url('/images/menu/divider_horizontal.gif') repeat-x bottom center;
}
.divmenubottom {
width: 133px;
height: 20px;
padding: 5px 0px 0px 15px;
vertical-align: top;
background-color: #e0e0e0;
}
/****************************************/
/*              CONTENT                */
/****************************************/
.divcontent {
float: left;
width: 570px;
padding: 0px;
vertical-align: top;
}
.divcontent {
width: 568px;
height: 26px;
}
.divcontentnewsheadline {
width: 556px;
height: 26px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
border: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}
.divcontentnewsintro {
width: 536px;
padding: 15px 15px 0px 15px;
font-weight: bold;
line-height: 18px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divcontentnews {
width: 536px;
padding: 15px;
line-height: 18px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/
/*            INFOCOLUMN                */
/****************************************/
.tdsummary {
width: 150px;
float: right;
vertical-align: top;
/* padding: 0px 30px 30px 30px;*/
padding-left: 30px;
}
/****************************************/

.clearer {
clear: both;
}
Avatar billede steen_hansen Forsker
08. oktober 2006 - 17:49 #1
Som jeg selv umiddelbart ser det, bliver padding-bottom beregnet fra divmenu, og ikke fra kanten på det element, som har den største højde. Med en nested tabel ville jeg lave det således:

<table>
    <tr>
        <td style="padding: 0px 30px 30px 30px;">
            <table>
                <tr>
                    <td id="tekst1">Tekst 1</td>
                    <td id="tekst2">Tekst 2</td>
                    <td id="tekst3">Tekst 3</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Men når der er tale om divs, bliver der åbenbart udelukkende taget højde for tekst1?
Avatar billede mclemens Nybegynder
08. oktober 2006 - 23:38 #2
FF og en del andre browsere overholder en height låsning
... IE gør ikke - eller rettere det gør den ikke før IE 7 ...
- Pas på med at definere en height medmindre den skal låses
så indholdet genereres uden til rammen ...

Rettet eksempel med lidt <br> så man kan se ombrydningen ved flere linjer tekst
(sæt evt. height ind de slettede steder for at se det tidligere resultat ...)

-------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<link rel="stylesheet" type="text/css" href="/includes/............css">
<title>Forside</title>

<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #d7d7d7 url('/images/general/bodybg.gif') repeat-x;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}


/****************************************/
/*            UPPERTHIRD              */
/****************************************/
.upperthird {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
border-bottom: 1px solid #7b7b7b;
}
.divlogo {
width: 380px;
float: left;
}
.logo {
width: 380px;
height: 88px;
border: 0px;
}
.divbanneradd {
width: 580px;
height: 75px;
line-height: 90px;
float: right;
padding: 15px 30px 0px 0px;
}
.banneradd {
width: 468px;
height: 60px;
border: 0px;
float: right;
}
.divbannermenu {
width: 990px;
height: 30px;
}
.divbannermenuwidthleft {
width: 108px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divbannermenuwidthright {
width: 110px;
height: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.divbannermenuwidth {
width: 110px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
}
a.bannermenu, a.bannermenu:link, a.bannermenu:visited {
display: block;
width: 110px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/out.gif');
}
a.bannermenuleft, a.bannermenuleft:link, a.bannermenuleft:visited {
display: block;
width: 108px;
height: 30px;
text-decoration: none;
color: #000;
background-image: url('/images/banner/out_left.gif');
}
a.bannermenu:hover {
width: 110px;
height: 30px;
display: block;
text-decoration: none;
color: #000;
background-image: url('/images/banner/on.jpg');
}
a.bannermenuleft:hover {
width: 108px;
height: 30px;
display: block;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on_left.gif');
}
.activeMenu {
display: block;
width: 110px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 110px;
text-decoration: none;
}
.activeMenuLeft {
display: block;
width: 108px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menuLeft, a.activeMenuLeft, a.menuLeft:hover, a.activeMenuLeft:hover {
width: 108px;
text-decoration: none;
}
.divcontext {
width: 948px;
height: 50px;
line-height: 50px;
padding-left: 40px;
color: black;
font-weight: bold;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/



/****************************************/
/*            MIDDLETHIRD              */
/****************************************/
.middlethird {
/* width: 988px;*/
width: 928px;
padding: 0px 30px 30px 30px;
margin: 0px auto;
background-color: #fff;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/
/*                MENU                  */
/****************************************/
.divmenu {
width: 150px;
float: left;
vertical-align: top;
/* padding: 0px 30px 30px 30px;*/
padding-right: 30px;
}
.divmenuborder {
width: 148px;
border: 1px solid #7b7b7b;
}
.divmenuhead {
width: 138px;

padding-left: 10px;
font-weight: bold;
line-height: 26px;
background-image: url('/images/menu/menubg.jpg');
border-bottom: 1px solid #7b7b7b;
}
.divmenucontent {
width: 133px;

padding: 5px 0px 0px 15px;
vertical-align: top;
background: #e0e0e0 url('/images/menu/divider_horizontal.gif') repeat-x bottom center;
}
.divmenubottom {
width: 133px;

padding: 5px 0px 0px 15px;
vertical-align: top;
background-color: #e0e0e0;
}
/****************************************/
/*              CONTENT                */
/****************************************/
.divcontent {
float: left;
width: 570px;
padding: 0px;
vertical-align: top;
}
.divcontent {
width: 568px;

}
.divcontentnewsheadline {
width: 556px;

padding-left: 10px;
font-weight: bold;
line-height: 26px;
border: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}
.divcontentnewsintro {
width: 536px;
padding: 15px 15px 0px 15px;
font-weight: bold;
line-height: 18px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divcontentnews {
width: 536px;
padding: 15px;
line-height: 18px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/
/*            INFOCOLUMN                */
/****************************************/
.tdsummary {
width: 150px;
float: right;
vertical-align: top;
/* padding: 0px 30px 30px 30px;*/
padding-left: 30px;
}
/****************************************/

.clearer {
clear: both;
}
</style>


</head>

<body>

<div class="upperthird">
    <div class="divbanner">
        <div class="divlogo">
            <a href="/.........../" class="blocklink" title="...........">
                <img src="/images/general/logo.gif" class="logo" alt="...........">
            </a>
        </div>
        <div class="divbanneradd">
            <a href="#" onClick="window.open('http://.........../');" onfocus="this.blur();" title="...........">
                <img src="/............gif" class="banneradd" alt="...........">
            </a>
        </div>
        <div class="clearer"></div>
    </div>
    <div class="divbannermenu">
        <div class="divbannermenuwidthleft"><a href="/members/report/" onfocus="this.blur();" class="bannermenuleft"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="divbannermenuwidthright"><a href="#" onfocus="this.blur();" class="bannermenu"

title="...........">...........</a></div>
        <div class="clearer"></div>
    </div>
    <div class="divcontext">Context:</div>
</div>
<div class="middlethird">
    <div class="divmenu">
        <div class="divmenuborder">
            <div class="divmenuhead">...........</div>
            <div class="divmenucontent">...........</div>
            <div class="divmenucontent">...........</div>
            <div class="divmenubottom">.....<br>...<br>...<br>...<br>...<br>...<br>......</div>
        </div>
    </div>
    <div class="divcontent">
        <div class="divcontentnewsheadline">Seneste nyt: ....<br>...seneste nyt linje2.......</div>
     
        <div class="divcontentnewsintro">.....<br>.........</div>
     
        <div class="divcontentnews">........<br>...<br>...... ...</div>
    </div>
    <div class="tdsummary">
        <div class="divmenuborder">
            <div class="divmenuhead">.....<br>...<br>...<br>.........</div>
        </div>
    </div>
    <div class="clearer"></div>
</div>

</body>

</html>


-----------------------------------------------------------------------------------

Følgende er rettet i css:

.divmenuhead {
width: 138px;
height: 26px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
background-image: url('/images/menu/menubg.jpg');
border-bottom: 1px solid #7b7b7b;
}

->

.divmenuhead {
width: 138px;

padding-left: 10px;
font-weight: bold;
line-height: 26px;
background-image: url('/images/menu/menubg.jpg');
border-bottom: 1px solid #7b7b7b;
}


...

.divmenucontent {
width: 133px;
height: 22px;
padding: 5px 0px 0px 15px;
vertical-align: top;
background: #e0e0e0 url('/images/menu/divider_horizontal.gif') repeat-x bottom center;
}

->

.divmenucontent {
width: 133px;

padding: 5px 0px 0px 15px;
vertical-align: top;
background: #e0e0e0 url('/images/menu/divider_horizontal.gif') repeat-x bottom center;
}

...

.divmenubottom {
width: 133px;
height: 20px;
padding: 5px 0px 0px 15px;
vertical-align: top;
background-color: #e0e0e0;
}

->

.divmenubottom {
width: 133px;

padding: 5px 0px 0px 15px;
vertical-align: top;
background-color: #e0e0e0;
}

...
.divcontent {
width: 568px;
height: 26px;
}

->

.divcontent {
width: 568px;

}

...

.divcontentnewsheadline {
width: 556px;
height: 26px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
border: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}

->

.divcontentnewsheadline {
width: 556px;

padding-left: 10px;
font-weight: bold;
line-height: 26px;
border: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}


... Hjalp det ? ...
- hvis kollonnerne skal flugte i højden med
hinanden anbefales en tabel (en af tabellens styrker)

Nat, nat ;)
Avatar billede steen_hansen Forsker
09. oktober 2006 - 00:02 #3
Nej, det hjalp ikke, og den padding-bottom, der er gældende, er den ved den første div (<div class="divmenu">).

I MSIE virker det jo efter hensigten, men ikke i de 3 andre browsere. Har du testet det?

Nat, vi snakkes :o)
Avatar billede steen_hansen Forsker
09. oktober 2006 - 00:05 #4
Sålænge højden på divmenu er større end divcontent og tdsummary, virker det fint. Så border-bottom på 30px bliver altså beregnet fra den div længst til venstre, selvom alle 3 divs ligger inde i en omkransende div.

Snørklet? Jeg håber du forstår min problemstilling og mit spørgsmål :o)
Avatar billede steen_hansen Forsker
09. oktober 2006 - 00:11 #5
... den virker også ved tdsummary, hvis højden er større end højden på divcontent. Men hvis divcontent bliver højere end både divmenu og tdsummary, tæller det åbenbart ikke med af en eller anden årsag.
Avatar billede mclemens Nybegynder
09. oktober 2006 - 00:22 #6
Joh, havde testet det ... hmm pudsigt kan ikke
lige gennemskue hvad du mener med fejlen - har
kun testet rettelserne i FF og IE ... du kan se
mit test resultat af den i 08/10-2006 23:38:30 her:

ww  w.dkif.com/users/clemens/tmp/resultat.png

... Jeg overser sikkert noget det er jo sent ...
Avatar billede steen_hansen Forsker
09. oktober 2006 - 00:28 #7
I mit tilfælde er divcontent den højeste div. Dvs. der burde være 30px under divcontent, som det er tilfældet med dit eksempel. Men der kommer 30px under (i dette tilfælde) divmenu, fordi tdsummary ikke er nær så høj som divmenu (retter tdsummary ril divsummary). Det virker som om, at der slet ikke bliver taget højde for højden på divcontent, men om divmenu eller divsummary er den længste. Håber du forstår :o)
Avatar billede steen_hansen Forsker
09. oktober 2006 - 00:28 #8
Ja, det er sent, jeg er også daffet. Vi snakkes :o)
Avatar billede steen_hansen Forsker
09. oktober 2006 - 00:31 #9
[Det virker som om, at der slet ikke bliver taget højde for højden på divcontent, men om divmenu eller divsummary er den længste.]

=

Det virker som om, at der slet ikke bliver taget højde for højden på divcontent, men udelukkende på divmenu og divsummary.

Så vidt jeg kan se, styler jeg de rigtige steder....? Hvorfor fa... dulen bliver der slet ikke testet for højden på divcontent, når der bliver på de 2 andre?
Avatar billede mclemens Nybegynder
09. oktober 2006 - 09:07 #10
Dunno, min test giver ikke samme resultat som din :/
... Mulige årsager: Du har floatet indhold i divcontent
som ikke er clearet eller måske brugt absolut placeret i den...
... Ellers er jeg på bar bund da jeg ikke lige
synes jeg kan se fejlen i min test ...
- En mulig test af hvornår det går galt kunne være at tage 08/10-2006 23:38:30
som den står og så indsætte indholdet lidt ad gangen og teste hvornår det går galt ...
Avatar billede steen_hansen Forsker
23. oktober 2006 - 00:00 #11
mclemens, lægger du et svar? Jeg fik rodet mig ud af det, så det virker, lægger koden senere :o)
Avatar billede mclemens Nybegynder
23. oktober 2006 - 09:47 #12
Ok :)
Avatar billede steen_hansen Forsker
23. oktober 2006 - 20:31 #13
Takker for indsatsen :o)
Avatar billede mclemens Nybegynder
23. oktober 2006 - 20:52 #14
Velbekom, og tak for point :)
Avatar billede steen_hansen Forsker
28. november 2006 - 00:07 #15
mclemens, jeg synes lige jeg vil fortælle hvad der gik galt hos mig:

Når stylede div v.hj.a. CSS, så smuttede højden i alle browsere pånær MSIE:

.clearer {
clear: both;
}

<div class="clearer"></div>



Men hvis jeg styler direkte på elementet, så virker det i alle browsere:

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



Så det virker som om nærhedsprincippet træder i kraft af en eller anden årsag?

Skidt, jeg styler dirkte på div, og så virker det. Bare en lille orientering :o)
Avatar billede mclemens Nybegynder
29. november 2006 - 00:14 #16
Hmm, pudsigt... Nedenstående er ikke testet, men jeg har løbet panden imod det, at IE mener, at tomme elementer skal have en størrelse før, måske vil det hjælpe lidt på IE'ens størrelses fortolkning af clear div'en. Tak for bemærkningen, sov godt :)

.clearer {
clear: both;
height: 0px;
}

eller

.clearer {
clear: both;
height: 0px;
overflow: hidden;
}
Avatar billede steen_hansen Forsker
29. november 2006 - 07:50 #17
MS's veje er uransagelige :D

Vi snakkes! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
10 min siden Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
46 min siden Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
White papers
Flere white papers »