http://jsfiddle.net/Wdrgv/
So I want to put this bad animation at the bottom of the screen. Simple enough, right?
Nope. When I put position: absolute on the marquee-container, the animation seems to disappear off the screen.
I figure I'm doing something really stupid here, but I can't see what.
The problem is that when you apply the absolute positioning to the container, 'display: block; no longer stretches it to 100% of its container's width, and since it has no relatively-positioned contents to define its dimensions, it relies solely on explicitly defined values (height: 24px) or zero if none exist. I've fixed the problem for you by defining width: 100% for your containing element. I've also added a few tweaks to make the size and behavior of your marquee a little more robust given varying text lengths:
http://jsfiddle.net/Wdrgv/2/
I was able to get it to work by changing from absolute to fixed and applying bottom:0px; to it.
See here: http://jsfiddle.net/Wdrgv/1/
Related
Ok this has me completely stumped, have been trying to fix for days with no avail.
I have used cbpFWTabs.js to split my content.
It however seems to behave very odd in that it ignores my height parameters and will set the div to the content size.
Only way to stop this is to set a fixed height, but i would like the div to dynamically resize to fill the rest of the screen and display scroll bars if it exceeds the content-wrap div (keeping the menubar fixed).
I've checked all parents, it just doesn't seem respond to anything i try :(
Example here:
http://numerco.com/wp-content/uploads/NUA/scratch.html
I'm sure its somthing trivial i missed but its driving me insane.
Thanks !
Whenever you have height: 100% on an element, that means it will inherit the height of its parent.
Thus, the first thing you need to do is set height: 100% on the .container so that its height takes up the full height of the body.
Then, set height: 100% on the .container > section. Then, the children know to stretch to the correct height (which has been propagated down from body).
This should solve the question in your OP. However, it seems like there's still something fishy going on with your heights. Feel free to ask another question if you need to.
I have an element that is 50% width, and inside that element are two more elements, one of the elements is a fixed 100px wide, and I want the other element to take up the rest of the containing element, but cant work it out.
The element I want to take up the remaining space in the container has this css
#header_search {float:left; width:50%}
Obviously 50% with isnt right. But not sure what it should be.
https://jsfiddle.net/mux7e7b4/
How is that done?
Give the element you want to take up most of the width the following CSS,
width: calc(100% - 100px);
Here's how it would look in your example (updated your fiddle)
Note that the input element has a border around it which sets off calculations, so box-sizing:border-box; is necessary to include the border within the total element width.
Calc() is not recognized in IE8 and below.
It also doesn't work on some older Android phones that haven't been updated.
Best practice is to use some kind of a fallback for graceful degradation, depending on your specific use-case.
I have a strange problem....
Div should expand to 100% of available space by default, but its not the case.
I don't understand what's going on, even if I put display:block it's behaving as automatic width (relative to content).
I appreciate any help.
Thanks in advance.
http://jsfiddle.net/T3arP/
The effect I need to achieve is let the box with green border absoluted or fixed to top of its container, so you can scroll keywords but title will remain there.
When you absolutely position something (that's using position: absolute or position: fixed) width: auto no longer expands it to the container's width. The rules from which the width is actually determined are complicated*. That's why many people consider it a good practice to set a specific width on those elements (absolutely positioned ones, that is).
*you can find out about those rules at http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width)
As has been said, once you absolutely position an element, it loses the parent's tag association in a sense. So you could do something like this maybe.
http://jsfiddle.net/T3arP/1/
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }
The font size I need to match the design I have is 85pt, which is extremely large. In IE6 and IE7, my design is affected because the divs that contain these elements become larger than they normally are, and as a result, elements under these are pushed further down, somewhat breaking the design. I have the height defined for these elements and when I decrease the font size, the elements begin to shrink to the correct size. I've added line-height: 0; to the element and this works in all modern browsers.
Unfortunately, the design I'm working on cannot be shown publicly, but I was hoping to get some insight into other possible techniques that I could try to get the design to render correctly. The height of the parent element is 144px, which includes 10px padding on top and bottom and a top and bottom 1px border.
Unfortunately there's not a lot more that I can add to this, but I'll include whatever info I can if asked.
line-height:0 is a great start. However, I'm a little concerned about the 10px padding on the parent element. Whenever you mix padding with IE, you start to lose control over width & height.
I'd start by removing the padding-top on the parent and convert that into a margin-top:10px on the actual child element. If that still gives you trouble, remove the margin and try a position:relative on the child with a top:10px.
Finally, try adding a overflow:hidden to your parent element to force it to not budge when the font-size gets larger.
All this depends on what your child element actually is. If you convert it to an inline element (like a span, em, or strong) it might help alleviate some rendering issues, depending on your predefined styles.
Another thing to consider - are you using floats? Sometimes you'll get a double-float issue with IE and floats. A quick google for "IE double float" will show you why.
Does that help?
Convert the font-sizes to pixels and use px instead of pt. Make sure there that padding, margin and border is 0. Verify that there are no whitespace in your HTML except for between words. Whitespace can end up being displayed as a newline or space, making elements bigger than intended. Also don't set line-height to 0, set it to either auto or the same as font-size.
Thank you all for your input. Originally I needed absolute positioning on the element in question, while the parent element had relative positioning. However, using this with line-height: 0 caused the text to disappear in IE6 and 7; after trying to figure out where the text was initially, I removed absolute positioning and decided to leave the text left aligned in IE6 and 7, which affected the position of other elements as a result. I revisited the original absolute positioning and added border to the element to reveal its location. Doing this showed that it was exactly as I defined it: an element with a line-height of 0px, so the top and bottom borders were next to each other. For IE6 and 7, I defined line-height: 100%; and my text was almost where I needed it. I added top and the needed pixels and now my element is in the correct position with its line-height not affecting any of the other elements because of the positioning.
Thank you all again for your assistance.
My first thought when reading your post was to adjust the line-height, but since you've already done that, I'm not sure how much more can be done. From your summary, I gather that the design cannot be modified to account for the large font sizes.
Another answerer recommended using pixel sizes, but I would recommend using ems as they are percentage dimensions and will be more consistent across browsers, screens, and resolutions.
Line-height can be left as 0 (or set it to the height of the parent element), but you will likely see the text floating over other elements if the text's height surpasses the line-height.
Any possible way you could use an image for the text instead? That's really the only fool-proof method for getting all browsers to look consistent.