webForumDet fria alternativet
Logga in / Bli medlem

CSS och Firefox

HTML & CSS

22 svar · 537 visningar · startad av ptr_lks

ptr_lksMedlem sedan juni 2005584 inlägg
Frågan#1

hej hopp..
denna sida:
http://www.polisenbasket-p93.se/meny.html
ser annorlunda ut i FF och IE

  1. texten "Pojkar P93´s hemsida" är längre åt vä i FF
  2. Texten "Nyheter" skall vara längst åt vänster - vilket den inte är i FF
  3. när jag klickar i menyn så blir det i FF prickade sidolinjer. Dessa vill jag ej ha´

Bifogar koden för att spara utrymme

kod_meny.txt (1 kB)
oskobs avataroskobMedlem sedan maj 20021 558 inlägg
#2

Är det du som har gjort sidan?

ptr_lksMedlem sedan juni 2005584 inlägg
#3

oskob skrev:

Är det du som har gjort sidan?

japp...
varför undrar du?

oskobs avataroskobMedlem sedan maj 20021 558 inlägg
#4

Hehe, nej jag förstod inte om du ville ha hjälp med kod eller om du bara var arg på att den inte fungerade i FF.

1. En sak jag inte begriper är varför texten blir större i Explorer. Och eftersom du har puttat texten med &npsp; så blir det ju längre avstånd iom att storleken är större.
Jag hade nog använt padding-left: xx i css:en istället för att knuffa med mellanslag.

2. Testa att lägga till clear: both på style6 som nyheter ligger i för att den ska hoppa ner.

3. Frågan är om det går att få bort på smidigt sätt. Det är ju FF som tycker att man ska kunna se området man klickat på. Kanske går med något trix.

R: Ang. 1. Du har använt x-large i din css för att ange storleken. Antagligen har FF och IE olika åsikter om hur stort det ska bli. Kanske lika bäst att köra i punkter eller liknande.

webbebbaMedlem sedan juni 200573 inlägg
#5

1. Ta bort mellanslag och styr med padding som osob sa (och så hade du glömt ett ";" efter sans-serif). Lägg även till lite padding-top

.style1 
{font-family: Verdana, Arial, Helvetica, sans-serif;
  padding-left:whatever antal px;
  padding-top:10px;
}

2. lägg till text-align: left;

.style6 
{color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: left;
}

3. Jag kan inte se några prickade linjer i Firefox.

ptr_lksMedlem sedan juni 2005584 inlägg
#6

webbebba skrev:

1. Ta bort mellanslag och styr med padding som osob sa (och så hade du glömt ett ";" efter sans-serif). Lägg även till lite padding-top

.style1 
{font-family: Verdana, Arial, Helvetica, sans-serif;
  padding-left:whatever antal px;
  padding-top:10px;
}

2. lägg till text-align: left;

.style6 
{color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: left;
}

3. Jag kan inte se några prickade linjer i Firefox.

Nu är jag noob på css, så jag har ngra frågor:

  1. du skapade en klass väl (.style6) vilka fördelar har detta jämfört med använda tex h6?

  2. fördelar att använda padding istället för

    h6{
position: absolute;
top: 100px;
left: 200px;
}
webbebbaMedlem sedan juni 200573 inlägg
#7

# du skapade en klass väl (.style6)

Nej den klassen fanns i din kod så jag bara modifierade den lite. Sedan vet jag inte vad det skall bli av "nyheter" så därför är det svårt att svara på din fråga om vad som är bäst.

ptr_lksMedlem sedan juni 2005584 inlägg
#8

webbebba skrev:

Sedan vet jag inte vad det skall bli av "nyheter" så därför är det svårt att svara på din fråga om vad som är bäst.

den är tänkt som ett exempel på en rubrik...

Skillnaden mellan

padding-left

och

{
position: absolute;
top: 100px;
left: 200px;
}

Enligt så

A padding is the space between an element's border and the content within it.

Så¨frågan är om inte positionering passar bättre

webbebbaMedlem sedan juni 200573 inlägg
#9
# h1 {
	font-family: georgia, verdana, arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: .05em;
	color: #BE7815;
	padding: 0;
	}

# p {
	font-family: georgia, verdana, arial, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: left;
	}

Ovan ser du hur man kan formatera rubriker och brödtext med CSS istället för att skapa en lite mystisk klass. Padding använder du för att få luft runt texten.

ptr_lksMedlem sedan juni 2005584 inlägg
#10

Men är det korrekt att skriva så här (se röd fet)

# h1 {
	font-family: georgia, verdana, arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
                      [red][B]position: absolute;[/B][/red]
                      [red][B]top: 100px; [/B][/red]
                      [red][B]left: 200px; [/B][/red]
	letter-spacing: .05em;
	color: #BE7815;
	padding: 0;
	}
