float: left og margin browser forskjell

[Akke]

Fikk et problem der jeg så at om man har en div med float:left; margin-left: 20px; i en div helt til venstre på siden så utartet det seg følgende:

 

IE viste kanten 40px fra venstre og Opera 20px...

 

Fant dog en løsning og lurer på om den er grei og ikke gir problemer i forhold til andre browsere igjen.

 

Løsning som overskriver 20px kun i IE: (?)

 

* html #div { margin-left: 10px; }

 

Er dette en vanlig måte å løse dette på?

 

 

Hilsen ny på design uten tabeller, men er alt mektig imponert over hastighet og fleksibilitet

[PoleCat]

Sett display: inline på div'en som får for stor marg.

Dersom du hadde en div som flyter mot høyre og med høyremarg, vil IE også doble margen mot høyre. Altså margen på samme side som elementet flyter mot.

 

Leste om denne løsningen på en side en gang:

 

"Why does this happen?", you ask. "Don't ask. It's IE."

 

Husker ikke linken, men noe i den duren stod det.

[Akke]

display: inline fiksa problemet helt til venstre, men videre i neste så funka det ikke, opera må ha en helt syk stor margin før det stemmer.

 

Se her for oppsettet

 

 

Edit:

 

Fant ut at dette kun skjer når eg har venstreboksholder og flere bokser nedover, finnes det andre måter som gir samme design/oppsett crossbrowser?

Endret 28. mai 2004 av Akke

[Duke Soforth]

Mye å gripe tak i der...

 

Ikke sett samme width på #venstreboksholder og #venstreboks... Ta bort width fra venstreboks, holder å definere den i venstreboksholder (og blir definitivt bare dumt å gi venstreboks samme bredde som venstreboksholder, når du i tillegg definerer marg på venstreboks).

 

Ta bort float:left og display: inline fra #rammehelesiden og #main. Sett margin-left til ønsket verdi i #venstreboksholder (og ta tilsvarende bort margin-left fra #venstreboks). Sett margin-left i #main slik at #main kommer til høyre for #venstreboksholder (for eksempel 180px).

[Duke Soforth]

Ellers anbefales en kikk her: Layout-o-matic

[travis_g]

Jeg sjekka den siden.

 

Hva er komandoene

 

\width: 210px;

w\idth: 200px;

 

????

[Akke]

Mye å gripe tak i der...

 

Ikke sett samme width på #venstreboksholder og #venstreboks... Ta bort width fra venstreboks, holder å definere den i venstreboksholder (og blir definitivt bare dumt å gi venstreboks samme bredde som venstreboksholder, når du i tillegg definerer marg på venstreboks).

 

Ta bort float:left og display: inline fra #rammehelesiden og #main. Sett margin-left til ønsket verdi i #venstreboksholder (og ta tilsvarende bort margin-left fra #venstreboks). Sett margin-left i #main slik at #main kommer til høyre for #venstreboksholder (for eksempel 180px).

Takk for veldig bra svar

 

Har nå gjort endringene du sa, pluss #main margin-top: 10px.

 

Fortsatt ligger #main ca. 20px over boksene i opera, hva kan dette komme av?

 

Takk for lenke også, nærmer meg såpass på dette designet nå føler jeg at det er verdt å prøve litt til.

 

Er det ufint å rette det opp med:

* html #div { margin-left: ??px; }

?

[Zethyr]

husk at Opera har litt standard padding, så det er lurt å alltid ha med dette i starten av css fila:

 

html, body{

margin: 0;

padding: 0;

}

 

Lønner seg å sette på alle div's som inneholder andre div's også, med mindre de skal ha padding / margin selvsagt

[Akke]

husk at Opera har litt standard padding, så det er lurt å alltid ha med dette i starten av css fila:

 

html, body{

margin: 0;

padding: 0;

}

 

Lønner seg å sette på alle div's som inneholder andre div's også, med mindre de skal ha padding / margin selvsagt

Da har jeg gjort det, men hjalp ikke på #main margin-left problemet.

 

Virker som IE har 20px mer enn opera fra kanten uansett.

