---

Hej profs.

Jeg må sige det irriterer mig godt og grundigt at næsten hver gang man
laver noget i CSS, så vises det aldrig ens i IE og FF. Det er sku lidt
irriterende i længden. Nå men nu til mit problem.

Hvis I kigger på www.webweaver.dk i IE og FF, vil I kunne se at den blå
boks i toppen fejler i FF, hvor den er for lang så der kommer
horisontalt scroll.

Jeg forstår egentlig ikke hvorfor, fordi det burde ikke være særlig
svært at vise korrekt, når jeg giver boksen 100% width, og en margin på
10 px i hver side på mit body tag. IE forstår det, men som sagt gør FF
ikke. Hvordan kan jeg løse problemet, så jeg får den til at passe i FF
også?

Min CSS:

/* --- BODY ----------------------------------------------------- */
      /* Styrer margin */
      /* -------------------------------------------------------------- */
      
      body {   
         margin-left: 10px;
         margin-top: 0px;
         margin-right: 10px;
      }   
      
      /* --- POSITIONERING -------------------------------------------- */
      /* Styrer hvor de forskellige layers (divs) skal placeres henne */
      /* -------------------------------------------------------------- */   
   
      
      #logo {
         position: absolute;      
         left: 10px;      
         top: 13px;
      }
      
      #topbar {
         position: absolute;
         left: 10px;
         top: 72px;         
         height: 52px;
         width: 100%;
background-image:url(http://www.webweaver.dk/billeder/top_bar.jpg);
         background-repeat: repeat-x;      
      }



Min HTML fil:

<div id="topbar">Test...</div>

...

På forhånd tak :)

Mvh. Lasse Jensen

---

Lasse Jensen skrev:

> Hvis I kigger på www.webweaver.dk i IE og FF, vil I kunne se at den blå
> boks i toppen fejler i FF, hvor den er for lang så der kommer
> horisontalt scroll.

Ja, og i Opera bliver boksene med statistik og nyheder skåret
lidt af i højre side.

Har du prøvet at lave siden bredde f.eks. 95%? Hvis jeg husker
ret, måtte jeg skære lidt ned på Fidusosidernes bredde for ikke
at få problemer.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen skrev:
> Lasse Jensen skrev:
>
>
>>Hvis I kigger på www.webweaver.dk i IE og FF, vil I kunne se at den blå
>>boks i toppen fejler i FF, hvor den er for lang så der kommer
>>horisontalt scroll.
>
>
> Ja, og i Opera bliver boksene med statistik og nyheder skåret
> lidt af i højre side.
>
> Har du prøvet at lave siden bredde f.eks. 95%? Hvis jeg husker
> ret, måtte jeg skære lidt ned på Fidusosidernes bredde for ikke
> at få problemer.
>

Det er selvfølgelig en løsning, men en meget kedelig en, da man tydeligt
kan se forskellen! Og stadig ligger der et problem i at boksen aldrig
vil flugte med de andre bokse nedenunder både i IE og FF. Det er enten
det ene sted eller det andet.

Men til gengæld synes jeg at kunne se at man kan løse problemet ved at
bruge float: left; i stedet for absolute: position;, men så er problemet
bare at jeg ikke kan få et billede til at ligge sig oven på boksen!?

Argh... Hvorfor vil det ikke bare som mig! ;)

Mvh. Lasse Jensen

---

Lasse Jensen wrote:
> Hvis I kigger på www.webweaver.dk i IE og FF, vil I kunne se at den
> blå boks i toppen fejler i FF, hvor den er for lang så der kommer
> horisontalt scroll.
>
> Jeg forstår egentlig ikke hvorfor, fordi det burde ikke være særlig
> svært at vise korrekt, når jeg giver boksen 100% width, og en margin
> på 10 px i hver side på mit body tag.

Det er netop her, problemet ligger. Når du sætter margin på 10px i begge
sider på body og sætter #topbar til 100%, bliver den samlede bredde på (100%
+ 20px).

Du skal slette breddedefinitionen på div#topbar i css og i html skal du
flytte #topbar's sluttag end efter sluttag for div#logo.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Erik Ginnerskov skrev:
>
> Det er netop her, problemet ligger. Når du sætter margin på 10px i begge
> sider på body og sætter #topbar til 100%, bliver den samlede bredde på (100%
> + 20px).
>
> Du skal slette breddedefinitionen på div#topbar i css og i html skal du
> flytte #topbar's sluttag end efter sluttag for div#logo.
>

