Text qui depasse le div sous ie7, ie8 mais ,nickel pour firefox safari

Question

atino

25 Mar 2011 à 09:34

bonjour,

j'ai un probleme sur un site que je suis en train de faire, il a été fait avec artister (usine à div Smiley confus

)
Le probleme qui se pose c'est quand je clique sur un lien du menu, il s'affiche sur la div que je veux mais sous ie il deborbe et passe au dessus du footer.
avec firefox et safari , la div s'agrandit et affiche le texte completement ;je ne sais pas la ligne à modifier
voici le css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
	<head>
		<!--
    Created by Artisteer v3.0.0.33215
    Base template (without user's data) checked by  http://validator.w3.org  : "This page is valid XHTML 1.0 Transitional"
    -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Main</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		<!--[if IE 6]>
		<link rel="stylesheet" href="css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
		<!--[if IE 7]>
		<link rel="stylesheet" href="css/style.ie7.css" type="text/css" media="screen" /><![endif]-->
		
		<script type="text/javascript" src="scripts/jquery.js"></script>
		<script type="text/javascript" src="scripts/script.js"></script>
		<script type="text/javascript" src="scripts/menu.js"></script>
	</head>
	<body>
		<div id="art-page-background-glare">
			<div id="art-page-background-glare-image">
				<div id="art-main">
					<div class="art-sheet">
						<div class="art-sheet-tl"></div>
						<div class="art-sheet-tr"></div>
						<div class="art-sheet-bl"></div>
						<div class="art-sheet-br"></div>
						<div class="art-sheet-tc"></div>
						<div class="art-sheet-bc"></div>
						<div class="art-sheet-cl"></div>
						<div class="art-sheet-cr"></div>
						<div class="art-sheet-cc"></div>
						<div class="art-sheet-body">
							<div class="art-header">
								<div class="art-header-center">
									<div class="art-header-png"></div>
									<div class="art-header-jpeg"></div>
								</div>
								<div class="art-logo">
									<h1 id="name-text" class="art-logo-name">
									<a href="./index.html">SITE</a></h1>
									<h2 id="slogan-text" class="art-logo-text">
									Slogan s&#39;il y en a un</h2>
								</div>
							</div>
							<div class="art-nav">
								<div class="l"></div>
								<div class="r"></div>
								<ul class="art-menu">
									<li><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Acceuil</span></a></li>
									<li><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Plaisir d'offrir</span></a></li>
									<li><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Contact</span></a></li>
								</ul>
							</div>
							<div class="art-content-layout">
								<div class="art-content-layout-row">
									<div class="art-layout-cell art-sidebar1">
										<div class="art-layout-bg"></div>
										<div class="art-vmenublock">
											<div class="art-vmenublock-body">
												<div class="art-vmenublockheader">
													<div class="l"></div>
													<div class="r"></div>
													<h3 class="t">Qu&#39;est ce que 
													c&#39;est ?</h3>
												</div>
												<div class="art-vmenublockcontent">
													<div class="art-vmenublockcontent-body">
														<ul class="art-vmenu">
															<li><a href="#" onclick="envoieRequete('amma_assis.php','art-post-body');" class="active"><span class="l"> </span><span class="r"> </span><span class="t">
															Amma assis</span></a></li>
															<li><a href="#" onclick="envoieRequete('DienChan.php','art-post-body');"><span class="l"> </span><span class="r"> </span><span class="t">
															Dien Chan</span></a></li>
															<li><a href="#" onclick="envoieRequete('TaichiChuan.php','art-post-body');"><span class="l"> </span><span class="r"> </span><span class="t">
															Taichi Chuan</span></a></li>
															<li><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">
															Coaching</span></a></li>
															
														</ul>
														<div class="cleared"></div>
													</div>
												</div>
												<div class="cleared"></div>
											</div>
										</div>
										<div class="cleared"></div>
									</div>
									<div class="art-layout-cell art-content" >
										<div class="art-post">
											<div id="art-post-body">
												<div class="art-post-inner art-article">
													<div class="art-postcontent">
														
														
													</div>
													<div class="cleared"></div>
												</div>
												<div class="cleared"></div>
											</div>
										</div>
										<div class="cleared"></div>
									</div>
								</div>
							</div>
							<div class="cleared"></div>
							<div class="art-footer">
								<div class="art-footer-t"></div>
								<div class="art-footer-l"></div>
								<div class="art-footer-b"></div>
								<div class="art-footer-r"></div>
								<div class="art-footer-body">
									<div class="art-footer-text">
										<p>Copyright © 2011 </p>
									</div>
									<div class="cleared"></div>
								</div>
							</div>
							<div class="cleared"></div>
						</div>
					</div>
					<div class="cleared"></div>
					<p class="art-page-footer"></p>
				</div>
			</div>
		</div>
	</body>
</html>

atino

25 Mar 2011 à 09:36

et le css


/*
Theme Name: site
Theme URI: 
Description: Artisteer-generated theme
Version: 1.0
Author: 
Author URI: 
Tags: fixed width, left sidebar, two columns, valid XHTML, widgets
*/

/* begin Page */
/* Created by Artisteer v3.0.0.33215 */

#art-main, table
{
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
    margin: 0;
    padding: 0;
}

body
{
  margin: 0 auto;
  padding: 0;
  color: #454745;
  background-color: #FBFCFE;
  background-image:url('../images/Bottom_texture.jpg');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: top left;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
    font-family: Arial, Helvetica, Sans-Serif;
}

.art-postcontent p
{
    margin: 12px 0 12px 0;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 32px;
}

.art-postcontent a
{
  text-decoration: none;
  color: #9E0A0D;
}

.art-postcontent a:link
{
  text-decoration: none;
  color: #9E0A0D;
}

.art-postcontent a:visited, .art-postcontent a.visited
{

  color: #6F716F;
}

.art-postcontent  a:hover, .art-postcontent a.hover
{


  color: #D30D11;
}


.art-postcontent h1
{
 
   color: #535058;
 
}

.art-postcontent h2
{
    color: #535553;
 
   font-size: 22px;   
}

.art-postcontent h3
{
 
  color: #9E0A0D; 
  font-size: 18px;    
}

.art-postcontent h4
{
 
   color: #565856; 
   font-size: 16px;   
}

.art-postcontent h5
{
 
   color: #565856;   
   font-size: 13px;
}

.art-postcontent h6
{
 
   color: #565856;
   font-size: 11px;      
}

ul
{
  list-style-type: none;
}

ol
{
  list-style-position: inside;
}

#art-main
{
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  cursor:default;
}

#art-page-background-glare
{
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-attachment: fixed;
}

#art-page-background-glare-image
{
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-attachment: fixed;
  background-image:url('../images/page_gl.png');
  background-repeat: no-repeat;
  background-position: top center;
}

html:first-child #art-page-background-glare
{
  border: 1px solid transparent;/* Opera fix */
}



.cleared
{
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1px;
}

form
{
  padding: 0 !important;
  margin: 0 !important;
}

table.position
{
  position: relative;
  width: 100%;
  table-layout: fixed;
}
/* end Page */

/* begin Box, Sheet */
.art-sheet
{
  position: relative;
  margin: 0 auto;
  min-width: 81px;
  min-height: 81px;
}

.art-sheet-body
{
  position: relative;
  padding: 5px;
}

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl, .art-sheet-tc, .art-sheet-bc,.art-sheet-cr, .art-sheet-cl
{
  position: absolute;
}

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl
{
  width: 100px;
  height: 100px;
  background-image:url('../images/sheet_s.png');
}

.art-sheet-tl
{
  top: 0;
  left: 0;
  clip: rect(auto, 50px, 50px, auto);
}

.art-sheet-tr
{
  top: 0;
  right: 0;
  clip: rect(auto, auto, 50px, 50px);
}

.art-sheet-bl
{
  bottom: 0;
  left: 0;
  clip: rect(50px, 50px, auto, auto);
}

.art-sheet-br
{
  bottom: 0;
  right: 0;
  clip: rect(50px, auto, auto, 50px);
}

.art-sheet-tc, .art-sheet-bc
{
  left: 50px;
  right: 50px;
  height: 100px;
  background-image:url('../images/sheet_h.png');
}

.art-sheet-tc
{
  top: 0;
  clip: rect(auto, auto, 50px, auto);
}

.art-sheet-bc
{
  bottom: 0;
  clip: rect(50px, auto, auto, auto);
}

.art-sheet-cr, .art-sheet-cl
{
  top: 50px;
  bottom: 50px;
  width: 100px;
  background-image: url('../images/sheet_v.png');
}

.art-sheet-cr
{
  right: 0;
  clip: rect(auto, auto, auto, 50px);
}

.art-sheet-cl
{
  left: 0;
  clip: rect(auto, 50px, auto, auto);
}

.art-sheet-cc
{
  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background-image: url('../images/sheet_c.png');
}

.art-sheet
{
  top: 30px !important;
  margin-bottom: 30px !important;
  cursor:auto;
  width: 900px;
}


/* end Box, Sheet */

/* begin Header */
div.art-header
{
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}


div.art-header-center
{
	position: relative;
	width: 890px;
	left:50%;
}


div.art-header-png
{
  position: absolute;
  left:-50%;
  top: 0;
  width: 890px;
  height: 200px;
  background-image: url('../images/header.png');
  background-repeat: no-repeat;
  background-position:center center; 
}

div.art-header-jpeg
{
  position: absolute;
  top: 0;
  left:-50%;
  width: 890px;
  height: 200px;
  background-image: url('../images/header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}


/* end Header */

/* begin Logo */
div.art-logo
{
  display: block;
  position: absolute;
  left: 423px;
  top: 74px;
  width: 467px;
}

h1.art-logo-name
{
  display: block;
  text-align: left;
}

h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover
{
  font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
  font-size: 48px;
  text-decoration: none;
  padding: 0;
  margin: 0;
  color: #FFFFFF !important;
}


h2.art-logo-text, 
h2.art-logo-text a,
h2.art-logo-text a:link,
h2.art-logo-text a:visited,
h2.art-logo-text a:hover
{
  font-size: 16px;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
  color: #FFFFFF !important;
}

h2.art-logo-text
{
  display: block;
  text-align: left;
}
/* end Logo */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
    outline: none;
}

.art-menu, .art-menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.art-menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}

.art-menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.art-menu li li
{
  float: none;
}

.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
}

