Outline in Firefox

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

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:
Afbeelding

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

29/03/2024 13:44:17
 
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.