I have a little problem with my site, I have a bar and on it a box that float above the bar, everything works fine in IE, Firefox, Opera, but in Chrome and Safari the box that must be above the bar float by the bar side no above it.
#barraDerecha
{
width:240px;
background-color:#e5e5e5;
border-left:solid 2px #CCC;
border-bottom:solid 2px #CCC;
position:absolute;
margin-top:-10px;
margin-left:717px;
height:auto;
}
#barraDerecha #menu
{
display:block;
position:fixed;
width:220px;
}
barraDerecha is the container and menu is the box that goes above the container
Can somebody help me please?
Thanks in advance
Just in case someone is getting the same chrome behaviour.
It looks like chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.
I guess .asp is injecting your barraDerecha after document load, so it positions relative to its container.
Thanks for u answer Thor you can see the example in www.autos.ultimahora.com/altaanuncio.html
I can't put fixed to #barraderecha cause in that way my bar move with the menu
Here is who I use the class:
<div id="barraDerecha" >
<div id="barraRight" runat="server">
<div style="padding:10px;" id="menu" >
<div class="titulosAzules15">
<center>
<asp:Label ID="lblUsted" runat="server" Text="USTED ELIGÍO EL PLAN"></asp:Label>
<br />
<br />
<asp:Image ID="imgPlan" runat="server" />
<br />
<asp:Label ID="lblPrecio" CssClass="DestaquesBordo14" runat="server"></asp:Label>
<br />
</center>
</div>
</div>
</div>
</div>
You have to select a plan and then push on Siguiente button
Pardon me, but isn't #menu within #barraDerecha?
If so, it would only be natural that it would be fixed within #barraDerecha unless you specify the position furthermore.
#barraDecha {
position:fixed; top:0; left:0; }
A better description (perhaps a visual) would help i terms of describing the problem more accurately.
Related
I have a textbox I want at the very bottom of the screen at all times. Using the following markup and css, I was able to get it close but there's a weird gap under it and it sits on top of other content.
Markup:
<div class="content">
... stuff here
</div>
<div class="message-text">
<input type="text" placeholder="Start typing to share a message">
</div>
CSS:
.message-text {
position:fixed;
bottom:0px;
width:100%;
}
And here's a visual:
Any help would be awesome.
Just add this property, it'll work.
.message-text {
margin:0px;
}
Although almost nobody supports IE6 anymore, I've been given the task to design an IE6-compatible webpage.
Here's the code:
<body style="background-color: #ccccdd;">
<form id="form1" runat="server"
style="margin: 0px 80px 0px 80px;
background-color: #f1f1f1;">
<div id="divPage" style="width: 100%">
<div id="divSelectOption" runat="server">
<div id="divInstruct" style="float: left;
position: relative;
display: inline-block;">
Select your gender:
</div>
<div style="margin-left: 10px;
display: inline-block;">
<asp:RadioButton ID="rbFemale" runat="server" style="display: block;"
Text="Female" GroupName="grpGender" Checked="true" />
<asp:RadioButton ID="rbMale" runat="server" style="display: block;"
Text="Male" GroupName="grpGender" />
</div>
</div>
</div>
</form>
</body>
Here's the problem:
If an IE6 browser opens the page (whether maximized or restored (meaning when the window only covers part of the screen)), all is displayed normally.
However, if the page is loaded when the browser is maximized, and then the user minimizes it, divInstruct gets pushed all the way to the right side of the window.
I apologize in advance if you feel that supporting IE6 is a waste of time, but these are the clients' demands.
I'd appreciate any help.
UPDATE: When I remove width: 100% from divPage's style attribute, the above problem is gone; however, this causes the margin attribute of form1 to stop working. (Only in IE6!)
I'd suggest checking your external css files carefully, if an invalid selector is passed into IE6, it ignores everything after it.
Also, ensure you're applying a css reset so you're starting from the same css state in each browser.
This doesn't feel like a typical IE6 problem to me. It feels like a coding problem that IE6 isn't able to resolve with the grace of its younger browser cousins.
I want that the unregistered users on my website, see the entire website's pages with a blur effect.
How can I create this blur effect with css ?
Try this...
body {
filter:blur(3px);
}
You'll need to add -moz-, -webkit- prefixes (or use something like PrefixFree)
Here's some results, if by blur you mean fuzziness:
This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:
http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur
If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:
http://jsfiddle.net/9qnsz/2/
This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:
Gaussian Blur onHover Using jQuery
EDIT: As requested, the contents of the jsfiddle:
<div class="container">
<div class="overlay">
<p>Please register etc etc...</p>
</div>
<form action="javascript:;" class="form0">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form1">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form2">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form3">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form4">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
</div>
.container {
width:500px;
height:500px;
position:relative;
border:1px solid #CCC;
}
form {
position:absolute;
left:10px;
top:10px;
}
form.form0 {
left:11px;
top:11px;
opacity:0.1;
}
form.form1 {
left:8px;
top:8px;
opacity:0.1;
zoom:1.02;
}
form.form2 {
left:11px;
top:11px;
opacity:0.1;
zoom:1.01;
}
form.form3 {
left:9px;
top:9px;
opacity:0.2;
}
form.form4 {
left:11px;
top:11px;
opacity:0.1;
}
.overlay {
width:250px;
height:250px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
border:1px solid #666;
}
Edit (2015): The filter css property is forming tantalisingly complete coverage. This lets you write rules like body { filter: blur(10px); }, which blurs the entire page.
From what I can tell, there's no cross-browser way of blurring an element, even in this "modern age" of html5, css3, etc...
There is a blur filter for IE (and only IE). An svg blur filter can also be applied to an html element but from what I can tell, it only works in Firefox.
If you're happy for browser-specific hacks, go ahead, but if you need the effect to work on all browsers you're outta luck.
If you just want to blur text, you can use a clever text-shadow trick:
.blurry {
color: transparent;
text-shadow: 0 0 3px black; /* set to colour you want */
}
There are also ways to blur images, either by overlaying transparent, shifted copies of the image, or by processing the data with javascript.
Perhaps you can cobble together these techniques, and it will achieve what you want.
But the broad answer, regrettably, for the moment is: there is no easy, holistic way to blur stuff in HTML.
(I thought we were living in the future, man? What gives?!)
Addendum: Hope is in sight. At the time of writing, some webkit nightly ("bleeding edge") builds are implementing some of the new css filter specification. That demo doesn't work on any webkit browser I have installed, so it's still far from mainstream yet.
You can add a fixed div set to 100% width and height to your body. That will fill the screen and you can put either a semi-transparent background on it or use CSS3 to create the effect you are looking for.
Create a new div tag with id="body_bag" and put your rest of the site edits within that div and use following css to give the blur effect.
#body_bag {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}
I'm trying to simulate a shadow on a div I have by creating a div called headerShadow and setting it's background color to Black.
It's not showing though, here's the code:
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
color:Black;
height:10px;
}
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
You do not want the color attribute to be black. To achieve the effect that you want, set the background-color to be black.
background-color:Black;
You're going to want to fix the positioning to appear like a shadow, but I'll leave that up to you.
I believe adding a min-height to your div will fix this problem.
Other fixes:
Ensure your div has content, add a for example
If your div is floated, make sure it has width and height defined
Make sure the top and left values are not the same as the div above it
Check your z-indexes
Here is the code sample
<div class="Layouts">
<asp:ContentPlaceHolder ID="Center" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server" />
<p> </p>
</div>
The CSS that styles the Layouts div is
.Layouts
{
background-color: White;
margin-top: 17px;
padding-top: 18px;
}
Nothing to crazy there!
The problem I am having is that without the "<p> </p>" the white background does not fill down behind whatever I put in the two ContentPlaceHolders (and no they don't have an over riding background!)
With the <p> </p> it all works as I wish... but not as I expect!
Am I doing something wrong or is it a browser or a Sharepoint issue? Is there a better fix than the space?
Is the ContentPlaceHolder's floated?
If so, try adding: overflow:hidden; to the .Layouts selector.