CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede tipsen Nybegynder
26. juli 2004 - 12:11 Der er 8 kommentarer og
2 løsninger

Webdesign giver problemer i IE

Hej eksperter

Jeg er ved at nørkle et design færdigt til min egen hjemmeside, der lidt skal være en sandkasse, hvor jeg kan afprøve de nye teknikker jeg falder over...

Det primære mål, har været at lave en side, der ser fornuftig ud og tilpasser sig forskellige opløsninger, browser-vindue-størrelser og skrift-størrelser og så må det også gerne være noget der skiller sig lidt ud... Det kan ses på:

http://www.tommyipsen.dk/index2.htm

NB: Bemærk, at siden langt fra er færdig-designet - der mangler stadig bl.a. header og footer, men nedenstående problemer optræder i de næsten færdige elementer... :-/

Siden bliver vist næsten 100% som forventet i Mozilla Firefox, men som ventet giver IE nogle problemer, som sikkert skal fixes med nogle høkerløsninger...

1. Baggrunden til toppen af indholdsboksen repeteres inde i boksen - IE laver vist noget lidt uigennemskuelig nedarvning her... Jeg har ikke kunnet fjerne det, men lidt spøjst er det også, at hvis man kører markøren hen over bread-crumb menuen, så forsvinder det...

2. Sidebredden er lidt større end planlagt - IE bruger lige lidt for mange pixels, hvilket bevirker at der kommer en vandret scrollbar - temmelig irriterende, men sikkert pga. fortolkningen af boks-modellen.

Håber I kan hjælpe med nogle løsninger på ovenstående - og jeg vil da gerne høre, hvordan sider opfører sig i de browsere i nu brugere - det kan jo være der er flere ting der skal fikses!

Mvh Tommy
Avatar billede detverdner Nybegynder
26. juli 2004 - 17:58 #1
Blot en første kommentar: jeg har de samme problemer som du taler om. Jeg bruger IE6.0 xpsp2 på WinXP Home ed. (SP1).
Avatar billede tipsen Nybegynder
26. juli 2004 - 20:18 #2
Jeg har formået at lave en (høker?) løsning på problem 2 - jeg har "leget" lidt med målene og pludselig fungerede det nogenlunde (stadig ikke ordentlig placering) i IE uden at ødelægge skidtet i Firefox.

Jeg kan til gengæld ikke forstå, hvorfor baggrunden på den måde repeteres... - håber der er nogen som kan forklare det og også gerne løse det :-)

Mvh Tommy
Avatar billede detverdner Nybegynder
26. juli 2004 - 21:12 #3
Her er nogle mulige løsninger. Bemærk: jeg sidder ikke ved min egen maskine, så jeg kan kun teste i IE 6.0.

Til sagen: float er noget sært noget at arbejde med, fordi det ændrer en del ved vores forståelse af det almindelige HTML-flow. Nøglen til løsningen af dit problem ligger i, at din .MenuContainer skal floate til venstre(!). Fx:

div.MenuContainer {
    font-size: 1em;
    line-height: 1em;
    background: url(http://www.tommyipsen.dk/images/custom_corners_topleft.gif) top left no-repeat;
    float: left;
    margin-top: 15px;
    width: 13.5em;
}

På den måde styrer du din højre margin med bredden i stedet for med en masse margin-arbejde.

Det giver denne kode i main.css:

#container {
    width: 100%;
    float: left;
    background: transparent;
    margin-right: -14.5em;
}

Should work. Sig bare til, hvis du har brug for uddybning.

Jeg vender tilbage med problem 2 om lidt. Jeg skal lige have udskilt mine ændringer i dit stylesheet. Men tro mig - der er en løsning (det er der altid) :)
Avatar billede detverdner Nybegynder
26. juli 2004 - 21:14 #4
Hm...fik vist byttet rundt på 1 og 2. Nå, det var altså bredden, jeg kiggede på her.
Avatar billede detverdner Nybegynder
26. juli 2004 - 21:26 #5
Her er så et forslag til at løse den mærkelige double-up af grafikken. Jeg tror problemet kommer af, at du har bevæget dig en del rundt i negative marginer. Det er ikke helt nemt at styre (jeg bruger det stort set aldrig af samme grund).

Jeg har lavet nogle kommenterede ændringer i dit main.css. Det drejer sig om få ændringer:
--------------
. . .

div.Article {
    background: url(../images/custom_corners_topleft.gif) top left no-repeat;
    font-size: 1em;
    margin-left: 1em;
    margin-right: 15em;
    /*margin-top: 15px; -- flytter vi til breadcrumbs */
}

