Skip to main content

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{}   
    
    
    

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…