I don't know what's going wrong, but I have the same style rules directly written as css (index.css) and written in less(style.less->style.css).
When I load my page with index.css, then my leaflet-map is shown correctly, but when I use style.css, everything is loaded, but the map-container has a height of 0px.
Because this all is a bit more complicated, I put you the code in a jsfiddle.
index.css: http://jsfiddle.net/Lhfy89kn/
style.css: http://jsfiddle.net/86y3y17v/
I'm searching for the solution since a year but I don't see the mistake because apart from the fact, that the rule is more precise when I precompile, so body app map #map_canvas instead of just #map_canvas I don't see any differences...
Hope you guys can help me!
P.S:I know the map-tag has a different purpose in HTML5 :)
Your LESS generated stylesheet lacks the following CSS:
html {
height: 100%;
}
Without this, none of the children containers have an appropriate height to display their contents. Here's an updated fiddle with the issue resolved:
http://jsfiddle.net/86y3y17v/1/
Use html, body, map, #map_canvas and not html body map { height: 100%; }
http://jsfiddle.net/86y3y17v/2/
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! :)
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
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.
I'm using a fairly basic vertically expanding page layout in CSS, and I'm trying to adapt this layout so that my client can edit the page using templates in Dreamweaver. It's... well, rough going. I'm used to doing most of this stuff by hand, but it's working out fairly well.
I'm using a min-height trick similar to this page to get the content to expand nicely in the browser, for shorter pages viewable on large monitors. The code works perfectly in all browsers (not supporting anything older than IE7 for the site, and other browsers are fine) but Dreamweaver doesn't render the min-height properly.
I've been able to get it to work by using a .css file that only dreamweaver uses (it doesn't exist on the server) that makes it editable in dreamweaver, but if that file is committed, the magic breaks on the live site. This just feels like a dirty hack.
The quick way out, I guess, is this: is there a way to get dreamweaver to ignore a line of CSS, or to make it use a line of CSS that would be ignored by a real browser? Or, is there a way to get a min-height layout working properly in dreamweaver?
The code I'm using for this is basically the following:
Site Code:
html, body {
padding: 0px;
margin: 0px;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
}
#mainFrame {
position: relative;
min-height: 100%;
width: 980px;
/*center in parent*/
margin-left: auto;
margin-right: auto;
}
and the code that makes dreamweaver happy:
html {
height: 100%;
}
#mainFrame {
height: 100%;
}
I read somewhere that Dreamweaver's layout engine was based on IE's rendering engine, which would probably explain most of the issues. I'm using CS3, and my client is using CS5, which is going to complicate things further down the line, but I'm already prepared for that. If anyone knows of a magic solution to this, I would appreciate it greatly, as I've kind of given up on it for now.
Thanks
I don't use Dreamweaver either, but this Adobe article on IE conditional comments might be relevant: I wonder if you can adjust the Dreamweaver preferences to load a conditional comment version string that would be ignored by a real browser.
i know this answer won't help.... but I personally (would) never rely on WYSIWYG-rendering.... i'm using DW CS5 myself, but only with code-view
I actually came up with my own answer for this, which is significant cheating, but it does work. The following utilized CSS comments to hide (from Dreamweaver) PHP code, which causes the server to spit out basically an empty file. Conditional comments are almost definitely a better way to do this, but it's still an interesting solution (I thought) and it might be useful to someone.
/* <?php if (false) { ?> */
body { /* some editor-only CSS */ }
/* <?php } ?> */
Having CSS layout issues with Internet Explorer 7 (big surprise). Upon using the Developer Tools to inspect the CSS, I discovered that some properties defined in the stylesheet are not appearing in the parsed CSS structure... THEN I saw THIS being shown as the parsed value for the background-image property:
background-image : url(/trunk/httpdocs/images/layout/HCBL_Homepage_01.jpg); WIDTH: 1200px;
pretty much obliterating the width property that was defined.
The actual code in the CSS file for this element:
div#header {
width: 1200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url('/trunk/httpdocs/images/layout/HCBL_Homepage_01.jpg');
background-repeat: no-repeat;
}
If anyone could offer any insight, or provide a link describing this problem (and maybe a workaround...) I would be very appreciative.
Also, I am only interested in this from a parsing of the stylesheet and CSS syntax perspective. I am not concerned with rendering and display issues at the moment; I simply want to get IE 7 (and I have a feeling IE 6 will have similar issues) to recognize and parse ALL of the CSS properties that have been defined in the stylesheet.
Also, here is a
link to some static HTML and CSS
that illustrates the problem described.
Thanks in advance guys!
Are you sure that you have regular inverted commas around you url, not fancy curly ones? Do you get the same behaviour if you change them to quote marks?
I'm not 100% about your folder structure or how you are accessing your image but have you tried without the first slash or adding .. before the first slash?
Where are the CSS and JPG files located from your website's root directory?