.art-menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.art-menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.art-menu:after, .art-menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-menu, .art-menu ul
{
  min-height: 0;
}

.art-menu ul
{
  background-image: url('../images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}

ul.art-menu
{
  float: right;
}



/* menu structure */

.art-menu
{
  padding: 12px 6px 0 6px;
}

.art-nav
{
  position: relative;
  min-height: 42px;
  z-index: 100;
}

.art-nav .l, .art-nav .r
{
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  background-image: url('../images/nav.png');
}

.art-nav .l
{
  left: 0;
  right: 0;
}

.art-nav .r
{
  right: 0;
  width: 890px;
  clip: rect(auto, auto, auto, 890px);
}


/* end Menu */

/* begin MenuItem */
.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 30px;
  cursor: pointer;
  text-decoration: none;
}


.art-menu ul li
{
    margin:0;
    clear: both;
}


.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 100px;
  background-image: url('../images/menuitem.png');
}

.art-menu a .l
{
  left: 0;
  right: 16px;
}

.art-menu a .r
{
  width: 432px;
  right: 0;
  clip: rect(auto, auto, auto, 416px);
}





.art-menu a .t
{
  color: #1D6386;
  padding: 0 7px;
  margin: 0 16px;
  line-height: 30px;
  text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -35px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -35px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -35px;
}
.art-menu a:hover .t
{
  color: #7EAEEC;
}

