For www.zabb.co.uk/test2b.html the displayDiv displays higher up in IE8 than in Safari. How can I make it so they display in exactly the same vertical position? Thanks in advance.
The element is positioned top: 50%, meaning that the top of the box is positioned half way down the visible area of the window (the 'viewport') when the page loads.
This is a fairly standard bit of CSS, and should work fine in both browsers.
However, because the position is based on the size of the visible browser window size, the exact position will vary in different browsers, even if you have them both maximized on the same screen, because the two browsers will use different amounts of space for their toolbars, etc, and thus their browser viewports will differ in size.
This is most likely reason for what you're seeing: the browsers are both working fine; they're just following the same instruction differently because their viewports are different sizes.
You'll also notice the same effect if you change the size of the browser window, and this also means that users with different screen resolutions to yours will see it differently, even in the same browser.
There's nothing intrinsically wrong with this effect -- if you are trying to position something to 50%, then it will naturally be in a different position according to the size of the window it's in. This may actually be a good thing, as it means you can ensure it is visible and centered for all users, no matter what their screen size.
However, if you do want to prevent this effect, I would suggest using a fixed pixel value for the top style, rather than a percentage.
If you want to position it absolute, but positioned in relation to the whole page rather than the window size, then you need to make an element outside of it (possibly your body element) position:relative;. It will then measure the absolute position of your box against that rather than against the viewport.
Hope that helps.
I haven't examined your page, so while there may be problems with the css, I suspect the two browsers are just different.
I would suggest one of these:
1) Design your page so you don't require a certain element to be an exact absolute position (use more relative positioning)
2) Use conditional comments to add a wrapper class to your page and write a new css rule to adjust the div, e.g.
.ie8 #myAbsoluteDiv {
top: /* something different from safari */
}
Related
Using css, how can I make div to incrementally move to the leftmost position, i.e, touching the left screen border, as the browser windows is resized? It means, div should keep moving to the left till it touches screen browser left border, as browser is being resized.
#element {
position: absolute;
top : 40px;
left : 300px;
}
If I provide value in percentage, for left, it shifts gradually to left, but still that percentage is maintained. I want it reduced to 0 or some other lower value gradually, so that there is more space on right side.
So you have a couple options. The most "smooth" would be to use a percentage and then at a certain point that you decide, a certain minimum screen width, you would put 0% or remove float or whatever it is you want to do. There would be a point at which it would sort of "snap into place" but if you make it a small resolution, say one used by phones in landscape, no one would ever see it snap. In order to accomplish this do as #Raunak Kathuria said and use a CSS media query, if you need an example of one I can write one, but it's pretty basic and there are tutorials everywhere. Just search for CSS media queries.
You other options would be to use a series of media queries, each moving the div to different locations. This wouldn't be gradual, it would be at certain screen sizes.
A lot of people when doing responsive design, myself included, get caught up on what the page looks like and acts as it's actually being resized. In reality this isn't important. I would argue the overwhelming majority of people don't resize their browser as they are viewing a website. They browse and move on. So as long as your page looks as you like it to at whatever screen size, the gradual movement is irrelevant. That's why I personally prefer media queries to a flexible layout. It provides the pixel control I desire.
Being new to CSS, I have looked at similar posts on stackoverflow regarding this issue, but none of the resolutions seem to help with my site.
I am using a template for the site and trying to edit the CSS so that the page will maintain one width, and not shift it's elements when the window is resized.
An example page can be found here: (removed link for client)
The content is contained within a wrapper currently set to relative position:
#page_wrapper
{
position: relative;
}
I tried to change it to this:
#page_wrapper
{
min-width: 960px;
}
This doesn't seem to be doing the trick though. When I resize the window, everything still shifts. Any ideas what else I need to change?
Your site is using Twitter Bootstrap: twitter.github.com/bootstrap/
It won't be a totally simple process to do what you want but a starting point would be going to this page:
http://twitter.github.com/bootstrap/customize.html
There you could uncheck the "Responsive" checkboxes and change the Grid System elements to be whsatever you want. It may however be best to leave those as they are.
Then download the css files and replace the ones on your site and see if that helps (ensure you make a back-up of your current files first).
There are a few things going on here:
The navigation has float: right on it somewhere. This means that when its width, plus the width of anything it sits next to is wider than its container, it's going to shift so that it can fit.
Your min-width is too narrow If your min-width is 960px, but the width of your navigation, plus the width of your logo (the two elements that sit side by side), plus any margins, paddings, and borders, add up to anything more than 960px, then it's not going to sit in line. You need to either adjust your min-width, or adjust the calculated width of the elements to fit within that 960px minimum. This can be done either by making margins/paddings smaller, decreasing the text size, setting explicit widths, or any combination thereof.
your elements are probably moving around because you have them in the same tag so if you want your elements to hold their positions you need to use a different for each element and align them to your preference perhaps on css or inside the tag(that's up to you). Otherwise in a div tag if you follow the same procedure for each element you shouldn't have any problems. That goes for sentences too... you need to make each word in a sentence be in between individual
I have a iframe embedded, and when browser zoom in, i don't know what is the base center for zoom. i thought it should be the top right, but it doesn't.
see this website, http://www.deitte.com/IFrameDemo3/IFrameDemo.html
and ctrl scroll, the layout will mess up.
When you zoom in, you're not just zooming in on the iframe, but the entire page. This also affects the top and left offset positions of all the elements on the page, hence why it changes position.
The embed element has it's width and height set to 100% though, which adjusts to zoomed view port, hence why the flash element doesn't adjust it's size.
I think part of the problem here is there is a mixed approach to the UI design; most of it is Flash, with the HTML iframe positioned on top of it, in the perfect position such that it looks like they are seamless (at default zoom). It's difficult to get these two to scale in conjunction with each other in this case; there's nothing to bound the size and position of the iframe that is controlled by the flash element.
I am no flash expert, but I would hazard a guess that the flash application currently is not aware of the browser zoom level and is therefore not scaling correctly either; while it's width and height change according to it's container's size, it's font sizes never increase or decrease (amoung other things).
Have a look at the homepage: http://benjaminpotter.org/clients/c3carlingford/ now if you make the browser fill the screen like I do (1680x1050) the footer seems to gain an extra hundred or so pxls? Here is my proof:
Normal View:
When I make my browser size bigger:
Its really odd - I need to work this one out.
When you have a look on an IPad its even worse.
Ideas?
Your footer isn't actually becoming larger. If you check out firebug and inspect the element, it is still 100px. Your browser is actually allowing you to scroll past the end of your page, and since your footer's position is relative to your page, it stops when your content does.
You may want to try out a "Sticky Footer" solution... one can be found here: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
This extra space is not footer (that size doesn't change), but whole html/body, but unfortunately I don't have more precise idea. Error still occurs after disabling JS, so it's not the cause.
The weirdest thing is that it seems to be connected with state of window (is it maximalised or not).
Looks like the height of that #wrapper ends up being around 1354 px. Whenever your screen extends past that height, you get the extra space. Using chrome dev tools, change the background color to something highly visible (I chose red) and then set the #wrapper height to 1500 px or more while you have your screen size maximized. You can see that you are no longer able to scroll down past the bottom of the div as the height of the div is > the available screen resolution height.
I'd take a look at <span id="followme">. In the CSS (style.css), #followme is set to have a height of 100%. If you zoom way out in Chrome, inspect the #followme element, and change your browser size you'll notice that the followme element is actually covering up a lot of the page.
It may not be the only factor you need to look at, but seems to be the most likely culprit when examining it.
I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute.
When the user resizes their browser to a very-small size, this element covers up other content on the page.
Ideally, The element would continue to float at the bottom of the browser at normal and large sizes, but if the browser window were to be shrunk too small, the browser would force a scrollbar, instead of moving the floating element any further.
Essentially, I want to tell the browser- No matter how small the window is, never render the page smaller than 800x600.
You could set html, body { min-width: 800px; min-height: 600px; }
YMMV in different browsers though.
It really depends on whether the floating footer needs to always be visible or if it can scroll off the bottom when the browser window is small.
I think some javascript might be easier to manage than a css solution. Keep in mind that min-width and min-height don't work in all browsers.
You can use jquery to make this easier. The
$(window).resize( callback )
can be used to set a callback function to handle window resizing.
I use the window dimensions as part of my resize code also.
var wh = Math.max(600,$(window).height());
var ww = Math.max(800,$(window).width());
Then I can set the size of a div in my page based on the window size.
$('div#mydiv').css('width',ww);
You can also set the value to auto to unset your specified value.
I know it is a bit of a cheat but you can use the old trick of putting in an image that is of the required minimum width in the floating element, and the same colour as it. It is then effectively invisible, but prevents the element, and therefore the whole page, from shrinking.