Ja regnede også med problemet var at de 20px blev lagt over i de 100%.
Jeg har prøvet at gøre som du siger, men jeg kan ikke se hvordan det kan
løse problemet? Efter at ha gjort som du nævner, står jeg uden en blå
boks + et logo som er helt malplaceret. Både i IE og FF.

Hvis jeg fjerner breddedefinationen i min CSS til #topbar, så forsvinder
min blå boks naturligvis. Så den kan jeg ikke helt forstå hvorfor du
siger jeg skal det? Så bliver den jo aldrig ud til kanten. Det løser dog
ganske vidst problemet med scroll :);)

At flytte slut tag'et fra #topbar ned under #logo div'en forstår jeg
godt, da jeg dermed kan få den ovenpå. Men det får altså desværre bare
det hele til at gå i kage. Så flytter den logo'et ned på et forkert sted. :(

Mvh. Lasse Jensen

---

Lasse Jensen wrote:

> Ja regnede også med problemet var at de 20px blev lagt over i de 100%.
> Jeg har prøvet at gøre som du siger, men jeg kan ikke se hvordan det
> kan løse problemet? Efter at ha gjort som du nævner, står jeg uden en
> blå
> boks + et logo som er helt malplaceret. Både i IE og FF.

Prøv at lave en grafik, der viser hvordan du vil have det til at se ud. Læg
grafikken på nettet og kom med et link til det.

Så kigger jeg på koderne.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Erik Ginnerskov skrev:
>
> Prøv at lave en grafik, der viser hvordan du vil have det til at se ud. Læg
> grafikken på nettet og kom med et link til det.
>
> Så kigger jeg på koderne.
>

Hej Erik.

Det lyder super.

Resultet skal ende med at ligne dette:
http://www.webweaver.dk/billeder/result.jpg

Men det er åbenbart ikke bare lige sådan et lave med div og CSS, og så
det vel og mærke er funktionelt i diverse browsere.

Det ville da være trist hvis jeg blev nødt til at benytte mig at tabeller..

På forhånd tak :)

Mvh. Lasse Jensen

---

Lasse Jensen wrote:

> Resultet skal ende med at ligne dette:
> http://www.webweaver.dk/billeder/result.jpg

Det kigger jeg på senere på dagen.
>
> Men det er åbenbart ikke bare lige sådan et lave med div og CSS, og så
> det vel og mærke er funktionelt i diverse browsere.

Det er bare at lave det på den rigtige måde.

> Det ville da være trist hvis jeg blev nødt til at benytte mig at
> tabeller..

Det skulle ikke være nødvendigt.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Lasse Jensen wrote:

> Resultet skal ende med at ligne dette:
> http://www.webweaver.dk/billeder/result.jpg
>
> Men det er åbenbart ikke bare lige sådan et lave med div og CSS, og så
> det vel og mærke er funktionelt i diverse browsere.

Så skulle det vist være som ønsket:

http://hjemmesideskolen.dk/usenet/lassejensen/

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Erik Ginnerskov skrev:
>
> Så skulle det vist være som ønsket:
>
> http://hjemmesideskolen.dk/usenet/lassejensen/
>

Jooeh sådan da. Det ser fint ud det du har lavet. :) Altså indtil man
kommer op i en stor opløsning, som er større end baggrunden, som du har
lavet en stor i stedet. Så kan man se logoet forfra.. Kan man ikke lave
det som logo og "kasse" i 2 forskellige divs tror du eller bliver man
nødt til at gøre som dig?

Mange tak indtil videre :)

Mvh. Lasse Jensen

---

Lasse Jensen wrote:

> Jooeh sådan da. Det ser fint ud det du har lavet. :) Altså indtil man
> kommer op i en stor opløsning, som er større end baggrunden, som du
> har lavet en stor i stedet.

Jeg har tested det i 1024×768 px, hvor der passede fint. Vil du have det
bredere, kan det da nemt laves.

http://hjemmesideskolen.dk/usenet/lassejensen/

Den kan nu klare 2000 px i bredden.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Lasse Jensen skrev:

> Jeg forstår egentlig ikke hvorfor, fordi det burde ikke
> være særlig svært at vise korrekt

Prøv at rette de fejl validatoren giver på

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.webweaver.dk%2F&ss=1&outline=1

I mange tilfælde forsvinder fejlvisninger som dug for solen
når koden er skrevet korrekt, og så skal vi ikke bruge tid
på den slags.

> når jeg giver boksen 100% width, og en margin på 10 px
> i hver side på mit body tag. IE forstår det, men som sagt
> gør FF ikke. Hvordan kan jeg løse problemet, så jeg får
> den til at passe i FF også?