.art-menu li:hover a .t
{
  color: #7EAEEC;
}

.art-menu li:hover>a .t
{
  color: #7EAEEC;
}


.art-menu a.active .l, .art-menu a.active .r
{
  top: -70px;
}

.art-menu a.active .t
{
  color: #1D6386;
}
/* end MenuItem */

/* begin MenuSeparator */
.art-menu .art-menu-li-separator
{
  display: block;
  width: 8px;
  height:30px;
}
/* end MenuSeparator */

/* begin Layout */
.art-content-layout
{
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: Transparent;
  border: none !important;
  padding:0 !important;
}
.art-layout-cell, .art-content-layout-row
{
  background-color: Transparent;
  vertical-align: top;
  text-align: left;
  border: none !important;
  margin:0 !important;
  padding:0 !important;
}
.art-content-layout .art-content-layout{width: auto;margin:0;}
.art-content-layout .art-layout-cell, .art-content-layout .art-layout-cell .art-content-layout .art-layout-cell{display: table-cell;}
.art-layout-cell .art-layout-cell{display: block;}
.art-content-layout-row {display: table-row;}
.art-layout-glare{position:relative;}/* end Layout */

/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublock-body
{
  position: relative;
  padding: 0;
}


.art-vmenublock
{
  margin: 5px;
}