# p {
	font-family: georgia, verdana, arial, sans-serif;
	font-size: 12px;
	color: #000;
                     [red][B]position: absolute;[/B][/red]
                      [red][B]top: 100px; [/B][/red]
                      [red][B]left: 200px; [/B][/red]
}
webbebbaMedlem sedan juni 200573 inlägg
#11

Med

 position: absolute;
top: 100px; 
left: 200px;

anger du att en box eller en div positioneras 100px från toppen och 200px från vä kanten på sidan. Anger du detta för både rubrik och brödtext så hamnar allt s a s på samma ställe. Försök att titta på hur man enkelt bygger upp en layout med css t ex här: http://www.csstutorial.net/ :)

ptr_lksMedlem sedan juni 2005584 inlägg
#12

webbebba skrev:

Med

 position: absolute;
top: 100px; 
left: 200px;

anger du att en box eller en div positioneras 100px från toppen och 200px från vä kanten på sidan. Anger du detta för både rubrik och brödtext så hamnar allt s a s på samma ställe. Försök att titta på hur man enkelt bygger upp en layout med css t ex här: http://www.csstutorial.net/ :)

jag skrev naturligtvis fel koordinater, men principen...

InsiderMedlem sedan jan. 2000978 inlägg
#13

ptr_lks skrev:

... så Så¨frågan är om inte positionering passar bättre

Jo, du har förstått rätt när det gäller padding och hur den ska användas.
Men jag skulle nog föreslå att du ökar marginalen istället. Alltså;

span.style5 {margin-left:200px;}

Jag har märkt att många blandar ihop margin och padding, men i det här fallet är det ju marginalen man vill påverka.

Men är det korrekt att skriva så här:
# h1 {}
# p {}

Nej, # h1 och # p är fel. Skriv bara h1{} och p{}.

ptr_lksMedlem sedan juni 2005584 inlägg
#14

Insider skrev:

Men jag skulle nog föreslå att du ökar marginalen istället. Alltså;

span.style5 {margin-left:200px;}

Jag har märkt att många blandar ihop margin och padding, men i det här fallet är det ju marginalen man vill påverka.

varför marginaler och inte

position: absolute;
                      top: 100px; 
                      left: 200px;

kan du förklara lite din kod;

span.style5 {margin-left:200px;}
InsiderMedlem sedan jan. 2000978 inlägg
#15

ptr_lks skrev:

varför marginaler och inte

position: absolute;
                      top: 100px; 
                      left: 200px;

kan du förklara lite din kod;

span.style5 {margin-left:200px;}

Varför positionering och inte margin??? :)
Hursomhelst, absolut positionerade element tas bort ur dokumentflödet och då riskerar man att något annat hamnar under om man inte är försiktig.
Det självklara valet i ditt fall är att öka vänstermarginalen.

span.style5 betyder att alla <SPAN> element med klassnamnet style5 ska få en marginal mot närmsta vänsterkanten med 200 pixlar.

ptr_lksMedlem sedan juni 2005584 inlägg
#16

Insider skrev:

span.style5 betyder att alla <SPAN> element med klassnamnet style5 ska få en marginal mot närmsta vänsterkanten med 200 pixlar.

Men är det samma sak som:

.style5{
margin-left:200px;}
och <span class = "style5"> text </span>
InsiderMedlem sedan jan. 2000978 inlägg
#17

ptr_lks skrev:

Men är det samma sak som:

.style5{
margin-left:200px;}
och <span class = "style5"> text </span>

När du bara skriver .style5{} påverkar du ALLA element som har klassnamnet style5, inte bara SPAN. Det beror på vad du vill göra.

ptr_lksMedlem sedan juni 2005584 inlägg
#18

Efter lite letande har jag hittat info på https://www.w3schools.com
Detta verka funka där

<html>
<head>
<style type="text/css">
.min {
margin-top: 300px;
margin-left: 100px;
}
</style>
</head>
<body>
<p class="min">This is a paragraph with a specified top margin</p>
</body>
</html>

Kommer det att fungera även i andra browsers än IE och med XHTML, fast jag inte anger alla "margin-properties"?

muskotMedlem sedan jan. 20027 905 inlägg
#19

Ett bra förstasteg är att validera HTML- och CSS-koden.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

ptr_lksMedlem sedan juni 2005584 inlägg
#20

muskot skrev:

Ett bra förstasteg är att validera HTML- och CSS-koden.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Klistrat in i rutan

Enter the CSS you would like validated:

Och får till svar
Betyder detta att CSS är rätt?

260 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)