Bordure bleu sous IE7 et non sur Firefox (XP)Résolu/Fermé

Question

Bonjour,

Voila j'ai un soucis. Je fais un blog Wordpress pour ma femme et tout fonctionne à merveille, sauf que j'ai cette satanée bordure bleu autour des "images lien" sur IE7 -- Par contre sur Firefox elle est gris claire (je pense que c est normal la). Je voudrais me débarrasser de cette bordure qui est laide et ne sert a rien. Soucis, j'ai 2 fichiers Css et impossible de trouver comment faire, j'ai essayer de mettre des border: 0 ou border: none ici ou la mais rien n'y fait.
Je joins a cette lettre le lien de mon site pour que vous puissiez en juger:http://clickdoctor.eu/ashantibengals/queens/
et le liens pour trouver les deux fichiers css:
http://clickdoctor.eu/ashantibengals/wp-content/themes/itadvance/style.css
et 
http://clickdoctor.eu/ashantibengals/wp-content/themes/itadvance/ie-win.css


Sinon en apercu sans telecharger:
Fichier ie-win.css:
img {
		border : none;
		}
#navigation { float: left; }

#navigation ul { float: right; }

#navigation li.active a:link,
#navigation li.active a:visited
{
	color: #555555;
	background-color: #ffffff;
}

#content-wrapper { width: 58%; }

#content pre { width: 360px; overflow: hidden; }

#wrapper h3.post-title a:link, 
#wrapper h3.post-title a:visited
{
	border-bottom-width: 0;
}

#extras { padding-right: 0; margin-right: 0; margin-left: 8px; padding-left: 0; }

#extras #friends ul { padding-left: 0; margin-left: 20px; }

#extras #links { width: 250px; }




Merci par avance de votre aide

kiki · Answer

Bonjour, 

Un exemple de site css trés bien fait : http://www.pompage.net/traduction/cssdezero-6

En ccs c'est l'option text-decoration: none

jwchretien · Answer

J'ai bien lu mais toujours impossible de retirer cette bordure. Si j'efface l'integralité du contenu du fichier style.css pour ne mettre que ...img {
		border : none;
		}
alors la bordure disparait, j'en conclue qu elle doit etre appeler dans ce fichier mais ou???

kiki · Answer

Bonjour, 

oui, mais c'est la balise <A> qui définit le lien et donc le soulignement pas défaut (text-decoration)
A essayer :
a img { text-decoration: none }

jwchretien · Answer

j ai essayé de mettre ta balise dans les deux fichiers mais sans resultat. Voila le texte du second fichier style.css que je n'ai pas fait (incapable de le faire vu mes connaissances en css)

/* Links */

a:link { text-decoration: none ;color: #AAD0D0;}

a:visited { text-decoration: none; color: #AAD0D0; }

a:hover, a:active { color: #93BFBF; } 

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }

h1 { font-size: 32px; margin-bottom: 0px; margin-top: 10px;}

h2 { font-size: 28px; }

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 20px; }

/* Other Html Elements */
.titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none;}
.titles a:link, .titles a:visited, .titles a:active {
text-decoration: none;
font-size: 24px;
font-weight: normal;
border-bottom-width: 0;
}



pre, blockquote 
{
	overflow: auto;
	padding: 0 10px;
	margin: 20px 30px;
	line-height: 1.8em;
	background-color: #465757;
	border: 1px solid #314343;
}

pre:hover, blockquote:hover
{
	background-color: #f0f0f0;
	border: 1px solid #d0d0d0;
}

pre { padding-top: 10px; padding-bottom: 10px; }

code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }

ul, ol { line-height: 2.0em; }

ul { list-style-image: url(images/bullet.gif); }

abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }

