Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
Related
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I'm trying to accomplish something specific around platform constraints I'm under.
I created a somewhat self-explanatory jsfiddle of the problem at http://jsfiddle.net/MrV5M/4/
The specific problem:
On Chrome, the right border of the input box is cut off.
On Safari, the width of the content class cell exceeds the container so it spills over the border.
On IE9, the label doesn't float to the left of the content div
The main reason I care about Safari is because I'm working on a JQuery Mobile/PhoneGap app which is also a web app. I'm only supporting modern browsers, but this is driving me nuts. Normally I'd just use a table for the container, but the text-overflow: ellipsis styles on the content div don't work when inside a table. (Basically, I'm trying to keep the content to a single line and have ellipsis without enforcing a fixed width or calculating a width with Javascript)
Anyone have the l33t CSS skills to make this work? I sure don't... :)
Just add this CSS to your Stylesheet, and get peace of mind on your issue :D
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You may not like this answer. I made some adjustments in the css which fixes Chrome and IE9 issues. Take a look,
http://jsfiddle.net/MrV5M/11/
There are many ways to do what you are trying to do, but if you insist on using 'flex' stuff which is largely un-supported (even in the majors see here), you'll need to add the vendor prefixes to flex.
e.g... -webkit-flex, -moz-flex
Also, I don't think you need to be setting widths on elements that have the flex property.. not positive though.
So your browser issues:
-IE doesn't support flex at all so you're label won't float unless you use a float.
-The reason your input/content is spilling over the container and getting cut off is not really anything to do with flex.. but the way css works.. setting an element to 100% width means setting it to the width of its parent. But by default, css doesn't count the padding/border-width as part of that width. So you end up getting 100% width plus the L/R padding and border. But, since you are only supporting modern browsers.. box-sizing:border-box; to the rescue. Google it for details, but putting it on your input element should do the trick.
Some strange is happening in applying the styling of css code in some browsers...
Please take a look in the example...
http://jsfiddle.net/3FepW/3/
In Chrome the green div is bigger, than in Firefox, I really don't know what is the problem, I think in Firefox it displays as it should but in Chrome and IE9 it displays different.
I tried a lot of changes, can't resolve this for days.., I can use height: 100% or overflow hidden but I can't use one of them because: overflow hidden hide everything inside, but I have some draggable/sortable elements and height: 100% because I have a resizable function that will enlarge the yellow div...
The problem comes from something known as margin collapsing. Chrome and IE are rendering it correctly. Not sure what Firefox is doing.
There are many questions in here regarding the same problem. I've answered one of them here - Adding CSS border changes positioning in HTML5 webpage
Basically top and bottom margins between siblings, and children and parents collapse to highest of them. The float: left you put on .c1 prevents that from happening . The margin-bottom on .c3 gets stuck inside .c1 and that's why it gets bigger (that is, 'that's why .c1 gets bigger').
Try adding overflow: auto; to .c2- another way of preventing margins from collapsing - so c1's margin gets 'stuck in' .c2 instead - I'm assuming that's probably what you're looking for.
Here's a fiddle -> http://jsfiddle.net/joplomacedo/3FepW/5/ .
Remove the margin-bottom: 10px; from .c3 - this is what causes such behavior. As far as I know such issue is often referred to as 'collapsible margins', please, somebody correct me if I'm wrong.
I followed this css-tricks how-to, to implement a sticky footer. I was successful but noticed that the (min)-height:100% has an negative effect on when I try to apply a margin-left of right to my primaryContent div.
At a certain height it causes a block of whitespace to show up. The only work-around I've found so far is to use padding instead of margin.
The height that this happens can be seen in my screenshot below. And I also notice if I remove the "background:inherit" line from #primaryContent div that the background of the container div stops at the same height that the margin white space problem occurs.
Any type of help is appreciated, links to the source code are:
default.css
index.html
reset.css
Screenshot:
very strage how they let that slip here is a fix :D
look for this in the default.css
html, body, #container {
height: 100%;
}
replace it with
html, body {
height: 100%;
}
Im not completely sure what the explanation for why this happens it could just be an css bug but there is always a work around.
bada-bing your done!
Click the "Reference Link" at the bottom of your example URL....it points to the original source: http://www.cssstickyfooter.com/.
If you click the "How to Use the Sticky Footer Code", you'll find that because the way their/his solution is written - padding for height attributes is proper - not margins.
I read through the documentation a week or so ago - thought I saw that caveat. <find>+padding will take you right to the notation.
let's say I have a div with right-aligned text and a fixed with:
div{
width: 30px;
text-align: right;
}
is it ok if I increase the width of this div to 35px trough padding, to move the text away from the edge and avoid adding another element inside of it?
div{
padding-right: 5px;
}
I mean would any browsers behave weirdly about it?
The result would be exacly what you said: a div of total width 35px. It seems to me you understand what you are doing, but there is never a substitute for actually testing in all your target browsers.
While this small piece of CSS looks innocent, it can change the elements around them in a way you didn't expect.
No It'll be ok, in every major browser.
Internet Explorer in Quirks Mode would have a problem with it due to it's box model.
If this is a problem, I would use a nested div that uses margins instead.
Your other option could be including an IE specific CSS file.
This is an area that we are getting a lot more control over with css3. Have a look at
http://www.quirksmode.org/css/box.html.