div.Article div.breadcrumb {
    background:url(/images/custom_corners_topright.gif) top right no-repeat;
    font-size: 0.8em;
    padding: 20px 20px 0 0;
    margin: 15px 0 0 20px; /* Har fjernet de 20px i bunden */
}

. . .

div.Article div.ArticleBody {
    background: url(/images/custom_corners_rightborder.gif) top right repeat-y;
    margin: 0; /* Fjerner de -2.5em i toppen */
    padding:20px;
    padding-top: 0; /* Kompensation for ændringen af margin-top */
}

. . .
---------------------

Håber det bringer dig tættere på det design, du vil have :)
Avatar billede tipsen Nybegynder
27. juli 2004 - 01:02 #6
detverdner: Løsningen til bredde-problemet var sublim - identisk resultat i de to browsere - og ganske logisk når man lige ser der :-) Løsningen til det andet kom med et par småjusteringer også til at fungere! Det virker som om du har helt ret mht. de negative marginer - det er dém der giver problemerne - de er desværre bare lidt nødvendige til den måde at bygge en "afrundet" boks på... :-/

Alt i alt blev det løst - og så helt uden høker-løsninger - jeg var bange for, at jeg skulle ud i browser-specifikke løsninger for at få det til at fungere ordentligt!

Resultatet ligger (stadig) på: http://www.tommyipsen.dk/index2.htm

Den eneste lille ting jeg umiddelbart kan finde, er at der er lidt problemer i menuen - de er kun synlige i Firefox og det på de nederste to menupunkter, hvor en hvid baggrund blander sig lidt yderst til højre i hover-effekten på linkene - kan man evt. benytte z-index til at justere denne type problemer - det er det eneste jeg kender til forskydning i z-aksen, men jeg har aldrig prøvet at bruge det...

Tak for al hjælpen - mvh Tommy
Avatar billede detverdner Nybegynder
27. juli 2004 - 11:11 #7
Jeg har kigget lidt på dit :hover-problem. Igen skyldes det de negative værdier - denne gang på #MenuFooter p {}. Jeg har ryddet lidt op i dit stylesheet (kunne sikkert være bedre) og desuden tilføjet et H2-tag i din #MenuHeader-DIV. Resultat:
http://test/compulations.dk/tipsen/ - uden negative margins og paddings.

NB: Jeg har kun testet i nye browsere (IE 6, Firefox 0.9.2 og Opera 7.2.3 (da)).
Avatar billede tipsen Nybegynder
27. juli 2004 - 11:25 #8
Det lyder interessant, men linket er lidt for "lokalt" til at jeg får det store udbytte ;-)
Avatar billede detverdner Nybegynder
27. juli 2004 - 11:52 #9
Sorry - http://test.compulations.dk/tipsen/ :)
Avatar billede tipsen Nybegynder
02. august 2004 - 23:38 #10
Hejsa - min computer har lige været crashet siden midt i sidste uge, så jeg har endnu ikke fået kigget på det, men samler lige op på det i løbet af de næste par dage - så du må helst ikke slette det endnu ;-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 11:41 Windows 10 : Ikke kopiere tekst med Firefox. Men gerne med Opera. Af Ikke-ekspert i Browsere
27/0718:09 Kan ikke fildele fra PC til PC Af gertLundberg i LAN/WAN
27/0717:33 Facebook kopier en tråd Af clausito i Sociale medier
27/0709:49 Indtogs sejlads : OL i Paris : Hvornår kom Danmark ? Af Ikke-ekspert i Fri debat
27/0703:28 Inkasso som privat? Af lekor adams i Fri debat
White papers
Flere white papers »


Premium
Teaser billede
Nordjyske MapsPeople ruster op til opkøb af konkurrenter: "Vi vil vinde det her kapløb"
Læs mere »
Microsoft tager til genmæle: Vores licenspraksis skaber ikke unfair konkurrence
Færre unge studerende på landets it-uddannelser: "Vi afviser dem der, hvor de har lyst til at læse"
Overblik: Sådan forløb årets største databrud - mindst 165 organisationer ramt
Se alle »
Computerworld
Teaser billede
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Læs mere »
Med SearchGPT har verden fået en spritny søgemaskine: Kan den true Googles dominans?
Apples spritnye app til kodeord kommer til iOS 18: Sådan virker den
Apples folde-iPhone tager form: Her er planerne
Se alle »
CIO
Teaser billede
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Læs mere »
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
Stor aftale gør Microsofts datacentre hurtigere - investerer i netværksudstyr
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
IBM Danmark skifter ud i sin øverste ledelse - her er den nye direktion
Se alle »
White paper
Teaser billede
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Læs mere »
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Unbreakable - sådan sikrer du dig vedvarende og uafbrudt adgang til dine data
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »