Page:
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr
Same page but linking to the anchor
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr#opportunites
My left and right sides move up.
So i'm using the -4000 margin and 4000 padding method so that my left side has a white background all the way to the bottom no matter how long/short the right side is.
This left and right side arer within a container that is overflow:hidden;
This is the only thing i can see that could make theses elements disapear. Without it tho my page doesnt work correctly.
what can i do to fix this? Doesnt seem to be a normal behaviour for an anchor.
thanks for the help in advance
#topcontent {
position:relative; /* required for ie or 4000px padding/margin visible */
background-color: #231f20;
border-left: 1px solid #231f20;
border-right: 1px solid #231f20;
overflow:hidden;
}
#topcontent .left {
position:relative;
width:703px;
margin-bottom:-4000px;
padding-bottom:4000px;
background:#FFF;
}
#topcontent .right {
width: 245px;
float: right;
margin-bottom:-4000px;
padding-bottom:4000px;
}
Ugh, well I don't exactly have an answer for you - I tend to design my columnar layouts using the background image method, or same colored sidebars. However I did find some documentation on this particular "bug":
http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
I honestly don't know of another alternative method besides a javascript solution, which I always try to steer clear of. You would have to do some serious design refactoring for the background-image to even become an option.
Best of luck, and I hope that link helps a bit - they have some workarounds
Fastest solution is to give padding-bottom to the overflow:hidden element. In your case it will be
#topcontent { /* Any element with overflow: hidden property */
padding-bottom: 18px; /* Value in px that will work for you */
}
Related
I wanted to make a box for my website.
When I made it, some text moved down. Then I checked in Chrome dev tools and saw the box had a margin. I do not want that margin!
If I'm making any sense to you, please help!
#route{
height:300px;
width: 300px;
border: 1px solid black;
padding: 0px;
margin: 0px;
}
<div id="route"></div>
If there is a margin, then it may be inherited from a parent element. You should be able to pinpoint what CSS is causing this, by toggling the active CSS items within the developer tools you used to inspect the element. You may want to check out https://developer.chrome.com/devtools for more info since you haven't supplied enough code here for anyone to be able to help you.
Can you share more on this ?
What random margin do you get?...from my suspicion its that you are getting something like this
Browser window with margin
i.e. Your borders do completely touch the edges of your browser and when you inspect elements you get a body with an extra margin.
body {
display: block;
margin: 8px;
}
Most browsers do set a margin on the body element and you can easily remove this by using the code fragment below
body {
margin:0;
padding:0
}
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
I'm having an strange issue with some css and IE9.
I'm not sure but I can bet you is the first time you see it.
All the three images are in a div with a class.
This is the CSS for the class:
.imagen_pro{
border: 1px solid #CCC;
width: 180px; height:160px;
text-align:center;
background-color:#FFFFFF;
}
.imagen_pro img{
max-width: 160px;
max-height: 160px;
}
This is happening is some cases, i mean, not in every IE9 this is happening.
I don't know what's going on. If someone could help me i'd really appreciate it.
Thanks.
Hi all and thanks for answering. I've found what was going on. it happens that each one of this image are inside of an anchor tag and with that css the img was overflowing the so i had to apply some css to the and make the div container a little taller. thank you anyway
I'm betting that the pics are improperly positioned/sized. They're bigger than the max-size of you element (max-height: 160px;).
Use firebug, select the pics and fiddle with their height and position.
Also I see an error in you code. You have both :
width: 180px;
and
max-width: 160px;
These are contradictory statements.
I'm not able to reproduce your issue in my version of IE9. However, I would be willing to bet that the issue is that your images are popping out of the top or bottom of their container and are being drawn over the border.
Try adding overflow:hidden to the .imagen_pro class.
OR
If that doesn't work, either expand the height of the .imagen_pro to be, say 162px.
OR
Change the max-height on the images to be 1 or 2 pixels smaller. For example:
.imagen_pro img{
max-width: 160px;
max-height: 158px;
}
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).