Outline in Firefox
Ik ben nu bezig met het slicen van een redelijk simpele layout.
Echter loop ik nu tegen een probleem in Firefox aan:
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)
1
2
3
4
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>
<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)
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
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;
}
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
Code (php)
1
2
2
border: 1px solid #EBE7E5;
outline: 1px solid #726965;
outline: 1px solid #726965;
En kijk eens wat dat doet.
Als je het online hebt staan kunnen we even zelf testen met een inspector.
Bedankt voor je antwoord!
Ik heb inmiddels de outline weggehaald en vervangen door:
Code (php)
1
box-shadow: #726965 0px 0px 1px 0px;
Bedankt!!
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.