Hi I have already read posts which suggest using style="vertical-align: middle;"
however this is not working for me. I am a beginner so I was hoping somebody could take a look. I've been playing around on jsfiddle with it and getting nowhere.
here is my jsfiddle.
It is a dynamic form so to get to the area I am having the issue you must select option 5 "True/false" on the drop down.
as for the html for it, it is located within the javascript in 'case 5'.
Also for some reason on the jsfiddle one label is out of line and I don't know why as it works fine on firefox and chrome :S
please enlighten me, thanks
I eliminated many of the float on labels and inputs, and set width: auto and it improved greatly.
That would affect all inputs though, and I think part of your problem is the large width of just the radio button inputs.
As a broader issue, I would probably have all those question types already in the page in hidden divs, and show the appropriate one when the question type is selected. That makes it easier to work with your CSS by showing them all during dev/debug of the styles then hiding them when you're done.
Not much of an answer, but it's all I've got without really digging into the fiddle a lot.
Try this and play with the margins to get the desirable output.
#stylized label.smaller input{
float:none;
width: 25px;
}
Related
In real need of help here after about 3 to 4 hour of independent searching. I am building a website where it imperative I change the height of a button so iphone/ipad users get the correct style. After searching, people seem to be pointing me to the -webkit-appearance values and I've tried to impliment them with absolutly no luck. I have a codepen (https://codepen.io/osa10928/pen/awrmRG) where this was a problem too so you guys can look at that code and try and solve the problem there and hopefully I can carry yall's implimentation to my other project (I'm not at liberty to share my other projects code)
Looking at the codepen you'll see the buttons #start-button and #strict-button do not change height on iphones (or ipads I presume, I dont't have one to check). I've tried several things like including -webkit-apperance: none on a button tag, on the individual id's in css. I've inlcuded:
input[type=submit], input[type=reset], input[type=button]{
-webkit-appearance:none;
}
all to no avail. Please, could someone show me the proper implimentation of -webkit-appearance: none, or something else that will allow me to change button heights for iphone users?
Update Turning buttons into divs and restyling as buttons has been the best option. If anybody does have a working work around I'd love to hear it. Thanks all!
you can use padding top and bottom instead of height
OK, I have scanned the forums trying to find a solution to my dilemma and have tried everything I found. If someone could please take a look at the following URL: angrybullhartford
When I resize any browser, the problems seem to differ a little, The two images in the right sidebar do not center and scale to a tiny size. The slider at the top of the page is small and off center as well. I had this working at one point and cannot get back to it. If it is something simple and someone could tell me why this is occurring I would appreciate it.
Thank you!
There is some sort of left margin or padding on the slider. It does not line up with the elements below it. When you start to make the page smaller, you can really see this margin I'm talking about.
Anyhow, try this: Change your CSS to
#page .pad {
padding: 40px;
background-color: transparent;
}
This produced a much cleaner result for me, not sure if it's exactly what you want though. Being that you're using BS2, you may have to write some media queries to handle your extra styles.
I'm clueless how to get the scrollbar display below the active box - list item.
After searching I have found that the z-index should work on element positioned other than static. But still I'm still unable to produce the desired effect.
This is just one part of my problem, I believe if I understand the solution to this one, I can also fix another similar problem.
Somehow the active box is displayed on top of the scrollbar, but not the scrollbar's handle.
Here's the JsFiddle. Should be quite easy to notice my problem.
The desired effect is that the scrollbar and everything related to it (handle) is displayed below the active(longer, red) box.
Sorry, don't really see a way to accompany this problem with code inside the post or how to make the JsFiddle with less code.
I think you'll have to apply a z-index to the .scrollbar element itself, rather than its child .scroller. Add these styles to your definition of it:
.scrollbar {
z-index:-1;
position:relative;
}
And you should get (what I hope is) your desired behaviour. Here's an updated JSFiddle for you to see what this achieves. If this isn't what you were looking for, feel free to let me know and I'll be happy to help further. Good luck!
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
I've been smashing my head against a wall for about 3 hours now and guessing what's going on isn't working either. Can someone please help me rescue my waning sanity?
Basically in IE7 the second level on this menu just won't stay open when you try to hover over it. I've tried z-indexes, containers with position: relative set, line heights, borders, padding...everything!! What am I missing? ARgg!! Must be something obvious at a guess but my tired brain has just given in.
http://www.sah.org.au/devt/
Thanks for your help!
John.
That really is frustrating.
The only (almost there) solution I could find was to add a background-color to #menu a. You can change it to the correct colour on :hover for the different links. Or, just move it from li to a.
Weird, right? It massively helps.
I'm reasonably sure that a perfect solution is going to require (ugly) HTML changes, or writing jQuery to do the same thing (for only IE7).
Based on your comment on the code that says
/* using left instead of display to hide menus because display: none
isn't read by screen readers */
I found you don't want sub menus got read by screen reader. I did a research and found out most of the screen readers don't read the visibility:hidden elements. My suggestion to you is removing the left:-999em and replacing it with visibility:hidden and dsiplay:none together.
Here is the article about screen readers:
http://www.alistapart.com/articles/fir/