del { text-decoration: line-through; color: #999999; }

ins { text-decoration: none; color: #009977; }

/* Structure */

body
{
	margin: 0;
	padding: 0;
	color: #222222;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	background-color: #112B2B;
	font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}

#wrapper2 {
width: 768px;
margin-left: auto;
margin-right: auto;
}
#header
{
	float: left;
	width: 100%;
	padding-bottom: 8px;
	background: #3C4E4E url('images/header-bg.jpg');
	clear: right;
	height: 59px;
	margin-top: 15px;
}

#navigation
{
	clear: both;
	float: left;
	width: 100%;
	background-image: url(images/header.jpg);
	height: 212px;
}

#wrapper 
{
	clear: both;
	float: left;
	width: 100%;
	color: #BECDCD;
	background: #3C4E4E; 
}

#content-wrapper
{
	width: 65%;
	float: left;
}

#content
{
	float: left;
	padding: 0 0px 10px 30px;
}

#sidebar-wrapper
{
	width: 35%;
	float: right;
}

#sidebar
{
	float: right;
	padding: 0px 15px 0px 10px;
	width: 213px;
	background-image: url(images/sidebar-bg.gif);;
	margin-right: 15px;
	margin-top: 7px;
}

#footer
{
	clear: both;
	float: left;
	width: 748px;
	text-align: left;
	padding-left: 20px;
	background: #3C4E4E;
	background-image: url(images/footer-bg.gif);
	margin-bottom: 15px;
	color: #BECDCD;
	height: 36px;
	padding-top: 10px;
}

#footer a:link, #footer a:hover, #footer a:active, #footer a:visited {
color: #BECDCD;
}

#extras
{
	float: left;
	width: 780px;
	color: #444444;
	text-align: left;
	padding: 0 10px 10px;
	margin: 10px 12px 20px;
	background-color: #f5f5f5;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

/* Header */

#header h1 { padding-left: 20px; }

#header h1 a:link, #header a:active {
color: #AAD0D0;
font-size: 20px;
text-transform: lowercase;
}

#header h1 a:hover {
color: #8EBABA;
font-size: 20px;
text-transform: lowercase;
}

#header h1 a:active {
color: #8EBABA;
font-size: 20px;
text-transform: lowercase;
}

#header h1 a:visited {
color: #8EBABA;
font-size: 20px;
text-transform: lowercase;
}

/* Navigation */

#navigation ul { list-style-type: none; list-style-image: none; float: left; margin-top: 0px; margin-left: 0px; padding-left: 0px;}

#navigation li { float: left; }

#navigation li a:link,
#navigation li a:visited
{
	float: left;
	color: #8CA5A5;
	display: block;
	padding: 0px 10px;
	margin-right: 1px;
	height: 23px;
	font-size: 13px;
	margin-top: 0px;
	background-color: #304242;
	background-image: url(images/nav-bg.gif);
	border-left: 1px solid #1E2D2D;
	border-right: 1px solid #1E2D2D;
	
}

#navigation li a:hover,
#navigation li a:active
{
	color: #A5BABA;
	background-repeat: repeat-x;
	font-size: 13px;
	margin-top: 0px;
	background-color: #1B292A;
	background-image: url(images/nav-bg2.gif);
	border-left: 1px solid #1E2D2D;
	border-right: 1px solid #1E2D2D;
}

#navigation li.active a
{
	color: #BECDCD;
	background-color: #3C4E4E;
}

/* Wrapper */

#wrapper a:link { font-weight: bold; border: 0; }

#wrapper a:visited { font-weight: bold; }

#wrapper a:hover, #wrapper a:active { }

/* Content */

#content .post-title a { border-bottom-width: 0; }

#content .post p.img { float: left; margin: 0 15px 0 0; }

#content .post p.img img { padding: 8px; border: 0px solid #d0d0d0; background-color: #eeeeee; }

#content .post-footer 
{ 
	font-size: 90%; 
	color: #677F7F;
	margin-bottom: 5px; 
	padding:5px 5px 5px 15px;
	background-color: #394B4B;
	border: 1px solid #2E3F3F;
}

.post {
padding-left: 10px;
padding-right: 10px;
}
.post-wrapper {
background-image: url(images/post-bg.gif);
background-repeat: no-repeat;
width: 476px;
padding: 10px;
margin-left: -15px;
margin-right: 10px;
}

.post-wrapper2 {
width: 476px;
padding: 10px;
margin-left: -15px;
margin-right: 10px;
}
/* Sidebar */

.sideblock
{
	padding: 5px 10px;
	margin-bottom: 20px;
}

.sideblock ul { }