Prøv at nulstille margin, og leg i stedet med padding på de
forskellige bokse. Jeg bruger meget at sætte

#indhold element{
border:solid 1px red;
}

på de enkelte elementer, så jeg kan se hvor meget de fylder
i flowet, og så bruger jeg nogle specialværktøjer når jeg
udvikler, se også http://html-faq.dk/3001.asp

--
Allan Vebel
http://html-faq.dk

---

Allan Vebel skrev:
>
> Prøv at rette de fejl validatoren giver på
>
> http://validator.w3.org/check?uri=http%3A%2F%2Fwww.webweaver.dk%2F&ss=1&outline=1
>
> I mange tilfælde forsvinder fejlvisninger som dug for solen
> når koden er skrevet korrekt, og så skal vi ikke bruge tid
> på den slags.
>

Nu ved jeg ikke om du har kigget nærmere på fejlene, men de har egentlig
slet ikke noget med den del af koden at gøre som denne tråd omhandler.
Langt de fleste fejl kan jeg ikke gøre noget, da det er fejl som ligger
i koderne til sponsorne's banner, som jeg ikke kan rette i.

Der ser dog ud til at være 2 fejl jeg har lavet omkring en <form>, så
det vil jeg da lige kigge på :) ;)

>
>>når jeg giver boksen 100% width, og en margin på 10 px
>>i hver side på mit body tag. IE forstår det, men som sagt
>>gør FF ikke. Hvordan kan jeg løse problemet, så jeg får
>>den til at passe i FF også?
>
>
> Prøv at nulstille margin, og leg i stedet med padding på de
> forskellige bokse. Jeg bruger meget at sætte
>
> #indhold element{
> border:solid 1px red;
> }
>
> på de enkelte elementer, så jeg kan se hvor meget de fylder
> i flowet, og så bruger jeg nogle specialværktøjer når jeg
> udvikler, se også http://html-faq.dk/3001.asp
>

Jeg har prøvet padding på boksene i stedet for margin i siderne.
Samme resultat.

Men ja det er altid meget godt at bruge en border til at gå lidt efter.

Mvh. Lasse Jensen

---

Lasse Jensen wrote:

>>
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.webweaver.dk%2F&ss=1&outline=1

> Langt de fleste fejl kan jeg ikke gøre noget, da det er
> fejl som ligger i koderne til sponsorne's banner, som jeg ikke kan
> rette i.

Alle fejlene kunne rettes.

> Der ser dog ud til at være 2 fejl jeg har lavet omkring en <form>, så
> det vil jeg da lige kigge på :) ;)

Den side, jeg lagde ud til dig er valid html transitional.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Erik Ginnerskov skrev:
>
>>Langt de fleste fejl kan jeg ikke gøre noget, da det er
>>fejl som ligger i koderne til sponsorne's banner, som jeg ikke kan
>>rette i.
>
>
> Alle fejlene kunne rettes.
>

Jeg kan skam også rete dem. Men så virker links'ne bare ikke korrekt
længere, så klikket bliver ikke registreret korrekt, og dermed går
betalingen ikke igennem. ;)

Mvh. Lasse Jensen

---

Lasse Jensen skrev:
>
> Hvis I kigger på www.webweaver.dk i IE og FF, vil I kunne se at den blå
> boks i toppen fejler i FF, hvor den er for lang så der kommer
> horisontalt scroll.

Jeg har nu løst problemet.
Jeg fik ikke det ønskede resultat med CSS eller Divs med nogle af de
forskellige metoder, men jeg fik det til at virke med tabels, så det
bruger jeg i stedet. Desværre.. Men da det virker, vælger jeg det.

Tak for alt hjælpen :) Især til dig Erik Ginnerskov :)

Mvh. Lasse Jensen

---

Lasse Jensen wrote:

> Jeg har nu løst problemet.
> Jeg fik ikke det ønskede resultat med CSS eller Divs med nogle af de
> forskellige metoder, men jeg fik det til at virke med tabels, så det
> bruger jeg i stedet.

Ser du siden i en 800×600px browser, får du en vandret scrollbar.


> Tak for alt hjælpen :) Især til dig Erik Ginnerskov :)

Vel bekomme.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Erik Ginnerskov skrev:
>
> Ser du siden i en 800×600px browser, får du en vandret scrollbar.

Det er jeg klar over. Jeg arbejder på det. ;)

Mvh. Lasse Jensen