Consider the following code:
<div>
<input type='text' />
</div>
...
div {
width:300px;
background:#DDD;
position:relative;
height:100px;
}
input {
position:absolute;
left:20px;
right:20px;
top:10px;
bottom:10px;
display:block;
}
A couple of months ago, this would have produced something like this fairly reliably:
Now, the width looks a mess in the latest versions of Chrome & IE: http://jsfiddle.net/eY5uj/1/
However, this method still works fine cross-browser for many other elements like <p> for example:
http://jsfiddle.net/eY5uj/2/
2 questions:
What is going on here?
Is there any workaround (short of removing position:absolute and setting padding on the parent div?)
Related
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I use this code to center absolutely positioned div
.class{
width: 10px;
height:10px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto
}
This is not working in IE 10 and lower versions, but I dont want to change this code as it's comfortable for all other browsers and devices.
I know that Conditional comments are not working in IE 10 too, so how can I solve this issue there?
You have besides those options mentioned above:
Calculated Padding + Width:
.container {
padding:5%;
}
.container .center{
width:90%;
height:90%;
display:block;
}
Or if you only need it to be horizontally centered:
.centered {
width:80%;
margin:0 auto;
}
But if you still aren't getting any results to work, then you may have malformed HTML. When internet explorer finds bad HTML or a meta tag expressing a specific version to emulate, it will and then newer features don't work. I recreated your style on JSFIDDLE and it worked for me even on internet explorer 8 (Although 7 did fail). Otherwise you may not be putting a position value on the CSS of the parent element if it is apearing out of place.
You should detect by JavaScript if the browser is IE10. If it is you can add a special class in the page body or in any html element you want.
JS
if (navigator.userAgent.indexOf("MSIE 10") > -1) {
document.body.classList.add("ie10");
}
CSS
.ie10 {
...
}
Ok, so this is a problem that has been nagging me for a while and I've seen a few good and bad solutions to it. But what is the best solution, and what is the pitfalls, drawbacks and big "No, Nos".
What I want is to create dynamic, flexible DIV-blocks with a custom graphical border. For example a DIV-box with shadows, but not necessarily shadows.
UPDATED:
As, #Jeroen stated bellow in a comment, I am not only asking for "the best way to make shadows". Any crazy custom graphical border.
I know there are some solutions with CSS3 (box-shadow, border-image and border-radius), but it is not 100% cross-browser, specially not if you have to work with one or two versions old browsers.
Example image of what i want to achieve:
or
The example above is actually done with one method I use frequently. It does the job and it does meet all the requirements.
It adapts to different sized DIV-blocks.
It uses custom graphics.
It works cross-browser and versions.
It is pretty easy and fast to apply.
It is JavaScript free, 100% CSS/HTML.
...but of course there are a few cons:
It requires 8 images.
It requires 8 extra DIV-blocks with no real content.
Not very pretty in the source.
HTML DIV-block example:
<div class="flowBox">
<h1>Header 1</h1>
Vivamus tincidun...
<div class="border_t"></div>
<div class="border_b"></div>
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_br"></div>
<div class="border_bl"></div>
<div class="border_tr"></div>
<div class="border_tl"></div>
</div>
CSS example:
<style type="text/css">
<!--
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
position:relative;
}
.border_t {
background:url(border_t.png) repeat-x;
position:absolute;
top:-2px; left:0;
width:100%;
height:2px;
}
.border_b {
background:url(border_b.png) repeat-x;
position:absolute;
bottom:-6px; left:0;
width:100%;
height:6px;
}
.border_l {
background:url(border_l.png) repeat-y;
position:absolute;
top:0; left:-3px;
width:3px;
height:100%;
}
.border_r {
background:url(border_r.png) repeat-y;
position:absolute;
top:0; right:-6px;
width:6px;
height:100%;
}
.border_br {
background:url(border_br.png);
position:absolute;
bottom:-6px; right:-6px;
width:6px;
height:6px;
}
.border_bl {
background:url(border_bl.png);
position:absolute;
bottom:-6px; left:-3px;
width:3px;
height:6px;
}
.border_tr {
background:url(border_tr.png);
position:absolute;
top:-2px; right:-5px;
width:5px;
height:2px;
}
.border_tl {
background:url(border_tl.png);
position:absolute;
top:-2px; left:-2px;
width:2px;
height:2px;
}
-->
</style>
As you can see, it perhaps isn't an optimal solution.
But is there a better way?
UPDATED: There is support for shadows in most browsers and versions, even if it is not one standard. Source using css-shadow: http://pastebin.com/LZHUQRW9
But my question relates not only to shadows.
Full source code: http://pastebin.com/wxFS2PHr
Have a look at http://css3pie.com
This will allow you to use CSS 3 elements in older browsers and should hopefully help to keep your markup cleaner.
You could also include some additional logic which will use CSS 3 for browsers that support it, and revert back to the CSS Pie functionality for other browsers.
You could try something like this: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
I think there are many more libraries - JavaScript, .htc things, whatever... - to achieve the same.
Edit: I think you won't get around using 8 different pictures. But you could write a javascript that adds the required DIVs on the fly e.g. for each DIV with class border.
That would clean up your HTML markup - but the DOM remains complex..
Perhaps this article on css-tricks using border-image is what you're looking for? The interactive demo it links to seems to do what you ask for.
Of course this solution is only available in browsers that support css3 border-image. The demo above did work for me in FF and Chrome, but not in IE9. According to the Modernizr documentation it can be used to add support for border-image, but I haven't tried that for myself. Should that work then this would give you a relatively clean solution.
I have created a stack of div tags and used z-indexes to make them appear behind each other.
They overlap enough for them all to be visible and mouse-overable. I then assigned a :hover to change the z-index and make the div tag which is being hovered over come to the top of the pile.
An example of what I have would be...
CSS
#red-box {
position:fixed;
width:170px;
height:210px;
margin-left:70px;
top:40px;
background-color:red;
z-index:3;
}
#red-box:hover {
z-index:5;
}
#blue-box{
position:fixed;
width:170px;
height:210px;
margin-left:150px;
top:70px;
background-color:blue;
z-index:2;
}
#blue-box:hover{
z-index:5;
}
HTML
<a id="red-box"></a>
<a id="blue-box"></a>
I have also created a jsFiddle to help highlight what's going on.
This works great in the latest versions of all the browsers but the div tags' z-indexes do not change in IE8.
Could anyone help me fix it?
This ought to fix it:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Basically, just set it to a ridiculously high number.
Edit: I just tested this in my version of IE on your JSFiddle, and it worked.
I'm trying to create a dynamic tag with absolute positioning. In my trial runs I was able to set the left:right:top:bottom: properties to have the div dynamically conform to it's parent element's size. I'm now trying to do the same inside of a browser control in C# but am not seeing the absolution positioning being respected?
<span style='padding:3px 0px; border:1px solid red; background-color:orange; margin:0 10px; display:inline-block; position:relative;'>
<div style='position:absolute; top:10px; bottom:10px; left:-10px; right:-10px; background-color:red; display:block; border:1px solid green;'></div>"
</span>
Any ideas?
Are you seeing the other style attributes being rendered?
Might be worth checking that you have all the correct Mark up on the page. Have you got the correct doc type declarations transitional/strict etc etc etc?