Knowledge Walls
Venkatesan
Hyderabad, Andhra Pradesh, India
Passcode:
UI Issues
Content property with html entities Font height-width is not same Quotes in HTML attribute value Internet explorer unwanted space when display: table; with CSS issue Font size with em sizing
Div Popup boxes
Corner Top-Left Vertial and Horizontal center Corner Right-Bottom Page Middle with blocked background Vertical center width 100% Horizontal center
Div Layouts
Two columns 50%-50% Create mixed layout with percentage and pixels by Div's How to create div width and height as 100% percentage in HTML with CSS
Font height-width is not same in UI Issues of WEB UI Tips and Tricks
2112 Views
How it differ from height or width of font across browsers? 
   Here in this example Verdana font is used. Below if you are seeing Firefox output div height is differ from Chrome div occupied height. arial across all browsers giving same height.
HTML
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
<div>data line</div>
CSS
div {
   padding: 0px;
   margin: 0px;
   outline: 0px;
   font-family: Verdana;
   font-size: 12px;
}
Demo 
http://www.knowledgewalls.com/realtimejqueryeditor/font-family-differ-in-height---width
Firefox Output 
Chrome Output 
Previous Topics
Previous lessons of current book.
UI Issues of WEB UI Tips and Tricks
Best Lessons of "WEB UI Tips and Tricks"
Top lessons which are viewed more times.
Div Layouts of WEB UI Tips and Tricks
Div Popup boxes of WEB UI Tips and Tricks
Div Layouts of WEB UI Tips and Tricks
UI Issues of WEB UI Tips and Tricks
Div Layouts of WEB UI Tips and Tricks
Div Popup boxes of WEB UI Tips and Tricks
UI Issues of WEB UI Tips and Tricks
UI Issues of WEB UI Tips and Tricks
UI Issues of WEB UI Tips and Tricks
Div Popup boxes of WEB UI Tips and Tricks
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details