This is driving me crazy. I've got a div floated to the right inside of another div, like so:
<div id='container'>
<div id='status'></div>
Current Membership: <%= #distribution_list.total %>
</div>
I've got the following css rules:
div#container {
float:right;
margin-right:3px;
}
div#container div#status {
float:right;
border:#aaa solid 1px;
border-radius:12px;
width:12px;
height:12px;
margin:-1px 0px 0px 5px;
background:#ff0000;
}
div#container div#status.good {
background:#5bd64a;
}
I don't mind the border-radius not functioning properly in IE7. What I do mind, is that when this is displayed in IE7 the text "Current Membership: total" is on the next line. The only way I've gotten this to work is by specifying a width for container, which I would prefer not to do. Anyone know of a way to get this to work?
When I test (emulated) in IE7, the text shows up on the same line, but just on the left edge of the screen. I added the following for layout, but it otherwise looks similar in layout to me:
div#container {
float:right;
margin-right:3px;
text-align: right;
}
Related
I have a problem with bootstrap css.
In the fiddle just type something to the input then input jumps up some pixels... WHY?
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin:8px 0 0 6px; font-size:74px; }
So I want to use margin-top or somthing else to positioning lower the input inside the outter div
screenshot
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin-top:20px; font-size:74px; }
New fiddle
It's not clear but it render better with this :
Css :
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:86px; margin:0; font-size:74px; padding-bottom: 10px;}
Fiddle : https://jsfiddle.net/ja8mymtr/1/
That is a bit weird but you can fix it by using absolute position like this
.test {
height:86px;
overflow:hidden;
border:solid #000 3px;
position: relative
}
.test input {
height:74px;
margin:8px 0 0 6px;
font-size:74px;
position: absolute;
bottom:0
}
<div class="test">
<input type="text" value="ABC">
</div>
... input jumps up some pixels... WHY?
After a lot of messing around I have finally zeroed in on the issue, phew.
You have set the overflow property of the container div to hidden. But, the inner content of that div, has more height than the parent (counting the margin in, and the font size of the input).
Due to which when a user types something in the input element, the browser tries to center the element by scrolling to it, its just that we aren't able to see it.
And hence we see the "jump".
DEMO with the scroll bar shown, for further demonstration of what is happening.
So I want to use margin-top to positioning lower the
input inside the outer div, while avoiding the jump
You can reduce the font-size and line-height to something which can make the input element fit snugly in the container while retaining the margins. Something like this.
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
I am have buttons like this:
<button type="button" class="img img_button_bla" onclick="...">Bla!</button>
The img class is:
.img {
display:inline-block;
border:0 none;
background-image:url(/i_common/master.png) !important; /*regular sprite image*/
background-image:url(/i_common/master.gif); /*sprite image for ie*/
}
The img_button_bla class simply sets the width, height and background position.
What I am trying to do, is to style the button so the Bla! does not show on the button. I tried text-indent:-9999px; Which mostly worked, but not in IE7. For some reason, in IE7 only SOME of the buttons styled this way do not show up at all, but the space the button takes up is just blank.
I have also tried setting line-height:0;font-size:0 which almost works except for a little black line that shows.
I also tried changing it to block:display which fixes the problem in IE7, but then messes up the layout since needs to be a inline-block.
I have tried searching around, but couldn't find any answer where it is using a button tag, a display of inline-block and using a sprite image.
Anyone have any ideas of what I could do to get this to work? I don't want to remove the text inside the button tag(there where no problems before because they used to be empty) for accessibility reasons and so the buttons will still show up in the mobile version of the site(basically no css on it).
Edit:
I was able to make an example file showing the problem, although in the example it doesn't work in IE8 either. Below works in FF and Chrome
<html>
<head>
<STYLE TYPE="text/css">
#content {
width: 980px;
margin-left: auto;
margin-right: auto;
padding: .5em;
background-color: #fff;
text-size: 1.1em;
}
.left {
float: left;
}
.right {
float: right;
}
.img {
display:inline-block;
border:0 none;
background-color:red; /*using color instead of sprite image for easyer testing */
text-indent:-9999px;
}
.img_button {
width:50px;
height:25px;
}
</STYLE>
</head>
<body>
<div id="content">
<div class="left">
<button class="img img_button">Hi!</button>
</div>
<div class="right">
There
</div>
</div>
</body>
</html>
FYI, you can style input type=submit instead of having to rely on the buggy button element which is NOT recommended because in certain cases it passes the wrong information.
I have a snippet # http://work.arounds.org/using-css-sprites-with-input-type-submit-buttons/ which you can base it off..
<input type="submit" id="submit" value="Get rid of me please">
<style>
input#submit {
border:0;
background:url(sprite.gif) no-repeat 0 200px;
text-indent:-999em;
line-height:3000;
width:200px;
height:200px;
}
</style>
The line-height is for IE and text-indent is for modern browsers. You might need to specify a text-indent of 0 for IE since it doesn't apply text-indent offsetting.
I found an example here of using rounded corners using a single image. I've got this working perfectly in IE7+ and FireFox.
The following is an example tab layout:
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test - 3</p></div>
</div>
The following is my CSS Style:
.corner
{
background:url(../Images/LightCorner.gif);
position:absolute;
width:13px;
height:13px;
overflow:hidden;
}
.inner
{
position:relative;
padding:13px;
margin:0px;
}
.inner p
{
padding:0px;
}
.tab
{
color:#FFF;
float:left;
font-weight:bold;
margin-right:5px;
position:relative;
text-align:center;
}
.tab p
{
margin:0px;
padding:0px;
}
.tab
{
background:#B5B5B5;
}
.TL
{
top:0px;
left:0px;
background-position:0px 0px;
}
.TR
{
top:0px;
right:0px;
background-position:-13px 0px;
}
.TL, .TR
{
margin:0px;
padding:0px;
position:absolute;
}
The issue is that when my div's width is an even number, I end up with a 1px right-hand border, as though the top right div is actually being positioned as right:1px. When the width is an odd number I do not see the right hand grey colour of the tab and the div is displayed as expected.
The image I am using can be found here. A full example can be found here.
Why is the top right div not being positioned correctly at right:0px? Why do I end up with a 1px gap in IE6 when the tab width is an even number?
The issue is that when my div's width
is an even number, I end up with a 1px
right-hand border, as though the top
right div is actually being positioned
as right:1px. When the width is an odd
number I do not see the right hand
grey colour of the tab and the div is
displayed as expected.
There is nothing with your code, it is a bug in Internet Explorer 6. When absolute-positioning things to the right or to the bottom, the actual position will be rounded to 2px, giving 1px "margin" when the total width/height is even (or odd). Unfortunately, you need JavaScript to fix that.
You can check this example (written by me) and slowly resize the IE6 window, pixel-by-pixel. You will notice that the position of bottom and right boxes will be updated only once every two pixels. Another guy has also found and documented this bug on his site.
I've already written one to fix height-calculation when positioning top and bottom, and leaving height as auto. I use this script on this site. In your cause, this script can be modified to calculate the left-offset based on available_width-(right+width).
Have you tried
body {
margin: 0;
}
Try with:
right:-1px;
for IE6
I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.
My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?
Thanks, Matt
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
Float them both left, add the following after both divs:
<div class="clear"></div>
.clear { clear: both; }
That or use padding instead of margins.
.body {
padding:0px;
margin:0px;
}
It is the double margin float bug. Described well here:
http://www.positioniseverything.net/explorer/doubled-margin.html
Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.