I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
Related
The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}
I'm still to this day surprised when I run into the slideDown jumpy bug in jQuery. Been reading so much about it, articles on jQuery for designers and so on. Still can't wrap my head around it.
Is there still no easy way to solve this without storing heights and so on? Any other take to get to the same result?
Made a basic example of my code in question, but I guess it's the same as in any other buggy case.
http://jsbin.com/oyokoc/20/edit
There is no bug as such you are saying in slidetoggle actually,
The problem is with how the browser behave to the default padding and margin for the tags like p, if they are not visible the default padding and margin are not added,
but as soon they become visible they are added in the layout and i.e. the reason of this jumping you are mentioning.
Here is something I did for ignoring these implementation error:
.more{
display: none;
background: #eee;
/* added to make the margin and padding instead of p */
padding: 5px;
margin-top: 5px;
}
/* removing the default margin and padding of p */
p{
margin: 0px;
padding :0px;
}
Here is the demo http://jsbin.com/udexix/1/
UPDATE
If you want to use multiple p and dont want to change the default padding and margins, what you can do is you can change the display style for all the p to inline-block
Here is the code for that as well:
.more{
display: none;
background: #eee;
/* no changes here */
}
/* changing the display property of p */
p{
display: inline-block;
}
Here is the demo 2 http://jsbin.com/udexix/8/
Look at my code here.
You need to resize Result panel so that you can view at least two block inline. If you click on "More details" link then it will show details but it will shift next rows block also.
Any suggestion why this it is showing like this though I have used clear:both.
.reviewimg_blk {
border: 1px solid #9B9B9B;
float: left;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
padding: 5px 5px 5px 10px;
position: relative;
width: 395px;
}
That's a common problem with floats.
Use display: inline-block; vertical-align: top; instead of float:left; if you don't need IE7 support.
See https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ for a cross-browser solution.
This is happening because of position:relative. Position:relative keeps div's or blocks in a relation so the below block was moving down. Use instead position:absolute at the places related to that dropdown part.
That is because your 1st itemStyle div has more content so it is taking more height than other divs.
So add <div class="clear"> </div> after every two itemStyle divs or fix the min-height to the itemStyle div.
I have added clear class after every two itemStyle divs in demo.
DEMO
..Live demo
Hi now used to Even and odd rules in css
.itemStyle:nth-child(odd) {
clear:left;
float:left;
}
more info even or odd rules
I'm a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I've tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can't seem to find it.
You can check the source code from a live demo of the page here.
Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you're trying to do - I'll ** the css changes I've made:
.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}
.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}
.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}
This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.
How do you remove the jagged edges from a wide button in internet explorer? For example:
You can also eliminate Windows XP's styling of buttons (and every other version of Windows) by setting the background-color and/or border-color on your buttons.
Try the following styles:
background-color: black;
color: white;
border-color: red green blue yellow;
You can of course make this much more pleasing to the eyes. But you get my point :)
Stack Overflow uses this approach.
As a workaround, you can remove the blank spaces on each end of the button, which has the effect of decreasing the jagged edges. This is accomplished with the following css and a bit of jQuery:
input.button {
padding: 0 .25em;
width: 0; /* for IE only */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto;
}
$(function(){
$('input[type=button]').addClass('button');
});
The jQuery is for adding the button class. A more in depth write up can be found here.
Setting overflow: visible; on the button will cure the issue in IE 6 and 7.
(See http://jehiah.cz/archive/button-width-in-ie)
Exceptions
In IE 6, if display:block; is also applied to the button, the above fix won't work.
Setting the button to display:inline; in IE 6 will make the fix work.
If you have a button like this within a table cell, then the table cell won't contract to the new, smaller width of the button.
You can fix this in IE 6 by setting width: 0; on the button. However, in IE 7 this will make everything but the text of the button disappear.
(See http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie)
More info on styling buttons:
http://natbat.net/2009/Jun/10/styling-buttons-as-links/
You can change the border style of the button with CSS, like this:
/**************************************************************************
Nav Button format settings
**************************************************************************/
.navButtons
{
font-size: 9px;
font-family: Verdana, sans-serif;
width: 80;
height: 20;
position: relative;
border-style: solid;
border-width: 1;
}
Not too much you can do about it, but the good news is that it is fixed in IE8
http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html