Avatar billede dennism Nybegynder
28. oktober 2006 - 20:37 Der er 20 kommentarer og
1 løsning

HTML: problem med firefox

Jeg er igang med at arbejde på et site:
http://www.demaweb.dk/get2web/fs/?lang=da

Som I kan se her, er der lidt problemer med firefox:
http://browsershots.org/png/full/be/be12d8bdc030a6aa16a0bcd9e01c54dc.png
http://browsershots.org/png/full/0b/0bd479f8d309f81b59224d3c3d335ed5.png

I firefox "falder menuen ned"..Problemet skyldes, så vidt jeg ved, at når jeg angiver højden på mine tabeller, så trækker jeg padding fra. Dvs. hvis jeg har en tabel på 200px med to rækker på 100px hvor kun den første række har en padding-left på f.eks. 15, så sættes deres width til henholdsvis 85px og 100px. Det er det der ser du til at virke i IE, men hvorfor kan firefox ikke lide det?
Avatar billede coderdk Praktikant
28. oktober 2006 - 20:47 #1
Du mangler en <meta http-equiv="Content-Type" content="text/html;charset=iso8859-1">
Fejlen kan skyldes at du mangler en slut </div>, er ikke sikker, validér dine sider:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.demaweb.dk%2Fget2web%2Ffs%2F%3Flang%3Dda&charset=iso-8859-1&doctype=Inline

:)
Avatar billede mclemens Nybegynder
28. oktober 2006 - 21:02 #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fredsøe</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body style="background-color: #000000;margin:0px;">

<table cellspacing="0" cellpadding="0" style="width:100%; height:132px; background-image:url('images/bg_top.jpg');">
    <tr style="vertical-align:top;">
        <td>
            <table cellspacing="0" cellpadding="0" style="width:905px; height:132px; background-image:url('images/main_top.jpg');" align="center">

                <tr style="vertical-align:top;">
                    <td style="width:34px;background-image:url('images/main_top2.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:200px;background-image:url('images/logo.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:637px;">


                        <table cellspacing="0" cellpadding="0" style="height:100%;padding-right:25px;" align="right">





->





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fredsøe</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body style="background-color: #000000;margin:0px;">

<table cellspacing="0" cellpadding="0" style="width:100%; height:132px; background-image:url('images/bg_top.jpg');">
    <tr style="vertical-align:top;">
        <td>
            <table cellspacing="0" cellpadding="0" style="width:905px; height:132px; background-image:url('images/main_top.jpg');" align="center">

                <tr style="vertical-align:top;">
                    <td style="width:34px;background-image:url('images/main_top2.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:200px;background-image:url('images/logo.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:637px;">





                        <table cellspacing="0" cellpadding="0" style="padding-right:25px;" align="right">

(height:100%; fjernet fra ovenstående)


quick test af rettelsen:

java script:document.getElementsByTagName("table")[1].style.height="auto";void(0);

^ - kopier linjen ind adressebaren og tryk enter når du står
på siden, det simulerer fjernelsen af højde defineringen ...
Avatar billede mclemens Nybegynder
28. oktober 2006 - 21:02 #3
En lille ting mere, det er måske bedre med
css float:right; istedet for align="right" ...
Avatar billede mclemens Nybegynder
28. oktober 2006 - 21:29 #4
... Lægger lige et svar - den burde virke ...
Avatar billede dennism Nybegynder
29. oktober 2006 - 09:56 #5
mcleamens >>

Hvorfor skulle det være nødvendigt at køre dette javascript? Iøvrigt dur det ikke helt, da du kan så se "københavn" bliver fjernet fra logoet.
Avatar billede dennism Nybegynder
29. oktober 2006 - 10:07 #6
mcleamens >>

Jeg har denne linie:
<table cellspacing="0" cellpadding="0" style="width:905px; height:10px;background-color:#1e1e1e;" align="center">

Den retter jeg til:
<table cellspacing="0" cellpadding="0" style="width:905px; height:10px;background-color:#1e1e1e;float:center;">

