Margin w procentach nie działa w Mozilli

Question

Witam.

Otóż mam taki problem, określam w selektorze article, margin w px i wszystko jest w porządku, kiedy jednak określę go w % to nie działa w Mozilli i zachodzi na footera. Ktoś zna rozwiązanie?

Dołączam kod i screena.

CSS krótka wersja kodu

body
{
	/* Background pattern from CC BY-SA 3.0 - Subtle Patterns © Toptal Designers. */
	background-image: url("zdjecia/patterns/footer_lodyas.png");
	background-color: #666;
	margin: 0 !important;
	position: relative;
}

article
{
	background-image: url("zdjecia/patterns/redox_01.png");
	border: 3px solid #111;
	border-radius: 5px;	
	width: 50%;
	content: center;
	text-align: center;
	margin-bottom: 100px;
	padding-bottom:3%;
    min-width: 400px;
}

footer
{
 	width: 100%; 
	height: 20px;
	background-color: #fff;
	position: fixed;
	bottom: 0px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 25px;
	border-top: 2px solid #000;
}

CSS cały kod

body
{
	/* Background pattern from CC BY-SA 3.0 - Subtle Patterns © Toptal Designers. */
	background-image: url("zdjecia/patterns/footer_lodyas.png");
	background-color: #666;
	margin: 0;
}

header
{
	text-align: center;
	background-color: #fff;
	font-size: 45px;
	font-family: Arial;
	width: 100%;
	border-bottom: 3px solid #000;
        text-shadow: 3px 0px 5px #888;
}

#container
{
	margin: auto;
	margin-bottom: 10px;
}

a
{
    text-decoration: none;
    color: #3a7;
}

#nav
{
    margin-right: 10%;
}

nav
{
	font-size:1.2vw;
        background-image: url(zdjecia/patterns/redox_01.png);
	border-radius: 15px;	
	height: 50%;
	width: 12%;	
	border: 3px solid #111;
	border-radius: 5px;	
        position: fixed;
        left: 50px;
    
}

nav ul > li
{

	list-style-type: none;
	font-weight: 800;
	margin-left: -20px;
	margin-top: 3px;
	font-family: sans-serif;
}

ul > li a
{
	text-decoration: none;
	color: #000;
}

ul > li a:hover
{
    border: 1px solid #666;
    border-radius: 3px;
    padding: 0px 3px;
    color: #aaa;
    position: relative;
    left: -4px;
    background-color: rgba(0,0,0,0.5);
    opacity: 50%;
}
    
article
{
	background-image: url("zdjecia/patterns/redox_01.png");
	border: 3px solid #111;
	border-radius: 5px;	
	width: 50%;
	content: center;
	text-align: center;
	margin-bottom: 10%;
/*    outline: 5%;*/
	padding-bottom:3%;
        min-width: 400px;
}

article h1
{
	font-size: 35px;
	letter-spacing: 5px;
	text-transform: uppercase;
	margin-bottom: -10px;
}

article img
{
        outline: 5%;
        margin-top: 20px;
 	align-self: center;
	padding-top: 15px; 
	max-width:100%;
	max-height:100%;
        border: 3px solid black;
}

.plyty img
{
	max-width: 600px;
	max-height: 600px;
	padding-bottom: 10px;
}


article .plyty h3, p
{
	text-align: left;
	padding-left: 5%;
	padding-right: 5%;
}

article ul > li
{
	line-height: 200%;
	border-left: 2px dashed #888;
	padding-left: 10px;

}

#zablist li
{
    text-align: left;
    margin-top: 3%;
}

#ramtable
{
    margin: auto;
    border-spacing: 10px 3px;
}

#ramtable th
{
    color: #aaa;
    font-family: courier;
    font-weight: bold;
    font-size: 160%;
    border: 3px solid #555;
    border-radius: 3px;
    padding: 5px 10px;
    background-color: #004;
}

#ramtable tr td
{
    color: #aaa;
    font-family: courier;
    font-weight: bold;
    font-size: 140%;
    border: 3px solid #555;
    border-radius: 3px;
    padding: 5px 10px;
    background-color: #004;
}

#ramtable tr td:first-child
{
    text-align:left;
}

#dwahdd img
{
	max-width:35%;
	margin-left:4%;
	margin-right:4%;
}

#reklama
{
	width: 160px;
	height: 600px;
}

.ciekawostka h2
{
	letter-spacing: 5px;
}
.ciekawostka
{
	margin: auto;
	margin-top: 5%;
	margin-bottom: 10%;	
	max-width: 75%;
	max-height: 75%;
	background-image: url("zdjecia/patterns/darkred.png");
	border: 3px solid #f00;
	border-radius: 10px;
	color: yellow;
	font-size: 20px;
        -webkit-box-shadow: 3px 3px 30px 5px rgba(204, 204, 204, 0.9);
	-moz-box-shadow: 3px 3px 30px 5px rgba(204, 204, 204, 0.9);
	box-shadow: 3px 3px 30px 5px rgba(204, 204, 204, 0.9);
}

.ciekawostka p
{
    font-size: 100%;
/*
    padding-top: 47px;
    padding-bottom: 71px;
*/
	visibility: hidden;
}

.ciekawostka:hover p
{
	visibility: visible;
}

footer
{
 	width: 100%; 
	height: 20px;
	background-color: #fff;
	position: fixed;
	bottom: 0px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 25px;
	border-top: 2px solid #000;
}

 

Comments

mógłbyś wstawić więcej kodu? HTML? więcej CSS?
bo ciężko po tym stwierdzić, o co chodzi ;)
tak przy okazji:

body
{
    /* Background pattern from CC BY-SA 3.0 - Subtle Patterns © Toptal Designers. */
    background-image: url("zdjecia/patterns/footer_lodyas.png");
    background-color: #666;
    margin: 0 !important;
    position: relative;
}

!important jest Ci tu niepotrzebny, tak samo jak position: relative, bo i tak kolejne elementy są pozycjonowane względem tego

content: center;

a to do czego służy?

Answer 1

Mam tu pozostałości po flexboxie, którego jednak ostatecznie postanowiłem usunąć, nie spodziewałem się że ktoś jednak odpowie, uzupełnić kod będę mógł dopiero w poniedziałek...

Answer 2

Dzięki za porady.

Uzupełniłem kod :-)