I have a table that looks like this in a usercontrol. Then the usercontrol is used on the masterpage.
<table>
<tr>
<td width="80%" style="background-image: url(/images/Header_right.gif); background-repeat: repeat-x;">
</td>
</tr>
</table>
If the aspx page is in the root directory of the site it works. But if the aspx page is a level deeper the path is no longer valid. (Default.aspx VS /Projects/Default.aspx)
Is there another way to get the image to repeat like the above table cell? Fixing the path would be great but my goal is to have the image take up the rest of the browser screen.
NOTE: This problem appeared after moving the site into a virtual directory.
Use a Style Sheet
The best way is to use a style sheet rather than an embedded style. Then you don't have to worry about the relative path from the control as the path will be relative to the style sheet.
ResolveClientUrl()
If for some reason you can't use a style sheet, you can resolve the url relative to the application root with a tilda (~). ASP.Net controls can resolve this automatically, but in this case you will need to call ResolveClientUrl() yourself.
<table>
<tr>
<td width="80%" style="background-image: url(<%= ResolveClientUrl(”~/images/Header_right.gif”) %>); background-repeat: repeat-x;">
</td>
</tr>
</table>
But really, the best way is to use a style sheet.
Define a class in your CSS file that references the image relative to the CSS file. Apply that class to the particular element you want to style with that class. This will help keep the paths correct.
Note this assumes that your CSS file is in the same directory tree as the images, but in a sibling directory.
CSS
.header-bg
{
background-image: url(../images/Header_right.gif);
background-repeat: repeat-x;
}
Mark up
<link rel="stylesheet"
type="text/css"
href="~/Content/styles/site.css"
ID="siteCss"
runat="server" />
<table>
<tr>
<td width="80%" class="header-bg"></td>
</tr>
</table>
Use css class for styling. All classes put to separate css file and reference it in the master page file. Then path to images all always relative to location of css, and you don't have a problem with locations of aspx page!
Related
I have a ASP:MENU with some CSS styles applied to it. One of the options we specify on the table is that each element have a 'height' and 'line-height' of 15px. This looks fine in IE, but too cramped in Chrome. Additionally we apply 'border-bottom-style: dotted' to the element. In IE this dotted line is equal to the width of the table element. In Chrome it is the same width as the text.
I've examined the code for the page in Developer tools in Chrome and IE, and they're receiving the styles as required. Why do they display differently, is it simply an inherent difference in the way Chrome renders a site? If this is the case it may be that I need to use a different CSS style sheet, depending upon the browser, unless there is something else I can try?
<asp:Menu ID="menuSubLeft" runat="server" DataSourceID="sitemap_submenu"
MaximumDynamicDisplayLevels="1">
<StaticMenuStyle CssClass="clienthome_submenuMenu" />
<StaticMenuItemStyle CssClass="clienthome_submenuItemMenu" />
<StaticSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
<StaticHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuItemStyle CssClass="clienthome_dynamicMenu_Item" />
<DynamicHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuStyle CssClass="dynamicMenu_style_left" />
<DynamicSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
</asp:Menu>
.clienthome_submenuItemMenu
{
border-bottom:dotted 1px #5a57a6;
height:15px;
line-height:15px;
padding:2px 0px 2px 5px;
color:#5A57A6;
}
<table id="ctl00_ctl00_globalContent_menuSubLeft"
class="clienthome_submenuMenu ctl00_ctl00_globalContent_menuSubLeft_5 ctl00_ctl00_globalContent_menuSubLeft_2"
cellpadding="0"
cellspacing="0"
border="0">
<tr onmouseover="Menu_HoverStatic(this)"
onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)" title="Allows client to change their account password" id="ctl00_ctl00_globalContent_menuSubLeftn0">
<td>
<table class="clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;">
<a class="ctl00_ctl00_globalContent_menuSubLeft_1 clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_3" href="/myprofile.aspx" style="border-style:none;font-size:1em;">My Profile</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
UPDATE: After hours of playing around with the CSS and getting nowhere/throwing everything else on the site out a colleague pointed me to a simple fix: I just added the following code to the code behind:
protected void Page_PreInit(object sender, EventArgs e)
{
if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
{
Page.ClientTarget = "uplevel";
}
}
This is something like CSS PRECEDENCE
6.4 The cascade
Style sheets may have three different origins: author, user, and user agent.
Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.
If this is your case, just RESET your base styling in order to remove padding and margin for block and table elements.
As the title implies, is it possible to place an img tag behind a table that contains background images?
Here is an example and also the page source
The table contains background images
just add position: relative; to your table and you will get the desired result
AS:
<table width="100%" border="1" style="position: relative;z-index:2; margin-top:-170px;">
....
</table>
NOTE: Using Inline CSS is not a good idea try external Stylesheet
I am trying to make a plugin for WordPress.
It works great, except when i load the default WordPress themes. e.g. "twentyeleven."
This theme has a DOCTYPE as shown below. And hence, no matter what I do, it always inserts this annoying GAP when i put an image in a table.
Please Help!
How do I get rid of this gap?
Below is some code. Anytime a table is placed in a situation in which the DOCTYPE is defined as it is here, then I get this gap.
The WordPress default themes seem to use this DOCTYPE declaration. So they BREAK my pretty plugins...
<!DOCTYPE html>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td width="100%">
<img border="0" src="http://goo.gl/PJdRU">
</td>
</tr>
</table>
</body>
</html>
All browsers render the above code as shown below. I just want to REMOVE the Gap! Thanks!
There are several solutions, but neither is perfect. I guess the easiest will be just change your img's style - in CSS (with td img { display: block } rule) or just an inline style, like this:
<img style="display:block" border="0" src="http://goo.gl/PJdRU">
Here's an article with explanations why you see what you see - and several possible ways of fixing it. ) And here's a working JSFiddle to play with.
I have a client form which includes HTML served up from an iframe - I can't edit it. The only thing I can do is apply CSS edits.
I'm trying to apply a simple adjustment which would stack the <td>s in the form so
1. What is your age?
becomes
1.
What is your age?
If you right click the first question and Inspect Element you'll see the rather interesting DOM structure I get to work with. This example it looks like this:
<div id="Age" class="questionlabel">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<span class="questionnumber_questionlabel">1. </span>
</td>
<td>
<label class="required">What is your age?</label>
</td>
</tr>
</tbody>
</table>
</div>
When I inspect that <td> and add a display:table-row; it completely ignores me. This is in Chrome - I can replicate this DOM and get the CSS to do what I want in jsfiddle so I'm thinking there is a reset somewhere I can't see. I even tried display:table-row !important; to no avail. I can apply border:2px solid blue; no problem. I can apply display:none; no problem.
Any ideas as to what is going on here that would prevent this simple CSS param from working?
To re-iterate the ONLY thing I can do is apply CSS - No JavaScript and no HTML edits. Basically I pass in a CSS file in the url to the iFrame. That's all I get. Thanks!
EDIT: I apologize I had to remove the link to the example form on the live site.
Edit - screenshots had to be removed, but the solution is still valid.
Added this code to form-css.css, using Firebug. Beginning or end, it did not matter:
table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}
(Note: I reset that margin as the old one (-10px) was causing unsightly overlap.)
I'm developing sharepoint datetime control and got some problem with css of this control.
below is my html code.
<td style="padding-top: -10px">
<SharePoint:DateTimeControl CalendarImageUrl="/_layouts/NCS.OCP.Resource/images/calendar.jpg"
DatePickerFrameUrl="/_layouts/iframe.aspx" ID="DateDOB" DateOnly="true" Calendar="Gregorian"
LocaleId="2057" runat="server"></SharePoint:DateTimeControl>
<td>
I have tried modify ms-input css with padding-top -10px but failed, this control always falls down of my td.
is there any way to pull this control up so that this td can on one line...?
Looks like sharepoint has it's own <div>s or <td>s. Maybe even some custom css/
Try inspecting the elements, getting their ID's and then changing it with JS.