Jump to content

Disappearing borders on window state change


JeePI

Recommended Posts

Hi!I have a strange problem with my div / css... and i dont know why it does that...I have a div with a border of 1px solid #0096ce, when the page first load, it is all perfect! but when there is any interaction with the window itself some part (not completely) of the border disappear... (example on the resize of the window, on some text selection, minimize / maximize, etc...)correct (on page load)correct.jpgincorrect (if i change the window state)bugged.jpgAny idea on how to solve this?Thank you :)

Link to comment
Share on other sites

<!--//**Contient l'ensemble de la page*******************//-->div.container{	width : 750px;}<!--//**Contient le contenu au milieu de la page*******************//-->div.content {	border-width : 0px 1px 1px 1px;  border-style : solid;  border-color : #0096ce;}td.menu_header{	border-width : 1px 1px 0px 0px;  border-style : solid;  border-color : #0096ce;  background-color : #f2f8fb;  color : #0096ce;  font  : bold 10pt verdana;  width  : 287px;  padding-left : 10px;}td.menu_content{	padding : 10px;	border  : 1px solid #0096ce;	color : #0096ce;  font : 10pt verdana;}div.left_menu{	float  : left;	margin : 10px 0px 10px 5px;}div.right_menu{	float  : right;	margin : 10px 5px 10px 0px;}

<div class="content">  <!--  //**Menu de gauche*******************//  // Affiche le menu de gauche  -->  <div class="left_menu">  	<table width="357" cellpadding="0" cellspacing="0">    <tr>    	<td width="70" height="25"><img src="./images/coin_salesnet.gif"></td>    	<td class="menu_header">Menu</td>    </tr>    <tr>    	<td colspan="2" class="menu_content">      <li><a href="#">Markets Serves</a></li>      <li><a href="#">Products</a></li>      <li><a href="#">Experts</a></li>      <li><a href="#">Services We Offer</a></li>      <li><a href="#">Our Promotions</a></li>    	</td>    </tr>  	</table>  </div>  <!--  //**Menu de droite*******************//  // Affiche le menu de droite  -->  <div class="right_menu">  	<table width="357" cellpadding="0" cellspacing="0">    <tr>    	<td width="70" height="25"><img src="./images/coin_salesnet.gif"></td>    	<td class="menu_header">Menu</td>    </tr>    <tr>    	<td colspan="2" class="menu_content">      <li><a href="#">Customer Relationship Management</a></li>      <li><a href="#">Knowledge Database</a></li>      <li><a href="#">Global Resources</a></li>      <li><a href="#">External Links</a></li>      <li><a href="index.asp?lang=<%= strLang %>&page=template">Template</a></li>    	</td>    </tr>  	</table>  </div>  <span style="clear : both"></span>	</div>

Link to comment
Share on other sites

Thanks :)HTML:td -element has no height property:<td width="70" height="25"><img src="./images/coin_salesnet.gif"></td>use style="height: 25px"; if height is needed.li -elements must be inside of ul or ol element:http://www.w3.org/TR/html4/struct/lists.html

<td colspan="2" class="menu_content"><ul><li><a href="#">Markets Serves</a></li><li><a href="#">Products</a></li><li><a href="#">Experts</a></li><li><a href="#">Services We Offer</a></li><li><a href="#">Our Promotions</a></li></ul></td>

strict-mode ONtable must have summary="some description of table content"image must have alt="some description of image"in both cases regulation as empty ("") is sufficientspan element can't be empty use as <span> </span> if empty span is needed& -mark must be as & in URLs<li><a href="index.asp?lang=<%= strLang %>&page=template">Template</a></li>strict-mode OFF :)CSS:CSS comment-marks are /* and */ <!--//**Contient l'ensemble de la page*******************//-->it is unlegal if those are in CSS-file or CSS-block.remove HTML-comment marks:<!-- --> and one excess / -mark start and end of CSS-comment.CSS-comment can be only as:/* some comment */ That empty span-element is somehow reason of all, I'm trying to figurize why it is there..Change it to div and result is much better.remove: <span style="clear : both"></span>add: <div style="clear : both"></div>I'm still a bit of muddled with this construction, but anyway it is much better with div than span.Try these, then we see if there is more help needed. :)

Link to comment
Share on other sites

Thank SO MUCH raimo!! :)It worked all fine! Yay!Thank you for all the tips, i appreciate it much!I'm a trainee for 10 weeks in an important company (to get my diploma) and it is the first time i'm using that much CSS and DIV for design, i used to only use TABLE!Thank you again :)

Link to comment
Share on other sites

/************************************************************** *	Auteur      	: Jean-Philippe Morin          	 *  Date Création  	: 29 Mars 2006               *	Date Modification : 30 Mars 2006, Jean-Philippe Morin     *	----------------------------------------------------------	 *	But : Feuille de style qui peut être utilisée pour  *    la page rechercher. **************************************************************//**CSS Rechercher******************* *	border       : 1px solid #0096ce; *	background-color : #f2f8fb; *	padding      : left, right, bottom, top; *	float       : left, right, none; *	clear       : left, right, both, none; *	CSS Units     : em, ex, px; ***********************************/table.resultats{	border  : 1px solid #0096ce;	color  : #0096ce;  font  : 10pt verdana;  width  : 100%;}tr.docTypes{	border : 1px solid #0096ce;}td.docTypes_id{	width : 30px;}

<table class="resultats">	<tr>  <td class="docTypes_id">#</td>  <td>titre</td>	</tr>	<%  var rs_docTypesSearch = Server.CreateObject("ADODB.Recordset");  var strSelectDocType = "SELECT dt.docType_ID, " + strLang + "_docType_Name docType_Name ";    strSelectDocType +="	FROM docType dt, community_docType cdt ";    strSelectDocType +=" WHERE dt.docType_ID = " + Session("intDocType") + " ";    strSelectDocType +="  AND cdt.community_ID = 1 ";    strSelectDocType +=" ORDER BY docType_Name ";  rs_docTypesSearch.Open(strSelectDocType, cnn_sql, adOpenStatic, adLockReadOnly);    while (!rs_docTypesSearch.EOF)  {	%>  	<tr class="docTypes">    <td><%= rs_docTypesSearch("docType_ID") %></td>    <td><%= rs_docTypesSearch("docType_Name") %></td>  	</tr>	<%  	rs_docTypesSearch.MoveNext();  } //fin du while    rs_docTypesSearch.Close();	%></table>

hmm it still doesnt work here... and i cant find why? and why the style that i call in my TR doesnt apply? if i put another property than border it applies it.If i remove this part of the code, my border doesnt disappear, its only when put this table...

Link to comment
Share on other sites

Thanks :) There is no CSS or HTML errors in that part of code.Only 1 warning: missing table summary="" not pad at all. :)I think, You should try to make smaller table width in class table.resultatswidth: 98%; or something.. Not sure, but worth to try.set CSS border-collapse: collapse; to get borders with tr -elementhttp://www.w3schools.com/css/pr_tab_border-collapse.asptable{border-collapse: collapse; /* (collapse|separate|inherit) */}tr{border: solid 1px #C0C0C0;}All real browsers shows borders OK if collapse is setted,but still there is no border in tr with MSIE (no idea why not).

Link to comment
Share on other sites

Hi, thank you again for helping me.width : 98% didn't worked :)i added border-collapse : collapse; in my commun.css so it applies to all tablesand i still cant figure what is going wrong on this page... why can't i put a border on my TR?I have finally put a style in all of my TDs... and i have the result that i want. It would have been so more simple to be able to put it in my TR.I still have my "disappearing border" problem :S

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...