/* end Box, Block, VMenuBlock */

/* begin BlockHeader, VMenuBlockHeader */
.art-vmenublockheader
{
  margin-bottom: 0;
}

.art-vmenublockheader, .art-vmenublockheader h3.t
{
  position: relative;
  height: 34px;
}

.art-vmenublockheader h3.t,
.art-vmenublockheader h3.t a,
.art-vmenublockheader h3.t a:link,
.art-vmenublockheader h3.t a:visited, 
.art-vmenublockheader h3.t a:hover
{
  color: #838583;
  font-size: 14px;
}

.art-vmenublockheader h3.t
{
  margin:0;
  padding: 0 10px 0 28px;
  white-space: nowrap;
  line-height: 34px;	
}

.art-vmenublockheader .l, .art-vmenublockheader .r
{
  position: absolute;
  height: 34px;
  background-image: url('../images/vmenublockheader.png');
}

.art-vmenublockheader .l
{
  left: 0;
  right: 22px;
}

.art-vmenublockheader .r
{
  width: 890px;
  right: 0;
  clip: rect(auto, auto, auto, 868px);
}

/* end BlockHeader, VMenuBlockHeader */

/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublockcontent-body
{
  position: relative;
  padding: 0;
}


.art-vmenublockcontent
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublockcontent-body
{
  position: relative;
  padding: 0;
}


/* end Box, Box, VMenuBlockContent */

/* begin VMenu */
ul.art-vmenu, ul.art-vmenu li
{
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 0;
}

ul.art-vmenu ul
{
  display: none;
}

ul.art-vmenu ul.active
{
  display: block;
}
/* end VMenu */

/* begin VMenuItem */
ul.art-vmenu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 34px;
  cursor: pointer;
  text-decoration: none;
}

ul.art-vmenu li.art-vmenu-separator
{
  display: block;
  padding: 2px 0 2px 0;
  margin: 0;
  font-size: 1px;
}

ul.art-vmenu .art-vmenu-separator-span
{
  display: block;
  padding: 0;
  font-size: 1px;
  height: 0;
  line-height: 0;
  border: none;
}

ul.art-vmenu a .r, ul.art-vmenu a .l
{
  position: absolute;
  display: block;
  top: 0;
  height: 112px;
  background-image: url('../images/vmenuitem.png');
}

ul.art-vmenu a .l
{
  left: 0;
  right: 11px;
}

ul.art-vmenu a .r
{
  width: 912px;
  right: 0;
  clip: rect(auto, auto, auto, 901px);
}

ul.art-vmenu a .t, ul.art-vmenu ul a
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
}

ul.art-vmenu a .t
{
  display: block;
  position:relative;
  top:0;
  line-height: 34px;
  color: #1D6386;
  padding: 0 23px 0 23px;
  margin-left:0;
  margin-right:0;
}

