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/
Related
Internet Explorer 11 adds space in a way I do not understand. In the element below it adds white space on left border.
Link to a page that illustrates the problem showing how element is displayed in different browsers
This is the code:
<div style="position:absolute;width:330px;left:30px;top:120px;visibility:visible;border:1px solid black">
<div style="position:relative;height:14px;background-color:#B02C2A;padding:6px 0 6px 8px;color:white;"><span>hejsan</span>
</div>
</div>
Removing positioning absolute or the border attribute makes the problem disappear, but I need these features. Is there anything I'm missing or is it a bug?
<div style="position:absolute;width:330px;left:30px;top:120px;visibility:visible;border:1px solid black">
<div style="position:relative;height:14px;background-color:#B02C2A;padding:6px 0 6px 8px;color:white;"><span>hejsan</span>
</div>
</div>
apply background-color:#B02C2A; to the first div, that way it won't show the white spacing of the div
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.
I have the next css
.button {
width:0;
height:18px;
padding: 8px 0px 2px 30px;
overflow:hidden;
transition: padding .5s ease;
}
.button:hover {
padding: 8px 170px 2px 35px
}
And i have this simple html
<div class="button"> A text </div>
I'm looking for create in only one div, a white box that if you mouse over, this is expanded to the right to display a text smoothly.
And that is the question:
Is a good practice replace padding with width/height in these cases?
Or is it better put the text in a different div and use the corresponding width and height instead of padding?
I don't know if i explain me good
It is normally better to use padding since the button will support different text lengths and let the padding control the width and height depending on the text within the button, However if you want your buttons to be one size and one size only for example: A button with Submit, and a button with Download will be 2 different sizes and if you are displaying these along side each other you may want them to be the same size as one another, in this case then a width, height set because more ideal.
I personally prefer padding but again if you want all buttons the same size then manually set these.
By the way the way you shouldn't need to use height:18px, or Width:0; Just delete these values and set the padding to control these and use a span within the button.
Example:
<p>Simple - One Button</p>
<div class="button"><span>A Button</span></div>
<p>3 Simple Buttons with Float Elements</p>
<div class="button floatleft"><span>A Button</span></div>
<div class="button floatleft"><span>A Button</span></div>
<div class="button floatleft"><span>A Button</span></div>
<div class="clearfix"> </div>
p {padding:15px 5px;}
.button {position:relative;transition:padding .5s ease;padding:5px;}
.button.floatleft {float:left;}
.button span:hover {padding:5px 20px 5px;}
.button span {background:#ccc;padding:5px;color:white;}
.clearfix {clear:both;}
Here's something I made 5mins ago to show you: JsFiddle
Hope this helps.
Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.
img {border-radius: 10px; border:3px solid red}
See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/
Borders are fine in Firefox.
and in IE9 border edges are fine but it has a different problem. it shows some space between border and images
How to get the result like Firefox in all other browser?
You can give extra div to your img tag like this:
body {padding:100px}
img {
vertical-align:bottom;
position:relative;
z-index:-1;
}
div{
overflow:hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px solid red;
display:inline-block;
}
http://jsfiddle.net/4PLUG/4/
/* just make sure you're including border radius for all browsers rendering engines */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}
all browsers have different CSS capabilities, and handle them differently.
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
An alternative is to use a background image on a div instead, which may get better clipping.
You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.
I've done this effect with two divs using z-index.
<div class="picture-wrapper">
<div class="mask">
</div><!-- end mask -->
<div class="picture">
<img src="" />
</div><!-- end picture -->
</div><!-- end picture-wrapper -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
Up to you.
for img tags , percent border radius work perfectly:
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
link the image in the body:
<img src="image.jpg">
add your sizing to the image:
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.
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.