Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
Related
Is there a way to change the default block cursor used by Shellinabox to a vertical bar?
Using Chrome's inspector tool, I found this div:
<div id="cursize" style="left: 675.5px; top: 160px; visibility: hidden;">143x20</div>
but altering the value does nothing.
There is nothing about a cursor size in the page's styles.css file or any of the config files found in /etc/shellinabox/options-available.
If you know of a better place to ask a question like this, please tell me.
Those inline styles have been generated dynamically through means of something like JavaScript. Considering they are generated dynamically, simply manipulating their values won't reflect any change.
Having said that, you can override them with the !important declaration. Typically !important should only be used as a last resort, but inline styles have the second-highest level of specificity, and !important is the only way to override them.
Using something like the following should work for you:
#cursize {
left: 500px !important;
top: 100px !important;
}
Hope this helps! :)
Given the following HTML code generated by a Google+ widget
<div id="widget_bounds" class="Yfd" style="width: 290px;">
What should I declare in my style sheet to override the width to be 100%
I have tried the following
Corrected typo
#widget_bounds, #widget_bounds .Yfd, #widget_bounds .Yfd[style], #widget_bounds[style], .Yfd{
width:100% !important;
}
and various combinations of to no avail.
Other options I have tried are
#widget_bounds, #widget_bounds .Yfd, .Yfd[style], #widget_bounds[style] .Yfd, #widget_bounds[style] .Yfd[style]{
width:100% !important;
}
#widget_bounds .Yfd[style]{
width:100% !important;
}
#widget_bounds{
width:100% !important;
}
.Yfd[style]{
width:100% !important;
}
From reading some comments I think the point has been missed that the HTML has been generated from a Google+ widget for which I only have the option to set pixel widths. I have a responsive designed website and I need to override the inline style to provide percentage widths.
Rather than down voting and voting to close a perfectly legitimate question I would appreciate it if someone is actually able to answer a difficult question.
update
As mentioned by #niels-keurentjes:
There are a few cases where an inline style can be over-ridden, such
as with the !important attribute or with user style sheets.
style="width: 290px;" is an inline style.
from http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm:
Inline styles have the highest precedence. That means they are going
to be applied no matter what. The only styles that have higher
precedence than inline styles are user styles applied by the readers
themselves.
For more about the cascade: http://www.w3.org/TR/CSS2/cascade.html
For this reason you can't overwrite it with CSS alternative use jQuery to reset this width:
$('#widget_bounds').ccs('width','100%');
The following one :
#widget_bounds{
width : 100%;
}
Better not to use !important cause it breaks the natural cascading in the stylesheets.
P.S. You should check the spelling. The id is named widget_bounds which is different than widet_bounds from your css definition.
It turns out that I was on the right tracks but it is impossible to have a Google+ widget that has a responsive design, The closest I could get to is having fixed width px values for different sized view ports.
An interesting discussion on this can be found here https://plus.google.com/+DustinStout/posts/CxL5k3EBd4x for anyone looking for a solution to this.
I am new to CSS/HTML and I am having some trouble adjusting the width of my page. I'm sure the solution is very simple and obvious lol.
On this page: http://www.bodylogicmd.com/appetites-and-aphrodisiacs - I am trying to set the width to 100% so that the content spans the entire width of the page. The problem I am running into is that when I try to add inline CSS, the external stylesheet called in the head is superseding the inline. I am using Joomla, so the editor let's edit the body, not the head (unless I create a custom module that rewrites code for the head).
I do not want to re-write/edit the external (main) stylesheet, since I am using this page for a contest and it is only running for about 1 month.
Anyone have any ideas how I can achieve this using inline CSSS and what the code would be?
Any help is greatly appreciated!!
#main, #content, .landing-wrapper, #column2 .box2 {width: auto;}
#column2 {width: auto; float: none;}
You should be able to place this in the head of your template's index.php, though I would personally add it to the bottom of the theme's main stylesheet. How long it's there isn't a factor.
you need to find the #main selector and set it wider there. The body is always going to be 100% wide unless you explicitly set it otherwise. In your case the #main container is the wrapper around the whole page, this is what you want to set. I'd also recommend looking up the "box model" and understanding how that works before going too much further. It will save you much weeping and gnashing of teeth. http://www.w3schools.com/css/css_boxmodel.asp
try adding inline .css {width: 100%; (or auto)} to :
- #main
- #content
- .landing-wrapper
- #column2 .box2
Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.
However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with
#media (max-width: 979px)
body {
padding-top: 0;
}
and well.. webkit seems to do this (only on Meteor for some reason):
It ends up looking like this:
(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)
How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference
(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)
After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:
After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:
#media (min-width: 979px) { body { padding-top: 60px; } }
Hopefully this will sort out your issue.
It does not just do this...
It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.
I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.
I don't see the point of using either http://960.gs or http://blueprintcss.org if they enforce margins other than for pretty magazine layouts/marketing-esq brochures. Is there a way I can use these to meet certain design requirements such as a navbar that can actually touch/wrap-around to the header? Any input to use these frameworks without margins (as they enforce browser compatability onto the less CSS guru level developers) would be ideal. (Note: we are using JSF, this is also a development shop not a web shop at all)
I use this technique as my ultimate CSS layout technique:
http://www.codeofficer.com/blog/entry/css_grid_frameworks_960gs_without_margins/
I had the same issue once, and since I use that one, all the margin headaches has dissapear.
I use !important overide when I need to use custom width/height.
The Code:
<div class="g_9 content_main">
This div should actually have 720px in width.
But I overide it using another class so now the width has become 700px,
and just in case it needs custom margin, we can always set it in the css :)
</div>
The CSS:
.c_12 .g_9, .c_16 .g_12 { width: 720px; } /* 960-full.css */
.content_main { width: 700px !important; margin-left: 15px;} /* style.css */
You don't have to use the grid classes for every div on your site. If you're header doesn't need to follow the grid layout then create your own styles for the header. You can also skip the grid completely and just use the form & typography markups. The frameworks are an attempt to bring a bit of consistency to your projects.
I'm using blueprint for the main content but the header area has it's own custom layout.
Here's a mod I wrote that works with the 960gs to help you create elements that touch, without rewriting the framework.
http://www.michaelhartmayer.com/css/960gs-margin-mod