Notifikationer

Markér alle som læst Log ud

nwn Nybegynder

24. december 2008 - 18:36 Der er 16 kommentarer og
1 løsning

<hr> element efter </ul> i firefox

Ja, som overskriften siger.

Jeg har nogle nogle <ul> og <li> elementer, efterfulgt af et <hr> element. F.eks:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

<hr>

Det vises præcis som det skal i IE, men i FF sætter <hr> elementet sig helt ud i højre side og en smule op ad. Dvs. det skiller sig fuldstændig ud fra alle de andre ting. Hvorfor, har jeg ingen anelse om. Jeg har prøvet at sætte forskellige positions under hr i mit CSS dokument, uden held.

Det ser således ud, inde i CSS dokumentet ved hr:

hr {
width: 100%
height: 1px;
background-color: #000000;
}

Nogle der har en ide om hvorfor?

Synes godt om

roenving Novice

24. december 2008 - 21:31 #1

Hvad sker der, hvis du placerer en <br> mellem din ul og din hr ?-)

-- jeg kommer nemlig umiddelbart til at tænke på begrebet inline-block, som slet ikke er implementeret i IE !-)

Synes godt om

nwn Nybegynder

24. december 2008 - 21:59 #2

Tja, det eneste der så sker er, at <hr> linierne hopper en linie ned, men de forbliver stadig ved den mærkelig position, ude i højre side..

Synes godt om

nwn Nybegynder

24. december 2008 - 22:27 #3

Problemet er der sådan set med alle elementer. F.eks kan ren tekst sagtens stå der.

Det fandt jeg lige ud af, da jeg testede med en anden form for <hr>, ved at bruge <div>.

.line {
width: 100%;
height: 1px;
margin-top: 2px;
margin-bottom: 2px;
background-color: #9A9A9A;
}

Linierne her smutter ikke helt ud til højre, men de går helt op til toppen.

Mine <ul>'s har så følgende i CSS dokumentet:

ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style: none;
}

Det må jo så skyldes, at der ikke er defineret en height, hvilket man egentlig heller ikke kan. Dvs, at hvis min <ul>'s så således ud, når de blev brugt, så skulle det virke, men det er dog ikke rigtig kode så:

<ul>
<li>
<li>
tekst
</ul>

Samme problem har jeg haft ved <div>'s. Der var det blot at indsætte en yderligere <div> med noget indhold og clear: both;

Synes godt om

olebole Juniormester

25. december 2008 - 18:33 #4

<ole>

'list-style' hører til på li-elementer, men det er nu nok noget float-halløj, der giver dig problemer. Prøv at lægge et link til et eksempel - så er det meget lettere at finde fejlen

/mvh
</bole>

Synes godt om

nwn Nybegynder

25. december 2008 - 19:14 #5

Så mødes vi jo igen Ole, under CSS :-)

Jeg har nu smidt det op. CSS'en er dog ikke inkluderet fra en fil, den er inde i selve dokumentet.

Prøv at kigge både med IE og FF. Det ser ud som det skal, i IE, men ikke i FF.

http://www.acbonus.1go.dk

Synes godt om

nwn Nybegynder

25. december 2008 - 19:16 #6

Ja, og som nævnt, plejer det som regel at kunne løses i divs ved at bruge clear: both; Det er ikke tilfældet her.

Ved at gå til linket, kan der jo ses, at <hr> linien er helt øverst, mens den i IE, vises som jeg ønsker.

Synes godt om

olebole Juniormester

