Forum PHP.pl > tło i szerokość DIV

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

craker

8.07.2008, 19:23:13

Witajcie,
mam taki problem, mam zdefiniowane coś takiego

[HTML] pobierz, plaintext 
<div style="height: 35px; width:650px;">
			<div class="phone_details_left1">Imie, Nazwisko: </div>
			<div class="phone_details_right1">XXX YYY</div>
		</div>
[HTML] pobierz, plaintext

a klasy mam tak:

[HTML] pobierz, plaintext 
.phone_details_left1 {
	display: inline; 
	background: #efefef;
	padding: 8px;
	font-weight: bold;
	width: 450px;
	text-align: left;
}
 
.phone_details_right1 {
	display: inline; 
	background: #efefef;
	padding: 8px;
	width: 200px;
	text-align: left;
	clear: both;
}
[HTML] pobierz, plaintext

w IE ładnie wygląda div jest faktycznie na te 650px i tło też jest na całość i tekst wyrównany jest do lewej. natomiast i w FF i w Operze mam coś takiego że cały tekst nie dość, że jest na środku to jeszcze tło pod DIV'ami jest o parę pikseli większe niż tekst wpisany w DIV'y

Co mam zrobić, żeby to naprawić i wyglądało to tak jak w IE ?

Dzięki za wszelką pomoc

loganek

8.07.2008, 19:34:44

Cytat

to jeszcze tło pod DIV'ami jest o parę pikseli większe niż tekst wpisany w DIV'y

to pewnie że masz w stylach padding:8px;
skasuj to i będzie ok

craker

8.07.2008, 20:20:58

no ale jak usuniesz paddinga, to nie będzie szersze tło tylko będzie przyległe,a ma być na całą szerokość divów czyli na te 650px

l0ud

8.07.2008, 20:46:40

Bez nadania doctype IE źle interpretuje box model i pozwala na nieodpowiednie rzeczy:

- elementom liniowym nie można przypisać szerokości (można sobie pomóc np. floatem)
- całkowita szerokość elementu to wartość podana w width + padding (z lewej i prawej) a nie samo 'width'

Moja wersja kodu:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
<style type="text/css">
.phone_details_left1 {
background: #efefef;
padding: 8px;
font-weight: bold;
width: 434px;
float: left;
}
 
.phone_details_right1 {
background: #efefef;
padding: 8px;
width: 184px;
float: left;
}
</style>
</head>
 
<body>
<div style="height:35px; width:650px; overflow:hidden;">
<div class="phone_details_left1">Imie, Nazwisko: </div>
<div class="phone_details_right1">XXX YYY</div>
</div>
</body>
 
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.