28172 sujets

CSS et mise en forme, CSS3

Redimensionnements différents suivant les navigateurs

Bonjours à tous,

J'ai un petit soucis de redimensionnement des mes pages avec la touche CTRL et la souris :

IE ne réduit ni le texte ni les images.
Opera réduit textes & images
Firefox ne réduit que le texte.

je vous livre ci dessous mon CSS

body {
	margin-top: 50px;
	padding: 0;
	background: #FFFFFF url(images/img01.jpg) repeat-x left top;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #837669;
}

h1, h2, h3 {
	margin: 0;
	font-family: "Georgia", Times New Roman, Times, serif;
	font-weight: normal;
	color: #649632;
}

h1 { font-size: 35px; }

h2 { font-size: 20px;}

h3 { font-size: 18px;
	 font-style: italic;
	 text-align: center;
	 color: #057010}

p, ul, ol {
	margin-top: 0;
	line-height: 240%;
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
}

ul, ol { }

blockquote { }

a { color: #363535;
	text-decoration: none;}

a:hover { text-decoration: underline; }

a img {
	border: none;
}

img.left {
	float: left;
	margin: 7px 30px 0 0;
}

img.right {
	float: right;
	margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
	float: left;
	line-height: normal;
}

.list1 li img {
	margin: 0 30px 30px 0;
}

.list1 li.alt img {
	margin-right: 0;
}

#wrapper {
}

/* Header */

#header-wrapper {
	width: 880px;
	margin: 0 auto;
}

#header {
	width: 900px;
	height: 60px;
	margin: 0 auto;
	background: url(images/img02.jpg) no-repeat left top;
}

/* Menu */

#menu {
	float: left;
	width: 800px;
	height: 51px;
}

#menu ul {
	margin: 0;
	padding: 20px 0 0 20px;
	list-style: none;
	line-height: normal;
}
	
#menu li {
	display: inline;
	float: left;
}

#menu a {
	display: block;
	float: left;
	margin-right: 5px;
	padding: 5px 12px 5px 28px;
	background: url(images/img06.gif) no-repeat left 50%;
	text-decoration: none;
	font: 14px Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
	color: #FFFFFF;
}

/*sous menu*/

#sous-menu {
	display: inline;
	float: left;
	width: 800px;
	height: 15px;
}

#sous-menu ul {
	margin: 0;
	padding: 20px 0 0 20px;
	list-style: none;
	line-height: normal;
}
	
#sous-menu li {
	display: inline;
	float: left;
}

#sous-menu a {
	display: block;
	float: left;
	margin-right: 5px;
	padding: 2px 12px 5px 28px;
	text-decoration: none;
	font: 15px Georgia, "Times New Roman", Times, serif;
	color: #057010;
}

#sous-menu a:hover { text-decoration: none;
					  color: #ffffff}
/* Page */
div.centrage {text-align: center;}


#page {
	width: 900px;
	margin: 0 auto;
	padding: 30px 0px 0px 0px;
}

/** LOGO */

#logo {
	width: 900px;
	height: 230px;
	margin: 0 auto;
	background: url(images/img03.jpg) no-repeat left top;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0 0 0 170px;
	line-height: normal;
}

#logo h1 { 	float: left;
padding: 70px 0 0 200px; }

#logo h1 a {
	text-decoration: none;
	color: #FFFFFF;
}

#logo h1 a:hover { text-decoration: underline; }

#logo p {
	padding: 130px 0 0 200px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}

#logo p a {
	text-decoration: none;
	color: #FFFFFF;
}

#logo p a:hover { text-decoration: underline; }

/* Content */

#content {
	float: right;
	width: 600px;
}

/* Post */

.post {
	margin-bottom: 25px;
}

.post .title {
	height: 30px;
	margin-bottom: 3px;
	padding: 8px 0px 2px 40px;
	background: url(images/img05.jpg) no-repeat left top;
	color: #FFFFFF;
}

.post .date {
	float: right;
	margin-top: -45px;
	padding-right: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 18px;
	color: #F1B566;
}

.post .meta {
	margin: -30px  0 3px 25px;
	padding: 2px 30px 2px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 10px;
	color: #B6ACA2;
}

.post .meta a { color: #B6ACA2; }

.post .entry {
	padding: 25px 20px 0px 20px;
}

.post .links {
	margin: 0 250px 0 0;
	padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
	padding-left: 17px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 280px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#sidebar li {
	margin-bottom: 30px;
	padding: 0 0 20px 0px;
}

#sidebar li ul {
	line-height: 200%;
}

#sidebar li li {
	margin: 0;
	padding: 0 20px;
}

#sidebar p {
	margin: 0;
	padding: 0 20px;
}

#sidebar h2 {
	height: 33px;
	margin: 0 0 20px 0px;
	padding: 8px 0 2px 40px;
	background: url(images/img04.jpg) no-repeat left top;
	font-size: 20px;
	color: #FFFFFF;
}


#sidebar p {
	line-height: 200%;
}

/* Calendar */

#calendar {
}

#calendar caption {
	padding-bottom: 5px;
	font-weight: bold;
}

#calendar table {
	width: 100%;
	border-collapse: collapse;
	border-right: 1px solid #F5F2EF;
}

#calendar thead th {
	padding: 5px 0;
	text-align: center;
	border-top: 1px solid #F5F2EF;
	border-left: 1px solid #F5F2EF;
	background: #F5F2EF;
}

#calendar tbody td {
	padding: 5px 0;
	text-align: center;
	border-top: 1px solid #F5F2EF;
	border-left: 1px solid #F5F2EF;
}

#calendar tfoot td {
	padding: 5px;
}

#calendar tfoot #next {
	text-align: right;
}

#calendar #today {
	background: #E7F1E1;
}

/* Footer */

#footer {
	width: 900px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img07.jpg) no-repeat left top;
	height: 61px;
}

#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	line-height: normal;
	color: #FFFFFF;
}

#footer a {
	color: #F1B566;
}


Y'a-t-il des spécifications à apporter pour les différents navigateurs.
Merci par avance de vos pistes
Cordialement


Le site est en ligne sur http://www.anticorp.eu
Bonjour,

Les navigateurs suivants proposent un zoom homothétique qui prend en compte texte et images:
- Internet Explorer 7 et 8;
- Firefox 3;
- Opera (depuis fort fort longtemps).

Le zoom d'IE7 est assez sommaire. Celui d'IE8 et de Firefox3 est un peu plus subtil. La palme revient à Opera qui a le zoom le plus intelligent du marché depuis de nombreuses années.

On notera que la plupart des navigateurs (notamment Firefox et Internet Explorer) permettent de redimensionner le texte uniquement, soit en passant par une option différente du zoom principal (IE), soit en restreignant le zoom au texte seulement (Firefox).

Enfin, certains navigateurs anciens (ou un peu à la bourre) ne proposent qu'un zoom du texte. C'est le cas de Safari 3, Firefox 2 ou Internet Explorer 6.

a écrit :
Y'a-t-il des spécifications à apporter pour les différents navigateurs.

Non.

La seule chose qui serait à faire ici, c'est utiliser des unités relatives pour dimensionner le texte, et pas des pixels. En effet, Internet Explorer (toutes versions, à priori) bloque le redimensionnement du texte s'il est exprimé en pixels.
Sujet clos
Aller à