ul.art-vmenu a.active .l, ul.art-vmenu a.active .r
{
  top: -78px;
}

ul.art-vmenu a.active .t
{
  color: #1D6386;
}

ul.art-vmenu a:hover .l, ul.art-vmenu a:hover .r
{
  top: -39px;
}

ul.art-vmenu a:hover .t
{
  color: #7EAEEC;
}


/* end VMenuItem */

/* begin Box, Block */
.art-block
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-block-body
{
  position: relative;
  padding: 0;
}


.art-block
{
  margin: 7px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-blockheader
{
  margin-bottom: 0;
}

.art-blockheader, .art-blockheader h3.t
{
  position: relative;
  height: 34px;
}

.art-blockheader h3.t,
.art-blockheader h3.t a,
.art-blockheader h3.t a:link,
.art-blockheader h3.t a:visited, 
.art-blockheader h3.t a:hover
{
  color: #000000;
  font-size: 14px;
}

.art-blockheader h3.t
{
  margin:0;
  padding: 0 10px 0 10px;
  white-space: nowrap;
  line-height: 34px;	
}

/* end BlockHeader */

/* begin Box, BlockContent */
.art-blockcontent
{
  position: relative;
  margin: 0 auto;
  min-width: 3px;
  min-height: 3px;
}

.art-blockcontent-body
{
  position: relative;
  padding: 11px;
}

.art-blockcontent-tr, .art-blockcontent-tl, .art-blockcontent-br, .art-blockcontent-bl, .art-blockcontent-tc, .art-blockcontent-bc,.art-blockcontent-cr, .art-blockcontent-cl
{
  position: absolute;
}

.art-blockcontent-tr, .art-blockcontent-tl, .art-blockcontent-br, .art-blockcontent-bl
{
  width: 2px;
  height: 2px;
  background-image: url('../images/blockcontent_s.png');
}

.art-blockcontent-tl
{
  top: 0;
  left: 0;
  clip: rect(auto, 1px, 1px, auto);
}

.art-blockcontent-tr
{
  top: 0;
  right: 0;
  clip: rect(auto, auto, 1px, 1px);
}

.art-blockcontent-bl
{
  bottom: 0;
  left: 0;
  clip: rect(1px, 1px, auto, auto);
}

.art-blockcontent-br
{
  bottom: 0;
  right: 0;
  clip: rect(1px, auto, auto, 1px);
}

.art-blockcontent-tc, .art-blockcontent-bc
{
  left: 1px;
  right: 1px;
  height: 2px;
  background-image: url('../images/blockcontent_h.png');
}

.art-blockcontent-tc
{
  top: 0;
  clip: rect(auto, auto, 1px, auto);
}

.art-blockcontent-bc
{
  bottom: 0;
  clip: rect(1px, auto, auto, auto);
}

.art-blockcontent-cr, .art-blockcontent-cl
{
  top: 1px;
  bottom: 1px;
  width: 2px;
  background-image: url('../images/blockcontent_v.png');
}

.art-blockcontent-cr
{
  right: 0;
  clip: rect(auto, auto, auto, 1px);
}

.art-blockcontent-cl
{
  left: 0;
  clip: rect(auto, 1px, auto, auto);
}

.art-blockcontent-cc
{
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background-color: #FFFFFF;
}

.art-blockcontent-body, 
.art-blockcontent-body li, 
.art-blockcontent-body a,
.art-blockcontent-body a:link,
.art-blockcontent-body a:visited,
.art-blockcontent-body a:hover
{
  color: #161716;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 13px;
}

.art-blockcontent-body p
{
  margin: -5px 0 0 0;
}

.art-blockcontent-body a
{
  color: #F01216;

}

.art-blockcontent-body a:link
{
  color: #F01216;

}

.art-blockcontent-body a:visited, .art-blockcontent-body a.visited
{
  color: #808280;
  text-decoration: none;
}

.art-blockcontent-body a:hover, .art-blockcontent-body a.hover
{
  color: #F01216;
  text-decoration: none;

}

.art-blockcontent-body ul li
{
  line-height: 125%;    
  color: #727472;

  padding: 0 0 0 13px;
  background-image: url('../images/blockcontentbullets.png');
  background-repeat: no-repeat;
}/* end Box, BlockContent */

/* begin Button */
.art-button-wrapper a.art-button,
.art-button-wrapper a.art-button:link,
.art-button-wrapper input.art-button,
.art-button-wrapper button.art-button
{
  text-decoration: none;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  position:relative;
  top:0;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  color: #FFFFFF !important;
  width: auto;
  outline: none;
  border: none;
  background: none;
  line-height: 30px;
  height: 30px;
  margin: 0 !important;
  padding: 0 14px !important;
  overflow: visible;
  cursor: pointer;
}

.art-button img, .art-button-wrapper img
{
  margin: 0;
  vertical-align: middle;
}

.art-button-wrapper
{
  vertical-align: middle;
  display: inline-block;
  position: relative;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 0;
}

.firefox2 .art-button-wrapper
{
  display: block;
  float: left;
}

input, select, textarea
{
  vertical-align: middle;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 13px;
}

.art-block select 
{
    width:96%;
}

.art-button-wrapper.hover .art-button, .art-button-wrapper.hover a.art-button:link, .art-button:hover
{
  color: #000000 !important;
  text-decoration: none !important;
}

.art-button-wrapper.active .art-button, .art-button-wrapper.active a.art-button:link
{
  color: #FFFFFF !important;
}

.art-button-wrapper .art-button-l, .art-button-wrapper .art-button-r
{
  display: block;
  position: absolute;
  height: 100px;
  margin: 0;
  padding: 0;
  background-image: url('../images/button.png');
}

.art-button-wrapper .art-button-l
{
  left: 0;
  right: 7px;
}

.art-button-wrapper .art-button-r
{
  width: 407px;
  right: 0;
  clip: rect(auto, auto, auto, 400px);
}

.art-button-wrapper.hover .art-button-l, .art-button-wrapper.hover .art-button-r
{
  top: -35px;
}

.art-button-wrapper.active .art-button-l, .art-button-wrapper.active .art-button-r
{
  top: -70px;
}

.art-button-wrapper input
{
  float: none !important;
}
/* end Button */

/* begin Box, Post */
.art-post
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

#art-post-body
{
  position: relative;
  padding: 15px;
}


.art-post
{
  margin: 7px;
}

a img
{
  border: 0;
}

.art-article img, img.art-article
{
  border: solid 1px #C7C8C7;
  margin: 7px;
}

.art-metadata-icons img
{
  border: none;
  vertical-align: middle;
  margin: 2px;
}

.art-article table, table.art-article
{
  border-collapse: collapse;
  margin: 1px;
}

.art-article th, .art-article td
{
  padding: 2px;
  border: solid 1px #8E908E;
  vertical-align: top;
  text-align: left;
}

.art-article th
{
  text-align: center;
  vertical-align: middle;
  padding: 7px;
}

pre
{
  overflow: auto;
  padding: 0.1em;
}

/* end Box, Post */

/* begin PostHeaderIcon */
h2.art-postheader
{
  color: #45434A;

}

h2.art-postheader, 
h2.art-postheader a, 
h2.art-postheader a:link, 
h2.art-postheader a:visited,
h2.art-postheader a.visited,
h2.art-postheader a:hover,
h2.art-postheader a.hovered
{
  font-size: 24px;
}

h2.art-postheader a, h2.art-postheader a:link
{
  text-align: left;
  text-decoration: none;
  color: #D30D11;
}

h2.art-postheader a:visited, h2.art-postheader a.visited
{

  color: #595B59;
}


h2.art-postheader a:hover,  h2.art-postheader a.hovered
{


  color: #D30D11;
}

/* end PostHeaderIcon */

/* begin PostIcons, PostHeaderIcons */
.art-postheadericons,
.art-postheadericons a,
.art-postheadericons a:link,
.art-postheadericons a:visited,
.art-postheadericons a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  color: #565856;
}

