I've had a similiar issue like this before and trying to finally get it corrected. If you notice in the js fiddle there seems to be a thicker border above the actions div and I'm trying to find out why there is and there isn't in the template that I purchased.
http://jsfiddle.net/pGFfa/
Template:http://kansasoutlawwrestling.com/files/templates/admin/peachv1.2/Template/forms.html
EDIT:
I updated my page with the real intended page but look at the actions area and there still is a border on the left and right. Not sure why.
The double border is because of the bottom border of the content div. The div in the template has rule ".box .content.with-actions" applied which says "border-bottom: 0 none;". The content div in your fiddle doesn't have that rule so it has a bottom border and also the actions div has a top border hence the thicker line appearance.
The difference is that the content div in the template also has the "with-actions" class while the one in your fiddle doesn't. Just add that class and the problem disappears.
Updated fiddle http://jsfiddle.net/7jrEp/2/
As a note, when your css is linked externally any changes you make to the actual css changes every fiddle we post. It's better to paste the css into fiddle so it doesn't break.
And the problem as noted above was a double border plus the radius being applied to the bottom and not the top of the form container.
In content.css, try changing:
.box .content-form { border: 1px solid #C8C8C8; }
to:
.box .content-form { border: 1px solid #C8C8C8; border-bottom: none; }
Related
I have an HTML page for my code and a CSS page for all my classes/styling, but my div class is not applying to my div code.
It's weird because all of my other div classes are fine, but it's just this one.
My code is simple:
<div class="box">
</div>
And my class is also fairly simple:
.box {
border-right: 10px solid black;
border-left: 10px solid black;
border-top: 10px solid black;
border-bottom: 10px solid black;
}
It is probably a simple rookie mistake as I am new to this, but as I said, all the other classes work fine and they are the same as this.
Also, I tried putting the class in the HTML file itself, in [style], and it worked perfectly. I just wanted to know why it wasn't working when it was in another file when everything else was.
You must specify the width and height of the div. Because of that, it isn't showing the borders. Or, you can put some content inside your div, and after that, it will show the borders.
And a little advice: you don't have to type style for all border sides especially. You can just say: border: 10px solid black; and it will be applied to all sides of the box.
You need to add some content to your div, or give a height to your div. If not, you will not be able to see your div and the border styles that you added.
In addition, you can make your code more efficient since all 4 border sides are the same styles. You can just use the following styling:
.box {
border: solid 10px black
}
So, after a bit more googling, I discovered it was as simple as doing shift + f5 to do a complete cache refresh. Turns out, if you have a completely separate file for all your CSS classes, it doesn't update the cache automatically.
I've been trying to put a border around a specific piece of text on my website in CSS, but it won't completely wrap around it.
Here's what I'm talking about:
Image
And here's the code that I used:
.box-outline {
border: 4pm solid black;
border-radius: 4px;
}
For context, I'm using a WordPress theme and trying to put a border around that piece of text on my navigation menu. WordPress gives the option to style menus entries by putting in the CSS class but it's not working correctly. Is it my theme that's screwing me over, or is there something I can change?
Try this:
.box-outline {
border: 4pm solid black;
border-radius: 4px;
z-index: 100500;
}
Maybe there is some another element, that closes your right border... z-index may help.
Or... it seems, you've set incorrect width to your last div/button, or the width of div, that contains all buttons.
I want to create box shadow using CSS but in a specific area of the box only.
As shown in the screenshot above, I have blue header on a site and to that header, I want to add a shadow in a specific position as highlighted with red box.
I am guessing that using psuedo element :after on header div should work but I don't know how to add shadow with specific styling. I mean if you notice, the shadow is blurred on left and right.
You can refer some css shadow generator website like http://www.cssmatic.com/box-shadow to make shadow to particular area.Hope this may helps you.
Thank you.
You can try something like this:
div {
width: 300px;
height: 1px;
position:relative;
margin-top:-1px;
box-shadow: 10px 10px 5px #888888;
}
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
A div area isn't behaving normally.
Here's the link
(all the styles are in theme.css files)
In the HTML file there is a <div> which starts on line 89 and ends on line 94, has two classes assigned to it, I cannot apply box-shadow property to it, I have set the display to block, set the background color to black to check if it displaying but for some wired reason it just does not display.
I could apply margin to the div (theme.css line 280).
Any help on how to display it normally (with the box-shadow) would be appreciated.
Thanks in Advance
You can't add the box-shadow property because the div.dropdown-toggle (the element in question) has not a height and a width.
Try putting (like a test) these CSS rules:
div.dropdown-toggle {
width: 100px;
height: 100px;
box-shadow: 1px 1px 2px #333;
}
You'll see the div with the shadow.
Cheers,
Leo