CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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).

Synes godt om

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

Synes godt om

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) :)

Synes godt om

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.

Synes godt om

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 :)

Synes godt om

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

Synes godt om

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)).

Synes godt om

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 ;-)

Synes godt om

detverdner Nybegynder

27. juli 2004 - 11:52 #9

Sorry - http://test.compulations.dk/tipsen/ :)

Synes godt om

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 ;-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
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

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS