Avatar billede 7th Praktikant
30. januar 2005 - 21:52 Der er 21 kommentarer og
1 løsning

1px problem ved centrering af block element

Jeg har et lille problem på præcis 1 pixel, se www.jongbiz.dk/css/

Jeg har en baggrund, som er centreret med
background: #fff url("design-1.gif") repeat-y 50% 0%.

og et block element som er centreret med
#block_element {
margin: 0 auto;
width: 764px;
}

Det er så min mening, at ville centrere et block element, som passer med baggrunden. Jeg oplever dog desværre, at Explorer og Firefox har et lille pixel problem som gør, at hvis baggrunden ender på et lige tal (764 pixels), så bliver centreringen af block elementet i forhold til baggrunden 1 pixel upræcis i Explorer, og omvendt ved et ulige tal (765 pixels) i Firefox.

Problemet med Firefox har jeg løst ved at sætte body height til 101%, så scrollbaren skubber block elementet den rette vej. Nu mangler jeg at finde en løsning til Explorer. Jeg kan dog med det samme sige, at jeg ikke fisker vildt efter et hack ala

* html #block_element_2 {
margin-left: 1px;
}
Avatar billede alister_crowley Nybegynder
30. januar 2005 - 22:00 #1
hvad med

body > #block_element_2
{
  margin-left: 1px;
}
Avatar billede alister_crowley Nybegynder
30. januar 2005 - 22:00 #2
overstående kaldes en selector, og bliver ikke fortolket af IE da det er så gammeldaws
Avatar billede 7th Praktikant
30. januar 2005 - 22:08 #3
Men jeg skal jo netop finde noget som kan tweake Explorer til at rette op på 1px problemet :)
Avatar billede alister_crowley Nybegynder
30. januar 2005 - 22:10 #4
Jeg kan ikke, på dit link, se nogen forskel på IE og Firefox ?
Hvis du har rettet noget på linket, så prøv at gøre så det laver fejl igen.
Avatar billede 7th Praktikant
30. januar 2005 - 22:17 #5
De grå bokse er forskubbet en 1 pixel for meget til venstre i Explorer :)
Avatar billede alister_crowley Nybegynder
30. januar 2005 - 22:23 #6
tjaa, måske at du ikke kan ændre width på inline elementer..

Men er det meningen at din side struktur skal se sådan her ud, eller ?
Fordi det kunne godt opbygges lidt smartere så.
Avatar billede 7th Praktikant
30. januar 2005 - 22:31 #7
Alle forslag er velkomne :)
Avatar billede olebole Juniormester
31. januar 2005 - 16:52 #8
<ole>

Prøv først om dette script returnerer 'CSS1Compat':
  <script type="text/JavaScript">
      alert(document.compatMode);
  </script>
- sker det ikke, er det fordi, du bruger en forkert DTD, der sætter IE i quirks-mode, hvor den ikke overholder CSS-rekommendationens box-model. Jeg mener, din DTD bør se sådan ud:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11 /DTD/ xhtml11 .dtd">.

Derudover er der ingen somhelst fordele ved at skrive XHTML, som WWW ser ud idag. Tværtimod er HTML4.01-Strict langt bedre for browserne - der vil opfatte din XHTML-kode som værende fejlfyldt HTML4.01 og derfor først skal tilrette din kode, så den overholder HTML-standarden i stedet  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
31. januar 2005 - 16:53 #9
Jeg tror i øvrigt, der sneg sig et mellemrum for meget ind i den DTD:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11 /DTD/ xhtml11.dtd">
- sådan  ;o)
Avatar billede 7th Praktikant
01. februar 2005 - 02:12 #10
Både Explorer og Firefox returnerer CSS1Compat :)
Avatar billede 7th Praktikant
01. februar 2005 - 05:54 #11
Utrolig nok efter mange dages søgen er jeg ret sikker på, at jeg har fundet løsningen :)

Se http://www.jongbiz.dk/1/

body {
padding: 0 0 0 1px;
}