[Zethyr]

har du tatt med i betrakning IE's feilaktige Box Model?

[Akke]

har du tatt med i betrakning IE's feilaktige Box Model?

? du finner linker til filene over.

[Zethyr]

IE beregner padding & margin på innsiden av bokser, Alle seriøse browsere gjør det på utsiden

Her er en løsning som virker, men som er litt 'nasty':

 

http://tantek.com/CSS/Examples/boxmodelhack.html

[FuLu]

Jeg er ikke noe spess fan av å bruke hacks, da dette i mitt hode vil bare balle på seg i fremtiden. Det som jeg synes er veldig kjekt, er conditional comments i IE. Med dette kan du f.eks kjøre css kode som er beregnet for IE og de andre nettleserne vil da bare se dette på som en comment.

 

Et lite eksempel hvordan kjøre ekstern stylesheet som bare skal gjelde IE 5.5 og nyere:

<head>
<title>Svada</title>
<link rel="stylesheet" href="default.css" media="screen, projection" type="text/css" title="default">
<!--[if gte IE 5.5]>
<link rel="stylesheet" href="ie55x.css" media="screen, projection" type="text/css" title="default">
<![endif]-->

 

I default.css så kan det være en klasse som f.eks har background satt til en transparent png bilde. Denne vil ikke fungere noe bra i IE, men hvis jeg "overloader" klassen som er definert i default.css i en annen fil, ie55x.css. Så kan jeg f.eks sette background til none og heller bruke filter opplegget til IE for å kunne vise png bilde transparent.

 

Så for å komme seg rundt boxmodel problemet, hvor width, padding, margin og border oppfører seg annerledes mellom IE og de andre nettleserne, så kan det jo være en ide å enten unngå å bruke width på et element som skal ha padding e.l.

 

Jeg ville enten hatt en div som hadde en fast width, så deretter ha div, p, h1 e.l. inni der igjen uten width satt (da disse skal strekke seg helt ut relativt til parent), og sette padding e.l. på dem istedet.

 

Eller, så kan du med conditional comments lage overloadet stylesheet for IE.

[Akke]

Jeg er ikke noe spess fan av å bruke hacks, da dette i mitt hode vil bare balle på seg i fremtiden. Det som jeg synes er veldig kjekt, er conditional comments i IE. Med dette kan du f.eks kjøre css kode som er beregnet for IE og de andre nettleserne vil da bare se dette på som en comment.

Takker for trikset

 

Gjorde en test og lagde to css filer nå. Ser ut til å fungere bra. Er det liten sjangs for at andre browsere enn IE vil lese conditional comments i fremtiden? Vil gjerne velge det som er mest fremtidssikkert.

 

Når det gjelder tableless layout, er det kun IE som er forskjellig fra "alle de andre" browserne?

[FuLu]

Er det liten sjangs for at andre browsere enn IE vil lese conditional comments i fremtiden? Vil gjerne velge det som er mest fremtidssikkert.

 

Når det gjelder tableless layout, er det kun IE som er forskjellig fra "alle de andre" browserne?

Så vidt jeg vet, er conditional comments en IE greie, har ikke letet etter info om andre nettlesere har planer om det samme, så det får google stå for Er usikker på om det står noe om dette på www.w3.org, så jeg vedder på dette er enda en sær greie fra IE.

 

Om det er fremtidsrettet, vel tja, regner med at (kommende) nettlesere fra IE er bakoverkompatibel på sånne features. Så for å kunne fixe IE "bugs", kan man sikkert bruke denne metoden i lang tid fremover (hvis ikke Microsoft kommer til fornuft og lager noe som oppfører seg etter standard). Jeg ville uansett valgt denne metoden fremfor hacks hvor man må lure nettleseren med rare metoder i CSS'en.

 

De eneste nettleserne jeg har spess kunnskap med er Opera, IE og Firefox/Mozilla. Og her er det IE som skiller seg mest ut når det gjelder tolkingen av box modellen.

Finnes vel en haug med andre nettlesere, men der er jeg veldig blank.

Endret 28. mai 2004 av FuLu