I have original.css file that i can't remove or change from the page.
original.css
table {
border-collapse: collapse;
border-spacing: 0;
}
The radio buttons are showing a border and only way it seems to go away its when using chromedev tool I remove border-collapse:collapse from the original.css. I been trying to do overwrite it using the code below but nothing works. Any suggestion on how to remove border?
<style>
input[type="radio"] {
margin-left: 10px;
margin-right: 1px;
border: none;
border-spacing: 0;
CellSpacing:-1;
}
</style>
<div class="contact-input-item" style="padding-left: 8.9cm; ">
<label><b>By:</b>
<asp:RadioButtonList ID="send_by" runat="server" RepeatDirection="Horizontal" CssClass="rbl" BorderStyle="None" Style="display: none">
<asp:ListItem Text="Email" Value="Email" /> <asp:ListItem Text="fax" Value="fax" />
</asp:RadioButtonList></label>
More specific CSS will override less specific css. So if you can use the class name as well as the type of item inside of your style tags that might be able to push out that "Table" specification.
<style> .contact-input-item input {...etc...} </style>
Then as a last resort you can use !important:
<style>
.contact-input-item input {
border-collapse:separate !important;
}
</style>
Related
I'm trying to make a warning banner for a web page. I'm using a label inside a div inside a panel with some css styles declared on the page. I don't want to declare those styles on every page, so I moved them to my Site.css file, (which is used by the master page). The problem that when I do that, the css styles aren't applied. Everything on the master page is formatted correctly, but the controls declared in the content page are not.
Hear's what I've go on the content page:
<asp:Content ID="Content2" ContentPlaceHolderID="ErrorMessages" runat="server">
<asp:Panel ID="WarningBanner" runat="server" CssClass="warningPanel" Visible="true">
<div class="warningDiv">
<asp:Label ID="testLabel" runat="server" Text="test" CssClass="warningLabel"></asp:Label>
</div>
</asp:Panel>
<style>
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</asp:Content>
and hear's what I've got on the master page:
<head runat="server">
...ext...
<link href="~/Content/Site.css" rel="stylesheet" />
...ext...
</head>
<body>
...ext...
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
...ext...
<body/>
and this is what my Site.css file looks like:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
...ext...
What am I doing wrong?
CSS files are often cached by browsers. When that happens, changes made to the styles will not show up in the HTML display.
You can clear your browser cache after changing the CSS contents to see the modified styles. Another way to do it, which also ensures that your clients will see the updated CSS without having to clear their browser cache, is to append a query string to the link:
<link href="~/Content/Site.css?version=2.5" rel="stylesheet" type="text/css" />
Every time the CSS file is modified, you set a new version number to force the updated CSS file to be downloaded.
There's nothing wrong with your code. You probably haven't specified the correct file path to your CSS file. Double check that. Also, you've got a typo:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
It should be:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
</div>
I have an ASP.Net Hyperlink with a set height. The text is rendered at the top left of it. How do I vertically center it (-the text)?
(In C# I'd have: label1.TextAlign = ContentAlignment.MiddleCenter; . How is it done in ASP.Net?)
Tried the following but it doesn't work (neither on FF nor on IE).
<form id="form1" runat="server">
<div>
<asp:HyperLink NavigateUrl="~/WebForm1.aspx" runat="server" CssClass="MyClass" BackColor="White"
Height="100px" Text="MyText" Width="200px" ></asp:HyperLink>
</div>
</form>
And:
.MyClass
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
Add the following styles to your HyperLink:
display:table-cell;
text-align:center;
vertical-align:middle;
If you are going to reuse that style is better to define a class:
<asp:HyperLink ... class="myClass" >HyperLink</asp:HyperLink>
and then in your stylesheet:
.myClass{
display:table-cell;
text-align:center;
vertical-align:middle;
}
Or add the styles inline:
<asp:HyperLink ... style="display:table-cell;text-align:center;vertical-align:middle;" >HyperLink</asp:HyperLink>
Add folowing attributes to the CssClass or the inline style:
{
display: table-cell;
vertical-align: middle;
line-height: 32px;
}
note that replace "32px" with your height of Hyperlink.
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.
New to css. I have a div element, in which there are multiple links in it, now I like to apply css to all of the elements inside the div like below:
#menu {
top: 150px;
left: 650px;
position: absolute;
color: #151B54;
font: 10pt;
font-family: Arial;
}
However this doesn't seem to be working.
Here is the div:
<div id="menu">
<asp:HyperLink ID="lnk_Home" runat="server"
NavigateUrl="~/Default.aspx"> Home </asp:HyperLink>
</span>
<asp:HyperLink ID="HyperLink14" runat="server" NavigateUrl="~/About/About.aspx"
Target="_blank"> About </asp:HyperLink>
<asp:HyperLink ID="HyperLink16" runat="server"
NavigateUrl="~/About/ContactUs.aspx" Target="_blank"> Contact Us </asp:HyperLink>
<asp:HyperLink ID="HyperLink17" runat="server"
NavigateUrl="~/About/FAQ.aspx" Target="_blank"> FAQ </asp:HyperLink>
</div>
None of your CSS styles anything inside of the #menu div.The right way would be like this:
div#menu {
position: absolute;
top: 150px;
left: 650px;
}
/* "<asp>" isn't a valid HTML element, but I assume that
* <asp:Hyperlink> actually generates an HTML anchor */
/* Links also have pseudo-elements that represent their
* valid statuses.*/
div#menu a,
div#menu a:visited,
div#menu a:hover,
div#menu a:active,
div#menu a:focus {
color: #151B54;
font: 10pt;
font-family: Arial;
}
More information about the pseudo-classes mentioned can be found here: http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
Not exactly sure what you're asking, as you provided ASP.NET code, but to select elements inside of elements via CSS, you can do it like this:
#menu your_link {
/* Styles */
}
If you could provide the generated HTML, that would be nice.
I think you are looking for something like
#menu asp {
...styles...
}
This will target all <asp> tags inside the #menu element. Your current style only targets the #menu element, not any of its children.
(Although the <asp> tag is non-valid, you could substitute any type of element and the concept still applies.)
Also, there's a rogue <span> element in your code, and a lot of where CSS can do the job. It should maybe look like this:
<div id="menu">
<asp:HyperLink ID="lnk_Home" runat="server" NavigateUrl="~/Default.aspx">
Home</asp:HyperLink>
<asp:HyperLink ID="HyperLink14" runat="server" NavigateUrl="~/About/About.aspx" Target="_blank">
About</asp:HyperLink>
<asp:HyperLink ID="HyperLink16" runat="server" NavigateUrl="~/About/ContactUs.aspx" Target="_blank">
Contact Us</asp:HyperLink>
<asp:HyperLink ID="HyperLink17" runat="server" NavigateUrl="~/About/FAQ.aspx" Target="_blank">
FAQ</asp:HyperLink>
</div>
I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.