Notifikationer

Markér alle som læst Log ud

steen_hansen Forsker

20. oktober 2004 - 14:14 Der er 10 kommentarer og
1 løsning

Resultat af CSS vises meget forskelligt i forskellige browsere

Jeg forsøger at formatere nogle undermenuer v.hj.a. CSS. Her kommer lige mit CSS til både hoved- og undermenuer (det ser ikke ud som det skal endnu):

a.menu, a.menu:link, a.menu:visited {
width: 100%;
display: block;
font-family: verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #fff;
background-color: #331AE4;
padding-left: 10px;
text-decoration: none;
}
a.menu:hover {
color: #fff;
background-color: #0090e4;
text-decoration: none;
}
.activeMenu {
display: block;
background-color:#0078c8;
color: #eee;
text-decoration: none;
}
a.menu, a.activeMenu:hover, a.menu:hover, a.activeMenu:hover {
color: #fff;
text-decoration: none;
}
a.menusub, a.menusub:link, a.menusub:visited {
width: 100%;
display: block;
font-family: verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #000;
padding-left: 15px;
text-decoration: none;
}
a.menusub:hover {
color: #fff;
background-color: #0090e4;
text-decoration: none;
}
.activeMenusub {
display: block;
background-color:#0078c8;
color: #eee;
text-decoration: none;
}
a.menusub, a.activeMenusub:hover, a.menusub:hover, a.activeMenusub:hover {
color: #fff;
text-decoration: none;
}

Problemet er, at det vises meget forskelligt i forskellige browsere. I stedet for at komme med en masse forklaringer her, har jeg lavet en lille side, hvor du kan se hvad jeg taler om:

http://www.include.dk/difference/

Gode forslag til en løsning modtages meget gerne :)

Synes godt om

safl Nybegynder

20. oktober 2004 - 16:59 #1

Der er det normale problem med padding. Ifølge CSS specifikationen er bredden af et box element defineret som:

boxbredde = width + padding

altså hvis du har en bredde på 800px og en padding på 10px har du en total bredde på 820px (begge sider regnes jo med).
Det er sådan Firefox og andre "Standard Compliance" browsere parser din kode.
Men browsere som ikke helt overholder standarden fortolker det som:
boxbredde = width

Derfor den er bredere i FireFox (den overholder specifikationen).
For at få det til at se ens ud kan du smide en <div class="fix">udenom dine links</div>
hvorpå du har sat en margin på de antal pixels du ønskede at have en padding på. Og herefter fjerne padding på dit a.tag. Så får du din afstand og det ser ens ud i dine browsere.

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 18:29 #2

Det giver mening, men hvad så med style="width: 100%;"? Hvis jeg har en kolonne, der er 160px bred, og inde i den lægger en tabel, der er 100%; bred med padding-left: 10px;? Hvordan skal den så regnes ud? Vil det være mest hensigtsmæssigt at angive px i stedet for %?

Synes godt om

roenving Novice

20. oktober 2004 - 18:32 #3

Hvis du nu bruger et block-level-element kan du vel undlade en bredde-angivelse ?-)

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 18:41 #4

Det var selvfølgelig en idé :oD

Hvis I gider at kigge på http://www.include.dk/borch/ i forskellige browsere (hvis I har dem installeret), så ser det ikke så godt ud. Specielt ikke i Firefox. Her skal det næsten lægges ind i en tabel for at kunne afgrænse display: block; - eller hva'?

Jeg har fjernet width:

a.menu, a.menu:link, a.menu:visited {
display: block;
font-family: verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #fff;
background-color: #331AE4;
padding-left: 10px;
text-decoration: none;
}
a.menu:hover {
color: #fff;
background-color: #0090e4;
text-decoration: none;
}
.activeMenu {
display: block;
background-color:#0078c8;
color: #eee;
text-decoration: none;
}
a.menu, a.activeMenu:hover, a.menu:hover, a.activeMenu:hover {
color: #fff;
text-decoration: none;
}
a.menusub, a.menusub:link, a.menusub:visited {
display: block;
font-family: verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #000;
padding-left: 15px;
text-decoration: none;
}
a.menusub:hover {
color: #fff;
background-color: #0090e4;
text-decoration: none;
}
.activeMenusub {
display: block;
background-color:#0078c8;
color: #eee;
text-decoration: none;
}
a.menusub, a.activeMenusub:hover, a.menusub:hover, a.activeMenusub:hover {
color: #fff;
text-decoration: none;
}

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 18:44 #5

Hvis I ser på siden I Opera, så er menuen perfekt. I MSIE er der de hvide striber neden under hver celle. Men i Firefox og Netscape er der ikke engang den lodrette streg, der adskiller menuen fra indholdet.

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 21:21 #6

Ingen bud? :(

Synes godt om

safl Nybegynder

20. oktober 2004 - 21:29 #7

Som jeg sagde før brug en <div> omkring dine links der har en margen på 15px; og fjern så padding.

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 21:44 #8

Kan du hjælpe lidt mere, jeg er ikke klar over hvad du mener:

Padding er fjernet

CSS:
.menumain {
margin-left: 10px;
}
.menusub {
margin-left: 15px;
}

<div class="menumain"><a href="#">Link 1</a></div>
<div class="menusub"><a href="#">Link 2</a></div>

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 22:01 #9

Jeg tror 10-øren er faldet. Prøver igen.

Synes godt om

steen_hansen Forsker

20. oktober 2004 - 22:07 #10

Jeg har erstattet padding med margin, sat en <div class="menusub"> rundt om linket, og nu mister jeg alle formateringer.

CSS:

a.menu, a.menu:link, a.menu:visited {
display: block;
font-family: verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #fff;
background-color: #331ae4;
text-decoration: none;
margin-left: 10px;
}
a.menu:hover {
color: #fff;
background-color: #0090e4;
text-decoration: none;
}
.activeMenu {
display: block;
background-color:#0078c8;
color: #eee;
text-decoration: none;
}
a.menu, a.activeMenu:hover, a.menu:hover, a.activeMenu:hover {
color: #fff;
text-decoration: none;
}
a.menusub, a.menusub:link, a.menusub:visited {
display: block;
font-family: verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #000;
text-decoration: none;
margin: 15px;
}
a.menusub:hover {
color: #fff;
background-color: #0090e4;
text-decoration: none;
}
.activeMenusub {
display: block;
background-color:#0078c8;
color: #eee;
text-decoration: none;
}
a.menusub, a.activeMenusub:hover, a.menusub:hover, a.activeMenusub:hover {
color: #fff;
text-decoration: none;
}

Synes godt om

steen_hansen Forsker

25. oktober 2004 - 22:32 #11

Jeg fik ikke løst mit problem, så jeg lukker og opretter et nyt. Du får lidt for tiden du har brugt. Tak for hjælpen til begge.

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