MY PROBLEM is why it is showing different output[Hyperlink Named HOME]
in browser( going above the div part )
when compared to design page in visual studio!!!
please Help me, i Don't know much about HTML, LEARNING.....
***<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="project.login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.back {
background-color:chocolate;
width:inherit;
height:65px
}
.images{width:426px;
height:65px;
}
.hyperlinks {position:relative;
float:right;
margin-top:-20px;
margin-left:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="back">
<asp:Image ID="Image1" runat="server" CssClass="images" ImageUrl="~/images/images.jpg" />
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="hyperlinks">Home</asp:HyperLink >
</div>
</form>
</body>
</html>***
The problem occurs only in Internet Explorer, and then only in compatibility mode. So apparently, the designer in Visual Studio emulates IE's compatibility mode.
If you boil the issue down to the minimum required to show it, you get this
.back {
background-color: chocolate;
height: 65px;
}
.images {
height: 100%;
}
.hyperlinks {
float: right;
margin-left: 10px;
}
<div class="back">
<img id="Image1" class="images" src="http://lorempixel.com/195/65" />
<a id="HyperLink1" class="hyperlinks">Home</a>
</div>
This puts the floating link in the top right corner of its parent in all standards compliant browsers. But switching IE to compatibility mode will put the link below the orange bar.
(If you then give the link a negative top margin, it moves up a bit, but that doesn't change the issue.)
Now a makeshift solution is to use CSS that is handled the same by all browsers, compatibility mode or not. Something like this, for instance.
.back {
background-color: chocolate;
height: 65px;
text-align: right;
}
.images {
height: 100%;
float: left;
}
.hyperlinks {
line-height: 110px;
margin-left: 10px;
}
<div class="back">
<img id="Image1" class="images" src="http://lorempixel.com/195/65" />
<a id="HyperLink1" class="hyperlinks">Home</a>
</div>
A more permanent solution would be to make sure that Visual Studio's designer would show things in standards compliance mode rather than compatibility mode. However, I haven't found a way yet to do that.
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'm trying to design a webpage using Asp.net and CSS in Visual Studio 2010. the problem is simple but i have no idea how to fix it. Im creating a header in my page, this header is a div, its linked to my stylesheet for coloring. I put an image in the div, and i added a label. Now after some time to put the image in the middle of the div and text under it, when i run the website, the Label leaves the div completely and sits outside. How do i fix this? and for future reference, what technique or method do i follow so that the webpage before running always looks the same after running? I've decided to create a stylesheet for every page and put all my styles in there.
Sorry, here it is.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="LoginStyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="MECIT_Logo.png" />
<asp:Label CssClass="Title" ID="WelcomeLabel" runat="server" Text="SSS">
</asp:label>
</div>
</form>
</body>
</html>
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
}
.Logo
{
position:absolute;
left:40%;
}
.Title
{
position:absolute;
left:38%;
bottom:83%;
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
I don't understand why you are absolutely positioning the elements inside the container, all this can be handled with margins and alignment. Here is my suggestion:
Click here to view the fiddle
CSS:
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
text-align:center;
}
.Logo
{
margin:5 auto;
}
.Title
{
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
HTML:
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="http://www.mecit.edu.om/images/MECIT_Logo.png" /><br />
//Used a <span> for the Label, as I believe that is what it renders as
<span class="Title" id="WelcomeLabel">Some Title</span>
</div>
My site looks like this:
I've coloured the central info bit red, so you can see. It's too far down the page! I can't work out why.
Here's the css (well, actually scss, but you get the idea) for that section:
#searchresult {
.left {
background-color:yellow;
float:left;
margin-right:0.5em;
}
.center {
background-color:red;
#activity {
float:right;
}
}
.right {
background-color:green;
float:right;
width:145px;
margin-left: 1em;
.info, .email {
#include minimal-btn();
a {
padding: 3px 0 0 28px;
}
}
}
}
(If you haven't seen it before, scss is a cool thing that compiles down to css. It works just as you'd think it would.)
Here's the html:
<ItemTemplate>
<div id="searchresult" class="box group">
<div class="left">
<img id="imgLogo" runat="server" alt="Logo" src=""/>
</div>
<div class="right">
<asp:Panel ID="pnlEmail" runat="server">
<div class="minimal email"><asp:HyperLink ID="lnkEmail" runat="server">Email this business</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlMicrosite" runat="server">
<div class="minimal info"><asp:HyperLink ID="lnkMicrosite" runat="server">Full company info</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlRecommends" runat="server" CssClass="recommends">
<span>Recommends: <strong><asp:Literal ID="litRecommends" runat="server"></asp:Literal></strong></span>
</asp:Panel>
</div>
<div class="center">
<span id="activity">Activity: <asp:Literal ID="litCompanyActivity" runat="server"></asp:Literal></span>
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
<em><asp:Literal ID="litCompanyLocation" runat="server"></asp:Literal></em>
</div>
</div>
</ItemTemplate>
I'm pretty new to web design. Css isn't very intuitive for me, and I can't work out what is going on here. In the guide I was following This problem didn't seem to arise.
This is causing the problem:
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
specifically, the default margin-top on the h3.
You can remove the margin-top, if that's what you want:
h3 {
margin-top: 0
}
Or, you can set overflow: hidden on .center to prevent collapsing margins, which is the source of your "alignment problem".
I have a master page with a background and 3-column layout. The start page "default.aspx" is a content Web Form and is linked to the master page. At the design time, everything looks great but when run, the master page background is invisible. It disappears.
How to fix this?
** Edited **
Master Page Form Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Live</title>
<link rel="Stylesheet" type="text/css" href="../Stylesheets/MasterStyleSheet.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="masterform" runat="server">
<div id="divBanner" class="BannerDiv"></div>
<div id="divMain" class="MainDiv">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<div id="divMasterContent" class="MainContentDiv">
<div id="divMainSideBar1" class="MainSideBar1Div" style="margin-left: 610px;"></div>
<div id="divMainSideBar2" class="MainSideBar2Div" style="margin-left: 811px;"></div>
</div>
</asp:ContentPlaceHolder>
</div>
<div id="divFooterMenu" class="FooterMenuDiv"></div>
</form>
</body>
</html>
StyleSheet Code
body
{
padding-left: 100px;
background-image: url("../../App_LocalResources/wood.jpg");
width: 1000px;
}
.BannerDiv
{
border: thin solid Brown;
padding-left: 50px; padding-right: 50px;
background-color: White;
height: 150px; width: 895px;
}
.MainDiv
{
padding-top: 10px;
height: 600px; width: 1000px;
}
.MainContentDiv
{
background-color: White;
border: thin solid Brown;
height: 600px; width: 600px;
}
.MainSideBar1Div
{
padding-left: 10px;
position: relative;
background-color: White;
border: thin solid Brown;
height: 600px; width: 170px;
top: -2px;
}
.MainSideBar2Div
{
padding-left: 10px;
position: relative;
background-color: White;
border: thin solid Brown;
height: 600px; width: 170px;
top: -605px;
}
.FooterMenuDiv
{
border: thin solid White;
height: 30px; width: 997px;
background-color: Gray;
padding-top: 10px;
}
At present I am running it on my local machine.
Are you sure that the App_Localresources are added to the output directory when you publish the site? Right-click the wood.jpg in solution explorer and check that "Build option" is set to "Content".
http://msdn.microsoft.com/en-us/library/0c6xyb66(VS.80).aspx
Btw...If your masterpage and content pages resides in different folders, I would recommend using site-root relative path instead of relative paths:
http://msdn.microsoft.com/en-us/library/ms178116.aspx
Once the page loads, click View Source to view the exact path of the background image it renders.
Another option: To check whether the path mentioned in the css is correct and reachable, replace it by an inline background setting of the head tag in the master page. If it works, the path is incorrect.
the App_LocalResources is a protected folder and asp.net not let the image readed from.
Place your background image, and other images in an other folder, eg on /images/
To verify that just try to see the folder...->
www.yoursite.com/App_LocalResources/
I am sure you have placed MasterPage & Default.aspx at different folder location. Try to place them at same level and see the difference.
As stylesheets path are considered according to webpage at runtime and according to Masterpage at design time.
The Ohter solution you can use is
Replace this line with
<link rel="Stylesheet" type="text/css" href="../Stylesheets/MasterStyleSheet.css" />
this new one
<link rel="Stylesheet" type="text/css" href="Stylesheets/MasterStyleSheet.css" />
I hope this will resolve your issue.
i think you need to make sure that, server can read your your BG path properly, as you can view it on your local PC, but when running on server the path may not be relative, or even the image isn't uploaded to the directory
Had anyone got a problem with a:hover that has position: absolute and is above <img> under IE & Opera
a:hover has background, but <a> hasn't, both has display: block.
Thank you in advance for your help
...
To see the problem please check this webpage:
http://bckp.eu/test.html
or
use this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {
border: 1px solid black;
position: relative;
height: 200px;
width: 500px;
}
a.next {
right: 0;
}
a.prev {
left:0;
}
.withbackground {
background: yellow;
}
.nobackground {
background: transparent;
}
a.link {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border:0;
}
a.link:hover, a.link:focus {
background: url(/img/comment.gif) repeat !important;
}
</style>
</head>
<body>
<div id="t">
<a class="link nobackground" href="#"><a> without background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<p>Doesnt work under IE? Add background | This is not quirks mode #</p>
<hr />
<div>
<a class="link withbackground" href="#"><a> with background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<div> <a class="link nobackground" href="#"><a> without background, without img</a> </div>
<script type="text/javascript">
function a() {
document.body.innerHTML+='<style>#t a {background: pink;}</style>';return false;
}
function quirks() {
alert(document.compatMode); return false;
}
</script>
</body>
</html>
This is one seriously wacky bug. Now, if you really must organize your html the way you have, then IE needs to have the following placed inside the a tag to get it to register with the image.
<div style="position: absolute; filter: alpha(opacity=0); background: red; top: 0px; left: 0px"></div>
But this would be better (have not tested completely across browsers). Organize the html like (no need for a wrapper div):
<a><img /></a>
Make sure the a is not position: absolute (IE7 didn't work with it so), and then set the image to:
img {position: absolute; z-index: -1}
I hope these head you in a direction to solving your problem.
Scott, thank you for your answer. This is just example of the problem.
Of course my real code is bigger than that:
- 2 tags to navigate prev/next (so I cant put <a><img></a>)
- both 's has but with display: none (<a><span>prev</span></a>). display: block doesnt help
z-index doesnt help. position: absolute works, when <a> has background.
I cant have filter: alpha(opacity=0) or opacity=0 because not every browser supports that.
I found odd solution that solves the problem, but dont want to use it: a {background: url(filedoesnotexists);} or i can use for example transparent 1x1 gif file but i would like to find reason of my problem.
Solution with img{position: absolute; z-index: -1;} div{position: relative;} a{position: static;} works exactly the same - no hovering without background above img for ie & opera
I also met another odd thing with that in my main code - will try to reproduce it. (EDIT below)
This is another strange problem - IE works, but only when it has another "layer" and mouse is hovering above this layer. Opera works fine in every case:
http://bckp.eu/test2.html - click Exif info and move mouse over image/new "layer"