.art-postheadericons
{
  padding: 1px;

}

.art-postheadericons a, .art-postheadericons a:link
{
  text-decoration: none;
  color: #9E0A0D;
}

.art-postheadericons a:visited, .art-postheadericons a.visited
{
  font-style: italic;
  font-weight: normal;
  color: #535058;
}

.art-postheadericons a:hover, .art-postheadericons a.hover
{
  font-style: italic;
  font-weight: normal;
  text-decoration: underline;
  color: #D30D11;
}
/* end PostIcons, PostHeaderIcons */

/* begin PostBullets */
.art-post ol, .art-post ul
{
  margin: 1em 0 1em 2em;
  padding: 0;
}

.art-post li
{
  font-size: 13px;
}

.art-post li ol, .art-post li ul
{
  margin: 0.5em 0 0.5em 2em;
  padding: 0;
}

.art-post li
{
  color: #111012;
  margin: 0 0 0 -10px;
  padding: 0;
}


.art-post li
{
  padding: 0 0 0 16px;
}

.art-post ol>li
{
  background: none;
  padding-left: 0;/* overrides overflow for "ul li" and sets the default value */
  overflow: visible;
}

.art-post ul>li
{
  background-image: url('../images/postbullets.png');
  background-repeat: no-repeat;
  padding-left: 16px;/* makes "ul li" not to align behind the image if they are in the same line */
  overflow-x: visible;
  overflow-y: hidden;
}


