CSS - Bottom Border Too Far Down In Chrome

This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes:

{padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;}

Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great.


Ehud

Hi,

I have a list that shows the photo and some personal data of people.

Here it is:

http://www.tiregarfio.byethost17.co...ev.php/miembros

username: fer
password: m

I you load it with FF, you can see clearly I have added a green line that separate each member (border-bottom: solid 1px #A9F16C).

This line in IE6 is not between each member but below the personal data.

Here it is the styles:

Code:

div.miembro {
    overflow: hidden;
    clear: both;
    border-bottom: solid 1px #A9F16C;
}

div.fotografia {
    float:left;
    
}

Any idea?

Javi

I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.)

.picright {
float: right;
border: solid 1px #9F7A47;
margin: .3em .3em .5em .5em;
padding: 0;
}

Then I thought maybe I needed a rule for the img, so I added

.picright img {
margin: 0;
padding: 0;
}

but that didn't fix it.

Any guesses?

Yes........it's me again with more problems.

In trying to solve some other problems I went to using contrasting bg colors so I could see what was going on per Kravvitz suggestion.

So here is what I have

body bg color set at gold

#whiteBorder - set at white

#page bg set at green; border hot pink

and then #topbar and #sideColumn set at powder blue.

The problems is that the 10px whiteBorder shows on the top and left - but not on the right and bottom and I have no clue why.

Here is the css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #FFCC33;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #FF00FF;
	background-color: #339900;
	overflow: hidden;
	margin: auto;
	text-align: left;
}

#whiteBorder {
	border: 10px solid #FFFFFF;
	width: 100%;
	height: 100%;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size:20px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 16px;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

h4 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 14px;
	font-weight: bold;
}

p a:link, a:visited {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

p a:hover, p a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094F9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 100%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;

	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
	margin-left: 185px;
}

Here is the xhtml: Code:

<body>

	<!--begin page -->
	<div id="page">
	
	<!--begin white border -->
	<div id="whiteBorder">
	
	<!--begin header -->	
  	<div id="header"><img src="../images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
  	<span class="tagline">world leaders in spirometry</span>
	</div>
	<!--end of header -->
	
	<!--begin topbar -->
  	<div id="topbar">
  	<ul>
		<li><a href="../index.html">Home</a></li>
		<li><a href="../about_us/about_us.html">About Us</a></li>
		<li><a href="../other_regions.html">Other Regions</a></li>
   	</ul>
  	</div>
  	<!--end topbar -->
  
  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma &  COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="../resources/customer_support.html">Customer Support</a></li>
	  <li><a href="../resources/training_services.html">Training & Services</a></li>
      <li><a href="../resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="../resources/newsletters.html">Newsletters</a></li>
      <li><a href="../resources/downloads.html">Downloads</a></li>
      <li><a href="../resources/useful_links.html">Useful Links</a></li>
      <li><a href="../resources/industry_information.html">Industry Information</a></li>
	  <li><a href="../resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- TemplateBeginEditable name="Main_Section" -->Main_Section<!-- TemplateEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 
   
  </div>
  <!--end of white border -->
  
  </div>
  <!--end of page -->
  
</body>

Thanks

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks

hi.

I need some formatting help.

I am using niftycorners and the linked list tabs
I am building seem to rest at the bottom, pushing
the bottom of the rounded corners to the right of them.
I have tried clear:left, clear:right, clear:both at the div
and ul levels but that doesnt work.

any ideas?

I have attached a picture of the problem.

Here is the CSS/HTML:

Code:

<style>

body {

margin:20px;

}

#toptabs {
clear:left;
}

#toptabs ul {
    clear:left;
    position:relative;
	width:100%;
	margin-bottom:0;
	list-style:none;
	line-height:1em;
	padding:100px 0px 0px 0px;
}	

#toptabs ul li {
	float:left;
	margin-right:5px;
	padding:0;
}
#toptabs ul li.clear {
	clear:right;
}

#toptabs a {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
	background:#bbb;
}

