As you can see in the attached images, the positioning of the quote icon on the top left and the text Friend on the bottom right is not the same. How does one overcome this discrepancy in the rendering of these elements? Is there something wrong with the HTML structure? The site can be viewed here.
In the images above, the Firefox rendering (the first image) matches the provided design.
The quote icon is positioned absolutely using a top value of 35px and the Friend text is positioned absolutely with a bottom value of -5px. The element containing the blue background has position: relative.
Related
I recently created a webpage for a company at http://www.parkprivatewealth.com/park and everything looked fine on Chrome. However, when using Safari to view the page, the homepage heading gets cut off when using fixed position. The text is there when I try to scroll up more and seems like something is blocking the text.
When I take off the "position: fixed" tag in the CSS the words appear again, would anyone possibly know how to solve the problem?
The problem: When the header changes to a fixed position, it gets pulled out of the document flow and the .container element pushes upward. Since you didn't use top, left, etc., the h1 element moves upward with .container
The solution: Add padding-top to the .container element. It should be the same as the header height.
This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
I'm seeing a weird bug in Chrome (but not Firefox) with a web app with an instant messaging-style view. The input box is absolutely positioned at the bottom of the page and has height X while the scrolling pane of messages is absolutely positioned with bottom: X such that the bottom of the pane lines up with the input box.
Inside the message pane there are many messages. Each of these have an absolutely positioned child. When the contents of one of these inner children changes (say, with jQuery's .html()) the bottom margin of the bottom message becomes ignored.
Here's a minimal jsfiddle example. It scrolls the message pane to the bottom for you. Click the button, and you'll see that the margin on the bottom message box is no longer respected when determining how to size the message pane (#a).
My workaround is to remove the absolutely positioned children. In the jsfiddle, you can change the position: absolute to float: left on #inner and see that the bug no longer manifests. I'm curious why this problem is happening, though.
The issue has been fixed in the latest version, please use.
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).