I have this simple situation, I have an style with no defined display property value, I recently added bootstrap to my project with no major problems, just one.
In label bootstrap style is defined a display: inline-block; what I don't need and is causing some troubleshooting on my page. So simply I overwrite it, but it seems It's getting the bootstrap value. !important is not working also. As you can see in the image below:
Even, It's marked as overwritten on Developer Tools. I also tested removing the line from the bootstrap file and it works, but that's not viable option in my situation.
I'm stuck here, as I said, no more problems with bootstrap, and haven't had this situation before.
I have to add that I'm setting right position for style sheets on my page.
EDIT:
I'll attach the result and the expected result, when I remove the bootstrap style. It seems to be working even It is overwritten.
Expected result when bootstrap style is removed (this apply to in time Developer tools and when removing from bootstrap.css)
PS: IE as needed browser.
EDIT2:
Problem solved, It was related to IE version, our company gives support to IE only on this application, and the problem was that some previous change was forcing IE to run compatibility on version 5, for reason that anyone knows, switched to IE as standards and it's working.
Thank you all any idea or comment.
Problem was related as IE compatibility mode.
This worked for me:
My problem was the way I linked it.
example: lets say input tag inherited style from vendors file(say bootstrap), and say you are too far in the project and linking files the other way round screws up your layout then, create a new style sheet and link it after the bootstrap link.
<link rel="stylesheet" href="styleSheet.css">
<link rel="stylesheet" href="bootstrapStyles.css">
<link rel="stylesheet" href="newStyleSheet.css">//write the style for elements that you don't want styles from bootstrap to be inherited and link it this way.
right way of doing:
<link rel="stylesheet" href="bootstrapStyles.css">
<link rel="stylesheet" href="styleSheet.css">
Related
Hi I'm very new to coding in HTML and CSS and I have been trying to teach myself but I am struggling that being said I have been able to create this so far:
https://dimensionmediaml.000webhostapp.com/
Now the issue I have is that this website will work fine as long as it is being used on a certain sized monitor but anything smaller (have not been able to test anything larger) and the elements of the page end up looking like they are in the wrong positions
The site has proved to work at a resolution of 1920 x 1080
Any help would be really appreciated
Once again I am very new to this so please be patient with me :)
I have attached the code below and before people rip on me for putting the bootstrap code into the CSS sheet, it was the only way to get elements to display normally on my monitor when uploading the site to the server
HTML and CSS:
https://drive.google.com/drive/folders/0B_-tn2aR7tHXakZZQ1FleHVveDg?usp=sharing
You have Bootstrap but you don't override the css by using the way you did. Copy the styles you want and make a new document and name it custom.css, then upload that to the css folder on your server. Here is how to change the code in your html
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
Using width, height, top, bottom etc as percentages will never solve your problem. You must learn with #media queries in CSS3. Please visit this link http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
My limited CSS knowledge is starting to catch up with me now and I'm not sure how to handle this particular situation, despite grappling over it in various forms for months.
So I was having this problem awhile back with my solid-color Bootstrap navbar where it didn't fully extend to the right side of the browser by a handful of pixels. I could never figure out why but I did figure out a while back that overriding .row with a margin-right attribute of 0, fixed this problem. Fast forward a few weeks, I just noticed that my grey content boxes are now off-centered, as in, the margins between the left side and content and the right side and content were not the same, clearly because of this change I had previously made.
Now I can offset this problem by overriding .row with a margin-left attribute of 0 (and then messing with padding in comparison to those values to get the desired effect) but I'm really just not sure if this is bad practice or not? As .row is one of the most used classes of all in Bootstrap, I feel like I'm hacking away when there must be a elegant solution (where one problem I can't figure out is how to apply the margin-right styling to certain outer rows and not in certain rows - which would be a nightmare to try and figure out where at this stage of my project). I did try for a little while to apply this margin-right: 0 attribute just to the specific rows I thought were the culprit for the navbar issue but in the end, I wasn't able to figure it out.
Any help is appreciated, thanks!
you should not change the css properties of a Bootstrap class, for many reasons: above all
you could create regression somewhere else in your site (as already happened to you)
you can't be sure what will happen to your site if you upgrade the bootstrap css to a new release
You should
add a specific ID or a specific custom class to the originary navbar that had that issue
then create a custom css file (that you will import in you web pages after importing all bootstrap css files)
add in this new custom css file a rule to the previous new ID/class for the navbar that fix the original problem
It sounds like you might be nesting a container within a container, or a similar nesting issue. I cannot tell without a code sample.
You shouldn't need to use a row on your navbar, bootstrap has its own classes for a navbar.
See http://www.w3schools.com/bootstrap/bootstrap_navbar.asp for some snippets on how to do this.
Also you should never edit the bootstrap file, create an override file and put any changes you make into there. Make sure you link to the override file after the bootstrap file so that it cascades correctly. Like so:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-override.css">
I'm seeing a strange scenario where, according to the Firefox dev console, the matched color for a css element is different from the visible output. If it matters, I'm using Bootstrap 3 as the source of styling. Here is the (very short) HTML file that I'm using for the example.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<button class="form-control btn btn-success">Hello world</button>
Here is a screenshot from the Firefox dev console with the purported 'winning' css rule for:
And here is a screenshot of the actual browser rendering:
As you can see, the text in the button is rendered as white. From the top of the CSS rules, it appears that white was, indeed, selected. But it's not clear where that comes from. The only rule say "it's white (#FFF)" is crossed out, and the only rule that's not crossed out says "it's dark grey (#555)". So why is the text white?
Interesting observation! It would appear that the Firefox developer tools use the line number of the declaration block to determine selector importance, when the specificity of two selectors is the same.
This can be an issue when the CSS file is minified though, and all declaration blocks end up on the same line.
It becomes more apparent if you use the non-minified resource:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
A JSFiddle with the minified CSS exhibits this problem, but not one using the fully expanded CSS.
Hope this sheds some light on the issue. Maybe it's worth a bug report?
EDIT: A bit more testing indicates that the Firefox tools places precedence on the left-most block when faced with multiple same-specificity selectors on a single line. (An example.)
Yep that sure is weird, but if you look under inspector instead I see what you would expect:
Must be an error with firefox dev tools?
As title suggests. I've just uploaded this to my site: http://kach.olympe.in/llsif/rare.php
The layout is very simple, the CSS as well, but it doesn't show up. And it's only on this page. The homepage and another have exactly the same code skeleton (I basically copy/pasted and changed the content), but the CSS doesn't work. If I put it internally directly, then it works. Even when I change <link href="/css.css" rel="stylesheet" type="text/css" /> to the full path, the CSS still doesn't work and I seriously can't figure out why. Is there anything I'm doing wrong?
Try to add #charset "utf-8" into the first line of your css file may help.
I have a case that I want the css to be in the body not in the header, because the header is for all pages and each page have a different css file.
I have a problem that the style is working on chrome and firefox but it is not working on IE11.
I tried to use F12 to debug the problem and I discovered the problem.
when I click on the div class=waitingTime" on IE 11, the style is not appeear on the right view.
but when I do the same thing on chrome and firefox, the style is appears on right.
IE 11
Chrome
you can see that the code of adding the css file is above the div
Update
For people who can't see the images, I upload them here
http://postimg.org/image/dd2p19gkh/
http://postimg.org/image/c5a0dntvn/
Update 2
this is how I add the css
<link href="http://localhost:8082/ParkingProject/public/css/waitingTimes" rel="stylesheet" type="text/css" media="all">
<div class="waitingTime">
</div>
You can use link tags in the body (only in HTML5) documents, but only when they have an itemprop attribute, not when they have a rel attribute.
So, your HTML is invalid. It's very nice of Chrome that it accidentally processes your page correctly, but you cannot blame IE for not doing so.
See also
Can I use <link> tags in the body of an HTML document?
Finally I found the problem
The file is waitingTime.css but I forgot to say .css
chrome and firefox so clever to udnerstand it but IE is stupid :) so when I added .css it works