/* end PostBullets */

/* begin PostQuote */
.art-postcontent blockquote,
.art-postcontent blockquote a,
.art-postcontent blockquote a:link,
.art-postcontent blockquote a:visited,
.art-postcontent blockquote a:hover
{
  color: #131413;
  font-size: 13px;
}





.art-postcontent blockquote
{
   border: solid 1px #EEEFEE;
  margin: 10px 10px 10px 50px;
  padding: 6px 6px 6px 30px;
  background-color: #F0F0F0;
  background-image: url('../images/postquote.png');
  background-position: left top;
  background-repeat: no-repeat;/* makes blockquote not to align behind the image if they are in the same line */
  overflow: auto;
}

/* end PostQuote */

/* begin Footer */
.art-footer
{
  position: relative;
  overflow: hidden;
  width: 100%;
}

.art-footer-b 
{
  position: absolute;
  left:30px;
  right:30px;
  bottom:0;
  height:30px;
  background-image: url('../images/footer_b.png');
}

.art-footer-r, .art-footer-l
{
  position: absolute;
  height:30px;
  background-image: url('../images/footer_s.png');
  bottom: 0;
}

.art-footer-l
{
  left: 0;
  width:30px;
}

.art-footer-r
{
  right: 0;
  width:60px;
  clip: rect(auto, auto, auto, 30px);
}

.art-footer-t
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30px;
  background-image: url('../images/footer_t.png');
  background-position: left bottom;
}

.art-footer-body
{
    position:relative;
    padding: 5px;
}


.art-footer-text p
{
  padding:0;
  margin:0;
}

.art-footer,
.art-footer a,
.art-footer a:link,
.art-footer a:visited,
.art-footer a:hover
{
    color: #7A7D7A;
    font-size: 11px;
}

.art-footer-text
{
  min-height: 20px;
  padding: 0 10px 0 10px;

}

.art-footer,
.art-footer-text,
.art-footer p
{
  text-align: center;
}

.art-footer a,
.art-footer a:link
{
  color: #9E0A0D;
  text-decoration: none;
}

.art-footer a:visited
{
  color: #535553;

}

.art-footer a:hover
{
  color: #D30D11;


}
/* end Footer */

/* begin PageFooter */
.art-page-footer, 
.art-page-footer a,
.art-page-footer a:link,
.art-page-footer a:visited,
.art-page-footer a:hover
{
  font-family: Arial;
  font-size: 10px;
  letter-spacing: normal;
  word-spacing: normal;
  font-style: normal;
  font-weight: normal;
  text-decoration: underline;
  color: #938F9A;
}

