Posts
The goal of using the Net panel was monitoring the HTTP traffic initiated by a web page which simply revealed all the collected and computed information in a graphical and intuitive interface.
.jpg)
.jpg)
introduction of Firebug by Rob Campbell
Showing posts with label HTML-XHTML-CSS. Show all posts
Showing posts with label HTML-XHTML-CSS. Show all posts
Tuesday, December 31, 2013
Firebug Net panel - HTTP Traffic Monitoring
Needed to collect info around request URL, request header, response status, and response value of REST service calls, I utilized Net panel of Firebug which provided me a lot of details to verify the service calls processes in the web application.
The goal of using the Net panel was monitoring the HTTP traffic initiated by a web page which simply revealed all the collected and computed information in a graphical and intuitive interface.
.jpg)
.jpg)
introduction of Firebug by Rob Campbell
The goal of using the Net panel was monitoring the HTTP traffic initiated by a web page which simply revealed all the collected and computed information in a graphical and intuitive interface.
introduction of Firebug by Rob Campbell
Monday, October 26, 2009
ASP.NET - CSS ID selector vs. CSS class for custom server controls
To have a common use control, we do create custom ASP.NET server controls.
As a simple example let's have a side bar control. To do that, Add a Web User Control, it has .ascx extention and call it sideBarList.
<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="sideBarList.ascx.cs"
Inherits="AspAdvWrk01.sideBarList" %>
<asp:Panel ID="srchEnginePnl" runat="server">
<h4>Search Engines:</h4>
<a href="http://www.bing.com/">bing</a><br />
<a href="http://www.google.ca/">Google</a><br />
<a href="http://m.www.yahoo.com/">Yahoo</a><br />
<a href="http://www.msn.com/">MSN</a><br />
<a href="http://www.altavista.com/">Altavista</a>
</asp:Panel>
Then let's add the following CSS codes in a style sheet:
#srchEnginePnl
{
border-style:dotted;
border-width:1px;
padding: 5px;
font-size:small;
}
I tried the same ID name of asp Panel control in this style sheet as a CSS ID selector, To apply style to the asp Panel control with ID name of srchEnginePnl. Even though that we have CSS ID selector but it doesn't apply any style because the real ID name in HTML page is something else which you can find it by checking the html source of the page in your browser (in the test page it was #ctl00_ContentPlaceHolder1_sideBarList1_srchEnginePnl).
The solution, a CSS class selector and utilizing CssClass attribute as following:
.srchEnginePnl
{
border-style:dotted;
border-width:1px;
padding: 5px;
font-size:small;
}
a.srchEnginePnl
{
padding: 10px;
}
...
<asp:Panel ID="srchEnginePnl" CssClass="srchEnginePnl" runat="server">
...
otherwise you have to use the real ID of your panel control in html source and use that ID name to define the ID CSS selector in your style sheet:
#ctl00_ContentPlaceHolder1_sideBarList1_srchEnginePnl
{
border-style:dotted;
border-width:1px;
padding: 5px;
font-size:small;
}
...
<asp:Panel ID="srchEnginePnl" runat="server">
...
As a simple example let's have a side bar control. To do that, Add a Web User Control, it has .ascx extention and call it sideBarList.
<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="sideBarList.ascx.cs"
Inherits="AspAdvWrk01.sideBarList" %>
<asp:Panel ID="srchEnginePnl" runat="server">
<h4>Search Engines:</h4>
<a href="http://www.bing.com/">bing</a><br />
<a href="http://www.google.ca/">Google</a><br />
<a href="http://m.www.yahoo.com/">Yahoo</a><br />
<a href="http://www.msn.com/">MSN</a><br />
<a href="http://www.altavista.com/">Altavista</a>
</asp:Panel>
Then let's add the following CSS codes in a style sheet:
#srchEnginePnl
{
border-style:dotted;
border-width:1px;
padding: 5px;
font-size:small;
}
I tried the same ID name of asp Panel control in this style sheet as a CSS ID selector, To apply style to the asp Panel control with ID name of srchEnginePnl. Even though that we have CSS ID selector but it doesn't apply any style because the real ID name in HTML page is something else which you can find it by checking the html source of the page in your browser (in the test page it was #ctl00_ContentPlaceHolder1_sideBarList1_srchEnginePnl).
The solution, a CSS class selector and utilizing CssClass attribute as following:
.srchEnginePnl
{
border-style:dotted;
border-width:1px;
padding: 5px;
font-size:small;
}
a.srchEnginePnl
{
padding: 10px;
}
...
<asp:Panel ID="srchEnginePnl" CssClass="srchEnginePnl" runat="server">
...
otherwise you have to use the real ID of your panel control in html source and use that ID name to define the ID CSS selector in your style sheet:
#ctl00_ContentPlaceHolder1_sideBarList1_srchEnginePnl
{
border-style:dotted;
border-width:1px;
padding: 5px;
font-size:small;
}
...
<asp:Panel ID="srchEnginePnl" runat="server">
...
Sunday, September 20, 2009
CSS - height loose when all elements are float in a <div> block
When all the elements in a <div> block are float, Firefox can't keep the height of block, in this example the border appears just on top side:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>height loose</title>
</head>
<body>
<div style="margin:auto;width:350px;border:5px solid #CCC;">
<img style="float:left;margin-top:0.5em" src="Design.jpg" />
<span style="float:right;margin-top:1em; margin-right:0.5em">
<b>Development</b>
</span>
</div>
</body>
</html>
To solve the problem, it's necessary to explicitly set the height of block and it's better to use em for height size unit cuz of covering different font size of contents:
<style type="text/css">
#hdr {
height: 4em;
}
</style>
<div id="hdr" style="margin:auto;width:350px;border:5px solid #CCC;">
...
</div>
IE doesn't show such a behavior, it's yet another place that coder should consider cross browser development techniques.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>height loose</title>
</head>
<body>
<div style="margin:auto;width:350px;border:5px solid #CCC;">
<img style="float:left;margin-top:0.5em" src="Design.jpg" />
<span style="float:right;margin-top:1em; margin-right:0.5em">
<b>Development</b>
</span>
</div>
</body>
</html>
To solve the problem, it's necessary to explicitly set the height of block and it's better to use em for height size unit cuz of covering different font size of contents:
<style type="text/css">
#hdr {
height: 4em;
}
</style>
<div id="hdr" style="margin:auto;width:350px;border:5px solid #CCC;">
...
</div>
IE doesn't show such a behavior, it's yet another place that coder should consider cross browser development techniques.
Subscribe to:
Posts (Atom)
