dezign we(b)log

Difference between and
tags

vkumar@iotap.com — Thu, 04 Feb 2010 10:56:11 GMT

The main difference between DIV and SPAN is, SPAN does not do formatting by itself whereas DIV does that.

DIV tags are block elements that allow us to position elements

SPAN tags are inline elements

DIV tags creates some space around itself. It create line breaks. That is it act like a

tag

SPAN tags doesn’t create any unwanted space around it. It takes the actual space of the element.

The below example explains the actual difference between the DIV and SPAN tag:

1(a).
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

1(b). Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

2(a).
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

2(b).Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

The state 1(a) & 1(b) will provide the same output and state 2(a) & 2(b) will provide the same output .

Cheers,

Kumz

IE Double Margin Float Bug

vkumar@iotap.com — Tue, 02 Feb 2010 10:17:35 GMT

This blog provides the solution for "Double Margin Float Bug"

More...

Expression Web 3.0 Super Preview

vkumar@iotap.com — Tue, 24 Nov 2009 11:33:42 GMT

Super Preview is to simplify the process of testing and debugging layout issues across different web browsers and platforms. We can view the WebPages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page.

The screenshot of Expression web super preview is shown below :-

DOM Tree View:

Super Preview renderings with DOM data, letting you highlight specific DOM elements within the image, and show differences across browsers. It also provides element information such as position, dimensions and ID. This helps to pinpoint the element that’s causing the compatibility issue.

Screen Resolution :

Super preview allows us to view the webpage in different screen resolutions. Screenshot shown below :-

Open Image :

Many designers use Image mockups, in particular Photoshop (PSD) files to start off their design process, so in Super Preview this has been catered for with Open Image which you can choose from in the Comparison Panel. Just select the Open Image Icon and browse to your mockup. It will support all the usual image formats such as .bmp, .jpg, .gif, .png and as I said .psd.

Posted by Kumar