Hvorfor dur det ikke? den er i venstre side.
Avatar billede dennism Nybegynder
29. oktober 2006 - 10:14 #7
Hvad er der galt med dette script:
<script type="text/javascript">

function showpic(picture, pageTitle){

        NewWin = window.open('picturepopup.php?pic=' + picture + '&pageTitle=' + pageTitle, 'picture', 'width=150,height=150,resizable');

        NewWin.focus();

}

</script>

Det er skyld i de første 5 errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.demaweb.dk%2Fget2web%2Ffs%2F%3Flang%3Dda&charset=iso-8859-1&doctype=Inline
Avatar billede dennism Nybegynder
29. oktober 2006 - 10:19 #8
Never mind..fik det klaret selv :)

Men har stadig problemer med menu-linien?
Avatar billede mclemens Nybegynder
29. oktober 2006 - 10:27 #9
Overså det problem med københavn dimsen...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fredsøe</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=iso8859-1">


<script type="text/javascript">
function showpic(picture, pageTitle){
        NewWin = window.open('picturepopup.php?pic=' + picture + '&pageTitle=' + pageTitle, 'picture', 'width=150,height=150,resizable');
        NewWin.focus();
}
</script>



</head>

<body style="background-color: #000000;margin:0px;">

<table cellspacing="0" cellpadding="0" style="width:100%; height:132px; background-image:url('images/bg_top.jpg');">
    <tr style="vertical-align:top;">
        <td>

            <table cellspacing="0" cellpadding="0" style="width:905px; height:132px; background-image:url('images/main_top.jpg');" align="center">
                <tr style="vertical-align:top;">
                    <td style="width:34px;background-image:url('images/main_top2.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:200px;background-image:url('images/logo.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:637px;">








                        <table cellspacing="0" cellpadding="0" style="padding-right:25px;float:right;">



                            <tr style="vertical-align:bottom;">





                                <td style="height:47px;text-align:right;">
                                <a href="?page=main"><img src="images/menu_main_da.jpg" alt="" style="width:56px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=shop"><img src="images/menu_shop_da.jpg" alt="" style="width:40px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=concept"><img src="images/menu_conpect_da.jpg" alt="" style="width:61px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=terms"><img src="images/menu_terms_da.jpg" alt="" style="width:82px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=contact"><img src="images/menu_contact_da.jpg" alt="" style="width:60px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;">                                </td>                           
                            </tr>

                            <tr style="vertical-align:top;">







                                <td style="text-align:right;padding-top:12px;"><img src="images/dankort.jpg" alt="" style="width:53px; height:16px;"></td>



                       
                            </tr>
                            <tr style="vertical-align:bottom;">





                                <td style="text-align:right;padding-top:12px;"><div class="redtext">





                                <a href="/get2web/fs/?lang=en">english version</a>                                | <a href="?page=shop">
                               
                                Indkøbskurv                                </a> <a href="?page=shop"><img src="images/basket.jpg" alt="" style="width:23px; height:15px;" border="0"></a></div></td>                           
                            </tr>               
                        </table>



[ Hvorfor skulle det være nødvendigt at køre dette javascript? ]
- Det var kun til at teste med

[ Hvorfor dur det ikke? den er i venstre side. (float) ]
- Der er ikke noget float:center;

[ 29/10-2006 10:14:11 ] Ok :)

[ 29/10-2006 10:19:52 ] Burde hjælpe med ovenstående html
... height fjernet fra nogle steder og padding-bottom rettet til padding-top et andet sted (har lavet lidt mellemrum ved ændringerne)
Avatar billede mclemens Nybegynder
29. oktober 2006 - 10:34 #10
hov i ovenstående så ret lige:

                            <tr style="vertical-align:bottom;">

                                <td style="text-align:right;padding-top:12px;"><div class="redtext">



før indkøbskurven til:


<tr style="vertical-align:bottom;height:50px;">
<td style="text-align:right;"><div class="redtext">

