Skip to main content

UI design - Browser Issues

01. To add style for select form element in chrome, opera
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*/
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
  • 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 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 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>

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;  }
    counter-increment: chapter;    
    content:counter(chapter) ". ";
    display: inline-block;
    text-align: right;   

book indexbody {counter-reset:section;}
h1 {counter-reset:subsection;}
content:"(" counter(section) ". "")";
content:"("counter(section) "." counter(subsection) " )";
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 {
    #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*/

-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
  content: "\A"!important;white-space: pre;margin-bottom: 1.5em !important;

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

Popular posts from this blog

source of program, dropdowns

Choose a question ... What is your primary frequent flyer numberWhat is your library card numberWhat was your first phone numberWhat was your first teacher's nameWhat is your father's middle nameYour mother's maiden nameYour first pet's nameThe name of your elementary schoolYour elementary school mascotYour best friend's nicknameYour favorite sports teamYour favorite writerYour favorite actorYour favorite singerYour favorite songThe name of the street you grew up onMake and model of your first carThe city where you first met your spouseWhat town were you born in?What town was your father born in?What is the name of the hospital in which you were born?What is the first name of your best childhood friend?What was the name of your primary school?What town was your mother born in?What is the name of the first company / organization you worked for?What was your favourite food as a child?What is the title of your favourite book?Who is your favourite author?Who is your a…