ser ud til at være det magiske trick for begge browsere. Hvis I vil have points, må jeg jo bede om et svar :)
Avatar billede alister_crowley Nybegynder
01. februar 2005 - 09:27 #12
ikke til mig ihvertfald, samler ikke på dem.
Avatar billede 7th Praktikant
01. februar 2005 - 20:42 #13
Min såkaldte løsning er røget lige i skraldespanden, da jeg resizede browser vinduet. Det var en lille tanketorsk i nattens løb :)
Avatar billede olebole Juniormester
01. februar 2005 - 23:13 #14
Lad os lige tage den fra toppen:
Hvis du ender med en bredde på et lige tal - og det element, der skal centreres har en bredde, der er et ulige tal - vil der altid være én pixels forskel på den 'luft', der er på venstre og højre side af elementet.
Det samme vil ske, hvis sidebredden er et ulige tal og elementets bredde er et lige.

At der så er én px forskel på de to browsere, undrer mig nu ikke. Det har der altid været problemer med i venstre side og toppen - det kan du se ved at søge i gamle spm.

Det lyder med andre ord ikke, somom din side opfører sig 'underligt'  :)

Hvad angår det håbløse i at skrive XHTML idag, bør du nok læse disse to:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538
- så går du nok tilbage til HTML4.01 ... hvis dit formål altså er at skrive den bedst mulige kode  ;o)
Avatar billede 7th Praktikant
02. februar 2005 - 08:47 #15
Jeg ved godt at du er en varm fortaler for HTML, så jeg håber du bliver blød om hjertet, når jeg nu fortæller, at jeg er gået tilbage til de trofaste gode gamle tabeller - ihvertfald hvad angår skelettet :)

Og jov, du vil gerne have de 60 points :)
Avatar billede 7th Praktikant
08. februar 2005 - 14:32 #16
Siger tak for forslagene, lukker.
Avatar billede olebole Juniormester
08. februar 2005 - 19:04 #17
Det lyder fornuftigt, 7th - og ja .... mit hjerte sveder  ;o)

Jeg er nu ikke speciel varm fortaler for HTML. Tabeller er ikke mere HTML, end divs - og tabeller har ikke mere med CSS at gøre end tabeller. Desangående går jeg blot ind for at bruge det bedste element til enhver opgave og ser gerne på, hvad W3C anbefaler (og de anbefaler brug af tabeller til kolonner og tabullerede data).
Når kolonnerne er på plads, bør man også i dem bruge de elementer, der er bedst til den givne opgave ... span, div, tabel, or-what-ever.

Derudover er jeg faktisk forrygende varm tilhænger af XHTML og har svært ved at vente, til det kan bruges på WWW. Som nettet ser ud idag - og vil se ud de næste par år - er det dog helt hen i vejret at skrive XHTML, da den slags kode gør livet langt mere surt for browserne, end HTML4.01-Strict  ;o)
Avatar billede 7th Praktikant
08. februar 2005 - 20:04 #18
Glemte at nævne, at jeg fik løs problemet i både Explorer 6.0 og Firefox 1.0. Hvis blot ens baggrund ender på et ulige tal, og man samtidig centrerer sit block element via absolute position, så virker det ok :)

http://www.jongbiz.dk/jogfix/123.htm
http://www.jongbiz.dk/jogfix/715.htm
Avatar billede olebole Juniormester
08. februar 2005 - 20:34 #19
Yups ... men din kode parses stadig som dårlig HTML4 - og det er jo synd for dine brugere.
Du kan ligeså godt skrive en kode, der kan parses som fejlfri kode og dermed bruges til noget ordentligt. Det er aldrig fornuftigt bevidst at skrive kode, der skodder fælt  :)
Avatar billede 7th Praktikant
08. februar 2005 - 21:11 #20
Dumt spørgsmål, men hvordan kan du konstatere det?
Avatar billede olebole Juniormester
08. februar 2005 - 21:19 #21
Læs de to artikler, jeg refererede til her: 01/02-2005 23:13:41  ;o)

Men svaret er: XHTML *kan* ikke bruges på WWW idag ... simple as that
Avatar billede 7th Praktikant
08. februar 2005 - 21:21 #22
Nåå, du mener på den måde ;) Tak for dit feedback :)
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