This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Text input with z-index inaccessible by click in IE
If you follow this link you can see that i am trying to show a text-box inside a div on top of image which is draggable.
http://jsfiddle.net/N87CX/27/
I have 2 issues
In IE 8 I am not able to click inside
text-box.
Also some problem with size
of text-box when the div is re-sized
it does go out of the parent div.
Can I restructre this peoperly so it solves both these issues ?
Thanks.
This is quite an interesting problem.
The first part about IE8 appears to me to be an issue with the transparent background within the text area. If you apply a colour to the background then you are able to access the text area as expected. To make this a little more intriguing - when you add default text, you can access the text area only where this text already exists.
So I would recommend investigating how IE 7 and IE 8 handles / creates transparent backgrounds. And maybe question whether it really needs to be transparent (if you want the easy way out).
The second issue that you mention about the div extending over the parent div can be fixed by adding overflow: hidden to the parent div - which in this case, you should add it to the #dragDiv item within your css. This is often the case when using floating elements within a div - you should read more about floating elements and clearing them ( clear: both ) as they are the cause of so many problems if not handled correctly.
I hope that helped a little and I would be interested to know if you find the cause of the first issue!
IE has a bug with transparent backgrounds on inputs and textareas, to get around the best thing to do is use a transparent.gif for the background
then next I found that IE will not accept a 100% (or any percent) height on the textarea, even if the parent div has an explicit height, but if you set the height on the textarea all appears to be well
Example : HERE
I found it better to make the height at least twice the line height or the scroll looked untidy (slightly out of the box), and also I removed the positioning from the inDragDiv to let it default under header .. there is still a 1px difference in IE7 and below which I've corrected using a negative margin.. in IE7 the positioning was taking it, the textarea) way over to the tight.. if you still want to use absolute positioning you shouljd explicitly declare the left: 0; property
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375
Related
I have an iframe wrapped with a iframe-container div which is taking 25% of the screen from right, all the elements are inside the iframe.
There is a textbox input field in iframe, upon touch, all elements are behaving properly and the windows adjusts as per the keyboard of IPAD however the moment I start typing, i.e any character is being added in the text input the whole layout of iframe-container shifts towards left and then after few more character inputs disappears completely.
Refer to the image below:
Screen one (this is the desired UI all the time)
Screen Two (Messed up UI after any character is entered)
Even this layout disappears when more characters are added.
I went through few solved issues of iframe with IOS devices and followed few concepts and solutions from there.
Iframe in this case does not have any scroll added to it. A div inside the iframe is being scrolled
Have also tried adding -webkit-overflow-scrolling: touch; to the scrollable div and this did not helped either.
Was using VH for height, tried removing them and used PX no luck there too.
NOTE: A lot of jQuery is being used of UI adjustments, not particularly for iframe and the cross button basically toggles the iframe-wrapper div (simple hide and show).
Thanks!!
EDIT
I have found the problem, now I need the solution for this.
Safari is automatically adding background-position property and setting it to Initial, manually override to no-repeat fixes the problem.
I tried adding jQuery css property for background-position but I guess it is somehow not being applied.
This is weird but I discovered 0 property was not working and the moment I added left and top instead of bottom: 0 everything was fine!!
the chat div is breaking the bottom of the border line when im not hovering over it. cant seem to find a solution so any help or advice? thank you.
CODE: http:/jsfiddle.net/7wf912Lt/
As extended comments should be avoided on Stackoverflow - in case the Fidddle already looks like the required layout, just the necessary steps in case it's not so clear how it's done:
The top link is just a <div> on top of the embedded swf. The swf is wrapped in a <div> with float:left; the left and right link are also wrapped in a <div> with float: left. Therefore all divs are positioned in one row. To clear the float, I've just added a <div> with clear:left;. In addition, the width and height of the container have to be increased a bit so everything fits. Last step will be to reduce the margin: left of the container, so the content will be displayed centered. There are different solutions to display content centered, but I guess you'll have no problem to fix the rest.
For the Fiddle I just increased the height of .chat to 550px, the extra 50px are needed to have the additional height for the top link. Otherwise the swf would be displayed breaking the bottom border / partly outside of the box.
Update: Question was changed from displaying links around an embedded swf (which is solved) into the follow-up issue that the swf breaks the bottom border when it's not hovered. Problem is that link provided in question doesn't display the swf chat, therefore the mentioned problem is not solvable. Already added the CodePen-CSS into an updated Fiddle and only changed the height of .chat from 500px into 550px to provide enough space for the added links, and swf doesn't display like described. Further information to be added to the question is from which browser the screenshot was taken as I've only tested with Firefox and there it displays as intended.
Update2: As updated Fiddle by OP displays the described problem, should be fixable by adjusting css. The problem is located in the left link with the position set to 200px; if set to 0 before hover, the chat is displayed in the border when the height is set to 550px instead of 500px.
Update 3: Adjusted Fiddle like follows: changed the left link to position: absolute;, so it's taken out of the flow and won't interfere with the chat window. Otherwise the chat would be pushed down on hover when the left link is displayed on hovering chat as both share the same position for some seconds. Also reduced the margin-left of the chat so it's displayed centered. Fiddle: Fiddle
I guess you won't have any problems to e.g. adjust the padding or margins if you want more or less distance between the links and the border.
In case this works as intended would be kind to follow this step - Stackoverflow , otherwise just add possible issues to your question.
I am trying to develop a personal version of this working template that use CSS3: http://www.html.it/articoli/1688/template/photoshop-xhtml-css.html
And this is my version of the previous template: http://onofri.org/example/WebTemplate/
As you can see the two templates are very very similar in the structure and in the css settings (I have recreated it in Photoshop and the I have use the same HTML\CSS structure using CSS3 for the shadow and doing some litle change)
As you can see I have some problem with the left sidebar because the last blue box (the #c div) does not extend vertically to the end of the #container div and so don't match with the footer background immage.
The strange thing is that this problems disappear and appears changing the browser magnification with CTRL + and CTRL -
The only "solution" that I have found (but this is not a correct solution) is to increase the value of the min-height* property of the **#c div of my sidebare. For example if I increase this value from the original 234px to 334px it seems to work well.
But this is not a real solution because if the amount of content change of the page change this problem occurs again.
It seems to me quite strange because the structure is almost the same of the original layout.
What is the difference that causes this problem?
How can I solve? What can I do to extend the height of the #c div until the end of its container
try setting the width to 100%.
Also, use padding on the body, set the nav lower (margin-top), your cerca search picture is not working, check the file path and float your footer to the right.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).
I have problem with displaying adsense ads in ie7
google adsense adds an iframe to display ads with id google_ads_frame1 with position:absolute the problem is this absolute position makes the ad stay there even if the page size changes (in ajax)
so how can i force it to have position:relative, i tried wrapping it in div and applied every possible property like positions, display, wrapping the whole content in a table, floats, zoom, height & width.
i also tried adding a css below the adsense
<!--[if IE7 ]>
<style type="text/css">
#google_ads_frame1 {
position:relative;
}
</style>
<![endif]-->
can anybody please help me, this thing has made me crazy...
the ads got unpositioned only when the page resized so everytime a function that cause change in size of the page i added one more javascript to it.
var googleAds = document.getElementById('googleAds');
googleAds.style.paddingTop= '1px';
googleAds.style.paddingTop= '0';
it you have better solution please let me know
you should be able to wrap the iframe with a div set with position:relative. are the elements on the page that change size with ajax set with position:absolute or floated as this may cause issues too.
Josh
I've had the same problem and I 'fixed' this by removing a 'background-color' on a wrapping div. Don't ask me why, this has to be the weirdest IE bug ever :)
The wrapping div encompasses almost everything on the page and is fairly unrelated to the table cell that contained the AdSense banner, I have absolutely no idea why this background-color had any effect on the positioning of the banner.
I found this 'solution' by just stripping the page bit by bit. At one point almost all HTML was gone but the problem still persisted. I the removed the CSS file after which the banner behaved normally. Then started stripping the full CSS until I found the line that (seems to) have caused the problem.
Making a proper test case of this is still somewhere on my list but haven't come around to doing that. Also pretty unsure that this is a generic solution. Main advise for now: If you see this problem, remove all CSS and see if that fixes the problem, if it does figure out what part of the CSS seems to be responsible and get rid of that :)