I have this markup:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TestCSSTemplates.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
ul { list-style: none }
span { display:inline-block; text-align: right; width: 100px; }
.DespliegaEnLinea { display: inline-block; }
</style>
</head>
<body>
<form id="form1" runat="server">
<ul >
<li>
<span >Are you sure?: </span>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="DespliegaEnLinea">
<asp:ListItem>yes</asp:ListItem>
<asp:ListItem>no</asp:ListItem>
</asp:RadioButtonList>
</li>
</ul>
</form>
</body>
</html>
When the page is displayed in Chrome or Internet Explorer (9 or less with comptaibility mode activated), the page renders as I intended: all the content inside the li tag is in just one line.
However when the above page is displayed in Internet Explorer 11 (or 9, 8 without compatibility mode activated), it's rendered with a line break between the span tag and the radiobuttonlist control.
How can i make this page always render the content of the li tag in one line, regardless of the browers it's being used to see it?
Related
I'm very new to ASP.NET and have to confess I'm having great difficulty achieving even the most basic of results.
I am currently having trouble getting CSS formatting to work in my content pages.
My master page is as follows -
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Master_Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../CSS/Main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="Container">
<div id="Header">Header Goes Here</div>
<div id="LeftBar">Left Bar Goes Here</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="RightBar">Right Bar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</div>
</form>
</body>
</html>
The CSS stylesheet is referenced in the < head > tag and when in Design view on the master page I can see the formatting is in place.
However, when I create a Content Page based on this master page, none of the CSS formatting follows through.
<%# Page Title="" Language="C#" MasterPageFile="~/Master/Main.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Pages_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<p>Content Goes Here</p>
</div>
</asp:Content>
The source for the Content page references the Master Page correctly I believe, but the formatting is simply not working. My content page is entirely black and white text down the left hands side of the browser.
I'm sure this will be a simple matter to those who are good at ASP, but like I said, I'm struggling with it at the moment, so any help is much appreciated.
For completeness the CSS file is as follows -
*
{
font-family: Calibri;
}
#Header
{
width: 100%;
background-color: Gray;
}
#LeftBar
{
width: 15%;
float: left;
background-color: Lime;
}
#Content
{
width: 70%;
float: left;
background-color: White;
}
#RightBar
{
width: 15%;
float: left;
background-color: Yellow;
}
#Footer
{
width: 100%;
float: none;
background-color: Red;
}
The CSS formatting does appear on the Master Page when in Design view in VWD, but never in the Content Page.
Known issue (if this is what is happening in this case) with Visual Studio. The way to be sure of applying the correct path is to drag the CSS file from Solution Explorer into the head section of the master page (in design view).
I'm somewhat new to html and css and I am having a really strange issue with this ASP.NET page. The following code draws the div (should be 50x50) as 50x100 in IE9. It may be drawing twice. In Compatibility mode it works just fine. As you can see it's a super-simple piece of code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DivAlignmentTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Div1
{
width: 50px;
height: 50px;
background-color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" />
</form>
</body>
</html>
Any help would be appreciated,
Jason
Change
<div id="Div1" />
to
<div id="Div1"></div>
should make it work properly.
You cant self close a div tag
Try:
<div id="Div1"></div>
I am having problems to display a image in a div element.
In the div is a custom web control (a login control).
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" Theme="Styles" %>
<%# Register src="wucLogin.ascx" tagname="wucLogin" tagprefix="log" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login</title>
<link rel="Stylesheet" type="text/css" href="App_Themes/Styles/LoginStyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="divLogin">
<log:wucLogin id="WebUserControlLogin" runat="server" />
</div>
</form>
</body>
</html>
Everything gets displayed as it should. A basic login control with some basic layout and a blue background.
But when i try to put a picture in the div i cannot get it to display. I tried every possible path for the image so i do not think i have made a error there.
Basicly i want the login control to display, with behind it a picture (centered).
Css for the div element (the map images is directly a map in the root:
#divLogin
{
background-image: url('../Images/test2.png');
background-repeat: no-repeat;
background-position:center;
position: absolute;
text-align: center;
top: 40%;
left: 52.8%;
width: 401px;
height: 123px;
margin-top: -61,5px;
margin-left: -250px;
}
Best regards.
I dont see an ID of "divLog" on your page .. just "divLogin" .. could that be the issue?
change position to relative, and put the login stuff inside the image div. also update the top and left for the relative positioning.
just a thought.
I have created a simple page in HTML which works fine. But when I import that to ASP.NET, the page design clutters up.
Here is my Site.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Elite.WUI.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="headerCPH" runat="server">
<div id="header">
<h1>WUI</h1>
</div>
<hr />
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="navigationCPH" runat="server">
<div id="navigation">
<ul>
<li>Home</li>
<li>Users</li>
<li>Campaigns</li>
<li>Settings</li>
</ul>
</div>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="contentCPH" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
my stylesheet styles.css
#navigation
{
float: left;
border: 1pt solid;
}
#navigation ul
{
list-style-type: none;
padding: 5 5 5 5;
margin: 0;
}
#content
{
margin-left: 9%;
border: 1pt solid;
padding-left: 5;
}
and the actual page derived from master page
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ABC.aspx.cs" Inherits="Elite.WUI.ABC" %>
<asp:Content ID="Content3" ContentPlaceHolderID="contentCPH" runat="server">
<div id="content">
<p>Test content</p>
</div>
</asp:Content>
Here is how it is displayed in Firefox (ver 3.6)
As you can see that the border, list-style-type properties are working but margin isn't working. Can anyone tell me what am I doing wrong? I have tested it in Google Chrome but same issue. While the HTML and CSS works fine when there is no ASP.NET i.e. simple .html file.
Change
padding-left: 5;
to
padding-left: 5px;
and
padding: 5 5 5 5;
to
padding: 5px 5px 5px 5px;
Note: last one can also be written: padding:5px;
EDIT: As suggested in the comments I inspected the source of the static HTML file and that generated by ASP.NET and I saw few differences
The CSS for <ul> in the ASP.NET source is
div#navigation ul {
list-style-type: none;
margin: 0px;
}
and that in the static file is
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 5px;
}
Note the difference of padding (missing in the ASP.NET source)
Likewise, in the content div there is the padding-left missing in the ASP.NET source. But AFAIK, this shouldn't matter. The problem is that not even the margin property is applied to the div.
P.S: I couldn't edit the question because, I don't have enough rep and someone has added a image in the post (it won't allow me to post images.)
In a webform iam have placed one textbox, i want to choose a background image for that particular textbox during runtime. need coding in C#, ASP .NET
You could use css to set the background image and javascript to change it. Here's an example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ToDDDD._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
input
{
background-image: url(/initialImage.png)
}
</style>
<script type="text/javascript">
function changeImage() {
document.getElementById('txt').style.backgroundImage = 'url(/newImage.png)';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server" />
Change background image
</div>
</form>
</body>
</html>
If you have a limited number of images that you want to use for the background then it would probably be cleanest to define each of them as a separate class in you css and then programatically either with javascript or C# change the class on the input.
<style>
.image1 { background-image: url(/image1.png);}
.image2 { background-image: url(/image2.png);}
.image3 { background-image: url(/image3.png);}
</style>
In you Page_Load of you page you can then write this:
txtBox1.CssClass = "image1";
Or using javascript:
document.getElementById('<%=txtBox1.ClientID%>').setAttribute("class", "image2");