I am working on website http://torquebranding.com/ , Images under THE PROCESS sections transferring to left as soon as screen resized.
I tried
margin-left:auto;
margin-right:auto
to make it center aligned , but failed.
Any suggestions ?
Thanks
You have this rule in your css. If you override it or remove it, the images are centered
processTabs {
margin-left: 50px;
}
Here are before and after pictures - see the processTabs rule in the dev tools side bar. In the before picture, the class is checked and in the after the class is disabled.
Your page is using different media styles with different page sizes.
For example, I have changed .processTabs added margin in media version 1.0.0.193. It works. Also, it is always good to use percentage instead of using px.
.processTabs { margin: 0 -2%;}
(sorry, had an error due to copying in there - edited... -> 0px )
This rule:
.processTabs
{
margin-left: 50px;
}
is included as an inline style (maybe added dynamically by some plugin or framework) in your HTML document, on line 689. This causes the problem you wrote about in the question. To fix it, remove that rule, or if can't do that (because of some plugin adding it) overwrite it with the following in your stylesheet:
.processTabs
{
margin-left: 0px !important;
}
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I am currently trying to use Joomla to create a simple website. I uploaded Joomla Extension Survey called Form Maker Lite for the purpose of creating a survey/questionnaire.
I published this extension to my Joomla based website, unfortunately I am unable to resize the table. I tried using width: px to resize the table, however it did not working.
Here is the current auto-generated CSS of the table:
#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}
I am having trouble copying the HTML here so I tried using this (results did not come out as expected, it was meant to appear in the form of a table) - My JSFiddle
I also tried using table-layout: fixed; overflow: hidden; but unfortunately that did not help re-size the table. I want to make the width of the table shorter.
Unfortunately I am unable to provide access to the website because I do not have full control/permission over the publicity of the link :(. My apologies.
Any help/advice/solutions would be appreciated.
Having had a quick look at the component, the following styles seem to set a width of 100% pixels to the form by overriding the default settings.
<style>
.wdform_section {
width:100% !important;
}
.wdform_column {
width:100% !important;
}
.wdform-field,.wdform_row {
width:100% !important;
display:block !important;
}
.wdform-element-section {
width:80% !important;
}
.wdform-label-section {
width:20% !important;
}
</style>
As far as I can tell Form Maker Lite adds inline styles to the form elements, which you don't seem to be able to edit, which is why you need !important to override them.
The above styles are over-writing the default "contact" form it has in the Joomla 2.5 version. It may churn out different code for different forms.
If you don't already have it, I'd recommend installing firebug to look at what css it is generating. That can make overriding css far easier.
I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com
I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
Here is the issue. if you look at the screen shot below. The border of "Live gaming from tekgoblin" is bleeding into the ad code above the border. I am not sure why as it only happens with that part. I have tried and tried to fix this and am looking for others input. Looks fine in IE but not FFox or Chrome.
http://www.tekgoblin.com/wp-content/uploads/Screen-Shot-2012-09-28-at-2.59.18-AM.png
you can look at www.tekgoblin.com and you will see this.
Remove to one properties in your css as like this:
div.bsap_1250066 a {
float:left; // remove this line
}
because you have allready define display:block;.
I am not sure without further study, but your ad doesn't have a height and aslong as its always going to be the same height, you could set the below to fix the problem. If you don't have access to the CSS, then just place it in your local CSS to overwrite, and if that doesn't work assign !important; to the height to overwrite the externally imported css creating issues for you.
div.bsap_1250066 {
display: block;
height: 245px;
width: 100%;
}
Or you could define a fixed height for your h4, achieving the same but not having static ad heights. It really depends on how this effects your site globally, there are many fixes open to you.