This is how my css looks like:
.rounded-box{
border-radius: 5px;
background-color: #e4f4fd;
font-size: 16px;
margin-top: 18px;
border: 1px solid #dedef7;
padding: 18px;
text-shadow: 1px 1px 0 white;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
h3 {
text-shadow: 1px 1px 0 white;
margin: 10px;
}
And this is how my html looks like:
<div class="rounded-box">
<h3>some text here</h3>
<h3>some text here</h3>
</div>
For some reason in IE8 (haven't tested it yet in other IEs) the rounded-box sits on top of the text. When I load the page a see for a fraction of the second my text then the rounded box covers the text.
(All the other browsers display the text as I intended on top of the rounded-box)
Any ides?
The problem was with jquery.curvycorners.min.js. When I eliminated it from my HTML page the problem went way.
On top of that it eliminated a problem I had in another page where I had a text field that would not show up in IE 8.
Related
I want to budge this border to the left like in this image:
My code is like this:
div{
border left: red 5px solid
}
I see what you want. So, first, you will need a class for your div, so that it doesn't affect every single div. You also need another <div> inside it for the text and the border. New code:
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
Then, here comes the CSS. First, we should style the outer <div>. We will need padding, background color and you might want some border-radius. The padding should be around 7 pixels. Your background color can be something like #ddd. It is what I saw in your picture. Finally, the border radius can be 5 pixels, even though your image didn't contain any, I think it looks better. You can remove this. Our outer <div> code looks like this:
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
Now we have the inner <div>. It should contain a red left border (as you said in your code) and some left padding to not "touch" the border. Our code is like this:
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
Complete code:
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
<style>
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
</style>
Snippet:
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
It looks like this:
.block{
background: #ccc;
padding: 16px;
}
.note{
border-left: 5px solid red;
padding-left: 16px;
font-size: 25px;
}
<div class="block">
<div class="note">This is an important note</div>
</div>
I am trying to customize every single post of first-paragraph starts with first-letter only, bold and larger fonts. But it does not appear on first-letter of the first paragraph. Instead, it appears on every paragraph rather than the first-paragraph.
This is for a Wordpress template. In the past I've tried using the property first-child. However, it didn't seem to be working.
p::first-letter {
font-size:300%;
color:#00aff2;
font-style:bold;
border: 2px solid #00aff2;
margin:0 5px 3px 0;
padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
I would like to customize the first-letter of every first paragraph of a single post in Wordpress.
You can use :first-child to apply ::first-letter to the first paragraph only.
p:first-child::first-letter {
font-size:300%;
color:#00aff2;
font-style:bold;
border: 2px solid #00aff2;
margin:0 5px 3px 0;
padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
Try This
p:first-of-type::first-letter {
font-size:300%;
color:#00aff2;
font-weight: bold;
border: 2px solid #00aff2;
margin:0 5px 3px 0;
padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
<p>This is a sample</p>
<p>This is a sample</p>
I'm having an issue with css in Internet Explorer, however it is only showing when i'm testing in Browserstack. It shows on all versions of IE that I test on with Windows 7. On my PC it appears fine with my version of IE and when I change the browser mode from within. I'm not sure if it's a quirk or Browserstack or an IE issue that i'm missing.
The area concerned has 2 paragraph tags, 1 floated left the other right, both width 45%, display block, overflow hidden. Each has an anchor tag inside display block, with a background color and border on. The second link is like it's mirroring itself, looks really odd and i can't find anything on this, anyone seen this before and know how to fix? Or is it a Browserstack quirk?
Screenshot of what's happening here
Thanks!
edit, added code:
<style>
a.button {
background: #c10075;
-webkit-background-clip: padding-box;
color: white;
display: inline-block;
padding: 15px 0;
border-radius: 4px;
border: 2px solid #c10075;
border-bottom: 2px solid #8e0056;
border-right: 2px solid #8e0056;
text-transform: uppercase;
text-align: center;
font-family: Rokkitt, serif, Arial, Helvetica, sans-serif;
font-size: 28px;
display: block;
}
a.button:hover {
background: #8e0056;
border: 2px solid #8e0056;
color: white;
}
.cta-buttons p{
width: 45%;
float: left;
}
.cta-buttons p.last{
float: right;
}
</style>
<div class="container cta-buttons">
<p>
Apply now
</p>
<p class="last">
Book your visit
</p>
</div><!-- .cta-buttons -->
I have a scrolling text box on a Wordpress site. The text get scrolled by the user sliding the vertical scroll bar for it.
Is there a way I can change the color of the vertical slide bar and the background for it?
This is the code I used to get the box
<div style="border: 4px solid #ffff00; overflow: auto; height: 150px; width: 640px; color: white; background-color: #32cd32;">
<div style="text-align: left;">
<h1>Text</h1>
Text here text here text here text here
Credit goes to CSSTricks
Fiddle: http://jsfiddle.net/GaurangTandon/E6GC6/2/embedded/result/
CSS:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Note: This only works in -webkit- browsers (Safari, Chrome)
Yes You Can
I Found A Piece Of Code Here
with tutorial.
http://www.techforty.com/2014/02/How-to-change-the-color-of-scrollbars.html
I have the following code:
<h1><span>Test Heading</span></h1>
and CSS:
h1 { font-size: 1.3em; font-family: calibri, arial;border-bottom: 1px solid #999; padding-bottom: 10px;margin-bottom: 5px; background-color: pink;}
h1 span { color: #fff; background-color: #446688;padding: 1px 5px 3px 5px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
Right now it displays something like this:
XXXXXXXXXXXXXXXX
x Test Heading X
XXXXXXXXXXXXXXXX
----------------------------------------------------------------------------------------
What I need to be able to do is have text appear to the right of the heading like this:
XXXXXXXXXXXXXXXX Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
x Test Heading X more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
XXXXXXXXXXXXXXXX aaaaaaaaaaaaaaaaaaaaaaaaaaa
----------------------------------------------------------------------------------------
I think this is not so easy to do. Can anyone suggest how I could do this? I guess I need some kind of outer enclosing DIV for my heading but when I tried that the text always appears below the heading instead of to the right.
Here is an example of what I have now
demo
Wrap it all in a <div>, move the pink background color and bottom border to the <div>, and float the <h1> to the left.
For example:
<div class="bb">
<h1><span>Test Heading</span></h1>
This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</div>
CSS:
.bb {
border-bottom: 1px solid #999;
padding-bottom: 10px;
background-color: pink;
overflow: hidden;
}
h1 {
font-size: 1.3em;
font-family: calibri, arial;
margin-bottom: 5px;
float: left;
}
h1 span {
color: #fff;
background-color: #446688;
padding: 1px 5px 3px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Fiddle: http://jsfiddle.net/ambiguous/FNLBD/
You'll probably want to pretty up the paddings and margins a bit though.
Put the H1 text and the other text in separate DIV's. Then make them float next to one another using CSS
Float the heading.
try
display:inline;
http://jsfiddle.net/gKqQc/
Add this to the H1 CSS:
float: left;
margin-right: 10px;
This will float your heading left so that the text can wrap around it on the right, Check this JS Fiddle, The Margin-right will add a 10px margin to the right of the heading for presentation.
float-ing the h1 to the left is the best option in this case and your markup could do with a little tweaking to accomplish this in the best possible way.
<div class="box">
<h1>Test Heading</h1>
<p>This is text that I want to make appear to the right
of the heading and above the blue base line. This is
text that I want to make appear to the right of the
heading and above the blue base line.</p>
</div>
Demo: jsfiddle.net/Marcel/ryGFq/10
You'll see there's a second option in the demo too showing the best way to have the content left justified, however an absolute value is required for the margin-left.
Try with
display: table-cell;
For both the H1 and the Text. They will appear next to each other.