I have built a slider which expands to fit the window, and have #prev and #next pager buttons (which are highlighted in green). As the slider changes size I need to have these buttons positioned with a top margin as a percentage value. This is fine in Firefox but in Chrome and IE it doesn't read this margin. If I put it as a px value it works fine but obviously doesn't adjust to fit the slider size. Please advise...
http://subzerostudio.com/Clients/perkinreveller/index.html
Chris, instead of regularly changing the margin-top value, you could instead modify the top value regularly.
Since you've positioned the two buttons as absolute, it's better to work with left and top values instead of margins - frankly because margins don't make much sense once you're at liberty to use left,top,right,bottm values in CSS.
Hope this helps you. I tried removing margins in both Chrome and FF and they both looked the same after that. Once you get to this position, you can then modify the top values.
You could try absolutely positioning the buttons with a "top" value of 50% then a negative margin top of the height in pixels of the button.
If you make the buttons a relatively small fixed size that doesn't change then this will be do-able.
That seems to be how Flexi-SLider works and that is one of the leading responsive sliders out there.
http://flexslider.woothemes.com/
Related
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
I have an unordered list (displayed vertically) that uses background-images to show a graphic inside each list item.
It looks fine until the user zooms. Once the user zooms, a tiny gap appears at the bottom (inside) of some list items. The gap appears because the background-image has become shorter than the list item, but the are both set to the same height (44px).
See this example. I added a red background to each list item to make the gaps easier to identify. Try zooming in once with Google Chrome.
http://jsbin.com/okozaz/2/edit
Is there a way to remove the gap?
I can't use background-size: cover because the background-image is part of a sprite.
Probably due to some value rounding error, Chrome renders the <li>s differently when zooming in, resulting in some being 45px high and some 44px. However, a workaround would be to not set height and line-height on the li but leave that to the anchor element.
See jsfiddle
Reduce height from 44px to 43px.
It seams to me, this helps in your example
I hope there is a solution to this IE7 issue. I put an example on jsfiddle:
http://jsfiddle.net/fCqm6/
If you switch to the IE7-Mode in your IE you will notice that the block inside the cell is positioned all the way to the right.
I wanted however it to stay positioned in the middle (as it is with Chrome or current IE version).
If I set the width of the box to a fixed value, the box is positioned quite differently. But I need to set both the width and margin as a percentage if possible (the end result is a sort of timeline where dynamic elements need to be positioned and stretched based on their duration)
Is there any hack or workaround so that these percentage margins work inside a table apart from javascript?
Thanks!
Well, I figured this out myself:
By adding a div between the table cell and the box with a set width of 100% IE7 renders the box correctly:
http://jsfiddle.net/fCqm6/1/
I'm having issues in Chrome where paragraph text is overlapping floating elements. The floating elements are pushed down to force an image in the lower left-hand corner of a container. I've setup http://jsfiddle.net/VMJGX/ which recreates the issue. The text overlaps the .indenter elements in Chrome but not in Firefox or IE. Is this a Chrome bug or is there a better way to accomplish this?
Chrome Version 21.0.1180.82
Firefox Version 15.0
The problem looks to be that the top of your indenters are getting caught in the middle of lines because of the varying heights compared to the linehieght in the paragraph. I'm guessing FF and Chrome render the heights slightly differently. If you want continue to use the same method you are using, I would recommend getting rid of the height class styles and instead just use nbsp; to fill the indenter divs so you get height that is consistent with the line height of the paragraph.
Here's a fiddle with an example.
UPDATE:
I updated the fiddle to use spans as the indenters inside the paragraph (instead of divs) and put the width properties back in. Because of the margin-bottom on the paragraphs and the clear on the indenters, you need a matching margin-bottom on the intenders so they will stay aligned.
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!