I work in a new project, I´m doing the "chat part" a one-to-one chat.. with php and ajax.
I´m new of css stuff.. while I was testing the code, I found a problem:
The text does not go down and continues skipping over design, I put an image for better understanding.
The css code:
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Hope u can help me, I think it´s a simple error design that I don´t know because I´m new in design stuff.
Use exact words instead of spam words like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa this is not a word that why you are facing this issue.
Even If you want to use like this then you can use overflow-wrap: break-word;
You can use word-break:break-all; property or word-wrap:break-word; property:
For example :
div {
width: 200px;
border: 2px solid #CCC;
word-wrap: break-word;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Related
I simply want .work-description to have a bottom border also when .project-link is hovered.
.work-description { padding-top:50px; width:50%; margin:0 auto;}
.project-link { font-size:3em; text-decoration:none; }
.project-link:hover { border-bottom: 3px solid #000; }
.project-link:hover + .work-description {
border-bottom: 3px solid #000;}
I am not sure if you are aware that the + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, the element having work-description class has to immediately after the project-link class.
If you have the right html (as shown below in the example), your code just works fine.
.work-description {
padding-top:50px;
width:50%;
margin:0 auto;
}
.project-link {
font-size:3em;
text-decoration:none;
}
.project-link:hover {
border-bottom: 3px solid #000;
}
.project-link:hover + .work-description {
border-bottom: 3px solid #000;
}
<input type="button" value="abcd" class="project-link">
<div class="work-description">some random text here</div>
Hope this helps!!!
I'm making an error message, using a pointer image that should give the left side a border. You can see an example here.
My current css is:
span.arrow {
background-color:white;
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center;
height:17px;
display:inline-block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
And html to display the error:
<span class='arrow'>
<span class='error'>
Errormessage.
</span>
</span>
Now first of all, the code seems a bit messy. Like having to position the span up two pixels is a bit strange. Nevertheless it seems to work in Chrome, FF & Opera, but not in IE9.
If it isn't clear: the box should perfectly aline with the triangle-image.
span.arrow {
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center transparent;
line-height:17px;
padding-left:10px;
display:inline-block;
}
span.error {
padding-right:2px;
background-color:white;
line-height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
display:block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
line-height: 17px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
Generally if you make your line-height match your content area height, the text will be vertically aligned.
http://jsfiddle.net/dshFk/3/
I looked in IE and it looked fine.
This CSS creates a nice effect when applied against a single blockquote within the content its attached to.
However, when there is more than one blockquote, everything works except the generated content.
In other words, the quote symbol is only applied to the first instance of the blockquote.
blockquote{
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C';
clear:both;
}
blockquote:before{
content:open-quote;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 -45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
Update: Thanks to Alex Morales, the issue is resolved by adding:
blockquote:after{content:close-quote;position:absolute;visibility:hidden;}
Change your first statement to:
blockquote {
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C''\201C';
}
See jsFiddle demo
You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.
Here's some sample code:
blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/
I have a big problem to make my site comp. with older browsers.
I use label+input text on many parts of my site. Somewhere IE7 did not show the background of the label.
The css of the label for login:
label[for="login"] {
-moz-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
I use this same code an other page for an other label:
.formField label {
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
And the 2nd is work well. The first work well on other browsers.
What should be wrong? Im pullin out my hair..
I hope, IE7 won't support Attribute selectors (label[for="login"]). When I check with w3c it will work if we put doctype.
Here is the example:-
http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value
More details Here
http://www.w3schools.com/css/css_attribute_selectors.asp
Yes, it is not supporting
[for="login"]
To make it work in IE7 and compliant browsers, use this selector:
label[for="login"], label[htmlFor="login"]
For details on this IE7 bug, see: http://reference.sitepoint.com/css/attributeselector#compatibilitysection
IE7 doesn't let you select labels with the 'for' attribute. Other attributes work, but trying to select an element either of these ways won't work:
label[for=test],
label[for] {
/* THIS CODE WILL BE IGNORED */
}
You'll have to select the element another way, such as with an ID or a class instead.
IE7 also has problems using attributes for the selections of other elements. For example, trying to do table th[cellpadding=0] as a selector won't work either.