... Så indkøbvognen ikke ryger op i toppen, jeg slettede lidt for meget :/
Avatar billede dennism Nybegynder
29. oktober 2006 - 10:38 #11
Kan jeg ikke få dig til at forklare, hvilke ændringer du har lavet?
Det er ikke til at overskue :(
Avatar billede mclemens Nybegynder
29. oktober 2006 - 10:57 #12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fredsøe</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<script language="JavaScript" src="script.js"
type="text/javascript"></script>
</head>

<body style="background-color: #000000;margin:0px;">

<table cellspacing="0" cellpadding="0" style="width:100%; height:132px; background-image:url('images/bg_top.jpg');">
    <tr style="vertical-align:top;">
        <td>

            <table cellspacing="0" cellpadding="0" style="width:905px; height:132px; background-image:url('images/main_top.jpg');" align="center">
                <tr style="vertical-align:top;">
                    <td style="width:34px;background-image:url('images/main_top2.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:200px;background-image:url('images/logo.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:637px;">





                        <table cellspacing="0" cellpadding="0" style="height:132px;padding-right:25px;float:right;">

//height:132px; slettet






                            <tr style="vertical-align:bottom;">
                                <td style="height:47px;text-align:right;">
                                <a href="?page=main"><img src="images/menu_main_da.jpg" alt="" style="width:56px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=shop"><img src="images/menu_shop_da.jpg" alt="" style="width:40px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=concept"><img src="images/menu_conpect_da.jpg" alt="" style="width:61px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=terms"><img src="images/menu_terms_da.jpg" alt="" style="width:82px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=contact"><img src="images/menu_contact_da.jpg" alt="" style="width:60px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;">                                </td>                           
                            </tr>

                            <tr style="vertical-align:top;">







                                <td style="text-align:right;padding-top:12px;"><img src="images/dankort.jpg" alt="" style="width:53px; height:16px;"></td>



// height:33px slettet



                           
                            </tr>
                            <tr style="vertical-align:bottom;height:50px;">

// height:50px; tilføjet




                                <td style="height:34px;text-align:right;padding-bottom:6px;"><div class="redtext">


// height:34px; og padding slettet



                                <a href="/get2web/fs/?lang=en">english version</a>                                | <a href="?page=shop">
                               
                                Indkøbskurv                                </a> <a href="?page=shop"><img src="images/basket.jpg" alt="" style="width:23px; height:15px;" border="0"></a></div></td>                           
                            </tr>               
                        </table>
Avatar billede mclemens Nybegynder
29. oktober 2006 - 10:57 #13
Øv, sådan:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fredsøe</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<script language="JavaScript" src="script.js"
type="text/javascript"></script>
</head>

<body style="background-color: #000000;margin:0px;">

<table cellspacing="0" cellpadding="0" style="width:100%; height:132px; background-image:url('images/bg_top.jpg');">
    <tr style="vertical-align:top;">
        <td>

            <table cellspacing="0" cellpadding="0" style="width:905px; height:132px; background-image:url('images/main_top.jpg');" align="center">
                <tr style="vertical-align:top;">
                    <td style="width:34px;background-image:url('images/main_top2.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:200px;background-image:url('images/logo.jpg');"><img src="images/spacer.gif" alt=""></td>
                    <td style="width:637px;">





                        <table cellspacing="0" cellpadding="0" style="height:132px;padding-right:25px;float:right;">

//height:132px; slettet






                            <tr style="vertical-align:bottom;">
                                <td style="height:47px;text-align:right;">
                                <a href="?page=main"><img src="images/menu_main_da.jpg" alt="" style="width:56px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=shop"><img src="images/menu_shop_da.jpg" alt="" style="width:40px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=concept"><img src="images/menu_conpect_da.jpg" alt="" style="width:61px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=terms"><img src="images/menu_terms_da.jpg" alt="" style="width:82px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"><a href="?page=contact"><img src="images/menu_contact_da.jpg" alt="" style="width:60px; height:17px;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;">                                </td>                           
                            </tr>

                            <tr style="vertical-align:top;">







                                <td style="text-align:right;padding-top:12px;"><img src="images/dankort.jpg" alt="" style="width:53px; height:16px;"></td>



// height:33px slettet



                           
                            </tr>
                            <tr style="vertical-align:bottom;height:50px;">

// height:50px; tilføjet




                                <td style="text-align:right;"><div class="redtext">


// height:34px; og padding slettet



                                <a href="/get2web/fs/?lang=en">english version</a>                                | <a href="?page=shop">
                               
                                Indkøbskurv                                </a> <a href="?page=shop"><img src="images/basket.jpg" alt="" style="width:23px; height:15px;" border="0"></a></div></td>                           
                            </tr>               
                        </table>
Avatar billede mclemens Nybegynder
29. oktober 2006 - 11:06 #14
Hvis IE og FF skal opføre sig en tand mere ens
(sletning af mellemrum under knapperne i IE)
Så kan du tilføje en float:left; på billederne
i td'en øverste højre hjørne ... eksempel:

<td style="height:47px;text-align:right;"><a href="?page=main"><img src="images/menu_main_da.jpg" alt="" style="width:56px; height:17px;float:left;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;float:left;"><a href="?page=shop"><img src="images/menu_shop_da.jpg" alt="" style="width:40px; height:17px;float:left;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;float:left;"><a href="?page=concept"><img src="images/menu_conpect_da.jpg" alt="" style="width:61px; height:17px;float:left;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;float:left;"><a href="?page=terms"><img src="images/menu_terms_da.jpg" alt="" style="width:82px; height:17px;float:left;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;float:left;"><a href="?page=contact"><img src="images/menu_contact_da.jpg" alt="" style="width:60px; height:17px;float:left;" border="0"></a><img src="images/spacer.gif" alt="" style="width:40px; height:17px;"></td>
Avatar billede dennism Nybegynder
29. oktober 2006 - 11:12 #15
Jeg fik det til at virke med noget i retningen af det du brugte:
http://www.demaweb.dk/get2web/fs/?lang=da

Hvorfor er der ikke noget der hedder float:middle eller center? Hvad går man så som css-alternativ til align="center"?
Avatar billede dennism Nybegynder
29. oktober 2006 - 11:13 #16
Kan du forklare din stratgi, så jeg kan forstå hvorfor jeg ikke skulle angive de højder?
Avatar billede mclemens Nybegynder
29. oktober 2006 - 11:28 #17
[ Hvorfor er der ikke noget der hedder float:middle eller center? Hvad går man så som css-alternativ til align="center"? ] I nogle tilfælde kan man centrere et element ved at floate elementer til højre og venstre for det mod henholdsvis højre og venstre. I andre tilfælde kan margin:0px auto; gøre det. Ellers er der jo også position absolute og relative samt fixed afhængig af behovet.

[ Kan du forklare din stratgi, så jeg kan forstå hvorfor jeg ikke skulle angive de højder? ] Hvis det virker crossbrowser, når du definerer højden de andre steder, så er det jo fint nok - en analysering af hvorfor det ikke virkede før med den anden strategi, har jeg ikke lige tid til (har nogle ordrer der venter) ...

- Jeg er heller ikke på toppen tabelmæssigt, da
det er mere end 1 år siden, at jeg skiftede til div's ...
Avatar billede dennism Nybegynder
29. oktober 2006 - 11:43 #18
Du mener måske man bør bruge div's med absolute position istedet?
Avatar billede mclemens Nybegynder
29. oktober 2006 - 12:19 #19
Nej, det mener jeg ikke ... Jeg mener at
det er afhængig af ens behov. Jeg mener at du måske
kan bruge: style="margin:0px auto;" istedet for align="center"
Avatar billede mclemens Nybegynder
29. oktober 2006 - 18:07 #20
Tak for point :)
Avatar billede dennism Nybegynder
30. oktober 2006 - 08:31 #21
Tak for hjælpen :)
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