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
Related
CSS:
.layers {
position: relative;
height: 500px;
width: 500px;
/* Some -webkit and -moz transformations */
}
.layers > div {
position: absolute;
height: 500px;
width: 500px;
}
.item {
position: absolute;
width: 5px;
height: 5px;
}
HTML:
<article class="someclass">
<section class="layers">
<div style="/* -webkit and -moz transformations */">
<img src='image.png'>
<div class="item" style="/* -webkit and -moz transformations */">test</div>
</div>
</section>
</article>
When loading this page, I get image.png with test on top of it 90% of the time.
(exact position depends on the transformations)
The other 10% of the times I try loading the page, the item div is loaded as if the position is static which causes it not to be on top the the image.
My best guess is that it has something to do with what what gets loaded first, so there might not be an exact answer, but maybe there is something else I'm forgetting here.
Note: I tried this on Chrome and Safari, both the same results.
The inconsistent behaviour is due to two things: one, you've not set the actual position (e.g. top/left) for the .items, and two, your image has no dimensions specified, so its size won't be known by the browser until it's loaded.
Because you haven't specified a position, but have specified absolute positioning, the .item elements are defaulting to the values they would have if they were statically positioned. That is, they'll be directly below the image.
I believe that when you're seeing the .items below the image, that's because the image is in your cache, so the browser knows how big it is on its initial layout run, and sets the static position of the .items below the image.
When you're seeing the .items on top of the image, that's because the browser hasn't worked out how big the image is on its initial layout run (i.e. it's still loading) so it positions the .items as though the image has zero height. Usually, once the image was loaded, the layout would be recalculated, and the .items would move down, but because you've specified their positioning as absolute, I believe the browser is assuming it doesn't need to reposition them, as the image size shouldn't affect their positioning, because they've been taken out of the normal layout flow.
Anyway. Specify an actual position for your absolutely-positioned elements, and everything should start working.
In the following HTML, the text input and the buttons are supposed to be positioned 380px from the top but it's further down the page. I noticed if I remove the image it's positioned in the right place or closer to it, I haven't pulled out a ruler yet. Why is this happening and how do I fix it?
<div style="position:relative;width:800px;height:792px;font-family:Arial;font-size:12px;margin:0 auto;left:8px;top:14px;background-color:#FFFFFF;">
<img name="Image712" src="https://www.google.com/images/srpr/logo4w.png" style="position:relative;display:block;margin:0 auto;top:217px;width:269px;height:95px;" />
<div name="HGroup714" style="position:relative;display:block;margin:0 auto;top:380px;width:220px;height:23px;">
<div style="display:inline-block;padding-right:2px">
<input name="Button715" type="button" style="position:relative;vertical-align:middle;width:101px;height:21px;font-family:Arial;font-size:12px;" class="buttonSkin" value="Google Search" />
</div>
<div style="display:inline-block;">
<input name="Button718" type="button" style="position:relative;vertical-align:middle;width:113px;height:21px;font-family:Arial;font-size:12px;" class="buttonSkin" value="I'm Feeling Lucky" />
</div>
</div>
<input name="TextInput721" type="input" style="position:relative;display:block;margin:0 auto;top:330px;width:50%;height:22px;font-family:Arial;font-size:12px;padding:0;border:1px solid #696969;" />
</div>
<style>
*,
*: before, *: after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<style>
*,
*: before, *: after {
outline: 1px dotted red;
}
</style>
UPDATE: I know it's inline CSS. Please ignore that for now.
Link to live example (thanks Mr Alien).
Instead of using position relative, which places you relative towards the location where you should be rendered, you want to use position absolute. Absolute is rendered in relation to it's parent, which is what you're actually looking for.
Position fixed does the same thing as absolute, except the 'parent' is the browser window.
I think this is what you're looking for: http://jsfiddle.net/fr6AY/1/
position:absolute;
margin:0 auto;
left: 0;
right: 0;
The problem is that as the image is a relative positioned element, the 'top' css tag applied to the 'HGroup714; element is from the bottom of this image, therefore the height of the image moves it down the page. If you wanted this to not affect the positioning of the lower elements you could simply remove the 95px height of the image from the 'top' tag on the Hgroup element.
Any relative positioning will cause your elements to be positioned relative to each other, so you much take them out of the page flow by using position:absolute, and removing any relative positioning from parent elements.
Suggestions to use position:fixed; would only work if the page were never to be scrolled - fixed positioning fixes it within the browser window, and scrolling keeps it at that same positioning, whereas absolute is not reliant on the position of other elements, but maintains it's place in the page.
If you want it 380px from the top of the window (not the page), you are looking for position: fixed.
If you want it 380px from the top of the page, try using position: absolute in the HGroup714 element.
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
<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.