This is the url: http://rosariodesign.com/leaducate.php
This is for a email newsletter
The gray border is a table, which contains another 2 tables inside. You will see that there is a 1px space between the gray border and the content, what is that?
You'll have to ask someone smarter than I to explain it to you, but it's padding on the td that contains your two tables. Fix it with padding: 0, of course, on that td. See this fiddle and look for
this_td_has_padding
Actually, what the other user suggested as a fix it's not really a fix. As you may know, css properties like padding, height, margin, are mostly ignore by the majority of email clients or rendered badly.
My fix would be to add this cellpadding="0" cellspacing="0" border="0" on your first table (and to any other table - for the rest of your life).
Also check this out http://www.campaignmonitor.com/css/ it's a comprehensive study on what's working where.
Cheers!
Related
I'm new to bootstrap. The control-label class seems to be undocumented at the bootstrap 3 website and i have noticed it just accidentally in the examples.
Could anyone explain it's purpose or guide me where I can get more info on it?
control-label is useful when we create forms. At the time of creation, you may come across in such situation like your text field is just after the completion of label.
So you have to write CSS to make it more attractive.
In bootstrap, they have provided class called control-label whose work is to automatically set the label. So that label and text field looks better and we don't have to write CSS for that.
CSS of .control-label:
.control-label{margin-bottom:0;
vertical-align:middle;
margin-bottom:0;
text-align:right;
color:#a94442;
}
NOTE : Here I have not include padding because padding may vary according to screen size.
If you want to know more about it, just look at that Demo.You will at least get some idea about it.
See http://getbootstrap.com/css/#forms-horizontal
It's for labeling a .form-group. For .form-horizontal it does
.form-horizontal .control-label {
margin-bottom: 0;
padding-top: 7px;
text-align: right;
}
... mainly for right-aligned labels.
I am working on a grid in GXT (not Ext JS) 2.4 and got stuck with this following issue.
I am trying to flag a column with a dynamic icon as soon a filter is set on it so that the user can know that he/she has applied a filter on the column. It is very similar to what is inbuilt in Excel where the a filtered icon is set on the filtered column.
I am unable to do so or find an article which points me in the right direction to get it fixed. I have tried changing the CSS as suggested in various forums but didn't help. The CSS change does equally impact all the headers though. All I want is for the filtered column to be different than the others.
Any help would be much appreciated. I will go to the extent of saying to consider me a newbie and giving me a step-by-step instruction on how to get it fixed. Sorry, if I sound too desparate but I am and I think I may have spent a little too much time figuring this out.
Thank you
GXT 2 already has this functionality, you can take a look at the Filter Grid Demo. bold and italic are used for filtered columns by default, here is the snippet from gxt-all.css
.x-grid3-hd-row .x-filtered-column {
font-style: italic !important;
font-weight: bold !important;
}
You need to override this css definition to have your own styles applied.
We are looking for a solution to add a CSS class attribute to a Django form's <input..> field. We've seen the advice that suggests we wrap the field in a <div> http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template, but this advice mainly seems to apply to a fields label, not it's <input ...>.
This particular advice doesn't work if you are trying to create a border around the <input> field. In that case, the <div> will be applied to the bounding box, and not the actual input field. For example .wrapper { border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} will create a box around the field, rather than replace the default <input ...> border.
We've fallen back to applying the class through a widget applied to the Form class, but this lacks a certain amount of code elegance (and violates DRY). For example, this solves the need.
class ContactUsForm(forms.Form):
name = forms.CharField(widget=forms.TextInput(attrs={'class':'form_text'}))
But of course, this ties the Form very tightly to the CSS. And it get's even more complex if you are trying to apply class attributes to <input ..> fields if the form is based instead on the cool new forms.ModelForm system.
We've spent the better part of two days playing with this issue (and studying Django source code), and it looks like we may be reaching the farthest edges of Django for this one particular issue -- but we just wanted to take one pass at StackOverflow to see if anyone else had insight.
Thanks for any insight.
One final comment: feel free to set us straight on this if the problem is our understanding CSS (rather than django). We've spent quite a bit of time messing with CSS options, but none of them seem to allow us to accomplish the effect desired -- that is replacing the default <input...> border.
You could use child selector like this:
.fieldWrapper > input {border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;}
I'm trying to achieve cross-browser consistency for my website.
It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)
If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).
What seems to be the problem?
It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.
The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):
table.uitbetaling {
margin: 11px 18px 10px 19px;
border: 1px solid #8ccaee;
width: 498px;
padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
margin: 0;
border: 0;
padding: 0;
width: 496px;
}
table.uitbetaling tr {
margin: 0;
border: 0;
padding: 0 1px 0 0;
}
So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)
<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>
If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.
Is there any way to solve this?
Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing
border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding
content-box - the width you set on the element is only the content area, this does not include padding or borders
There is also padding-box which I don't use, usually the above two are enough.
Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.
Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there
segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.
To be safe, I usually open a table in this way:
<table cellspacing="0" cellpadding="0">
It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.
I'd checked with Opera 11, Google Chrome 7.0.517.44 and FireFox 3.6.12 have seen no difference with your site design.
Did you declare the DTD (DOCTYPE)?
Read this:
http://msdn.microsoft.com/en-us/library/bb250395.aspx
It looks that browsers have different ways to display the borders, but the DOCTYPE declaration (which goes at the top of the html document) force them to comply with the actual standards, at least in regard of css box model.
Note: I always use the xhtml transitional DTD to make my document as much compatible as possible...
Good luck!
Try:
table{border-collapse:collapse;}
Its good practice to always set table{border-collapse:collapse;} in the css, and then use cell-padding="0" and cell-spacing="0" in the html anyway.
i guess maybe using javascript im gonna do it.... but if anybody knows a better and faster way to do it .. easily im gonna appreciate any ideas...
thanks!...
this is to make impossible for a user to view badly the page increasing the text or doing something like a zoom in the browsers ...
ive got some QA engineers asking me that .....
thanks!
This is a very bad idea from a usability/accessibility point of view. Please don't do it.
Even if you block that key combination, the user would still be able to increase the zoom level via the "View" menu.
You haven't given a good reason, I doubt there is one, so I agree that you shouldn't do it. It's a fun little challenge though, so I have a possible answer, though I don't really know if it would work.
First, have a font-size: 70% or whatever percent you want in an outermost containing element.
Then, create a dummy testing element with:
display:block;
position:absolute;
visibility:hidden;
font-size:1em;
font-family:Arial;
Find the actual height of the element (say, 25px) and then test it over and over again on a timer (window.setInterval()). If it doesn't match, change the font-size percentage on the outer element until it does.