I'm trying to stretch a button across a variable width space so that the ends are anchored to its container edges using the left and right properties like this:
<button style="position: absolute; left: 0px; right: 0px;">Test</button>
This works as expected in Chrome, IE, and Safari. The button stretches across the width of the browser window. However, in FireFox/SeaMonkey and Opera, the right property is ignored and the button is just wide enough to hold the caption. Why is that?
It looks like the only way around it is to absolute position a div with a button inside it, set to 100% width. Like so:
<body>
<div style="width: 600px; height: 600px; position: relative;">
<div style="position: absolute; left: 0px; right: 0px;">
<button style="width:100%;">Test</button>
</div>
</div>
</body>
Here is a live working example to play with http://jsbin.com/aweleq/2/edit
It's a known bug https://bugzilla.mozilla.org/show_bug.cgi?id=471763
Why not define your left and right space in the parent Element of your button and set the Button itself to 100% width. Isn't that stupid i think.
<div>
<button>Test</button>
<div>
div {
padding-left: 40px;
padding-right: 60px;
}
button {
width: 100%;
}
You can also set them to position relative/absolute if you want to.
The basic issue here is whether <button> is a replaced element. The rules for replaced elements and non-replaced elements are different; compare http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width
It looks like Firefox and Opera treat <button> as a replaced element here while your version of IE and WebKit do not. Unfortunately, nothing actually defines whether this element is a replaced element.
But note that WebKit generally gets this part of the spec wrong, even for things that are definitely replaced elements. See https://bugs.webkit.org/show_bug.cgi?id=81863
Related
I have an image/link that I'm trying to absolutely position with the following:
HTML:
<div id="content">
<img id="calendar" src="/bundles/majorproductionsadisite/images/calendar.jpg" alt="calendar" />
<div class="blogEntry">
<h2>Blog title</h2>
<div>Blog text</div>
</div>
</div>
CSS:
#calendar {
position: absolute;
top: 210px;
left: 420px;
z-index: 9000;
}
In Chrome, this puts the calendar image flush to the left of the blog:
In contrast, in Firefox and IE, the calendar is positioned much further to the left:
Any suggestions on how I can get either Chrome to fall in line with the other two, or vice versa?
You need a common reference point on the page for the absolutely positioned element. Otherwise, the element is positioned relative to the browser window, so the position can change depending on the browser size, etc. Try positioning the content div relatively.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Did you try using a CSS reset to zero out all of your margins and paddings? Resets are meant to prevent cross-browser differences as much as possible.
Why Use CSS Resets
Reading this question you're probably thinking 'not again' and want to mark it as duplicate. But after I've tried about every fix I could find up here and in other parts of the internet I couldn't think of another way to get a solution than asking here.
The problem is: I have a container, which should be completely clickable. The problem in this particular website is, that we can not control what elements will be inside of the container. Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container. We also want to the site to work in a no-js environment, so an onclick on the container is a no-go unfortunately.
That's why we choose an absolutely positioned <a> which will be an overlay for the entire container. This works well in every browser, except for IE.
In IE all content of the container is painted above the <a>, thus making it a non-clickable area. This isn't really much of a problem with the example here: just a small piece of text. But in other container we have images, tables etc. which completely fill the size of the container.
Even if I'd change the z-index of the <p> to 0 and the z-index of the <a> to 1, the paragraph is still on top of the link. How is this possible? I've read all about stacking contexts and levels, and I still can't find a single thing wrong in my code.
Note: there's a display: hidden; <span> in the <a>, but that's for internal use and I don't think it will affect this issue.
Note: the div.content__container has a parent from which it can get the 100% dimensions.
HTML:
<div class="content__container">
<p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
<span>text</span>
</div>
CSS:
.content__container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.content__container > *{
position: relative;
}
.__align-to-bottom {
position: absolute !important;
bottom: 0;
left: 0;
}
.__align-to-bottom.__right {
left: auto;
right: 0;
}
a.__link {
position: absolute !important;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
a.__link span{
display: none;
}
As said this works fine in every browser out there except for IE. I'm currently testing in 9 & 10 and I'm guessing IE<9 isn't going to be a walk in park either.
EDIT
As suggested I've created a fiddle. In this fiddle I've already implemented some remarks. Such as the display: block; line for a.__link and removing the content__container > *{} from my css. I've added some JS to clarify which element is being clicked on. In IE it's still not working: the onclick event from the paragraph is being triggered.
I came across an issue like this once where I had a blank link positioned absolutely over the top of some content I wanted to be clickable - I tried everything to get it to work and finally found a really dirty hack:
Make a transparent gif or png (has to be at least 50x50) and then use it as the background of the anchor. It should then be clickable, if it is the highest z-index
I take it your link is a block element and actually covers the 100% height and width too
Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container.
Why not? Are block-level elements allowed inside inline-level elements in HTML5?
ps. Your fiddle code works in IE8.
<div id="main-solutions">
<div id="main-solutions-top-left"></div>
<div id="main-solutions-top-right"></div>
<div id="main-solutions-body">
blah blah blah
</div>
</div>
css
#main-solutions {
}
#main-solutions-top-left {
position: absolute;
top: 0px;
left: 0px;
background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
width: 434px;
height: 15px;
}
#main-solutions-top-right {
position: absolute;
top: 0;
right: 0;
background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
width: 434px;
height: 15px;
}
#main-solutions-body {
background: url('../images/Gray-Gradient.jpg') repeat-x;
}
I'm expecting to see that main-solutions has two absolutely positioned divs at the top left and right with my rounded corner image, and then followed by the body with the gradient, but when I use HTML element browsers, the top-left and top-right div are not appearing at all, very confused, why are those divs being disregarded?
UPDATE (for others confused by answer):
At the root of my issue is I didn't understand that both absolute and relative define a new coordinate system for their contents, in addition to specifying the posision of the element itself. Found a good explanation here:
http://www.w3.org/TR/WD-positioning-970131#Positioned
from section 2.2
Like 'absolute' positioned elements,
'relative'ly positioned define a new
coordinate system for child elements,
with the origin located in the
position where the first child element
is rendered
Far as i'm seeing, the corners should be appearing at the top left and right of the page, since your container div doesn't have a CSS position property. Absolute-positioned elements' positions are relative to the innermost parent that has a position other than static (the default).
Try adding position: relative to the container div's CSS. It works much like the default, but (1) if you want, you can shift the div's position by some amount (which isn't extremely useful here, but still), and (2) since the position's not static anymore, absolute-positioned stuff inside the div should position itself relative to the container, rather than to the body/page.
Also, some browsers won't even display a div that has no content -- so the background for said div might not show. You'll probably want to have something in the divs. Even a single will work.
Have you considered using CSS border-radius to achieve this rather than messing around with images?
border-radius is supported by all browsers except IE, but even IE can be made to work with it with the use of a clever little thing called CSS3Pie.
(plus as a bonus, CSS3Pie also gives IE CSS gradient backgrounds, so you could kill two birds with one stone)
I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent.
<!-- ... -->
<style type="text/css">
div.parent {
display: block;
position: relative;
width: 100px;
height: 100px;
border-radius: 10px;
background: #0000ff;
overflow: hidden;
}
div.inner {
display: block;
position: relative;
width: 100%;
height: 100%;
background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
<div class="inner"></div>
</div>
<!-- ... -->
I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":
How do I prevent an image from overflowing a rounded corner box with CSS3?
However, upon digging up the working draft for CSS3 backgrounds and borders...
http://www.w3.org/TR/css3-background/#corner-clipping
...I couldn't help but notice the following description under the "corner clipping" section:
Other effects that clip to the border
or padding edge (such as ‘overflow’
other than ‘visible’) also must clip
to the curve. The content of replaced
elements is always trimmed to the
content edge curve
So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?
If you remove position: relative; on both elements the outer element clip the child around the rounded corners. Not sure why, and if it is a bug.
It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.
I came here looking for an answer because I had a similar problem in Chrome 18.
I was trying to have a rounded box with two elements inside of it - title and index number - with index number positioned absolutely at the bottom left corner of the box.
What I noticed was if I had the HTML like this, the title element would bleed outside the rounded corners (border-radius) even though overflow was set to hidden on the parent element:
<a>
<div style="overflow:hidden; border-radius:15px; position:relative;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
But if I moved the relative positioning up one parent element everything looked good:
<a style="position:relative;">
<div style="overflow:hidden; border-radius:15px;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
Just wanted to chime in on this one since I found this with a similar problem.
In a div with its overflow set to scroll, the border-radius didn't clip the content while scrolling unless the content was scrolled to the absolute top or bottom. Even then, the clipping only sometimes reappeared if I scrolled the document to the absolute top or bottom as well.
On a lark I added a transparent border to the element and that seemed to enforce the clipping on the corners. Since I already had some space around the element, I just cut that in half and applied the remainder to the border thickness. Not ideal, but I ended up with the result I wanted.
Tested in Chrome, Safari and Firefox on Mac.
My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
The center pane:
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
div#middlenav {
position: absolute;
left: 250px;
right: 350px;
top: 0px;
bottom: 0px;
}
div#courselist {
overflow: auto;
position: absolute;
top: 55px;
bottom: 0px;
width: 100%;
}
It looks like the center pane isn't obeying the bottom: 0px; statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% } but that didn't fix it either.
"The top property overrides the bottom property..."
https://developer.mozilla.org/en-US/docs/CSS/bottom
Change top to auto instead of 0px:
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenav is positioned absolutely, it will be relative to whichever parent element has position:absolute; or position:relative;. If #middlenav has no parent elements that are positioned, it will be relative to <body>.
I'm not sure why you have #courselist absolutely positioned; since it is inside of #middlenav I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselist or #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!
While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
Faking columns that extend to the bottom of an element is usually achieved using faux columns.
position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D
Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
Add this to top of your page:
<!DOCTYPE html>
I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
overflow:scroll; overflow-x:hidden; width:500px; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.
Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.