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
}
Related
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>
I have the following lines (separate) in a stylesheet I am reviewing:
.Ex1.Ex2 {
color:#333;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
font-weight:bold;
margin:24px 0 5px;
border-bottom:1px solid #333
}
{
background-color:#ffe;
border:1px solid #aaa;
color:#000;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
height:auto;
margin-top:5px
}
and
.box_title_container {
height:29px;
width:225px;
margin:0 auto;
background:url(../best_images/boxts.gif);
repeat-x
}
When passing through the W3C Validator both return parsing errors. Since the person who created the stylesheet had much more experience than myself regarding CSS, I might believe that those are two types of hacks for crossbrowsing compatibility, but i couldn't google (it 's a verb now right?) anything related to this.
As for the first line it has two enclosing set of properties and the second has an isolated repeat-x value (and this "error" is repeated across the following 5 or 6 lines).
Could someone tell me if those were made with some sort of purpose or are plain errors?
Thanks in advance!
In your first CSS block, you must indicate an ID, a class or an HTML element for the second {}
.Ex1.Ex2 {
color:#333;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
font-weight:bold;
margin:24px 0 5px;
border-bottom:1px solid #333 /* missing ;*/
}
#IDneeded .CLASSneeed {
background-color:#ffe;
border:1px solid #aaa;
color:#000;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
height:auto;
margin-top:5px /* missing ;*/
}
For the 2nd one, "repeat-x" is a value for "background" not a CSS property, just move the ;
.box_title_container {
height:29px;
width:225px;
margin:0 auto;
background:url(../best_images/boxts.gif) repeat-x;
}
I am having trouble with aligning jQuery tags, I've used a bit of a code and changed it and styled it myself, however the align seems to be leaving a space on the left, which I don't want, and I'm not sure how to get rid of it. Here's what I mean...
http://postimage.org/image/8k5rcz941/
This is the CSS code:
.usual {
color:#111;
padding:15px 20px;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10pt Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#fff;
background:#003663;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:8pt Verdana;
border: 1px solid #d0d0d0;
}
.usual div a { color:#000; font-weight:bold; }
Hope you can help me shift this to the left, I've been trying to figure out what it is, and just can't :(
Thanks and regards.
I'm guessing that the ul has a margin or padding applied. Remove it:
.usual > ul {
margin: 0;
padding: 0;
}
.usual has a left padding of 20px. Is that what you're trying to get rid of?
Inspect your elements in either Google Chrome or using the Web Developer add-on for FireFox. Find the element and check all it's inherited styles; chances are likely, like icktoofay says, you probably have inheritance somewhere. If doing like he said, adding margin & padding = 0 for the UL, you can try the hack !important
.usual ul {
margin: 0 !important;
padding: 0 !important;
}
But note that if you have any other margin/padding that is used on the UL element, you will lose those, either using !important or not because margin: 0 sets all 4 sides. To target just the left side:
.usual ul {
margin-left: 0 !important;
padding-left: 0 !important;
}
Sometimes the hack won't work, that's why it's important to check your inheritance by inspecting the elements in the browser first.
As you can see in the image there are some tabs called welcome, aa, bb etc. Now the tab color is blue for an image (tab.png) that I have provided but I want to set a different image or no image at the time of selected. Here Welecome is selected and I have provided an image (tab_selected.png) for selected condition but that image is not rendering. Or If I dont provide any image in selected state, still the tab.png is reflecting. What can I do for this ?
CSS:
#navigation a {
color:#FFFFFF;
display:block;
font:12px Arial, Helvetica, sans-serif;
margin:0 4px 0 0;
padding:3px 10px 4px;
text-decoration:none;
background-image:url(../images/tab.png);
}
#navigation .selected a {
background-image:url(../images/tab_selected.png);
border-bottom:1px solid #e0e0e0;
font-weight:bold;
color:#000;
padding-bottom:3px;
}
Which element are you applying the "selected" class to?
If it is the anchor element (a), then your CSS rule should be:
#navigation a.selected {
Added double quotes for urls. Try this...
Main issue was found by obfuskater
#navigation a {
color:#FFFFFF;
display:block;
font:12px Arial, Helvetica, sans-serif;
margin:0 4px 0 0;
padding:3px 10px 4px;
text-decoration:none;
background-image:url("../images/tab.png");
}
#navigation a.selected {
background-image:url("../images/tab_selected.png");
border-bottom:1px solid #e0e0e0;
font-weight:bold;
color:#000;
padding-bottom:3px;
}
For some reason the images in the columns on this page are not centering while the <p>s are. They are both encased in the same divs (#event).
.event {
position:relative;
right:auto;
left:auto;
width: 315px;
height:100%;
margin:5px 0px 0px 0px;
}
img.event {
position:relative;
align:center;
width:315px;
height:auto;
margin:auto;
padding:10px 0px 0px 0px;
}
p.event {
position:relative;
right:auto;
left:auto;
width:315px;
height:auto;
padding:0px 0px 0px 0px;
font-family: helvetica, sans-serif, Arial;
font-size: 16px;
letter-spacing: 1.2pt;
border-bottom: 2px dotted #333333;
}
add the following to img.event:
right:auto;
left:auto;
I think you need to correct your markup first. You have p tags nested inside anchor tags. I think this is giving you the illusion that your p tags are centered when in fact they are not.
I'm not trying to be harsh, but it would probably be easier to debug your issue when you have correct markup.