Mam nadzieję, że temat nie jest po raz enty taki sam... Niestety nie udało mi się znaleźć odpowiedzi na pytanie na forum ani w googlach mimo ponad godziny poświęconej na przeglądanie różnych stron.
Chciałbym zbudować prosty layout, w którym treść znajdowała by się w warstwie oddalonej o stałą wartość (20px) od prawej, górnej i dolnej krawędzi przeglądarki. Chciałbym ustalić procentową wartość szerokości, natomiast wysokość chciałbym żeby była dostosowana do założenia o oddaleniu od krawędzi.
Do celów testowych stworzyłem taką oto stronę:
CODE
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque.
</div>
</body>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque.
</div>
</body>
Oraz taki oto plik style.css:
CODE
body {
background-color: green;
background-image: url(obraz.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
div{
background-color: white;
background-image: url(obraz1.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
left: auto;
right: 20px;
top: 20px;
bottom: 20px;
width: 60%;
border-top-width: 5mm; border-top-style: solid;
border-bottom-width: 5mm; border-bottom-style: solid;
}
background-color: green;
background-image: url(obraz.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
div{
background-color: white;
background-image: url(obraz1.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
left: auto;
right: 20px;
top: 20px;
bottom: 20px;
width: 60%;
border-top-width: 5mm; border-top-style: solid;
border-bottom-width: 5mm; border-bottom-style: solid;
}
Posiadam przeglądarki: google chrome, opera oraz mozilla firefox. Wszystkie w najnowszych wersjach.
W dwóch pierwszych test wypadł pomyślnie. Efekt zamierzony osiągnięty.
Jednak w firefoxie obie części bordera (górna i dolna) zbiły się w jedną (tak jakby wysokość była równa zero), natomiast tekst ukrył się na dolnym borderze (przy większej ilości tekstu, opuszcza on swobodnie krawędź i wchodzi na zielone tło)
Pytanie chyba oczywiste ;-) Co robię nie tak.
Z góry dziękuję za odpowiedź i pozdrawiam
rokefeler15