How to Fix/Override a CSS template issue - css

I have my website here and I discovered a small issue regarding its CSS.
If you hover "Existing Account Client", in Payment method section (at the bottom), it's cutting the left side of the description.
You need to input some fake info and click on "See Price" then select any vehicle.
Existing Account Client
How do I fix it?

You can add 'position: relative;' into this section:
#payment_selectors label, #payment_selectors label a{
position: relative;
}
It will display whole tool tip. However I spot another problem - this tool tip window is flashing. You can try shift position of tool tip by adding left: 20px; or padding-left: 20px; or something similar.
As well please change: to fix flashing issue.
.custom-tooltip {
background: none !important;
top: -80px!important;
}

Related

Unable to fix space issue in Home Page

I am creating my new travel website https://airlineticketsbestprice.com. So I have downloaded a travel theme and updated my content.
Also, I have add some more section in home page (example call to action, popular destinations, subscribe newsletter and latest aticle ). But as I have noticed that there are much more space between these section, so I am trying to fix this through CSS file but issue still remain.
So could you please tell me which file and CSS file class should I change.
Kindly help me to send exact Css class file code.
Thanks
In your style.ccs you might change this:
p {
margin-bottom: 1.5em;
margin-top: 0;
}
to this:
p {
margin-bottom: [any number]em;
margin-top: 0;
}
or
p {
padding-bottom: [any number]em;
margin-top: 0;
}
Please note, that it will effect all your paragraphs on your website.
Or if you don't want to have any space after a paragraph use the Shift+Enter combo.

Have screen reader (JAWS) read more than displayed button text

I actually want to accomplish the opposite of:
To avoid screen-reader text inside the button
For WCAG compliance, any HTML control (i.e. button) that opens a new browser window needs the screen reader to say so when the button gets focus. However, I certainly don't want:
<button>Get Help ,opens in a new browser window</button>
The button text should just be "Get Help", but I need JAWS to verbalize more... any workable approaches out there for this?
Many thanks, -Pete
(FYI to moderators: The existing "JAWS" tag refers to "Java API for WordNet Searching"... not the screen reader "Job Access With Speech". We could probably use a new tag out there - I don't think I currently have the "stack overflow cred" to do that. Thanks!)
Essentially you want to include the text but hide it from view.
<button>Get Help<span class="at">, opens in a new browser window</span></button>
"at" for "access technology".
With associated CSS of either:
.at {
position:absolute;
left: -9999px;
}
or, if you are concerned with horizontal scroll-bars in right-to-left languages or performance on mobile then you can use:
.at {
position: absolute;
clip: rect(1px,1px,1px,1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
display: block;
}
Read more at: http://webaim.org/techniques/css/invisiblecontent/
I should point out, people with other disabilities should be able to tell it opens in a new window as well. Perhaps consider adding a 'new window' icon?
I believe you need to use ABBR tag do add a description. You can see something here
How about simply using aria-haspopup="true" as per the W3C?
Basically:
<button aria-haspopup="true">Get help</button>

Contact Form will only display if I remove the 'zoom' property; need a solution

I setup a static html landing page; displays perfectly in Chorme, Safari, and Firefox. However, I cannot get the embeded MailChimp contact form name and email fields to display when I use the zoom property; as soon as I remove it, the inputs show up too large and out of place which is why I used the zoom property in the first place.
Why would this cause an error? Is there anyway to rememdy this odd problem?
url: http://comingsoon.veteranbrewingcompany.com/
TIA
You really need to address why the form is so large. Various styles are causing it to be so, such as
#mc_embed_signup .mc-field-group input {
font-size: 40px;
}
#mc_embed_signup .button {
background: url("http://themicroscopeguy.com/wp-content/uploads/2013/05/submit2.png");
width: 207px;
height: 92px;
}
So, you have big font sizes set, and the submit button is quite a large image. You can address all that via CSS. You don't need an image for the subbmit button, as you can easily style a normal button with CSS.

Facebook like / send buttons... the popup boxes are cut-off

I'm trying to figure out what CSS I must change to fix this problem: If you visit my site http://www.derekbeck.com/1775/ and click the topmost Facebook like or send, the popup that comes up is cut off and so one cannot see part of it. I want the popup to appear in the normal facebook default width, whatever that is, probably something like 300px or so.
Thanks,
Derek
Change this iframe.fb_ltr at line 557 of a css file, it's 180px.
iframe.fb_ltr {
width: 180px !important;
}
Just to add something since any solution i have found online wasnt working...
Once you click the like button a class is being added to the iframe...
that is great and mean you can style the popup only and leave your like button as is.
Here is the class being added:
.fb_iframe_widget_lift {
}
For example & since my button was in a static footer i added:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: -249px;
margin-right: -220px !important;
background: #000;
padding: 10px;
height: 237px !important;
}
Using this you can customize the popup as you wish.
Best regards, Sagive.
Make sure that when you load FB JavaScript it has APP ID!
For example
//connect.facebook.net/en_US/all.js#xfbml=1&appId=77777777777
If you will not have appId at the end it won't load scripts that expand comment box.

Re-position Spring Roo generated Apache Tiles View

A very simple question. I do not know Apache Tiles.
For a Spring Roo generated web app the views are created using Apache Tiles. The classic layout with the menu on the left is created.
I want to have the menu (menu.jspx) appear on the right hand side of the page instead of the classic left hand side. How do I do this?
I have read the Apache Tiles tutorial on the main web site, however the description there uses jsp and html.
You have the alt theme in Spring Roo default generated User Interface.
It has the menu to the right. Go ahead and customize.
I figured it out.
I had to edit the standard.css file menu items.
I got to thinking that all of the jspx elements are controlled by the css files. Sounds like a no brainer no but I am use to using html tables to do all of the ui work, not css.
So, I found a place http://csscreator.com/node/461 that had some sample code and I modified it for the standard.css menu elements and below is what I pasted in. Its not perfect but it is a place to begin.
#menu {
background-image: none;
position: absolute;
right:0px;
width: 525px;
top: 80px;
height: 15px;
display: inline;
}
#menu ul{
padding: 3px 5px;
border-left: 1px solid #cccccc;
list-style: none;
display: inline;
}
Your best option for moving around the menu is to modify the css as you have described above. However you also have the option of changing where the menu appears in the html source by modifying the page layout file. This can be found under WEB-INF/layouts/default.jspx.
You could then choose to use a table based html layout if that was your preferred option.
I hope this helps
Your other option is to select the "alt" option on the page which will auto-change to the layout you want.
If you then make that the default layout instead

Resources