Outline in Firefox

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mobile Developer in Oost-Nederland (Android en/of

Bedrijfsomschrijving Een unieke kans voor Mobile Developers in Oost-Nederland. Deze prachtige organisatie is namelijk opzoek naar een Mobile Developer. Mobile Development en Ops Engineering gaan hand in hand bij deze organisatie dat een hoog verantwoordelijkheidsgevoel draagt. Als organisatie ontwikkelt zij dan ook veelal mobiele applicaties ter inspiratie en ondersteuning van belangrijke sectoren in Nederland. Met het technische team van gepassioneerde developers en engineers voeren ze dagelijks veelal diverse, inspirerende en complexe werkzaamheden uit. Door gebruik van innovatieve software en de nieuwste platformen binnen de sector is deze klant dan ook zeker als vooruitstrevend te betitelen waar zijn enorm veel waarde

Bekijk vacature »

Robin S

Robin S

22/10/2012 18:15:06
Quote Anchor link
Beste leden,

Ik ben nu bezig met het slicen van een redelijk simpele layout.
Echter loop ik nu tegen een probleem in Firefox aan:
http://i46.tinypic.com/wrkl7p.png

Het gaat hier om de outline, deze wordt goed getoond in Chrome/IE, maar in Firefox ziet het er heel anders uit.

Iemand enig idee hoe dit kan? Ik heb al gezocht en heb gevonden dat Firefox inderdaad wel vaker last heeft van outlines, maar voor mijn probleem ben ik nog geen oplossing tegengekomen.

Dit is de bijbehorende HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div class="box">
  <div class="title"><span>Social Media</span></div>
  <img src="images/home_social.png" width="274" height="92" alt="" />
</div>


En de CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#page div.box {
  background: #c3c0bd; /* Old browsers */
  background: -moz-linear-gradient(top, #c3c0bd 0%, #adacaa 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3c0bd), color-stop(100%,#adacaa)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c3c0bd 0%,#adacaa 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c3c0bd 0%,#adacaa 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c3c0bd 0%,#adacaa 100%); /* IE10+ */
  background: linear-gradient(to bottom, #c3c0bd 0%,#adacaa 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c0bd', endColorstr='#adacaa',GradientType=0 ); /* IE6-9 */
  border: 1px solid #EBE7E5;
  outline: 1px solid #726965;
  margin-bottom: 20px;
  -moz-border-radius:0 1px;
  opacity:0.8;
  filter:alpha(opacity=80);
}

#page div.box .title {
  width: 201px;
  height: 28px;
  background-image: url('images/box_title.png');
  margin: 25px 0px 28px -14px;
  z-index: 1;
  position: relative;
}


Heeft iemand enig waar hier de fout zit?

Alvast bedankt!! :D
 
PHP hulp

PHP hulp

18/01/2021 13:52:06
 
Eddy E

Eddy E

22/10/2012 19:17:18
Quote Anchor link
Haal een van deze 2 eens weg:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
  border: 1px solid #EBE7E5;
  outline: 1px solid #726965;

En kijk eens wat dat doet.
Als je het online hebt staan kunnen we even zelf testen met een inspector.
 
Wouter J

Wouter J

22/10/2012 19:29:14
Quote Anchor link
Ik denk dat de fout bij Mozilla zit, maar om erom heen te werken kun je met box-shadow gaan werken i.p.v. outline: http://jsbin.com/uzakew/1/edit
 
Robin S

Robin S

22/10/2012 19:32:31
Quote Anchor link
@Eddy:
Bedankt voor je antwoord!

Ik heb inmiddels de outline weggehaald en vervangen door:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
  box-shadow: #726965 0px 0px 1px 0px;


Bedankt!!
 
Eddy E

Eddy E

22/10/2012 21:50:10
Quote Anchor link
Is inderdaad ook een manier.
Box-shadow is in mijn ogen echt een toevoeging. Outline kan handig zijn, maar is niet vaak nodig (althans, ik heb nog geen goede toepassing kunnen bedenken.
Helaas kon ik met jouw code op jsbin.com niet hetzelfde resultaat krijgen.
 
Wouter J

Wouter J

22/10/2012 22:25:29
Quote Anchor link
Eddy, outline gebruik ik altijd in de development fase. Doordat hij geen ruimte inneemt is het zeer handig om zo alle elementen weer te geven om een beeld te krijgen hoe alles loopt. Ik geef dan elk type element een andere kleur.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.