I am trying to add padding-right to an input so that I can place an image in that corner and not have the text flow behind it. It works fine in Chrome & Firefox but not in IE.
I have seen people recommend using float:left; but still it doesnt work.
See the problem here: http://jsfiddle.net/4zRRt/
That is not how you want to do that (probably, I am guessing, the button image doesn't work for me obviously).
I am guessing you want an input with a nice submit button which is always on the right.
This is done with a parent relative element and the button who is absolute with a right offset of 10px (to accomedate for the extra space the shadow requires). And a top set to 0...
Here is a jsfiddle of that:
http://jsfiddle.net/sg3s/4zRRt/10/
I put some extra display:block; in there to make the inputs block instead of inline, this will prevent other rendering problems too.
Related
I have a div inside a fieldset, and I am trying to place a button to the right of it. However, the div has a persistent right margin that I cannot seem to control. If you look in the image below, you will see:
1. the HTML,
2. how it appears in the browser with the visual overlay provided by chrome dev tools (note the large orange right margin),
3. the css (note I am explicitly setting "margin-right: 2px;")
4. the box model from chrome dev tools (note the right margin is showing as "2", but still it is much wider as shown in #2)
https://i.imgur.com/2rPdNs5.png
How do I get rid of that right margin!?
Thanks.
Try setting display: inline-block; for #ageYearFieldset div.
Try adding float: left to both div and button to have the button placed on the right of div.
Also, you may want to try bootstrap's input-addon out for accomplishing it.
The margin that is visualized by Chrome dev tools may be confusing, but the thing you should rely on is box model itself.
I have a text input that thinks there is another div element floating over it. When you hover the mouse over, the cursor stays the same. Only a few small parts of the text input can be clicked on.
When you inspect element it shows that it "thinks" you were hovering over the header-resize .
See it here:
http://jsfiddle.net/HxHDK/2/ (Sorry I know a lot of resources are missing, but the problem is still there)
The text input that is bugged is the To: field. This is only happening on google chrome.
I tried adding z-index attributes but did not work.
Any thoughts?
weird behavior, but can be fixed by adding overflow: hidden; to .header rule declaration
Removing the negative top margin on .content solves this indeed weird issue.
Remove the height attribute from header and the problem is gone.
Ok I am attempting to round my corners via CSS so I can drop a bunch of images from an older style template I am remastering for a client. The idea is use something that can fail gracefully. Which I think it would generally speaking. However in this case it appears the the top left corner of one of the elements is not rounding like the rest of the same element is on its other corners. I am using a class to pass this to elements and this class works on all the other elements flawlessly its just this one element..
content_wrap to be more specific. Its the element that all the other elements reside in.
Here is a jsfiddle version of it.
http://jsfiddle.net/8qZze/
anyone have any ideas/suggestions?
You can add overflow:hidden to the #content_wrap to stop anything from overlapping the corners from inside. Live example: http://jsfiddle.net/8qZze/1/
#content_wrap{
overflow: hidden
}
I removed the ".white" rule and it worked, the child "content_left" has a rectangular shape ant it goes over the rounded corner of "content_wrap", try to specify some margin to leave more space for the rounded corner and everything will be fine.
Or try tw16's advice with overflow (forgot about it :) )
I am trying to get an expanding div to appear correctly in IE7. What is happening, is that the div will appear behind the button instead of pushing the div down to accommodate the textarea box. I have tried combinations of clear, position, but still the same. Can someone check my code and point out my error. It works fine in IE8 & FF (Even IE6 :-)) just 7 that is causing problem. Many thanks
Demo code: http://jsfiddle.net/P5NQt/3/
Remove the height property from the .fb-input-right-conradio-back rule.
demo at http://jsfiddle.net/gaby/2jBbu/
Something else (irrelevant to the original issue), i would suggest you wrap the Yes text in a <label> with a for attribute, so the the whole text will act as a button for the checkbox..
<label for="messagetick2">Yes</label>
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.