I have two problems. The first thing is that when I hover over one thing (https://prnt.sc/s9etq3 (the mouse isnt visible because of the screenshot but it is on the object)) I only get an outline and not the full background. The second thing is that I'm too stupid to scale the search box right. I want that it's 10% away from the sides (left and right). The code for the hovering is inside div.gallery:hover
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
background: #222;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.search_box{
position: relative;
left: 0%;
}
.search_box input[type="text"]{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
div.gallery {
margin: 5px;
border: 1px solid #222;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #404040;
background: #404040;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.container
{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div
{
margin: 10px;
}
.container div label
{
cursor: pointer;
}
.container div label input[type="checkbox"]
{
display: none;
}
.container div label span
{
position: relative;
display: inline-block;
background: #424242;
padding: 15px 30px;
color: #555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 20px;
font-size: 20px;
transition: 0.5s;
user-select: none;
overflow: hidden;
}
.container div label span:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.container div label input[type="checkbox"]:checked ~ span
{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="search_box">
<input type="text" name="box" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
</head>
<body>
<div id="result"></div>
<div style="clear:both"></div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
´´´
Related
Basically I am trying out CSS trying to create a chat box for some reason when I float:right the chat message it goes out of the chat box but I when I float:left it works fine as it should be here is the JS Fiddle which shows the problem!
https://jsfiddle.net/g8ax21aa/
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
Thank you for your time and help.
.msg {
word-break: break-all;
}
seems to be the way to go. MDN.
PS. It turns out that break-word is an unofficial value for word-break property and it should be break-all. From caniuse:
Partial support (CSS3 word-break property) refers to supporting the break-all value, but not the keep-all value. Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.
So, you are better off using word-break: break-all;
See my code below. I added word-break: break-word;
and it works fine.
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
word-break: break-word;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
you must use
.msg {
width:256px; // add this
word-wrap:break-word;// add this
...//your code
}
Demo in jsfiddle
The problem is that in real life there are no words with that size of characters
try this:
width: 100%;
text-overflow: ellipsis;
How change text when I push cursor in button? If I push cursor in button with price, will show text: "Add to basket".
This is Code:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="price">$50</div>
<div class="info">Add to basket</div>
How solve this problem?
You can use a wrapper div to catch the over, I think is more maintainable if you change the html in the future:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
width: 20%;
margin: 20px auto;
cursor: pointer;
}
.wrapper:hover .info {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="wrapper">
<div class="price">$50</div>
<div class="info">Add to basket</div>
</div>
you can use :active to show text when mouse is clicking down on the price like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:active + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
if you are trying to show the text on :hover like the title of the question says the unser :hover like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:hover + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
Update 3:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info,
.price:hover .amount {
display: none;
}
.price:hover .info {
display: block;
}
<div class="price">
<div class="amount">$50</div>
<div class="info">Add to basket</div>
</div>
I have a input text and below this input text I want to have a div with a green color that has some text. But I want that this green area to occupy the same with of the input element, but it is not working. Do you know what is not correct?
.main-search {
width: 100%;
position: relative;
background-color: yellow;
}
.search {
margin: 20px auto;
width: 100%;
font-size: 0.85em;
float: left;
background-color: white;
padding: 50px;
border-radius: 4px;
}
.search_auto_complete {
background-color: green;
text-align: left;
color: gray;
font-size: 1.1em;
border: 1px solid black;
z-index: 10;
position: fixed;
width: inherit;
padding: 0 !important;
}
.search_auto_complete li {
padding: 10px;
background-color: $color-white;
border-bottom: 1px solid $color-gray;
}
.auto_complete_category {
background-color: $color-light-plus !important;
color: $color-gray-plus-plus;
font-weight: bold;
}
.auto_complete_category:hover {
background-color: $color-light-plus !important;
cursor: auto !important;
color: $color-gray-plus-plus !important;
}
.events_auto_complete li:hover {
background-color: $color-primary;
cursor: pointer;
color: $color-white;
}
.search_events_box button {
border-left: none;
color: #fff;
font-weight: 700;
padding: 17px;
}
.input_search_event {
position: relative;
border: 1px solid red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0;
}
input {
padding-left: 40px !important;
}
input {
padding: 15px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.div {
width: 60%;
margin: 0 auto;
padding: 20px 0;
}
<section class="content main-search">
<div class="div">
<h1>Title</h1>
<div class="search">
<div class="input_search">
<input id="auto" value="category" type="text">
<ul class="search_auto_complete">
<li class="auto_complete_category">Categories</li>
<li>Category 1</li>
</ul>
</div>
</div>
</div>
</section>
Example: https://jsfiddle.net/k9uL4zon/
Add position: relative to your container .input_search and replace position: fixed with position: absolute and width: inherit with width: 100% for your element .search_auto_complete. Demo:
.input_search {
position: relative; /* new */
}
.main-search {
width: 100%;
position: relative;
background-color: yellow;
}
.search {
margin: 20px auto;
width: 100%;
font-size: 0.85em;
float: left;
background-color: white;
padding: 50px;
border-radius: 4px;
}
.search_auto_complete {
background-color: green;
text-align: left;
color: gray;
font-size: 1.1em;
border: 1px solid black;
z-index: 10;
position: absolute;
width: 100%;
padding: 0 !important;
}
.search_auto_complete li {
padding: 10px;
background-color: $color-white;
border-bottom: 1px solid $color-gray;
}
.auto_complete_category {
background-color: $color-light-plus !important;
color: $color-gray-plus-plus;
font-weight: bold;
}
.auto_complete_category:hover {
background-color: $color-light-plus !important;
cursor: auto !important;
color: $color-gray-plus-plus !important;
}
.events_auto_complete li:hover {
background-color: $color-primary;
cursor: pointer;
color: $color-white;
}
.search_events_box button {
border-left: none;
color: #fff;
font-weight: 700;
padding: 17px;
}
.input_search_event {
position: relative;
border: 1px solid red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0;
}
input {
padding-left: 40px !important;
}
input {
padding: 15px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.div {
width: 60%;
margin: 0 auto;
padding: 20px 0;
}
<section class="content main-search">
<div class="div">
<h1>Title</h1>
<div class="search">
<div class="input_search">
<input id="auto" value="category" type="text">
<ul class="search_auto_complete">
<li class="auto_complete_category">Categories</li>
<li>Category 1</li>
</ul>
</div>
</div>
</div>
</section>
Basically, the image below summarizes my question.
Is there any elegant solution to make it work? I've tried to use rotate, skew and perspective, but didn't work for me.
Note: the background needs to be transparent.
My code for you. :)
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
background: #0f0;
height: 370px;
left: 20px;
padding-top: 10px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
color: #fff;
display: block;
height: 60px;
padding-top: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
}
.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
Here's what I changed your css to make it look like your picture and do the correct hover effect:
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 20px;
padding-top: 5px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
color: #fff;
display: block;
height: 65px;
margin: 0 auto;
padding: 0;
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
line-height: 5;
font-size: 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: border-bottom-color 500ms;
}
.abduction a:nth-child(5){
width: 94px;
}
.abduction a:nth-child(4){
width: 88px;
}
.abduction a:nth-child(3){
width: 82px;
}
.abduction a:nth-child(2){
width: 76px;
}
.abduction a:nth-child(1){
width: 70px;
}
.abduction a:nth-child(even) { border-bottom-color: #00d900; }
.abduction a:hover { border-bottom-color: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
So basically to create a 65px high trapezoid with borders (colored #0f0) you'd do this:
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
The width of the last element is 100px. So since the left border width + the right border width = 6px and 100px - 6px = 94px, the second to last element will have a width of 94px to match the top of the last element. You subtract the side border sum from the previous elements width to get the current element width.
Also the transition property needs to be changed to border-bottom-color instead of background because border-bottom-color is what sets the color of the trapezoid.
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 15px;
padding-top: 10px;
position: absolute;
top: 50px;
width: 110px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 400px solid #0f0;
}
.abduction a {
color: #fff;
display: block;
height: 60px;
padding-top: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
}
.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
I'm pretty sure you need javascript for that.
jQuery(document).ready(function(){
var buttons = [{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'}];
var b;
for(b in buttons){
var rev = buttons.length - (b*10);
var btn = jQuery(''+ buttons[b].name + ' ' + b +'').css({left:rev/2, width:100 - rev} );
jQuery('.abduction').append(btn);
}
});
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 20px;
padding-top: 10px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
display:block;
position:relative;
color: #fff;
display: block;
height: 60px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
border-bottom:80px solid #0f0;
border-left:5px solid transparent;
border-right:5px solid transparent;
}
.abduction a:nth-child(even) { border-bottom: 80px solid #00d900; }
.abduction a:hover { border-bottom: 80px solid #008c00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spaceship">
<div class="abduction">
</div>
</div>
** EDIT November 17th **
Hi again, I wanted to show some code you can use to gracefully solve this issue. Make a blackbird.js file with the line commented out as mentioned in the accepted answer. Place it somewhere in your webapp directory (I put mine in /scripts/blackbird_1_0) along with the other Blackbird resources (blackbird_icons.png, blackbird_panel.png,blackbird.css, spacer.gif) and then add this as the configuration for blackbird as below. If you happen to use 5.2 and beyond, you might want to consider just disabling Blackbird altogether, I personally would love to do this but am stuck on 5.1 due to company restraints.
//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
// configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false"); Not available until 5.2
** END Edit **
I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.
However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.
I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy.
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.
Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest)
Firefox:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
--------------------------------------
--------------------------------------
--------------------------------------
IE:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
Current CSS:
body {
margin: 0;
padding: 0;
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
}
Source of a page with the issue:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Merchant / Partner Login</title>
<link type="text/css" rel="stylesheet" href="/assets/tapestry/5.1.0.5/default.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/blackbird/5.1.0.5/blackbird.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/ctx/1.0-SNAPSHOT/layout/layout.css"></link>
<meta content="Apache Tapestry Framework (version 5.1.0.5)" name="generator"></meta>
<script src="/assets/scriptaculous/5.1.0.5/prototype.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/scriptaculous.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/effects.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry.js" type="text/javascript"></script>
<script src="/assets/blackbird/5.1.0.5/blackbird.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry-messages.js" type="text/javascript"></script>
</head>
<body><!-- start header -->
<div id="header">
<div id="logo">
<h1></h1>
</div>
<div id="menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li class="current_page_item">d</li>
<li>e</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li style="background: none;" id="search"></li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>Merchant / Partner Login</h2>
</div>
<div class="entry">
<!-- Most of the page content, including <head>, <body>, etc. tags, comes from Layout.tml -->
<!-- snip content -->
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer --><div id="footer"><p class="legal"></p></div><!-- end footer -->
</body>
</html>
Added after isolating issue to Tapestry component tags
Find the Tapestry built in CSS below, somewhere in here there must be a line that is breaking the ability of body to use scroll on the background image?
/* Tapestry styles all start with "t-" */
DIV.t-error {
border: 1px solid red;
padding: 0px;
margin: 4px 0px;
}
DIV.t-error DIV {
padding: 2px;
display: block;
margin: 0px;
background-color: red;
color: white;
font-weight: bold;
}
DIV.t-error UL {
margin: 2px 0px;
background-color: white;
color: red;
}
DIV.t-error LI {
margin-left: 20px;
}
HTML>BODY DIV.t-error LI {
margin-left: -20px;
}
.t-invisible {
display: none;
}
LABEL.t-error {
color: red;
}
INPUT.t-error, TEXTAREA.t-error {
border-color: red;
font-style: italic;
color: red;
}
IMG.t-error-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(field-error-marker.gif);
}
IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(ajax-loader.gif);
}
IMG.t-sort-icon {
margin-left: 4px;
}
DIV.t-exception-message {
font-style: italic;
font-size: 12pt;
border: thin dotted silver;
margin: 5px 0px;
padding: 3px;
}
DIV.t-exception-report, DIV.t-env-data {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-exception-report LI {
margin-left: -40px;
}
DIV.t-exception-report DT, DIV.t-env-data DT {
color: green;
padding-left: 2px;
background-color: #FFFFCF;
}
DIV.t-exception-report LI {
list-style: none;
}
SPAN.t-exception-class-name {
display: block;
margin-top: 15px;
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
SPAN.t-exception-stack-controls {
display: block;
float: right;
}
UL.t-stack-trace LI {
font-family: Monaco, Times, monospace;
font-size: 10pt;
margin-left: -25px;
list-style: square;
}
LI.t-usercode-frame {
font-weight: bold;
color: blue;
}
LI.t-omitted-frame {
display: none;
color: gray;
list-style: square;
}
H1.t-exception-report {
font-family: "Trebuchet MS", Arial, sans-serif;
color: red;
}
DIV.t-exception-report DT:after {
content: ":";
}
DIV.t-exception-report DD, DIV.t-env-data DD {
margin-left: 10px;
}
TABLE.t-data-table {
border-collapse: collapse;
margin: 0px;
padding: 2px;
}
TABLE.t-data-table TH {
background-color: black;
color: white;
}
TABLE.t-data-table TD {
border: 1px solid silver;
margin: 0px;
}
DIV.t-beaneditor {
display: block;
background: #ffc;
border: 2px outset brown;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor-row {
padding: 4px 0px 2px 0px;
}
DIV.t-beaneditor-row LABEL:after {
content: ":";
}
DL.t-beandisplay {
display: block;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
background: #CCBE99;
border: 2px outset black;
width: auto;
}
DL.t-beandisplay DT {
width: 250px;
display: inline;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
DL.t-beandisplay DT:after {
content: ":";
}
DIV.t-beaneditor-row LABEL {
width: 250px;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
INPUT.t-number {
text-align: right;
}
DIV.t-beandisplay DIV.t-beandisplay-label {
padding-right: 5px;
}
TABLE.t-data-grid THEAD TR {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid THEAD TR TH {
text-align: left;
padding: 3px;
white-space: nowrap;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
TABLE.t-data-grid {
border-collapse: collapse;
border-left: 1px solid silver;
}
TABLE.t-data-grid TBODY TR TD {
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 2px;
}
DIV.t-data-grid {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-data-grid-pager {
margin: 8px 0px;
}
DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
text-decoration: none;
color: black;
padding: 2px 5px;
font-size: medium;
border: 1px solid silver;
margin-right: 5px;
}
DIV.t-data-grid-pager A:hover {
border: 1px solid black;
}
DIV.t-data-grid-pager SPAN.current {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid TR TH A {
color: white;
}
IMG {
border: none;
}
DIV.t-env-data-section {
padding-left: 5px;
}
DIV.t-env-data DD, DIV.t-exception-report DD {
margin-left: 25px;
margin-bottom: 10px;
}
DIV.t-env-data LI {
margin-left: -25px;
}
DIV.t-env-data-section {
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
TABLE.t-location-outer {
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
TD.t-location-line {
width: 40px;
text-align: right;
padding: 0px;
background-color: #E1E1E1;
padding-right: 3px;
border-right: 1px solid black;
}
TD.t-location-content {
border-top: 1px solid silver;
border-right: 1px solid black;
white-space: pre;
}
TD.t-location-current {
background-color: #FFFFCF;
}
TD.t-location-content-first {
border-top: 1px solid black;
}
DIV.t-palette {
display: inline;
}
DIV.t-palette SELECT {
margin-bottom: 2px;
width: 200px;
}
DIV.t-palette-title {
color: white;
background-color: #809FFF;
text-align: center;
font-weight: bold;
margin-bottom: 3px;
display: block;
}
DIV.t-palette-available {
float: left;
}
DIV.t-palette-controls {
margin: 5px 5px;
float: left;
text-align: center;
}
DIV.t-palette-controls BUTTON {
display: block;
margin-bottom: 3px;
}
DIV.t-palette-controls BUTTON[disabled] IMG {
filter: alpha(opacity = 25);
-moz-opacity: .25;
}
DIV.t-palette-selected {
float: left;
clear: right;
}
DIV.t-palette-spacer {
clear: left;
}
IMG.t-calendar-trigger {
padding-left: 3px;
cursor: pointer;
}
DIV.t-autocomplete-menu {
z-index: 9999;
}
DIV.t-autocomplete-menu UL {
border: 2px outset #cc9933;
background-color: #cc9933;
padding: 4px 6px;
overflow: auto;
}
DIV.t-autocomplete-menu LI {
color: white;
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
cursor: pointer;
}
DIV.t-autocomplete-menu LI.selected {
color: black;
font-weight: bold;
}
DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
padding: 0px 5px 10px 22px;
}
HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}
DIV.t-error-popup {
background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 39px;
margin-right: 6px;
padding-right: 29px;
text-decoration: none;
}
HTML>BODY DIV.t-error-popup {
background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}
UL.t-data-list LI {
list-style-type: square;
}
DIV.t-loading {
display: inline;
width: auto;
font-weight: bold;
padding-right: 20px;
background: transparent url(ajax-loader.gif) no-repeat right top;
}
DIV.t-dialog-overlay {
position: fixed;
margin: auto;
top: 0px;
left: 0px;
z-index: 9990;
width: 100%;
height: 100%;
background: transparent url("dialog-background.gif");
}
DIV.t-page-loading-banner {
position: absolute;
top: 5px;
left: 5px;
width: auto;
font-weight: bold;
padding: 2px 4px 2px 24px;
color: black;
background: white url(ajax-loader.gif) no-repeat 4px center;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:
bodyTag.style.backgroundAttachment = 'fixed';
By doing the following,
body
{
background: url( yourBG ) repeat-x;
}
you should not have any problem... Your background will scroll as intended.
If this wasn't helpful, try updating your question by adding some more code example of what you're doing.
ADDED AFTER POSTING COMMENTS :
HTML :
<body>
<div id="background"></div>
<div id="yourContent">
...
</div>
</body>
CSS :
#background
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(images/bg_slice.png) repeat;
z-index: 1;
}
...
I've used that approach more than once, so I am positive it SHOULD work.