I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.
Related
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
Isolated test case (view in IE 7 or IE 8/9 in IE 7 mode)
Viewing this page in IE 7 is causing my width value to be ignored. If you remove the padding value, the width is properly applied, but when you add in the padding, it causes the entire page to grow, and it treats the padding almost as margin. The larger the width of the page, the larger the blank area to the right of the element. I've been unable to find which bug this is, and, more importantly, how to fix it. Has anyone seen this and does anyone know a solution?
Things I've tried so far:
zoom fix
display: inline-block (recommended for double vertical padding issue)
It isn't line-height (it's a width issue...)
Screenshot of the issue:
This div should span the entire width of the page, and no more, but you'll notice the scrollbar here:
And the result of scrolling to the right:
This should not be there.
Examining the element in the browser tools shows the width to be incorrectly the full width of the page, instead of the full width minus the padding.
Disclaimer: I'll ignore the functional requirement and your comments on the other answers and just concentrate on the concrete problem.
This IE7 specific problem is caused by using an offset (e.g. top, right, bottom or left) on a relatively positioned element. If you offsets a relatively positioned element, then it will basically still retain the whole space of its original position. Note that this doesn't happen when offsetting absolutely positioned element.
Before the left offset is been applied, the relatively positioned element is due to its width and and the right padding completely out of the viewport and hence a horizontal scollbar will be generated. After the left offset is applied on the relatively positioned element, you're basically leaving a space of the same size as the offset on the other side of the offset, still outside the viewport.
A bit sane webbrowser will during redrawing however discover that there's nothing visible outside the viewport and hence hide the scrollbar again. IE7, however, isn't that smart enough and retains the scrollbar.
After all, using left offset was technically been the wrong solution. You should in first place have used margin-left instead of left. Unlike the offset, the margin doesn't leave an empty space on the original position, but really pushes the whole element to the desired position.
So, here's how your script is been fixed:
$('#el').css({
'width': document.body.scrollWidth - 200,
'padding-right': 200,
'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});
By the way, I wonder how that float: left; makes sense in this construct wherein you apparently want to simulate a 100% width. It'll probably be for other purposes not visible in the concrete example.
You can solve this without using javascript for calculating width, and no padding, instead use position: absolute. Here's an updated fiddle. It will work in any browser
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left:0;
right: 0;
top: 0;
}
http://jsfiddle.net/LRpHq/7/
I was having this problem with a skeleton.css implementation. Specifically, my #header was taking the width of body, which took the width of html. The remaining content had a set-width of 978px. So when the window was smaller than 978, the background of the header would only render to the width of the viewport. i.e. - if you started the render at 500 wide, that's all the wider #header would get. Dragging a wider width of the viewport had no problems, but right scroll cut the header to the size of initial viewport.
My fix: html,body { min-width:978px } /* your width may vary */
Since you seem to be fine with using Javascript, adjust your resize() function:
function resize () {
$('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'});
}
Fixed the original post as it was off by miles.
edit:
Tested in a sandboxed IE7 and it works. (what can i say, i go out of my way to get something perfect, also am new around here so that bounty would really help to be very honest) to also note that it works natively in IE7, IE8 and IE9, FF3.6, Opera 10 and should work in Safari with no problem, Chrome didn't get mentioned as it's my default browser and it works, no doubt about it.
Here is the JS:
function resize () {
$('#el').trigger('resize').width('100%');
}
resize();
and the CSS:
#container {
width: 320px;
border: 1px solid #000000;
min-height: 500px;
margin: 0px auto;
}
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left: 0;
}
i found solution for similar problem here. see if it can helps you too.
I want to absolute position an iframe and define it's left, top, right, bottom offset:
#x {
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
width: auto;
height: auto;
border: 2px solid #aaa;
z-index: 100002;
background: #abc;
display:none
}
I found the left and top value is respected while right and bottom value is ignored. When I don't have a left and top value set, then the right and bottom value is treated correctly. Check this fiddle: http://jsfiddle.net/7fTEF/
Any idea?
Note I don't want to set width and height of the element because I want it be relative to the viewport, neither do I want to set the width and height to a percentage, I just want to keep the border offset a fixed value, say "10px" here.
Not sure why, but, after a little playing around, it seems like IFrames don't like that style of positioning for some reason.
One solution I could make was to container it in a div, and get the div to the size/position you want.
http://jsfiddle.net/7fTEF/1/
Also, despite being 500x500px, the body background color will keep going to fill up all the space in a page, but the sizing of the div is still correct. (resize the body to check it out... )
You can not set both left and right or both top and bottom property. edit: Turns out you can actually provided you are positioning absolute, as i just learned from this article: http://www.alistapart.com/articles/conflictingabsolutepositions (all credits to #thirdender for the tip!). Iframes seem to behave differently though.
You could achieve what you are after like this: http://jsfiddle.net/7fTEF/2/
Note that there is no absolute postioning required. Also i used the css3 property box-sizing. You will have to add browser specific prefixes as explained here http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Note that this solution will not work in old browser, you will end up with scrollbars. If you want to make it fully browser compatible i think yoy will have to resort to some js, but then you have problems with people who have this disabled. You could also try a combination of both. It all depends on your audience and how import you find it...
You can find the container size via javascript and after set the iframe size.
I found this page here http://www.alistapart.com/articles/conflictingabsolutepositions/ that explains a couple of solutions that are also compatible with older IE browsers using just CSS. Otherwise some JavaScript calculations would probably be required.
I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/