I'm trying to highlight the row the mouse is over in a table of data. I'm trying to do this with a border-top and border-bottom. To help the readability i also have a light transparent png on alternate rows.
It seems that when I turn on and off the borders (works in IE8+ and FF) the rows jump around a little. I think I can fix it by having a a non-hover transparent border, rather than none at all. Is this x-browser compatible now days?
In Chrome, the highlighted row's border does not go away when you move the mouse off the row, why?
http://justinzaun.com/Tree/people/
Update: I've fixed the border issue in chrome where they wouldn't go away. I moved the border to the TDs rather than the TR. The rows are still jumping around though.
Thanks!
put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.myelement
{
border:4px solid transparent;
}
.myelement:hover
{
border: 4px solid green;
}
http://jsfiddle.net/mPmRA/
EDIT:- more specifically to your table (ugh: tables ... collapse border makes the above not work properly)
http://jsfiddle.net/mPmRA/1/
put the transperant border on the tr
tr
{
border-top:4px solid transparent;
border-bottom:4px solid transparent;
}
And for the hover do something like:
tr:hover td
{
border-top:4px solid green;
border-bottom:4px solid green;
}
The td borders will then appear ABOVE the row's border.
An easier way is adding "margin-top:-1px; margin-bottom: -1px;" to the :hover style, this corrects the new height with the border.
Make sure your border is set to the INSIDE instead of the outside. Unfortunetly, the inset option for borders is not yet part of CSS. Here's a bit of CSS to make the borders inside the element using box shadows:
.mytable tr:hover {
-moz-box-shadow: inset 0 0 1px #000;
}
That will make a 1px black border on the INSIDE of your element! :D
I hope this helps, if you're set on a black dotted border, your only option is to set absolute positioning, and position each table row individually, which is a pain in the ass. :/
If you've got relative or static positioning, elements will move when other increase in size. Wulf's idea may work with a little configuring, but to be honest, the box shadow is a much nicer border then the dotted one. (a bit tacky if I say so myself. ^_^ Sorry.)
Related
CSS learner here.
Im making frontend mentor exersise with 3 card preview. After i added the hover state to the buttons the whole card is expending by few pixels when i hover over it. Cards are made with flexbox. I tried to locate the source of this, but so far im unable.
Here is the the whole thing.
https://codepen.io/Dungeoner999/pen/JjELjmB
/*-----*/
Do anyone know why this is happening and what can i do to make the cards size fixed?
.btn-1 does not have border. While .btn-1:hover has 1px border. To fix the issue, give it 1px transparent border.
.btn-1 {
color: var(--orange);
border: 1px solid transparent;
}
Just put border to your .btn style and problem solved:) Card get's bigger right now because of one extra pixel from hover
border: var(--tWhite) 1px solid;
Im adding a border to my table row dynamically using JS.
This causes the table to jump down slightly because of the border adding height to the row.
How can I prevent this?
I've tried adding a transparent border, which then gets replaced with the real border.
This works, but I was looking for a better solution, so I tried:
box-sizing: border-box
This did not work.
What's the best solution to this?
If you don't want to use a transparent border (advisable for you to use it, not sure why you wouldnt), you could instead simply give the cell padding of the same amount as your border width, and remove on hover, e.g.
Demo Fiddle
td{
padding:3px;
}
td:hover{
border:3px solid;
padding:0;
}
Alternatively, if you couldn't spare the padding - and you don't need to support IE8, you could try tinkering with box-shadow
td:hover {
box-shadow: inset 0px 0px 0px 3px #111;
}
http://jsfiddle.net/evanbriggs/vbcutxmq/
In the example bellow:
http://jsfiddle.net/Du8f6/3/
Im setting inner shadow to the container and 10px border with border-radius set to 50%.
And the result is weired thin white border outside the container border.
The thin white border is visible in:
mozilla firefox
ie 11
and its not visible in:
opera
safari
chrome
any suggestions for fixing this are welcome.
It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.
Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:
In your html:
<div class="fakeborder"><div class="sub">Hm</div></div>
and in your css:
.sub {
...
border: 0px solid black;
...
}
.fakeborder{
margin:0;
padding:10px; /*The fake border width*/
background:black; /*The fake border color*/
}
I had a similar issue.
Even if I set
box-shadow:0 0 0 rgba(0,0,0,0);
to the element just because I didn't want a box-shadow for that element and I thought I could override the property like this.
That was working in webkit browsers, but FF was still rendering a thin shadow.
A better solution and the best practice to override a css property to its default, it is obviously set it to its default (dumb!)
box-shadow: none
I have table cells where I've set various images as the border with no margin around the cell. Is there a way to then put a coloured border inside the images, pushing the border into the cell rather than right at the edges?
If you can use CSS3, just look towards outline property.
This example makes 2px blue border inside table cell.
CSS:
td.bordred {
outline: solid 2px #377bb5;
outline-offset: -2px;
}
Have you tried playing with border-style: inset;?
I have a set of elements placed one after another. If user clicks an element, 1px width border is set to it. As result other img elements are shifted.
How can I reserve 1px width space around every img element?
Either use margin (MDN)
margin: 1px;
or set the border-color (MDN) to transparent and just switch the color
border-color: transparent;
when you add the border you can add margin: -1px; to the element too (make sure you reverse the process properly when taking the border off)
Alternatively give all border: 1px solid transparent (think they all support that these days) then you just need change the border colour. You could tinker with border-color: rgba(222,0,0,0); and then rgba(222,0,0,1) for the active element, where a is the transparency. However, rgba is not very well supported in IE atm.