Quick question here on a button that is inside an iframe. I'm attaching a screenshot to make it clear, but basically, the orange button at the bottom of this iframe for some reason does not center. I'm playing around in developer tools and I've noticed that there is a table data that seems to be in the way, but I can't figure out how to adjust it. Maybe you guys can help me with this one!
You can see the iframe here: https://sandrelle.ie/book-online/
Add text-align:center to your containing button div
so it turns out I was able to fix it myself. The issue originally was that it was formatted in a way that table data was getting in the way and pushing the button to the side, so I had just deleted the extra td that was in there.
Related
I have a strange behavior with drop down lists and button in my layout.
I have just made a fiddle here to illustrate how this looks like.
As you can see in the example, if you resize the browser the you can still open the lists or click on the Filter button which is ok.
When I do the same on my desktop, the first list will work properly, but the second and third list will not open as well the button in not clickable anymore.
I have spent the all day trying to fix this issue, unfortunately with no success at all.
Maybe someone of you guys have had the same issue or knows what is going on here?
Any help will be much appreciated.
I've encountered issue like that before when wrapper elements were stretching over other elements via zindex and couldn't track it down until i gave each element a background color and could see how they were transforming in size as i adjusted the window size.
So working on this website and faced with an issue of blank space on the right side of the page on mobile view. I've looked at everything and still cant seem to get rid of it.
I deleted each section of the site hoping to find the area where the issue was (overflowing form something I thought) but it was always there so I don't know what to do.
[link removed] is the site on the dev server.
Im really stumped by this so hope someone can help me. Thanks in advance
The issue is visible only on mobile and almost no way to debug that (well there is a way, kind of a hard way to debug that).
Any long story short ... i suppose one of the page elements is not behaving as it should in mobile view. With this i mean, an element, element X for example is wider then the width of your mobile screen so it creates that white screen issue.
What im gonna propose here is not a 100% solution, is more like a workaround but it will work if the issue is what i supposed:
Apply this css rule on the body tag:
body { overflow-x: hidden; }
http://validator.w3.org/nu/
Copy Paste your url or paste your code (at the "Check by" dropdown) and you'll see unclosed elements.
Close your elements, I think there is the solution
Thanks to everyone for your help. So I found the issue, As Arber suggested it was an element behaving badly. It was the contents of the carousel overflowing causing whitespace to appear, so I was able to rectify the problem. Thanks again! Tthe validation helps with a few other side issues too.
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
I am working on a site here:
My Site
The issue I am having is when you shrink the window or view the site on a mobile device the images jump from the div container they are in, (the div id="client") into the widget div below it.
I do not know how to solve this issue and am having a hard time finding the html for the widgets in all the different .php files I have.
I am working on wordpress from a template that I have edited.
I am not sure if this is just a simple css problem or if code if conflicting each other.
If you need more information please let me know. I wasn't sure if posting any code would help.
I figured it out, all I needed to do is edit the parent div css and add
overflow:hidden
I have a simple textarea which works in all browsers i.e. I can click inside it and type.
But I can't do this with IE6! I am however, able to press the tab key until I get to the textarea and then I can type in it. But I cannot click it.
What a strange quirk? Anyone know what the hell is going on?!
The source of my form can been found here.
Thanks all for any help
Update
Here is the CSS. Nothing jumps out at me.
Update 2
Annoying, I have narrowed down the problem to this line:
background-image:url(../../images/checkout_fuzzy.png);
I use this setup for all my sites pages, but this is the first page that has text areas in it so I guess that might be the reason why it doesn't like the above. What possible could I change the above to so that it doesn't overlay the textarea.
Solved
A position:relative on the containing div solved my IE6 problem! The problem was that the text area was not clickable due to something (div) covering the textareas as identified by Chris.
I don't know what's going on but I have some thoughts that may or may not be the problem. I would hazard a guess that it might be stylesheet related. Its possible in HTML to have something invisible in front of a form element that stops it receiving a click but I would think that wouldn't stop the input getting tabbed to.
To test if this is the case see if you get the same problem if you don't reference your stylesheet at all. If this allows you to click its something to do with your CSS/layout. If you still can't click then I'd probably try turning javascript off on your browser and seeing what difference that makes...
The HTML looks totally fine to me at a glance but I of course can't see what your CSS and/or javascript might be doing on the page. Best of luck. :)
Not 100% sure if this will fix it, but try setting the 'cols' attribute in the textarea.
Here's an example.
<textarea rows="2" cols="20"></textarea>
IE6 can be a bit fidgety if it doesn't get what it expects.
I don't have a copy of ie6 handy but I do know that ie6 can get real funky with absolute and relative positioning. try commenting out your absolutely and relatively positioned CSS styles and see if any of them are covering your form.