Avatar billede Slettet bruger
16. april 2006 - 12:27 Der er 15 kommentarer og
2 løsninger

Vises ikke ens i IE og FF

Jeg har lige et problem med denne code - som ved afvikling i de nævnte browsere viser forskellen.

Hvad skal rettes ?

.....................

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>tester</title>
<style type="text/css" media="screen">
html,body {
  margin:0;padding:0;}
body{
    font: normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: #B3AEB5;

    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position: center;
}
.wrapper
{
  width: 770px;
    margin:0 auto;
}
.title
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: bolder;
    font-size: x-large;
    padding: 10px 20px 10px 20px;
}

.title2
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: lighter;
    font-size: small;
}


.titlemargin
{
    margin: 10px 0px 10px 0px;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="title titlemargin" style="height: 20px;">
        <div style="float: left; margin-left: 120px;">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin" style="height: 20px;">
        <div style="float: left; margin-left:  160px;">....der ikke placere sig ens i IE og FF</div>
    </div>


</body>
</html>
Avatar billede apo Praktikant
16. april 2006 - 12:37 #1
Du mangler noget (Den nederste div-afslutning):

<div class="wrapper">
    <div class="title titlemargin" style="height: 20px;">
        <div style="float: left; margin-left: 120px;">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin" style="height: 20px;">
        <div style="float: left; margin-left:  160px;">....der ikke placere sig ens i IE og FF</div>
    </div>
</div><!-- Du mangler denne /div -->
Avatar billede Slettet bruger
16. april 2006 - 12:53 #2
Det er rigtigt - men det ændre ikke placeringen af teksten i bjælkerne
Avatar billede apo Praktikant
16. april 2006 - 13:02 #3
Det er fordi, at margin på et div vises forskelligt i henholdsvis IE og FF (Jeg kan ikke huske den tekniske forklaring); Men hvis du i stedet benytter padding, vises koden således ens i IE og FF:

<div class="wrapper">
    <div class="title titlemargin" style="height: 20px;">
        <div style="float: left; padding-left: 120px;">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin" style="height: 20px;">
        <div style="float: left; padding-left:  160px;">....der ikke placere sig ens i IE og FF</div>
    </div>
</div>
Avatar billede apo Praktikant
16. april 2006 - 13:15 #4
Hvis det er fordi, du vil have at teksten skal være centreret, kan du bruge en tabel og gøre det lettere for dig selv (Du sparer noget kode, og laver en mere hensigtsmæssig opbygning):

<table class="wrapper">
    <tr>
        <td style="text-align:center;" class="title">Her har vi et logo</td>
    </tr>
    <tr>
        <td style="line-height:5px;">&nbsp;</td>
    </tr>
    <tr>
        <td style="text-align:center;" class="title2">....der ikke placere sig ens i IE og FF</td>
    </tr>
</table>
Avatar billede mclemens Nybegynder
16. april 2006 - 14:10 #5
hvis det virker så bare giv point til apo ;)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>tester</title>
<style type="text/css" media="screen">
html,body {
  margin:0;padding:0;}
body{
    font: normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: #B3AEB5;

    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position: center;
}
.wrapper
{
  width: 770px;
    margin:0 auto;
}
.title
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: bolder;
    font-size: x-large;
    padding: 10px 20px 10px 20px;
}

.title2
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: lighter;
    font-size: small;
}