25. december 2008 - 19:47 #7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test side</title>
<meta name="Generator" content="Stone's WebWriter 4">
<style>
ul {
width: 100%;
margin: 0px;
padding: 0px;
}
.test li {
float: left;
list-style: none;
}
hr {
width: 100%;
height: 1px;
background-color: #000000;
}
.clear {
height: 0;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>

<ul class="test">
<li>Tekst1</li>
<li>Tekst2</li>
<li>Tekst3</li>
</ul>

<div class="clear"> </div>

<hr>

<ul class="test">
<li>Tekst1</li>
<li>Tekst2</li>
<li>Tekst3</li>
</ul>

</body>
</html>

Synes godt om

olebole Juniormester

25. december 2008 - 19:48 #8

- men det giver ikke mening at give li-elementerne 'width:50%'

Synes godt om

olebole Juniormester

25. december 2008 - 19:49 #9

- og *psssssst* ... husk semikolon efter bredden på hr-elementet ;o)

Synes godt om

olebole Juniormester

25. december 2008 - 19:50 #10

Faktisk bør det heller ikke være nødvendigt at give ul eller hr 'width:100%'

Synes godt om

nwn Nybegynder

25. december 2008 - 20:04 #11

Jeg må sgu have slået hovedet, for jeg har allerede en:

.clear {
font-size: 0px;
clear: both;
}

i min CSS fil, og så har jo allerede brugt <div class="fixed"> </div> i mit dokument, da jeg havde problemer <div>'s.

Jeg har så bare indsat den nu her, og det virker som det skal. Jeg takker dig ;)

Men jeg har et par spørgsmål, som du måske ville svare mig, samtidig =D

- men det giver ikke mening at give li-elementerne 'width:50%'

Jeg bliver jo nød til at give dem en bredde, hvis jeg nærmest skal kunne lave kolonner, med lige afstand, så det ser ordenligt ud?

Og hvad er mest rigtigt. Blot at give mine <ul>'s en class, som så automatisk giver mine <li>'s en bredde, eller er det mere korrekt, at give ens <li>'s bredde inde i selve dokumentet ved <li style="width: ??px">. Sidst nævnte giver jo meget bedre mulighed for at holde "styr" på tingene, hvis man kan sige det sådan.

Synes godt om

nwn Nybegynder

29. december 2008 - 23:48 #12

Smid blot et svar..

Synes godt om

olebole Juniormester

30. december 2008 - 02:52 #13

Undskyld, men jeg har ikke fået mail om din seneste kommentar. Bare spørg, hvis der stadig er noget, du er i tvivl om =)

Synes godt om

nwn Nybegynder

30. december 2008 - 13:51 #14

Det gør skam ingenting (=

Ja der var lige disse 2:

- men det giver ikke mening at give li-elementerne 'width:50%'

Jeg bliver jo nød til at give dem en bredde, hvis jeg nærmest skal kunne lave kolonner, med lige afstand, så det ser ordenligt ud?

Og hvad er mest rigtigt. Blot at give mine <ul>'s en class, som så automatisk giver mine <li>'s en bredde, eller er det mere korrekt, at give ens <li>'s bredde inde i selve dokumentet ved <li style="width: ??px">. Sidst nævnte giver jo meget bedre mulighed for at holde "styr" på tingene, hvis man kan sige det sådan.

Synes godt om

olebole Juniormester

30. december 2008 - 18:34 #15

Hvis der er tre li-elementer, som skal floates på én række, giver det ikke mening at give dem hver 50% af den samlede bredde. Så kommer de jo til at fylde 150% af den tilgængelige bredde ;o)

Hvis jeg skal sætte styles på alle li-elementer under et bestemt ul-element med class="myList", gør jeg det sådan:

.myList li {
width: 33px;
float: left;
list-style: none;
}

Synes godt om

olebole Juniormester

30. december 2008 - 18:34 #16

- og tek for points ;o)

Synes godt om

nwn Nybegynder

30. december 2008 - 19:27 #17

Tak i lige måde, og tak for du vil besvare min spg =D

Men de 3 li-elementer var blot til test. Hvis der f.eks er 4, så vil nr. 3 og 4 jo netop springe ned på næste linie automatisk.

Og skal de have forskellige bredde, så er det mest optimale vel at definere bredden via style="" ?

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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