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

:: Useful web links List

Site Keyword tags

Abbreviations (1) Acting choices (1) actress-actors (2) addons (1) ads (33) adsense drawbacks (1) advantages (6) advantages of chennai (1) Advantages of Links directory (1) advantages of plastic cheppal stand (1) advices (2) affiliates (1) all ads (1) amazon (1) android (2) articles (34) asp (6) ASP dot Net design issues (1) astrolgy (2) autobiography (2) automobile (1) avoid hacking (1) avoid snake bite (1) backgrounds (1) banners (2) BCS (2) Best category for best collections (1) best PPT Presentations (1) best things (1) biodata (1) blog (1) Blog Advertising (1) blog stats (1) blogger (1) blogger drawbacks (1) blogs (3) Browser errors (2) Browser Issues (5) bus ticketing machines (2) business (2) business loss (11) Business Plan (1) Business rental (1) business wise drawbacks (1) Buying Expired Domains (1) capgemini (1) Car buying tips (1) certified professional (1) cheat frauds (7) Cinema industry (1) cities (15) clients (2) Closed IT/Software companies (1) closed websites (1) codings (21) Commented topics of my blog (1) comments (6) companies (11) Construction (1) contacts (1) Copyright (1) creativity (1) Credit Card Prefix Numbers (1) css (7) CSS drawbacks (1) CSS elements combination (1) CSS errors (2) css ID rules (1) css limitations (1) css links (1) css selectors (1) Cute babies (1) cv (1) demonetization (1) design category (2) disclaim (1) DNS error (1) Documentation (3) domain (2) drawbacks (9) Drawbacks in Madurai bus stand (1) drawbacks of legins (1) drawbacks of strike (2) drawbacks_others (3) duty (1) education (2) electronics (2) emails (1) embedded (2) empty post (1) emptyland (1) Error Code and Message (1) eshop (13) Extra expenses (1) Face detection apps use (1) family (1) FAQ (2) FENG OFFICE (1) finance loans (2) firecrackers (1) firewall nonblockable sites (1) food (3) For sales (1) Free (1) fresh content (6) friends (2) fun (1) general - new - temp (5) GHS (3) girls (8) google (5) google Ads (1) Google Adsense Revenue Sharing Sites (1) government (1) GPS merits (1) graphicsbg (1) Green earth (1) Hacking Methods (1) hand held machines (1) handicapped reservation (1) header wordings (1) health (2) Helpful Slogams (1) HM (1) home shifting (1) how to avoid social media spam (1) HTML (5) html encoder (1) HTML5 website layout (2) IBM (1) IDEA (1) IE (1) IE problems (1) india (1) infosys (1) internet (1) Internet/Social Media Marketing (1) interview questions (4) ISBN (1) IT hardware products for rental (2) IT Hardware-software (2) ja (1) jallikattu (1) javascripts (2) job (7) job analysis (1) joomla (2) KSRTC (1) kvic (1) links (33) links_background verification websites (1) links_blogs (8) Links_certifications (1) links_different websites (1) links_letterwise (1) Links_mobile websites (2) Links_My Designs (3) links_my SMM (2) links_other states (1) Links_Product_brand websites (1) links_Reciprocal Links (1) links_SEO/SEM (1) links_Tamilnadu (1) links_tenders (2) links_tools (2) links_UI design (1) links_use for all* (2) list (1) list of industrial estate (1) list of IT parks (1) list of toll free numbers (1) M2M (1) Madurai (1) Madurai 2020 (1) Mail box folder maintenance (1) Malayalam (1) Malayalam movie my reviews (1) manjula miss (1) Manufacturing Industries (1) marketing (3) marketing ideas (1) me at divisional sports (1) MNC site bugs (1) mobile (4) monthly extra (1) Multiple options in codings (1) my (2) my achievements (1) my achivements (1) My advt - ads (10) My all ads (1) My best collections (1) my best ideas (1) my comments (2) My cousin's post in FB (1) My donations (1) my friends with actor actress (1) My Google dashboard (1) My horoscope (2) my linkedin profile (1) My online interview (1) My Portfolio (2) my posts links (1) My questions (2) my SEO experience (1) my social media profiles (2) my stack overflow profiles (1) My Stackoverflow site answers (2) My works (1) Names (1) nested html (1) Netscape Navigator (1) new blogs (1) New build house for sale (1) New Concepts (1) news (4) online earnings (3) online generators (1) online scams (2) open office drawbacks (1) Open source (2) Opera (1) orkut drawbacks (1) Others view (21) our grandparents (1) Our ID and Numbers (1) outsource statistics (1) own ideas (15) own ideas_aboutme (13) own views (51) page pixel collapse when scrolling in firefox (1) Page Speed Performance (1) parallax scrolling websites (1) Partners (2) Personals (1) photos (23) Photos - art (3) Photos_actress (7) photos_screenshots (1) PHP (3) plans (1) Plots for sale (2) poems (3) policy (1) Pollution Facts (1) powercut (1) Powerpoint (1) press release (1) Problems and solutions - ATM (1) Problems and solutions - Education (2) Problems and solutions - Hardware (4) Problems and solutions - Mobilephones (4) Problems and solutions - NGO (7) Problems and solutions - Software (6) Problems and solutions - Website (7) problems in browsing center/internet cafe (1) Products (16) programmers problems (1) programs (7) proxy software (1) Quality guidelines (2) Rajamani (1) realesate (2) reasons for power shortage (1) Recent comments (1) relatives (2) relatives business (1) resume (1) RS 232 dotmatrix printers (1) rti (1) sales (6) SBI (1) search engine (2) search type websites (1) security (2) Security Alert regarding Serious CMS Attack (1) SEM portfolio (2) SEO Difficulty (1) SEO for blogs (1) SEO portfolio (1) SEO tools (2) SEO-SMM-ORM Plan (1) SEO/SEM (29) sil ads (1) Site Tags (4) siteworth (1) slogans (1) SMS benefits (1) Social Interest - public use (33) social media marketing (13) Social Media Optimization (1) social media widgets (1) softland-palmtec (2) software errors (1) Software Testing (6) Softwares (8) solairaja (1) sports (1) SQL (1) SQL queries (3) stars (1) statistics (10) stop software patents (1) tablet Grip and interaction (1) Tamil - Tamilar - Tamilnadu (22) TATA (1) TCS (1) technicals (11) Technology (5) tenders (4) Testing Tips (1) text magics (1) Thanks (1) Things to do before you die in India (1) Things to Watch in 2014 (1) thirumalai (1) Tips (5) Tips - Buseness tips (23) Tips - Health tips (8) Tips - life tips (18) tips for demo video preparation (1) Tips for doing SEO/SMM (3) Tips for Good-Employee (1) Tips for HR (2) Tips for old money (1) tours (1) Travels (1) TV (1) UI Certifications Q & A (1) UI design (4) useful best software latest versions (1) Useful websites for HTML Developer (1) videos (1) visa (1) vista icons (1) w3c standards (1) wallpapers (2) ways to find a job (1) Web design (9) Web design and developments (34) Web developments (6) Web Services (1) web UI design shapes (1) webhosting (10) Website Features (1) website templates (1) Widgets collections (4) Yahoo (1) சுயசரிதம் (1)