.art-page-footer
{
  margin: 1em;
  text-align: center;
  text-decoration: none;
  color: #6F716F;
}
/* end PageFooter */

/* begin LayoutCell, sidebar1 */

.art-content-layout .art-sidebar1
{
  background-image: url('../images/sidebar_bg.png');
  width: 175px;
}

/* end LayoutCell, sidebar1 */

/* begin LayoutCell, content */




.art-content-layout .art-content .art-block
{
  background-image: url('../images/sidebar_bg.png');
}
/* end LayoutCell, content */



textarea#comment{width:100%;}

.commentlist, .commentlist li
{
  background: none;
}

.commentlist li li
{
  margin-left: 30px;
}

.commentlist li .avatar
{
  float: right;
  border: 1px solid #eee;
  padding: 2px;
  margin: 1px;
  background: #fff;
}

.commentlist li cite
{
  font-size: 1.2em;
}

#commentform textarea
{
  width: 100%;
}

img.wp-smiley
{
  border: none;
  margin: 0;
  padding: 0;
}

.navigation
{
  display: block;
  text-align: center;
}

/* Recommended by  http://codex.wordpress.org/CSS  */
/* Begin */
.aligncenter, div.aligncenter, .art-article .aligncenter img, .aligncenter img.art-article, .aligncenter img, img.aligncenter
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft
{
  float: left;
}

.alignright
{
  float: right;
}

.alignright img, img.alignright
{
  margin: 1em;
  margin-right: 0;
}

.alignleft img, img.alignleft
{
  margin: 1em;
  margin-left: 0;
}

.wp-caption
{
  border: 1px solid #ddd;
  background-color: #f3f3f3;
  padding-top: 4px;
  margin: 10px;
}

.wp-caption img
{
  margin: 0;
  padding: 0;
  border: 0 none;
}

.wp-caption p.wp-caption-text
{
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
}

.wp-caption, .wp-caption p
{
    text-align: center;
}
/* End */


.hidden
{
  display: none;
}

/* Calendar */
#wp-calendar {
  empty-cells: show;
  margin: 10px auto 0;
  width: 155px;
}

#wp-calendar #next a {
  padding-right: 10px;
  text-align: right;
}

#wp-calendar #prev a {
  padding-left: 10px;
  text-align: left;
}

#wp-calendar a {
  display: block;
}

#wp-calendar caption {
  text-align: center;
  width: 100%;
}

#wp-calendar td {
  padding: 3px 0;
  text-align: center;
}

.gallery {
  letter-spacing: normal;
}

.art-content {
  position: relative;
  z-index: 1;   
}

#todays-events{
  position: relative;
  z-index: 11;    
}

#upcoming-events{
  position: relative;
  z-index: 10;    
}

img.wp-post-image 
{
    margin:0 5px 5px 0 !important;
}

div.art-footer li, ul.commentlist li
{
    list-style-image: none;
    background:none;
    list-style-type:none;
    
}

div.art-footer div.art-content-layout,  
div.art-content div.art-content-layout
{
    margin:0 auto;
    width:100%;
}

div.art-footer ul
{
    padding-left: 0;
}

div.art-footer ul li ul
{
    padding-left: 20px;
}


div.art-layout-cell-size1 
{
    width:100%;
}

div.art-layout-cell-size2 
{
    width:50%;
}
div.art-layout-cell-size3 
{
    width:33%;
}

div.art-layout-cell-size4
{
    width:25%;
}

div.art-author-info img.avatar 
{
	float:left;	
	margin-top:0;
}

fvsch

25 Mar 2011 à 13:53

Hello,

Je ne suis pas sûr qu'avec le code HTML et CSS uniquement (et donc sans le JavaScript, les images...) on puisse reproduire le problème. Peut-on voir la page en ligne?

Sujet clos

CSS et mise en forme, CSS3

Text qui depasse le div sous ie7, ie8 mais ,nickel pour firefox safari