Tuesday 22 February 2011

Why is my span tag acting all freakishly?

When you try to design component, you will sometimes need to use the design tag as inline, and sometimes as block, for that purpose there are two tags, the span and the div.

The <span> is used for inline elements, elements you want to use while inline, meaning they do not break new line after.
The <div> is used for block elements, usually used for dividing the page into seperate parts, such as header, main zone, footer etc. as such, it will start a new line after it is completed.
There are other differences, such as inline not receiving height properties.

Of course both can be turned into the other type of display, simply by using the css property "display" to inline or block, or even better, the display type of inline-block, letting your inline items have a height and enjoy the best of both world(and enjoying the havoc of trying to fix the design for IE, as it tends to display it differently for each version).
For example: <div style="display:inline;">.

However, you should note, span is defaulted for inline, as such, it is supposed to contain some content, so if you use it for design(such as using it for a background, with no text inside) it will act weird, the best way to fix it is by adding some content, and the best content? a space that will not be ignored, achieved by the the " &nbsp; " key-word(without the quotation).
Oh, and do take note, if your span is across several lines(not starting and ending in the same line), the line break may cause some chaos, so it is best to keep it in one line, or commenting out the new line(simply start a comment at the end of the line, and end it at the beginning of the first element in the next line).

Sunday 20 February 2011

fixing asp:menu for google chrome asp.net

As some of you using asp.net might notice, Google Chrome has a quirk, it likes simplifying the html code. it isn't very noticeable, most of you will never notice, but when you use the control, the css just doesn't seem to work right for Chrome, the fix for this is to add the following code to your base.master code, or if you dont have a master, to the page's code.

protected override void AddedControl(Control control, int index)
{
if (Request.ServerVariables["http_user_agent"]
.IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
{
this.Page.ClientTarget = "uplevel";
}
base.AddedControl(control, index);
}

In case you are wondering why i use the safari as the user agent, that is because Safari and Chrome use the same rendering engine, the WebKit, thus making this fix good for both browsers.
In case you are using Safari and annoyed about only talking about Chrome, don't be insulted that i only talk about Google's Chrome, after all, chrome is 5 times more poplar (Chrome's market share is at around 13% of all browsers usage, while Safari is only at around 2%)