DIV Issues, Problems and Solutions

Hiroshi — Sun, 26 Oct 2008 20:48:04 +0000

DIV based table less websites are common (essential, precisely speaking) now a days. Web 2.0 Web style is also about DIV based Validated websites. DIV is a little bit tricky to handle than simple tables. Here are few very essential known issues which I have been facing and their solutions.

Blank Line Spaces Problem

Sometimes we use blank DIV. Suppose we use a DIV of 1px height. But its empty. Its behavior in IE and Firefox will be different. To avoid that use [ & n b s p ; ] or place blank gif image of 1px height in that.

Top-Padding Issue

Do not give top-padding to any element which is in div containing id as in example beneath:


 
  text

In above case top padding will be applied at class named as some-class and not at id named some-id.

Content Overlaps In spite of Not Using BR (line breaks)

Well, consider header, content and footer. These are three parts of website and in some cases if they just overlaps then you are missing clear both property of CSS.

Use clear:both; in css for every different part of website, for line break.

~~ Header ~~

~~ Body ~~

~~ Footer ~~

Vertical Alignment of Content In DIV

Things will be always top aligned in case of DIV.
So when placing images in the center of box then you will have to use top padding for that image via CSS.

UL LI List Padding Margin Problem In DIV

UL, LI have default spacings (padding and margin). Whether you define these 0 in CSS or whatever, the spacing between li will be different in IE and Firefox which is not ok when you are placing two lists besides each other and you require same height for both Lists.

Use line-height for li distances and not padding or margin and define max-height property in CSS for UL tag.

Naming Classes

Start class or id names with text and not with numbers.

i.e.
class=”nav” is ok
class=”2-nav” is not ok

Blocked Elements and Inline Elements

Tags with default line breaks are blocked elements while tags with no default line break are inline elements. You can write inline elements in the same line but not blocked elements.
i.e.
DIV, p are blocked elements.
strong, a, span are inline elements.

Difference Between ID and Class

Id is unique throughout the website. Id can not be used more than once in a web page. While you can use the same class for many tags in html.
id is unique and is not repeated throughout site but class can be applied at multiple tags.

Div With Blank Bottom Padding

Sometimes even when we define div height and there are no breaks after that but it takes some space or bottom padding and pushes next content a little more down.

Use overflow hidden property at that div via CSS, containing image, data or whatever which is causing bottom blank space (this problem occurs usually in i.e.6).

overflow:hidden;

Float and Align

mozilla firefox looks for float for alignment and not the text-align. Floating for DIV is shifting Whole DIV to right or left while aligning left or right for DIV is left or right alignment of data or content containing that DIV.

DIV Issues, Problems and Solutions is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Create Rounded Flexible Div Without Images

Hiroshi — Sun, 26 Oct 2008 17:59:12 +0000

Nifty Corners Cube is a solution to get rounded corners without images, and this third version is build by three main components:

A javascript file, named “niftycornerscube.js”
A CSS file, named “niftycorners.css”
The javascript calls specific for the pages

Nifty Corners Cube

Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Web Style Press, Best Practices from all the Web, Build Better Websites » DIV