#toptabs A.he link,
#toptabs A.he visited {
	position:relative;
	z-index:102;
}
</style>
</HEAD>

<BODY>

  <div id="header">
	  <div id="toptabs">
	    <ul id="venture">
          <li id="current"><a href="#"><span>Profile</span></a></li>
          <li><a href="#"><span>Q&A</span></a></li>
          <li><a href="#"><span>Recommendations</span></a></li>
          <li><a href="#"><span>Connections</span></a></li>
        </ul>
      </div>
    </div>	
</BODY>

I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags.

An example is http://www.adaappliances.com/produc...48&cat=0&page=1.

Please do not attempt to order anything! This is not a live site yet.

This is a snippet of the code. I am using inline styles for testing.
Code:

<div style="float:left; padding:5px">
<IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div>
<p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p>

I have not found a way to fix this. Any suggestions?

I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header.

Also I have my unordered list inside of my header div and it's placed directly below my header.

Any help much appreciated, just learning how to layout.

http://imgbin.org/index.php?page=image&id=6637

CSS code
Code:

body { 	
	font-family: "Lucida Sans Unicode", sans-serif, Verdana; 
	
	background-color: #999999; 
}

#header {
	
	height: 75px; 
	width: 100%; 
	
	border: 0px 0px 1px 0px; 
	border-style: solid;  
	border-color: white; 
	background-color: #336699; 
}	

#container {
	margin: 0 auto; 
	width: 900px;
	height: 100%;  
	
	background-color: #666666;  
}

#content {
	width: 75%; 
}

#sidebar {
	width: 25%; 	
	
	background-color: #666666; 	
}

ul {
 
	list-style-type: none; 
	
}

li {
	display: inline;	
}

and

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Jeremy</title>
		<link href="default.css" rel="stylesheet" type="text/css" />	
	</head>
	
	<body>
		<div id="header">
			<h1 class="header">Jeremy</h1>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="contactme.html">Contact Me</a></li>			
			</ul>
		</div>	
		
		<div id="container">
			<div id="sidebar">
			
			</div>		
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p>
				<p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p>
			</div>		
		
		</div>
	
	</body>
</html>

ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html?
the only other thing could be my Screen/monitor's refresh rate

I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this?

heloo geniuses.


please to someone helping me for preventing more of the hair pulling out.

I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page:
http://greentypeoftube.com/kc/

essentially to have the bottom expand with the user's browser window size.

thanks to you for the thinking and the helping of me with it.

s

oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}.

is there a way to do this with css?


I am working much very hard to be more with css to design than just designing it.

Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often....
----------
Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve.

So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening.

Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome:

Screenshot

The page is just the index page at:
GuyMerritt.net

The CSS files looks like this:


Code:

body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial; 
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
  width: 100%;
  max-width: 250px;
  height: auto;
}
div#slides {
	width: 500px;
	height: 280px;
	overflow: hidden;
}

div#slides div {
	height: 280px;
	width: 500px;
	font-size: 100px;
	line-height: 200px;
	text-align: center;
	color: #fff;
}

ul#ticker {
	height: 1.4em;
	overflow: hidden;
	border: solid 1px #aaa;
	background: #ccc;
}

ul#ticker li {
	padding: 0.2em 0;
}

/* @group global */

p#links {
	padding-top: 50px;
	clear: both;
}

a#avatar {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

a#avatar img {
	border: none;
}

h1 {
	color: #0094d5;
}

a {
	color: #0094d5;
}

a:visited, a:hover {
	color: #00577e;
}

.red {
	background: #e40053;
}

.blue {
	background: #0094d5;
}

.green {
	background: #43aa38;
}

/* @end */

At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)?

Thanks again,

Guy Merritt,
Flint, MI

I have a single table cell that will not display its border-bottom attribute in IE. I've searched the forums and the Web for a reason, but Googling for "css", "border" and "ie" brings up a minefield!

The table cell CSS looks like this:

Code:

