I am trying to put a border around a div.
<div style="border-color: yellow; border-style: dotted; border: 5px;">
<p>
This is a test.
</p>
</div>
Yet when I run this, this is what the browser shows as the actual style being applied:
<div style="border: 5px currentColor;">...</div>
The result is that no border is shown at all.
This makes no sense to me why the border styles are being overridden. I can only imagine that Bootstrap has set an !important override somewhere, but I have been unable to trace this.
Change the order in which you are applying inline styling. You can add all the 3 styling in the border style itself like border:5px dotted yellow;. Well if you still want to go with the way you did, just change the order. First add the border style and then specify the other styles like this.
<div style="border: 5px; border-color: yellow; border-style: dotted;">
<p>
This is a test.
</p>
</div>
In Chrome Inpsector:
click the element you wish to inspect
On the right, select the Computed tab
There you can see the applied styles, and their sources, so it would give you an idea why it is overridden.
you can always use !important yourself as well.
Related
I'm not sure why this isn't working but I'm trying to make a transition bar on a page that is basically just a block of color across some content.
I'm using Bootstrap 3 but not sure that has anything to do with it. If I apply the color directly to my div tag using a style tag it will work. However, I would like it to be in my style sheet so I can add a left and right border. When I put the same thing in my style sheet and try to apply it the style it won't display. I'm still learning to use the Dev Tools but when I view it using F12 I looks as though it applies my stylesheet style like it should.
Any ideas on what I'm doing wrong?
This works. I'm using a period to control the height for now but will eventually try to apply some height styling.
<div class="row">
<div class="col-md-12" style="background-color:#6f88a1">.</div>
</div>
This doesn't
.home_transition_bar
{
border-left: 1px solid Black;
border-right: 1px solid Black;
background-color: #6f88a1;
}
<div class="row">
<div class="col-md-12 home_transition_bar">.</div>
</div>
well, bootstrap has some pre-defined styles... in order to overwrite them, simple css code might not be accepted. Therefore, try at the end of the style "!important". For example:
#header
{
background-color: red !important;
}
I am working with bootstrap and that has done it for me. Hope it helps
For setting a border line between elements, I use border on one side for each child, except the last one. For example
<div class="parent">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
with CSS
.parent div{
display:block;
padding:5px;
border-bottom:dashed 1px #000}
.parent div:last-child{
border-bottom:dashed 0 #000
}
Is there a way to set the border between children from parent's CSS style? without using last-child. In other words, in one single statement from parent rule.
No, the border is a property of the child element, and thus can only be specified on them. You can use a single rule for this, but it requires advanced CSS3 selector support:
.parent > div:not(:last-child){
border-bottom: dashed 1px #000;
}
I just know a workaround: use jQuery and iterate through those child elements(each: http://api.jquery.com/each/) and set your css class if next(next: http://api.jquery.com/?s=next) element is also child...
I think another way, just using css does not exist, but I'm not sure, if you find a solution with css only, please post it ;)
Greetings
I have a bunch of elements that look like..
<div id="hi">
<div class="head">
</div>
<div class="footer">
</div>
</div>
..except some of them don't have the footer element, only a head. I want to give elements without a footer a bottom border. I'm hoping for something like..
#hi:hasno(.footer) {
border-bottom: 1px black dotted;
}
Is there a CSS selector I could use for this, or should I just use a JavaScript equivalent?
You can select elements that contain no other elements using the :empty selector, but what you need won't be available until CSS Selectors Level 4’s :has and :not(selector list) are both implemented in browsers. So no, it can't be done in pure CSS. Now whether or not you should use a JavaScript equivalent depends on what you really want to achieve here. If it's a minor detail, feel free to add it with JavaScript if it's not too much of a problem. If it's a huge, essential feature, consider restructuring so you don't need this kind of selector.
Depending on the situation with your background, you could put the border on #hi permanently, and then overlap that with your footer by giving the footer either margin-bottom: -1px or position: relative; bottom: -1px; and hiding the border when the footer is present.
I just encountered a IE6 bug that I don't seem to identify over the net.
Basically this is when the behavior is triggered: a block element has border, on all sides except bottom, and top/bottom padding. and inside it there's another block element.
My entire code is to big to fit in here, but I narrowed it down to this simple example:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
<p>adasasasdas</p>
</div>
Following stuff
Now the thing that goes wrong is that the "Following stuff"'s position (whatever that is), will be altered weirdly. In this case a few pixels to the left.
To disable that weird behavior I can either keep the bottom border, get rid of the padding or make the contained element inline. But I kinda want them both. Before I have to give them up, I wanted to see if there is knowledge about this bug and if there is an alternative fix.
Thanks!
This is a pretty good fix to the bug:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
<p style="font-size:16">adasasasdas</p> 
</div>
Following stuff
Basically, there has to be some inline text at the end of the div for IE6 to render it correctly. Since the   added an extra line to the bottom, I changed the font size to 0 in the div, then back to 16 (or whatever you'd normally use) inside the <p>. This has a very minimal effect on the height of the div (about 2 pixels in all major browsers) but it shouldn't be at all noticeable to users. Alternatively, you can try altering the line-height variable to 0% in the div, then back to 100% in the p, but that seemed to change the div's height by a few more pixels than the font-size method when I tried it.
My fix would be
<div style="border: 5px solid red; padding: 5px; padding-bottom:4px; border-bottom: 1px solid white;">
<p>adasasasdas</p>
</div>
Following stuff
but that may not be applicable for you depending on the context
This may help you
<div style="border-left: 5px solid red; border-top: 5px solid red; padding: 0px;">
<p style="margin:0px; padding:10px;">adasasasdas</p>
</div>
Following stuff
If you want padding adjust padding in <p> tag
Hey, I know this is old, but I also just spent several hours fighting with this bug (and in fact it took me this long to figure out that it was because of border-bottom + padding-bottom...which is a shame because if I knew what to search for I would've found this much sooner).
Anyway it suddenly occurred to me that this is yet another manifestation of the hasLayout issue in ie6. For my purposes, adding "zoom:1" to the offending divs suddenly and magically fixed it, which has the benefit of not fussing with font sizes and line heights and such.
Sadly, CSS outline isn't supported in IE7, so i'm stuck using border. But adding a border to any element on the page takes up room and possibly shifts the page.
If i'm adding a 2px border, then I set a -2px margin, it sill isn't perfect, as list items move to the left, and "margin:auto" really screws with it.
You can see examples here:
http://paul.slowgeek.com/nodeSelector/tests/simple.html
http://paul.slowgeek.com/nodeSelector/tests/center1.html
For example, if a page had :
<div>
<p>Lorem Ipsum</p>
</div>
And then I did :
<div>
<p style="border: 5px solid red">Lorem Ipsum</p>
</div>
The page would now be 10 px bigger and the p element would be 5 pixels indented. But if i did :
<div>
<p style="outline: 5px solid red">Lorem Ipsum</p>
</div>
in firefox 3, the page would be the exact same height and the element would be in the same position. I want this behavior to work cross browser.
Basically, how can you use a CSS border to get the effect of a CSS outline?
If it's hover effects you're worried about, and your background is of uniform colour then simply set the non-hover border ot the elements to the background colour, and then just change the colour on hover. So the element is always the same size, though you will have to decrease the padding to adjust for the border always being there.
so
instead of
a p {padding: 10px;}
a:hover {border: 5px solid red;}
use
a p {border: 5px solid white;padding:5px}
a:hover p {border-color: red;}
As an aside, if you're using :hover on any element other than a link or an input then no effect will be seen in ie6, which a lot of people still use. But you can use the ie7 script to fix that: http://code.google.com/p/ie7-js/