Avatar billede playr Nybegynder
03. maj 2007 - 22:38 Der er 7 kommentarer

Firefox og CSS?

Hej alle

Jeg har et problem når jeg bruger følgende kode:

.my_table
{
    background-image: url('images/top.jpg');
    background-repeat: repeat-x;
    background-color: #FFFFFF;
    background-position: top;
}

Når jeg prøver i IE så virker det fint, men når jeg bruger Firefox så "skubber" den nærmest det hele lidt ned, hvordan kan det være, er denne kode ikke optimal i firefox?

Må da sige det er irriterende at så mange er begyndt at bruge firefox når man skal optimere sine webdesigns til det, det adskiller sig vildt fra IE. Og ja man brokker sig altid når man har problemer :)
Avatar billede mclemens Nybegynder
03. maj 2007 - 23:02 #1
Hvad med:

<!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>Ingen titel</title>

<style type="text/css">
html,body {margin:0;padding:0;}
.my_table
{
    background-image: url('images/top.jpg');
    background-repeat: repeat-x;
    background-color: #FFFFFF;
    background-position: top;
border-collapse:collapse;
ma
}

.my_table td {
padding:0;
}

</style>

</head><body>
<table class="my_table">
<tr><td>a</td></tr>
</table>
<div style="background:blue;">a</div>
</body></html>
Avatar billede mclemens Nybegynder
03. maj 2007 - 23:03 #2
("ma" i .my_table var en smutter)
Avatar billede roenving Novice
04. maj 2007 - 06:51 #3
-- og i lige det eksempel lyder det som om, du tager udgangspunkt i den browser, der er dårligst til at forstå webdesignet !-)

-- men det tager mclemens' kode højde for på en række måder:

1. Der er sat en doctype på, som sikrer at IE i så høj grad som muligt følger 'reglerne' ...

2. margin/padding er fjernet fra siden ...

3. padding i cellerne og celle-border er sat til ikke at vises separat !o]
Avatar billede playr Nybegynder
04. maj 2007 - 18:11 #4
Hej Begge

Det virker stadigvæk ikke, jeg benytter jo cellspacing="0" cellpadding="0" i hver enkelte TD så
.my_table td {
padding:0;
}
er ikke nødvendig, eller ?

Den gør stadigvæk det samme, forstår det simpelthen ikke.

nclemens:
hvorfor <div style="background:blue;">a</div> ?
Avatar billede mclemens Nybegynder
04. maj 2007 - 18:35 #5
"Det virker stadigvæk ikke, jeg benytter jo cellspacing="0" cellpadding="0" i hver enkelte TD så ... er ikke nødvendig, eller ?"

Du mener i hver tabel ikke ?, og nej så bør det ikke være nødvendigt.
... men hvorfor ikke bruge css istedet ? HTML har aldrig været ment
til design af opsætning m.v.. Jeg ligger stadig og vrider mig efter
tabeller der skulle stretches på kryds og tværs med img elementer
samt attributer der skulle kastes på næsten alle mine elementer.
(overdrivelse fremmer forståelsen)

- Hvis du ville ramme hver tabel kunne du sige
table {border-collapse:collapse;}
table td {padding:0;}

...

"Den gør stadigvæk det samme, forstår det simpelthen ikke"
- Har du et link eller eksempel så vi kan kigge med ?
- Gør den det stadig i mit eksempel 03/05-2007 23:02:42 ?

...

"hvorfor <div style="background:blue;">a</div> ?"
For at du i mit test eksempel kunne se et element
der stod lige under tabellen, da dit problem var
at tabellen nærmest skubbede det hele lidt i FF.
- Altså af hensyn til fejlfinding i problemstillingen.

...

Der er er en del andre ting der kan spille ind som p
og h (m.fl.) elementer, der måske skal have slettet margin.
- Men hvis vi ser et eksempel med fejlen, kan vi se om det
er tabellen eller et andet element, der spiller ind evt.
(Husk at kigge på om du har doctype som Roenving nævner)
Avatar billede tza Nybegynder
21. maj 2007 - 22:55 #6
1. Sørg for at du har en DOCTYPE sat ind -korrekt- som de andre antyder.
2. Sørg for at elementer rundt om din .my_table ikke skubber pga. margin og/eller padding.
HUSK: IE regner padding ud PÅ ELEMENTER MED FAST BREDDE/HØJDE meget anderledes end ALLE andre browsere. FF, Opera, Netscape (osv.) lægger paddingen TIL i den faste bredde, IE gør ikke. Brug såvidt muligt kun padding på elementer med relative dimensioner. Brug margin istedet.
Det er svært at give dig et korrekt svar uden at kende til din opsætning, men jeg tør godt sætte penge på at der er noget padding i vejen et eller andet sted. Du bør tjekke dette først!!


3. Forsøg så vidt muligt at undgå tabeller til brug i dit layout. Det er ekstra markup i din HTML, det er meget mere besværligt at holde styr på det når hele siden er sat op, og det er generelt bare 'uhandy'.
Læs op på din CSS på www.w3schools.com og søg på artikler om table-less layouts på nettet, www.About.com har nogle virkelige gode ord om dette.

Husk at en background-position går ALTID på 2 sider, dvs. først horisontalt og derefter vertikalt. Skriver du ikke en bg-position vil din bg antage standarden, dvs. top left.
Du har kun skrevet top, men jeg tvivler nu stadig på at det kun er det der skylden.

Skriv;

.my_table {
background: #fff url('images/top.jpg') repeat-x top LEFT/RIGHT/CENTER;
}

- De store bogstaver skifter du selvf. ud med den rigtige placering, dvs. kun én af hhv. LEFT/RIGHT/CENTER.
Ps: At jeg har skrevet det hele i en sætning gør ingen forskel, det er bare mindre kode for dig at skrive.. Det kaldes shorthand i den dejlige CSS-verden.

Held & lykke!
Avatar billede roenving Novice
21. maj 2007 - 23:07 #7
Hvis du bruger en fuldt kvalificeret doctype inkl. dtd-link (f.eks. den, mclemens viser i trådens første indlæg !-), er der ingen problemer med IEs måde at fortolke padding ...
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