I have a problem positioning a DIV with Chrome on this page. When I enter text into the red DIV it moves it down (doesn't occur in Firefox).
This shows how it was before putting why into the red DIV.
The height of the boxes is not being considered for vertical alignment (perhaps because the height is applied by the id and the display:inline-block is being applies by a class?). To solve this just add vertical-align:top; to your .box class.
BTW, since the heights are all the same, it might be easier to just put these in a container div to control the width and use float:left;
Related
I have these inline-block elements with a set height and width and overflow:hidden. On chrome, it lines up nicely, but in an older webkit browser, it does this:
.item{
display:inline-block;
height:72px;
width:144px;
overflow:hidden;
text-align:left;
}
If I change them from overflow:hidden to overflow:scroll, they all line up (and overflow: auto makes them all line up except the ones not long enough to need scrollbars)
It almost seems like it's hiding the overflow by just making it invisible but still saving that space. Is that what's causing this?
You need to add a vertical-align: top rule to .item, as inline-block elements will align via baseline (text bottom aligned) by default.
I'm using this code on Chrome and ie :
<div id="infobox_mainpic" class="DetailsMainPic" align="center" valign="middle">
<img src="pictures/3a8ca06d8d51e76243f3d4efdc710d72.jpg" onerror="this.src='css/noload.png';">
<div class="mainPicArrowLeftDetails" onclick="return NextPic(this,-1);"></div>
<div class="mainPicArrowRightDetails" onclick="return NextPic(this,1);"></div>
</div>
the main div (infobox_mainpic) has fixed dimension 600px*450px.
My purpose is to center vertically and horizontally the img inside. Note that all image can't be wider than 600px and higher than 450px (i have a treatement).
The two div "mainpic..." are supposed to be position absolutely from the top of the main div like on this picture
To achieve this, I used on the infobox_mainpic
display : table-cell;
vertical-align : middle;
text-align:center;
position : relative;
And on the arrows, i use
position : absolute;
top : 130px;
This works on Chrome and IE.
The problem is that position relative doesn't work on Firefox. I tried to wrap everything inside a div and apply the position : relative but now, the arrows are not starting from the top of the main div but from the top of the image. If I set width and height to 100% for the wrapper div , then the image is not vertically aligned...
Do you see a solution ?
After some tests, I have found a solution.
instead of putting the div wrapper inside infobox_mainpic, I put infobox_mainpic inside a a div with a relative position. This way, the arrows are correctly positioned and the img is still inside the table-cell div so it is correctly centered.
This works on Chrome and IE. The problem is that position relative doesn't work on Firefox.
I think that's because firefox is still following the CSS 2.1 specs for this,
"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."
Although that has changed in CSS 3, it seems it's still to early to rely on that.
use display:inline-block instead table-cell. relative positionning will not bug anymore.
Set line-height equal to height of your boxe and img as vertical-align:middle;
arrows could be standing outside the box. inline-block as well and vertical-align:middle; so they stand aside and at middle center of the box.At this point , position:absolute is not necessarry anymore.
demo http://codepen.io/gcyrillus/pen/iAlms
going offline
I am trying to design a relatively positioned div, which in turn would consist two divs. None of the child divs have a fixed height, but they vary with the content, so the parent div expands with the taller of the child div. Now the design works fine, but when I was analyzing the code with Firebug, I saw that on hovering over the body tag in Firebug, only a short portion of the entire screen at the very top showed as the body. The side-panel confirmed it, the width of the body is ok, but the height is 0. That means the height of the parent div is 0, but Firebug tells me it is not, it is some 560px. How is it possible? I know elements don't expand with their content if the content is absolutely positioned, but here the child divs are relatively positioned, so why doesn't the parent expand with its contents? The fiddle is at http://jsfiddle.net/Cupidvogel/y79NS/6/. Th screenshot (please zoom to understand my point! It is when I try the code as a complete HTML page in Firefox):
In your CSS, div.clear - which you are using to attempt to clear your floats - is itself floated left. That means that it is not part of the document flow either and therefore cannot clear anything.
Removing float does the trick:
.clear { width: 400px; clear: both; position: relative; }
Alternately, if you want div.clear to be floated for some reason, there are a wide variety of other ways to clear your floats.
EDIT: div.main has a height of 520px because it is floated and floated elements "snap" to the dimensions of their children. If you floated body left (please don't; it's not a good idea), it too will "snap" to its children's dimensions and have a set height of 520px.
What here happens is normal browser behavior, you float divs, so there are not in the 'normal' flow anymore because of the float property.
So body is height 0, because body can not calculate height of elements that 'not in there'.
Move you div class="clear" out of the div class="main" and remove the float property aswell on the div class="clear", problem solved.
view: http://jsfiddle.net/y79NS/8/
So, I'm experimenting with using rounded-corners in CSS3 (not in IE, don't care if it works there), and I have the DIV where all of my content lives looking quite nice. The problem I'm having is that there are child DIVs that are not getting "masked" by the parent's rounded corners. I'm not looking for the child to inherit the rounded-corners. I just want to have any content inside the parent to not be visible where it is rounded, as if it were masked. I tried using "overflow: hidden;", but that doesn't seem to do the trick.
Does anyone have any ideas how the children of the rounded-cornered container DIV can be sorta masked by the parent DIV? If it's of any use, I'm using "position: absolute;" on the parent DIV. Not sure if that will make any difference.
Thanks!
Try adding overflow: hidden; to the parent element. This fixed the problem for me.
Use padding on the div. If you make the padding equal to the radius you shouldn't have to worry about any overlap or the content appearing in the rounded areas.
<style>
.round{
border-radius:10px;
padding:10px;
background-color:red;
}
</style>
<div class="round">Rounded Corners</div>
Here is a helpful site that talks all about the CSS3 Border Radius: http://www.css3.info/preview/rounded-border/.
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.