.titlemargin
{
    margin: 10px 0px 10px 0px;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="title titlemargin">
        <div style="text-align:center;margin:auto;">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin" style="height: 20px;">
        <div style="float: left; margin-left:  160px;">....der ikke placere sig ens i IE og FF</div>
    </div>

</div>
</body>
</html>
Avatar billede mclemens Nybegynder
16. april 2006 - 14:10 #6
hov
        <div style="text-align:center;margin:auto;">Her har vi et logo</div>
->
        <div style="text-align:center;">Her har vi et logo</div>
Avatar billede mclemens Nybegynder
16. april 2006 - 14:12 #7
arg det samme som apo skrev... glemte at updatere... havde tabs åben i ff
Avatar billede mclemens Nybegynder
16. april 2006 - 14:20 #8
alternativet:

    <div class="title titlemargin" style="height: 20px;">
        <div style="float: left; margin-left: 120px;">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin" style="height: 20px;">
        <div style="float: left; margin-left:  160px;">....der ikke placere sig ens i IE og FF</div>
    </div>

->

    <div class="title titlemargin" style="height: 30px;">
        <div style="margin-left: 120px;">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin" style="height: 20px;">
        <div style="margin-left:  160px;">....der ikke placere sig ens i IE og FF</div>
    </div>

(+</div>)
Avatar billede mclemens Nybegynder
16. april 2006 - 14:21 #9
float slettet
Avatar billede Slettet bruger
16. april 2006 - 14:53 #10
Tak for jeres eksempler - men det skal rettes via css - der er alt for mange sider jeg skal rette koden i -

Kan det ikke det - så må jeg leve med som det er
Avatar billede apo Praktikant
16. april 2006 - 15:39 #11
Du bør alligevel gå ind og rette den manglende div-afslutning (da siderne bør følge W3C-standarden), og så kan du lige så godt ændre i HTML'en samtidig - Du behøver blot, at lave en 'copy 'n paste'.
Avatar billede mclemens Nybegynder
16. april 2006 - 17:01 #12
[ men det skal rettes via css ]
- ikke optimalt valg at lave... men, ok for midlertidig lappeløsning
(virker måske / måske ikke... afhængig af andet indhold på sitet) :/


<style type="text/css" media="screen">
html,body {
  margin:0;padding:0;}
body{
    font: normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: #B3AEB5;

    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position: center;
}
.wrapper
{
  width: 770px;
    margin:0 auto;position:relative;
}
.title
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: bolder;
    font-size: x-large;height:auto!important;
    padding: 10px 20px 10px 20px;
}

.title2
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: lighter;
    font-size: small;
}

.title div, .title2 div{float:none!important;}

.titlemargin
{
    margin: 10px 0px 10px 0px;
}
</style>
Avatar billede Slettet bruger
16. april 2006 - 18:14 #13
>apo.... den manglende /div er med i det 'originale' script - afslutningen står først senere i scriptet derfor kom det ikke med i min copy/paste-eksempel

>mclemen....Nej du har ret det virkede ikke - men det gav mig en ide-----

ændrede i css til


.titlemargin
{
    margin: 10px 0px 10px 0px;
    padding-left: 120px;
}

lavede en ny
.titlemargin2
{
    margin: 10px 0px 10px 0px;
    padding-left:  160px;
}
slettede en linie i
.title
    padding: 10px 20px 10px 20px;

og rettede tilsvarende i doc.

Så her er hele koden.....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>tester</title>
<style type="text/css" media="screen">
html,body {
  margin:0;padding:0;}
body{
    font: normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: #B3AEB5;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position: center;
}
.wrapper
{
  width: 770px;
    margin:0 auto;
}
.title
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: bolder;
    font-size: x-large;

}

.title2
{
    background-color: #6D8269;
    color: #C7E1A7;
    font-weight: lighter;
    font-size: small;
}


.titlemargin
{
    margin: 10px 0px 10px 0px;
    padding-left: 120px;
}
.titlemargin2
{
    margin: 10px 0px 10px 0px;
    padding-left:  160px;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="title titlemargin" style="height: 30px;">
        <div style="float: left; ">Her har vi et logo</div>
    </div>

    <div class="title2 titlemargin2" style="height: 20px;">
        <div style="float: left; ">....der ikke placere sig ens i IE og FF</div>
    </div></div>


</body>
</html>

.......................

Læg venligst begge svar og point deles - er det ok ?
Avatar billede apo Praktikant
16. april 2006 - 18:15 #14
Ok.

Og jeg lægger et svar :-)
Avatar billede mclemens Nybegynder
16. april 2006 - 18:19 #15
jeps ;)
Avatar billede apo Praktikant
16. april 2006 - 18:43 #16
Tak for points :-)
Avatar billede mclemens Nybegynder
16. april 2006 - 18:45 #17
tak for point også :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester