|
|
 | Endnu en forskel på FF og IE?
Fra : Stefan Kristensen |
Dato : 10-03-08 20:05 |
|
Hej NG.
På min side ( http://jems.dk/test/default.html) har jeg div'er der skal
være lige høje og centreret på siden. Det virker fint i FF, men IE7
lægger det helt ud til venstre, og det ser ud som om der kommer noget
ekstra padding på de to div's.
Siden validere både mht. html og css.
Kan I hjælpe mig med at få siderne til at vises så ens det nu kan lade
sig gøre mellem de to browsere?
Og hvis nogen har en anden browser end de to nævnte, hører jeg meget
gerne om det ser fornuftigt ud i dem.
Mvh
Stefan
| |
 Martin (10-03-2008)
| Kommentar
Fra : Martin |
Dato : 10-03-08 20:15 |
|
Stefan Kristensen wrote:
> Hej NG.
>
> På min side ( http://jems.dk/test/default.html) har jeg div'er der skal
> være lige høje og centreret på siden. Det virker fint i FF, men IE7
> lægger det helt ud til venstre, og det ser ud som om der kommer noget
> ekstra padding på de to div's.
> Siden validere både mht. html og css.
>
> Kan I hjælpe mig med at få siderne til at vises så ens det nu kan lade
> sig gøre mellem de to browsere?
>
> Og hvis nogen har en anden browser end de to nævnte, hører jeg meget
> gerne om det ser fornuftigt ud i dem.
>
> Mvh
> Stefan
IE har en default padding og margin på div's - hvorfor ved jeg dog ikke :)
Men du kan indsætte
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym
{border:0;font-variant:normal;}sup {vertical-align:text-top;}sub
{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
Før dine styles, for at resette alle tags, så de har samme default i
alle browsere.
Koden kan evt. ses lidt pænere her
< http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css>
| |
Stefan Kristensen (10-03-2008)
| Kommentar
Fra : Stefan Kristensen |
Dato : 10-03-08 20:21 |
|
>> På min side ( http://jems.dk/test/default.html) har jeg div'er der skal
>> være lige høje og centreret på siden. Det virker fint i FF, men IE7
>> lægger det helt ud til venstre, og det ser ud som om der kommer noget
>> ekstra padding på de to div's.
>
> IE har en default padding og margin på div's - hvorfor ved jeg dog ikke :)
Det har alle browsere vist - Derfor sætter jeg dem jo også til en fast
værdi i mit css. Så burde det efter min overbevisning vises ens i alle
browsere.
Mvh
Stefan
| |
Rune Jensen (10-03-2008)
| Kommentar
Fra : Rune Jensen |
Dato : 10-03-08 13:58 |
|
On Mar 10, 8:14 pm, Martin <mar...@aarhof.invalid> wrote:
> Koden kan evt. ses lidt pænere her
> < http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css>
Måske er det bare mig, men for optimeringen skyld, ville jeg style kun
det nødvendige for selve siden og være så specifik som muligt også.
Jeg er ikke så meget inde i f.eks. wildcards/star-selector, men den
tager vel alt på sin vej, og er vel også en hukommelsessluger så,
kunne jeg forestille mig.
MVH
Rune Jensen
| |
 Stefan Kristensen (10-03-2008)
| Kommentar
Fra : Stefan Kristensen |
Dato : 10-03-08 21:03 |
|
Rune Jensen wrote:
> On Mar 10, 8:14 pm, Martin <mar...@aarhof.invalid> wrote:
>
>> Koden kan evt. ses lidt pænere her
>> < http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css>
>
> Måske er det bare mig, men for optimeringen skyld, ville jeg style kun
> det nødvendige for selve siden og være så specifik som muligt også.
Lige præcis derfor sætter jeg jo både margin og padding selv.
Stefan
| |
Martin (10-03-2008)
| Kommentar
Fra : Martin |
Dato : 10-03-08 22:41 |
|
Rune Jensen wrote:
> On Mar 10, 8:14 pm, Martin <mar...@aarhof.invalid> wrote:
>
>> Koden kan evt. ses lidt pænere her
>> < http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css>
>
> Måske er det bare mig, men for optimeringen skyld, ville jeg style kun
> det nødvendige for selve siden og være så specifik som muligt også.
Tjaaa.. men så laver du en ny side, også skal du ind og rode i
stylesheetet igen.
Men selvfølgelig, når man er professionel og laver de samme ting flere
gange om dagen, så har man også nogle standard ting man gør for at gøre
alt det kedelige så tidsbesparende som muligt.
Ja, jeg er stor fortaler for frameworks, også i CSS verdenen - blueprint
css(1) og YUI(2) er rigtig lækre at arbejde med, især hvis man lige
bruger en times tid på at gøre det nemmere for en selv at arbejde med det.
1: < http://code.google.com/p/blueprintcss/>
2: < http://developer.yahoo.com/yui/>
> Jeg er ikke så meget inde i f.eks. wildcards/star-selector, men den
> tager vel alt på sin vej, og er vel også en hukommelsessluger så,
> kunne jeg forestille mig.
Om noget bruger 1.5 kb eller 1.8 kb i hukommelse, rager egentlig mig en
papand, især med standarden der ligger på min. 1gb.
Hvis et site fylder 80 kb og tager 2 timer at lave gridden, eller et
site fylder 20 kb og tager 6 timer at lave gridden, så ved jeg godt hvad
jeg vil vælge.
| |
Rune Jensen (10-03-2008)
| Kommentar
Fra : Rune Jensen |
Dato : 10-03-08 13:36 |
|
On Mar 10, 8:04 pm, Stefan Kristensen <j...@mad.dk> wrote:
> Kan I hjælpe mig med at få siderne til at vises så ens det nu kan lade
> sig gøre mellem de to browsere?
Mjah. Du skal først og fremmest have en width på din main-wrap. Så
giver du den en margin: 0 auto;
Det virker fra IE6+
Så for at få IE5+ med, skal du have en text-align: center i body og en
text-align: left på din main-wrap
Læs mere her: http://www.hjemmesideskolen.dk/html/testsider/varfont.asp
Tjek i et eller andet a la totalvalidator.com, når designet er lavet.
Din Main-wrap skal også indeholde din <h1>, ellers skal du style <h1>
for sig, og det er der ingen grund til.
> Og hvis nogen har en anden browser end de to nævnte, hører jeg meget
> gerne om det ser fornuftigt ud i dem.
Vises med centrering i Opera 9.25 som det er nu. Men det er jo lige
meget, du kan ligeså godt lave de implementeringer, så det er helt OK.
MVH
Rune Jensen
| |
Rune Jensen (10-03-2008)
| Kommentar
Fra : Rune Jensen |
Dato : 10-03-08 13:46 |
|
On Mar 10, 8:36 pm, Rune Jensen <runeofdenm...@gmail.com> wrote:
> Læs mere her: http://www.hjemmesideskolen.dk/html/testsider/varfont.asp
...og så sæt font-size i % i stedet for det foreslåede, hvis du vil
bruge den fulde løsning. Ellers vil siderne ikke skalere teksten
forholdsvist ens mellem browserne (IE-browser bug ved nedarvning, så
vidt jeg husker) ...eller undlad helt at sætte font-size.
MVH
Rune Jensen
| |
Stefan Kristensen (10-03-2008)
| Kommentar
Fra : Stefan Kristensen |
Dato : 10-03-08 21:00 |
|
Rune Jensen wrote:
>> Kan I hjælpe mig med at få siderne til at vises så ens det nu kan lade
>> sig gøre mellem de to browsere?
>
> Mjah. Du skal først og fremmest have en width på din main-wrap. Så
> giver du den en margin: 0 auto;
Nope - Det hjalp ikke 
> Så for at få IE5+ med, skal du have en text-align: center i body og en
> text-align: left på din main-wrap
Det hjalp heller ikke...
> Din Main-wrap skal også indeholde din <h1>, ellers skal du style <h1>
> for sig, og det er der ingen grund til.
Jo, det er der. Jeg bruger et baggrundsbillede for at få de to kolonner
til at se ud som om de er lige høje. Hvis jeg lægger min h1 ind i
content, kommer dte til at se helt forkert ud.
Er det bare min IE7 der er helt syg, eller ser I andre det også?
Mvh
Stefan
| |
Jørgen Farum Jensen (10-03-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 10-03-08 21:30 |
|
Stefan Kristensen skrev:
> Hej NG.
>
> På min side ( http://jems.dk/test/default.html) har jeg div'er der skal
> være lige høje og centreret på siden. Det virker fint i FF, men IE7
> lægger det helt ud til venstre, og det ser ud som om der kommer noget
> ekstra padding på de to div's.
> Siden validere både mht. html og css.
>
> Kan I hjælpe mig med at få siderne til at vises så ens det nu kan lade
> sig gøre mellem de to browsere?
>
> Og hvis nogen har en anden browser end de to nævnte, hører jeg meget
> gerne om det ser fornuftigt ud i dem.
Ved kun at standard HTML:
1. Det er ingen nytte til at give dit HTML-element
en eksplicit bredde, og da slet ikke når summen af
dine elementers bredde overstiger de 800 pixel.
2. text-align center er kun nødvendig af hensyn
til IE 5 og IE6 i quirks modus, så den behøver du
ikke bruge. De få IE5 brugere tager sig vel ikke af at
siden er venstrestillet.
3. Der er noget galt med dine bredde beregninger:
Hvad er 99% plus 4 pixel border? Hvis du ikke kan regne
det ud, kan en browser nok heller ikke.
4. HTML {margin: 0 auto;} nulstiller ikke de
vandrette marginer.
Se artiklen
http://webdesign101.dk/layout/
I den skulle du nok kune finde et brugbart
layout med tilhørende forklaring, som ikke
vil drille dig.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Rune Jensen (10-03-2008)
| Kommentar
Fra : Rune Jensen |
Dato : 10-03-08 14:43 |
|
On 10 Mar., 21:30, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
> 2. text-align center er kun nødvendig af hensyn
> til IE 5 og IE6 i quirks modus, så den behøver du
> ikke bruge. De få IE5 brugere tager sig vel ikke af at
> siden er venstrestillet.
Tjah... Det er to linjers kode. Det vil jeg gerne ofre på at få det
100% kompatibelt. Ærligt.
MVH
Rune Jensen
| |
Rune Jensen (10-03-2008)
| Kommentar
Fra : Rune Jensen |
Dato : 10-03-08 14:46 |
|
On 10 Mar., 21:30, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
> Ved kun at standard HTML:
> 1. Det er ingen nytte til at give dit HTML-element
> en eksplicit bredde, og da slet ikke når summen af
> dine elementers bredde overstiger de 800 pixel.
Må jeg så spørge, hvordan browseren skal kunne beregne den
tiloversblevne margin på hver side, hvis der ikke er nogen width?
Hvordan vil du fordele ligeligt noget af x, hvor x er ubekendt?
Beats me.
MVH
Rune Jensen
| |
Jørgen Farum Jensen (11-03-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 11-03-08 00:22 |
|
Rune Jensen skrev:
> On 10 Mar., 21:30, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
>
>> Ved kun at standard HTML:
>> 1. Det er ingen nytte til at give dit HTML-element
>> en eksplicit bredde, og da slet ikke når summen af
>> dine elementers bredde overstiger de 800 pixel.
>
> Må jeg så spørge, hvordan browseren skal kunne beregne den
> tiloversblevne margin på hver side, hvis der ikke er nogen width?
> Hvordan vil du fordele ligeligt noget af x, hvor x er ubekendt?
>
> Beats me.
Normalt vil et containing element midtstilles
i forhold til body-vinduet, hvis det har
en bredde og margin:auto.
IE5 vil venstrestille containeren medmindre man giver
sætte text-align:center på body-markøren og derefter
redder containeren ved at vælge text-align:left for denne.
I eksemplet er der er width på 99% + 4 pixel på
containerelemntet. Hvilken bredde er det?
Containerens indhold har eksplicitte bredder,
hvilket er tilstrækkeligt til at give containeren
en iboende bredde. Der er altså ikke noget ubekendt
x, men kun en overstyret side. Forskellige mål på samme
element er simpelthen ikke logisk.
HTML-elementet repræsenteret browservinduets indholds-
rude. At sætte bredde på denne forkommer mig meningsløst.
Hvis man endelig vil gøre noget, kan man sætte margin
og/eller padding på dette element.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Allan Vebel (11-03-2008)
| Kommentar
Fra : Allan Vebel |
Dato : 11-03-08 00:21 |
| | |
|
|