td.cell_myCell {

    height:          10px;
    width:           490px;

    border-bottom:   1px solid #999999;
}

I'm using a Transitional DOCTYPE, mainly because it's default in Dreamweaver, and as far as I'm aware "border-bottom" is CSS2 valid.

The attributes always works in Firefox, but for some reason IE won't display it at all. It won't even display "border: 1px". Help!

this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things)

So I have 3 images for the top of my page and 3 images for the bottom.

The page is enclosed in a div frame titled "frame"

each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe"

Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom.

Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame"

I've tried some code in here to do it and it doesn't work..


any help here?

thanks!

Code:

<style type="text/css">
	
	body {
		text-align:center;
		height:100%;
		min-height:100%;
		padding:0px;
		}
	
	#frame {
		width:800px;
		height:100%;
		min-height:100%;
		margin-right:auto;
		margin-left:auto;
		margin-top:0px;
		padding:0px;
		text-align:left;
		position:relative;
		}
		
	#contentlefttop {
		width:155px;
		height:282px;
		padding:0px;
		float:left;
		background-image: url(images/layout_01.gif);
		background-repeat:no-repeat;
		}
	
	#leftframe {
	float:left;
	width:155px;
	position:relative;
	height:100%;
	min-height:100%;
	}
	
	#contentleft {
	clear:left;
	float:left;
	padding:0px;
	width:155px;
	padding-bottom:270px;
	}
	
	#contentleftbottom{
	width:155px;
	height:270px;
	/*clear:left;
	float:left;*/
	padding:0px;
	position:absolute;
	bottom:0;
	background-image: url(images/layout_07.gif);
	background-repeat:no-repeat;
	}
	
	#contentcenter {
		width:486px;
		padding:0px;
		clear:left;
		float:left;
		text-align:center;
		min-height:100%;
		height:100%;
		padding-bottom:53px;
		}
		
	#rightframe {
	float:left;
	position:relative;
	height:100%;
	min-height:100%;
	width:159px;
	}
	
	#centerframe {
	float:left;
	position:relative;
	height:100%;
	width:486px;
	}
	
	#contentrighttop {
		width:159px;
		height:282px;
		padding:0px;
		clear:left;
		float:left;
		background-image:url(images/layout_03.gif);
		background-repeat:no-repeat;
		background-position:top;
		}
		
	#contentright {
	clear:left;
	float:left;
	width:159px;
	padding:0px;
	height:100%;
	padding-bottom:270px;
	}
	
	#contentrightbottom{
	width:159px;
	height:270px;
	/*clear:left;
	float:left;*/
	position:absolute;
	bottom:0;
	padding:0px;
	background-image: url(images/layout_08.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	}
	
	#contentheader {
	width:486px;
	height:135px;
	float:left;
	background-image: url(images/layout_02.gif);
	background-repeat:no-repeat;
		}
		
	#contentfooter {
	/*clear:left;
	float:left;*/
	width:486px;
	height:53px;
	background-image: url(images/layout_09.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:0;
	}
	
	#sitemessage {
	margin-left:17px;
	margin-right:31px;
	height:90px;
	text-align:center;
	font-size:12px;
	}
	
	#wisemanquote {
	margin-left:22px;
	margin-right:24px;
	height:85px;
	text-align:center;
	font-size:12px;
	}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}
	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<div id="frame">
  	<div id="leftframe">
        <div id="contentlefttop">
        	<div id="sitemessage"></div>
        </div>
        <div id="contentleft">Left</div>
        <div id="contentleftbottom"></div>
    </div>
    <div id="centerframe">
    	<div id="contentheader"></div>
        <div id="contentcenter">
          <p>Center</p>
        </div>
        <div id="contentfooter"></div>
    </div>
    <div id="rightframe">
        <div id="contentrighttop">
        	<div id="wisemanquote"></div>
        </div>
        <div id="contentright">Right</div>
        <div id="contentrightbottom"></div>
    </div>
</div>

I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.

If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all.

I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened.

How do you fix that problem?

Thanks...