I am working on this site: http://waterwing.waterwing.ca/
The top right corner animation is perfect except for that it creates a horizontal scrollbar with the way it s positioned.
It s absolutely positioned -120px top and right. I m just wondering how I can make it so it won t extend the body and will just hide itself once it hits the edge of the page so that there is no scrollbar.
The scrollbar seems to not be there on Windows Firefox but is there on Mac Firefox and Safari.
Thanks, Wade
wrap #corner in another div and set it to the dimension occupied by the end point of the animation as well as position absolute. set the overflow on this div to hidden that will keep it from bleeding off the page and triggering the scroll.
You can also just put overflow: hidden on the body, works the same way and saves you a div
Depending on your situation, but you can get scrollbars for a div, or for the whole page. When building a responsive website layout, I always write this CSS:
body {
overflow-x: hidden;
}
And this prevents scrollbars appearing, cross-browser and cross-device.
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.
selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...
How do you target specifically safari in css with styles?
Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...