I tried to write a little site with the new Bootstrap 2 framework. I ran it the static html code by double clicking the file in my file browser and everything went fine. But when i uploaded it to a webhost it acts differently.
Locally, if the width of the browser is lower than 940px, then the menu is compactified as can be seen by this working example: http://twitter.github.com/bootstrap/examples/starter-template.html . But if I access the same file on my webhost, the links just stay the same.
I tried to minify my example but I still don't see how the change in behaviour is caused. So i put the minified example online and hope on you to help me.
You can see the file online here: http://users.skynet.be/ingdasite/miniCase/t.html . And you can download a zip-file of the files I extracted here: http://dl.dropbox.com/u/16797591/miniCase.zip .
update: the problem stays when I disable javascript, so it has to be a css-error
You need to make sure that the responsive stylesheet ends with a .css file extension.
Once I renamed the file with a .css extension, it worked fine.
Also, you may want to move the responsive stylesheet underneath the style tag as follows:
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
This will keep the navbar at the top instead of dropping it down when the browser width is less than 940px.
I have uploaded a modified version to Dropbox here: http://db.tt/CNB8GxAm
Reference: https://github.com/twitter/bootstrap/issues/1570
Related
I built this e-commerce site for a client using ReactJS and deploying via Netlify automatic github deploys. I'm getting very strange results in Firefox and Safari (Big Sur and before). This error appears in the Safari console:
Did not parse stylesheet at 'https://panthercityleather.com/src/index.css' because non CSS MIME types are not allowed in strict mode.
I'm assuming this is what is causing the layout issues? I tried to add type=text/css to all links and style tags but the command npm run build seems to remove these attributes from the tags.
I then locally ran npm run build (as opposed to letting Netlify automatically build), edited the build css to contain the correct MIME types, added autoprefixing to all of the css, and manually deployed this build folder to Netlify. Then I got a different error in regard to the index.css file:
Failed to load resource: the server responded with a status of 404 ()
I am completely lost at this point and would really appreciate any help. The layout issues only seem to arise on desktop Safari and Firefox and the issues are different in each browser. Here is an example from the home page:
Featured items on Chrome. Everything looks correct.
Featured items on Firefox. Note that the spacing between the headings and the images is too tight but the images are cropped correctly.
Featured items on Safari. Note how the images are now cropped wrong but the spacing is correct.
Maybe try adding type="text/css" to every link or style tag.
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" > ... </style>
Turns out I had 2 issues:
I was linking index.css inside of index.html but with a React app this is not necessary. I simply need to import each css file into the react file that references it. This solved the error that I initially posted the question about but did not fix the weird styling behavior on other browsers.
My main issue was that my css was simply not supported on older browser versions. Specifically, aspect-ratio and gap did not have good support. I used the padding-top hack to provide a fallback for aspect-ratio. I simply removed all gap in my css because on Safari v14, the browser apparently supports gap but none of the styles were being applied. I've spent all day scouring the internet so I simply replaced all gap with something like this:
& > * + * {
margin-left: 1rem;
}
This applies a 1rem margin on all but the first element in a flex row. Change to margin-top for a flex column.
I use a link in my html. How i can copy code of this file to edit it?
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Do you really want to edit a minified file?
It can be done but it's difficult.
Instead, put that whole address minus the .min in your browser's address field
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css
and you should see the code unminified which you can then copy/save to your local system for editing. (on Windows this would be by right clicking the mouse/pad).
I am not sure whether you do want to actually edit this file, or whether you want to change some of its effects. If the latter you link to the file then put your own CSS in style element following and it will overwrite with whatever settings you have given.
You have to add your custom css style after it so it will overrite it.
In main html file you can just add styles right after <head> for example:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: red;
}
</style>
So what happens now it imports bootstrap styles but after that overrides it so you can add your custom styles inside <style>
You can simply open the url - https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
and save (ctrl+s) the file locally in your project and include the css file path with the help of this tag given below :-
You can also use custom css and then overide the css.
(Note :- Format the document/css file then you can edit the document)
Chrome version: 44
When working in my normal development environment (C#, IIS Express) css files downloaded by the browser are available in the sources tab and I can see what styles come from what files in the element inspector. However, in my current development environment (PHP, Apache, Xammp). The stylesheets are being downloaded and rendered as style tags and are not available in the sources tab. This is rather annoying as I can't save locally edited styles to my working copy. I've never seen this before and can't seem to find any answers with a quick google. Does anyone know what would cause dev tools to render this way? I feel like it must be some sort of server configuration issue but I can't be sure. Example below:
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
is rendered as:
And looks like so in the element inspector:
Any help greatly appreciated!
I just met the same issue. Not sure if my case can fix your problem, but I found out that I had a script 'prefixfree' requesting redundant css files at loading. So I just commented this line out and my style in Element Inspector just back to normal.
<script src="~/Scripts/prefixfree-1.0.7.js"></script>
In my case, the problem appeared to be caused by a bad/malformed CSS style that was being applied to the target element. I'm able access the element's style normally after removing this style:
background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#2521BC), to(#1C1957), color-stop(.5,#3A33E7));
This is such a dumb issue, but here we go anyway. Here is my basic structure
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
So Content and img are both in my root directory, so to referent the glyph image from my bootstrap.css file I have it like this:
background-image: url("../../img/glyphicons-halflings.png");
Y U NO SHOW?
Is there a .js file I need to check to make sure it is looking in the right directory??
oh and here is a snippet of where I am trying to get the image to render:
<td>
#if (item.Something == true)
{
<i class="icon-ok"></i>
}
else
{
<i class="icon-remove"></i>
}
</td>
UPDATE
There's been a lot of views of this question, so I thought I would share my two cents on it. One note, since posting the question BS 3.0 is now out, so it is possible the structure is different and/or irrelevant, have not looked at it yet. But if you got here, keep in mind this is pre-3.0 Bootstrap.
One thing I have started doing that makes it so I do not really have to mess with anything is bring the entire bootstrap folder into the project, rather than just the css/js/img folders. I typically put it in my root scripts folders with a structure like this:
/scripts
/libs
/boostrap <-- the unzipped folder you get when downloading
/js
/css
/img
This may break some conventions since a 'scripts' folder should really just hold scripts. I justify it since I use the scripts folder for scripts (surprise!) and third party libraries (thus the libs folder). Most third party components you get have at least js and css files with them, and I just got too lazy to can them manually separated since some libraries (like bootstrap) rely on where the other files are.
Anyway, my two cents, take a look at the answers below if you want to alter the file locations. All great tips, thanks SO folks!
Your current code should technically work and there is no need of any js file..
background-image: url("../../img/glyphicons-halflings.png"); is perfectly fine for a directory structure like
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
You may try this code below to ensure that things are fine..
<td><i class="icon-ok"></i></td>
If this also fails then double check that glyphicons-halflings.png exists at your said path alongwith sufficient privileges..
try this
background-image: url("/img/glyphicons-halflings.png");
I changed the path from a relative path to an absolute path. By adding the slash at the beginning of the path, it starts from the root of your site.
Let me know if that works for you.
I encountered this same issue and it is not related to the source or location of your glyphicons. This is a race issue. I unfortunately cannot tell you the reason why it behaves like this in tables... but I know in my dataTables this was occuring and my way around it was to add the glyphicons after the page and tables load by appending html. It's not perfect but it works.
This may be an old post but I hope it helps someone else looking for an answer to this problem.
The file I downloaded contains an underscore but the CSS is looking for a file with a dash between glyphicons and halflings. Change one or the other and make sure it is uploaded to the correct folder on your server.
Copy the glyphicons-halflings.png & glyphicons-halflings-white.png From img Folder.
make a sub-folder with name "img" in css folder.
Paste the both glyphicons-halflings.png & glyphicons-halflings-white.png in css->img folder.
Open your bootstrap stylesheet e.g. Let's Say bootstrap.css in text Editor.
Find (Ctrl+F) "icon".
6.You will find the class.
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
change the background image url to
background-image: url("img/glyphicons-halflings.png");
find "glyphicons-halflings-white.png"
Change it's path also.
And Bingo! you are on it.
I encountered this same problem today and it had me confused. As Rishi says above, it should work, but it just didn't. I triple-checked my directory structure. Then eventually I realised that it wasn't hitting my glyphicons file at all. I removed this offending line of css:
<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->
And everything was good!
Remember that if you're going to include font-awesome, then it will look for the font files instead of the glyphicons file. So either add the appropriate fonts, or just use plain old bootstrap.
The glyph icons load only when you have the following files in the fonts folder.
glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf and glyphicons-halflings-regular.woff.
Download the theme template or the carousel template of bootstrap, and you'll find these files there.
To know where to place these files in your web folder, just run Link Checker or Xenu's link sleuth and it'll show you where to place those files.
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');