.sideblock h3 { margin-top: 5px; margin-left: -13px; font-size: 14px; display: block; background-image: url('images/h2-bg.gif'); background-repeat: no-repeat;  width: 210px; padding-left: 10px; line-height: 30px; margin-bottom: 0px; margin-right: 0px; color: #BECDCD;  }

#sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }

#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }

#sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none; border: 0; }

#sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }

#sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}

/* Extras */

#extras h6 { font-size: 14px; text-transform: uppercase; color: #BECDCD; }

#friends
{
	float: left;
	width: 150px;
	margin-left: 20px;
	margin-right: 10px;
}

#links
{
	float: left;
	width: 275px;
	margin-right: 50px;
}

#about
{
	float: left;
	width: 250px;
	margin-right: 20px;
}

#friends ul { padding-left: 20px; }

#links dl, #links dt, #links dd { margin: 0; padding: 0; }

#links dt { font-weight: bold; padding-top: 5px; }

#links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }

	/* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #3C4E4E;
width: 280px;
}

#commentform textarea {
background: #485959;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform textarea:hover {
background: #324444;
border: 1px solid #2D3F3F;
}
#commentform textarea:focus {
background: #3C4E4E;
border: 1px solid #2D3F3F;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #3C4E4E;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #3C4E4E;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #3C4E4E;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}

.date {
	height: 54px;
	margin-bottom: 5px;
	width: 54px;
	text-align: center;
	float: left;
	margin-top: 10px;
	margin-left: 10px;

}
.date .month {
	display: block;
	color: #D9DBDB;
	padding: 2px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
}
.date .day {
	display: block;
	color: #FFBD0C;
	font: 2.3em Georgia;
	padding-top: 0px;
	text-align: center;
	margin-top: -5px;
}

#left {
	width: 60px;
	float: left;
}

.slogan {
font-size: 13px;
color: #141F1F;
text-transform: lowercase;
margin-left: 20px;
margin-bottom: 2px;
float: left;
}
.icons {
float: right;
margin-right: 30px;
margin-top: -20px;
}

jwchretien · Answer

J'ai cherché hier jusqu'a 3.00 du mat et que dalle :(

jwchretien · Answer

GROSSE AVANCEE comme quoi a tete reposé ca va toujours mieux :)

j'ai meme résolue le pb :)
il fallait ajouter:
img {
		border : none;
		}
puis remplacer:

a:link { text-decoration: none ;color: #AAD0D0;}
par
a:link { text-decoration: none ;color: #AAD0D0; border : none;} 

mais l'un sans l autre ca marche pas :)

merci de votre aide tout de meme :)

kiki · Answer

Bonjour, Les styles c'est compliqués (car il faut un rendu précis). Il faut les aborder avec méthode. Ajouter des commentaire /* Commentaires */ dans ses ajouts. un ID (codé avec un #nom) permet de définir 1 élément unique dans la page. un CLASS (codé avec un .nom) permet de définir un élément spécifique réutilisable. Un ID sert surtout pour un positionnement d'un bloc (qui reste unique). Les CLASS peuvent s'imbriquer (par exemple un paragraphe

et à un l'interieur un mot en rouge

. Il plus facile de définir à l'avance la structue de la page : tete, pied, milieu, collonne_gauche, colonne_centre, colonne_droite, etc... tu vas définir des comportements différents selon la zone ou tu places tes éléments. .tete { color: #000000; } .tete a { color: #333333; text-decoration: none; } .pied { color: #cc0000; } .pied a { color: #333333; text-decoration: underline; } Dans le début du fichier css, on place les styles génériques pour toute la page : h1 { font-weight: bold; color: #ff3300; } NOTA : remarque la notation des styles qui facilitent la lecture. Chaque ligne se termine par une accolade ou un point-virgule. Pour comprendre les styles et à mon avis c'est indispensable car de +en + utilisé, je conseille les 2 sites https://www.alsacreations.com/ et http://www.pompage.net/ Afin de personnaliser un site en SPIP, j'ai du m'y mettre aussi. Il y a une suite de tutos : http://www.pompage.net/traduction/cssdezero-1 trés bien conçus. Ca parait barbant au début, mais quand on commence à maitriser un peut, on s'amuse trés vite.

jwchretien · Answer

Merci en tout cas pour ton aide; et je vais essayer d apprendre pour mieux maitriser le sujet ;)

Bordure bleu sous IE7 et non sur Firefox (XP)

8 réponses

Discussions similaires

Newsletters