UI design - Browser Issues

01. To add style for select form element in chrome, opera
select{
background-color: rgba(0,0,0,0);
   [if saf]padding-top:1px; text-indent:26px;
   -webkit-appearance: none; /* to disappear default select arrow in chrome*/
-moz-appearance:none;
text-indent:16px; /* to disappear default select arrow in mozilla */ }

select option {background:#E5E3E3; text-indent:3px; border: dotted 1px #ccc; line-height:25px;height:25px;}

02. avoid unwanted empty space shows in IE:
_margin-top:1px; /* for IE 6 */
 *margin-top:1px; /* for IE 7 */


03. data grid field length increase grid width increase
add this style="word-break: break-all; white-space: pre-wrap; width: 200px; word-wrap: break-word;" to div


04. Overlay popup full height and scroll with page code is add  
position: fixed; width:100%; height:100%; in overlay and popup classes

05. background colour not take effect add rgba (0,0,0,0,)

06.  full image background for html/body tag used is not supported in all resolutions
solution: .bg {
    width: 100%;    height: 100%;
    position: absolute;
    top: 0;    left: 0;
   z-index: -5000;
}

07.  Create a shortcut for localhost file
desktop->rightclick-> shortcut-> give url ->save

08.  drop down menu in dhtml does not appear in Firefox- In js
var transparency="100";
var itemPadding="0px 15px 0px 15px";
Firefox: "Tools -> Options -> Content -> Enable JavaScript" 

09.To take a list of files in a main folder
In command prompt, dir/s >files.txt


10. website is opened in IE but it shows "Reported Attack Site!" in mozilla firefox ?
mozilla firefox -> tools -> options -> security
remove tick marks in first 3 points

11. text position not correct in text fields = input {  line-height:20px; /* for IE */ [always line-height=height]

12. to not drag the text area add  resize:none;

13. css animations:
-moz-animation-name: bounceIn;
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;

14. In opera border radius not apply for image

15. In chrome and IE object tag not supported.

16. All lettersare caps and first letter is big using class
letter-spacing:2px; font-variant:small-caps;
 color:#990000;   font-family:Orator Std; font-size:20px;
@font-face {
    font-family: Orator Std;
    src: url(../fonts/Orator Std);

17. Select box is disappear when select options, due to z-index =-1, for select:focus

18. firewall :

• If we block gmail in firewall all other https sites not opened like sbtonline.in
• if yahoo is blocked all webmail will not work
• in dynamic applications do not pass a query in link(url) having words like jobs, dating, photos, freelance...then that page will not work if that keyword is blocked in router firewall.

19. background colour not take effect add rgba(0,0,0,0,)

20. In asp.net submit button is used only as input. if class is provided for input:focus{}, when using tab key the submit button is disappear, to avoid this give class as input[type="text"]:focus {}

21. h1 class not apply for asp:label heading

22. In asp.net add, edit, delete icons are write as input tag so input:hover effect shows in this icons also

23. nested embedded html without frames

< object type="text/html" data="balls.html" style="width:80%; height:300px; margin:1%;">  nested html close object tag
In object tag it supports only webpages not support csv, doc, excel files.

24. set a minimum width for IE < !--[if gte IE 5]> < style type="text/css">
body {
width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" );
}
< /style>
<![endif]-->

25. css for two alternative row style in datagrid

tr:nth-child(4n+0), tr:nth-child(4n-1) 

tr:nth-child(odd){    background-color: #000;}​

tr:nth-child(even) {    background-color: grey;}​

26. white-space: pre; 

to show table column text in single line at IE 

27. In photoshop, in gray mode the luminosity is disabled.

28. To block copy paste in input field

oncut="return false" onpaste="return false"  autocomplete="off"

29.  A width and height should be specified for all images in order to speed up page display
position:fixed for overlay


xml = platform independant

don't used to negative margin in ie7 used to position:relative; top:-270px;

text-shadow: x-offset y-offset blur color;

align is a inline element to align a single element for table , text, span etc

float is a block element to align a set of elements like sidebar, div etc

types of formatting: block level and inline. 

arrange the ol list numbers (2 digit numbers) to start from the left side.ul{    counter-reset: chapter 0;  }
li:before{    
    counter-increment: chapter;    
    content:counter(chapter) ". ";
    width:20px;
    display: inline-block;
    text-align: right;   
}  

book indexbody {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"(" counter(section) ". "")";
}
h2:before 
{
counter-increment:subsection;
content:"("counter(section) "." counter(subsection) " )";
  margin-left:40px;
}

30. Background text in input type text

 <input id="textfield" name="textfield" type="text" placeholder="enter something" /> 

31. how to set footer at bottom with css:    

    html,    body {
    margin:0;    padding:0;    height:100%;
    }
    #wrapper {
    min-height:100%;    position:relative;
    }
    #header {
    padding:10px;
    background:#5ee;
    }
    #content {
    padding:10px;    padding-bottom:80px; /* Height of the footer element */
    }
    #footer {
    width:100%;    height:80px;    position:absolute;    bottom:0;
    left:0;    background:#ee5;
    }

32. Horizontally Centered Menu:

#centeredmenu {
   float:left;   width:100%;   background:#fff;   border-bottom:4px solid #000;
   overflow:hidden;   position:relative;
}
#centeredmenu ul {
   clear:left;   float:left;   list-style:none;
   margin:0;   padding:0;   position:relative;   left:50%;   text-align:center;
}
#centeredmenu ul li {
   display:block;   float:left;   list-style:none;   margin:0;
   padding:0;   position:relative;   right:50%;
}
#centeredmenu ul li a {
   display:block;   margin:0 0 0 1px;   padding:3px 10px;   background:#ddd;
   color:#000;   text-decoration:none;   line-height:1.3em;
}


33./* added for IE disabled inputs looks*/

-input[type="text"]:disabled, 

-input[type="password"]:disabled, 

-select:disabled {background-color:#ECECEC;}

34. convert grayscale using css

#shaded {
    filter: grayscale(1);
    transition: filter ease-in 0.3s;
} 

 #shaded:hover {
    filter: grayscale(0);
}

35. disable edit in text fields by css = {pointer-events: none;}

36. In IE to increase options width for select listbox

select[attr-identity="ddlRoute"]:focus { _width:auto;*width:auto;width:auto;}




37. in url about:support -> reset firefox

38. how to add break in css

page-break-after:always

  content: "\A"!important;white-space: pre;margin-bottom: 1.5em !important;

DO NOT TO DO:

• do not give z-index:-1; for select:focus{}