Kandu.dk - CSS


/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg

Glemt dit kodeord?

Brugernavn*

Kodeord *

Husk mig

Brugerservice

Kom godt i gang

Bliv medlem

Seneste indlæg

Find en bruger

Stil et spørgsmål

Skriv et tip

Fortæl en ven

Pointsystemet

Kontakt Kandu.dk

Emnevisning

Kategorier

Alfabetisk

Karriere

Interesser

Teknologi

Reklame

Top 10 brugere

HTML

#	Navn	Point
1	molokyle	11184
2	Klaudi	5506
3	bentjuul	3377
4	severino	2040
5	smorch	1950
6	strarup	1525
7	natmaden	1396
8	scootergr..	1320
9	e.c	1150
10	miritdk	1110

CSS
Fra : Kasper Johansen

Dato : 18-12-03 22:46

Hej gruppe.

Hvis bruger en Mozialle browser og går ind på siden www.wc3replays.dk vil i
kunne se en masse bokse uden overskrift. Disse er imidlertidigt placeret
øverst til venstre af vinduet, hvilket er en fejl! Hvis i bruger IE og går
ind på samme side kan i se hvordan det er meningen at det skal se ud.

Jeg bruger css til placering af disse "titel-bokse" og problemet opstår idet
af Mozilla ikke forstå af denne boks skal placeres ud fra en <td>'s
placering og ikke <body>'s placering.

Boksekoden er således:

<DIV STYLE="padding: 5px;">
<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=0 STYLE="border-style:
solid;border-width: 1px 1px 1px 1px;border-color: #D5D5D5;background-color:
#000000;" WIDTH="400px">
<TR>
<TD HEIGHT=3 STYLE="position: relative; top: 0px; left: 0px;">
<DIV STYLE="position: absolute;top: -7px;left: 10px;border-style:
solid;border-width: 0px 0px 1px 0px;border-color: #D5D5D5;background-color:
#16181A;font-size: 12px;font-weight: bold;color: ghostwhite;white-space:
nowrap;">
 Titelnbsp;
<DIV STYLE="position: absolute;top: 6px;left: 0px;width: 1px;height:
9px;font-size: 1px;background-color: #FFFFFF;"></DIV>
<DIV STYLE="position: absolute; top: 6px; right: -1px; width: 1px;
height: 9px; font-size: 1px; background-color: #FFFFFF;"></DIV>
</DIV>
</TD>
</TR>
<TR>
<TD>
Indhold
</TD>
</TR>
</TABLE>
</DIV>

Ordnet ser styles ud således:

<table>
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #D5D5D5;
background-color: #000000;"

<div> 1
position: absolute;top: -7px;left: 10px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #D5D5D5;
background-color: #16181A;
font-size: 12px;
font-weight: bold;
color: ghostwhite;
white-space: nowrap;

<div> 2 - line left
position: absolute;top: 6px;left: 0px;width: 1px;
height: 9px;
font-size: 1px;
background-color: #FFFFFF;

<div> 3 - line right
position: absolute; top: 6px; right: -1px; width: 1px;
height: 9px;
font-size: 1px;
background-color: #FFFFFF;

Hvad er det jeg skal skrive for at få den til at vide at div's skal placeres
ud fra <td>'s placering i stedet for <body>'s?

Erik Ginnerskov (18-12-2003)

Kommentar
Fra : Erik Ginnerskov

Dato : 18-12-03 23:56

"Kasper Johansen" <kasper@llsweb.dk> skrev
>
> Hvis bruger en Mozialle browser og går ind på siden www.wc3replays.dk vil
i
> kunne se en masse bokse uden overskrift. Disse er imidlertidigt placeret
> øverst til venstre af vinduet, hvilket er en fejl! Hvis i bruger IE og går
> ind på samme side kan i se hvordan det er meningen at det skal se ud.
>
> Jeg bruger css til placering af disse "titel-bokse" og problemet opstår
idet
> af Mozilla ikke forstå af denne boks skal placeres ud fra en <td>'s
> placering og ikke <body>'s placering.
>
> Boksekoden er således:
>
> <DIV STYLE="padding: 5px;">
> <TABLE BORDER=0 CELLPADDING=10 CELLSPACING=0 STYLE="border-style:
> solid;border-width: 1px 1px 1px 1px;border-color:
#D5D5D5;background-color:
> #000000;" WIDTH="400px">
> <TR>
> <TD HEIGHT=3 STYLE="position: relative; top: 0px; left: 0px;">
> <DIV STYLE="position: absolute;top: -7px;left: 10px;border-style:
> solid;border-width: 0px 0px 1px 0px;border-color:
#D5D5D5;background-color:
> #16181A;font-size: 12px;font-weight: bold;color: ghostwhite;white-space:
> nowrap;">

Som du refererer koden, er det Mozilla, der viser det rigtigt. Du
positionerer overskrifterne i vinduets øverste venstre hjørne, hvor du
mener, at de skal positioneres i forhold til tabellens eller tabelcellens
placering. At IE sætter overskrifterne som du ønsker er nærmest et mirakel.

Hvis du i tabellens style tilføjer dette: 'position:relative', skulle du
kunne styre overskrifternes placering ind i forhold til tabellen, uanset
tabellens placering i browservinduet.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/egin

Kasper Johansen (19-12-2003)

Kommentar
Fra : Kasper Johansen

Dato : 19-12-03 00:19

> Hvis du i tabellens style tilføjer dette: 'position:relative', skulle du
> kunne styre overskrifternes placering ind i forhold til tabellen, uanset
> tabellens placering i browservinduet.

Dette havde jeg allerede gjort i <td>'en. Hvis denne ikke er sat i IE bliver
boksen vist ligesom i Mozilla, oppe i venstre hjørne. Men jeg prøvede nu at
flytte position til <table> hvilket gav præcist samme resultat som hvis den
stod i <td>, dog vil Mozilla stadig ikke vise den andre steder end oppe i
venstre hjørne.

Mvh
Kasper

Jens Gyldenkærne Cla~ (19-12-2003)

Kommentar
Fra : Jens Gyldenkærne Cla~

Dato : 19-12-03 00:01

Kasper Johansen skrev:

> Hvis bruger en Mozialle browser og går ind på siden
> www.wc3replays.dk vil i kunne se en masse bokse uden
> overskrift. Disse er imidlertidigt placeret øverst til venstre
> af vinduet, hvilket er en fejl! Hvis i bruger IE og går ind på
> samme side kan i se hvordan det er meningen at det skal se ud.

Prøv at gå to dage tilbage i gruppen og find tråden IE / Mozilla.
Du kan også prøve at læse et svar fra den tråd direkte:
<news:Xns94538DAAD8265jcdmfdk@gyrosmod.dtext.news.tele.dk>.

Hele indlægget er også relevant for dit spørgsmål.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Søg

Reklame

Statistik

Spørgsmål :	177554
Tips :	31968
Nyheder :	719565
Indlæg :	6408852
Brugere :	218888

Månedens bedste

Årets bedste

Sidste års bedste