The site I am currently working on is http://rattscallion.com/ I am focusing my efforts on getting the site to look proper in IE.
I was having trouble getting the frame on the pages (look at /murals.html for the page I'm working on first). IE9 said that the inline-style stated that the background-image was "none," so it crossed out the original background image. I figured it might be getting this from somewhere on the main stylesheet so what I did was make a new frame that only exists in IE and style it only in the IE stylesheet. Unfortunately this also doesn't work...it still says that an inline-style is setting the background-image to "none", but there is no such thing!
I double-checked and this is happening in IE9 standards mode. So why is this happening? Can anyone help figure out how to "force" it over what IE perceives as the inline style?
Well there's your problem:
CSS was ignored due to mime type mismatch
normalize.css
If you check the network calls the normalize.css is received as text/plain instead of text/css. You should install static content (under server roles) in your IIS as for some weird reason it's not installed by default. I'm betting one WHOLE dollar you're using IIS.
You could have just copy pasted the normalize.css into a server side css file so it's not accessed remotely.
I got it working by doing the following:
remove #framePos img{ display: none; } from styles-ie.css
remove unitpngfix.js - the png filter fix was for ie6 and serves no purpose on ie9 (it's actually one of the reasons the frame does not show)
Note: the frame.png pic is place in lots'o'places as background so you should consider a little clean up of the css files
Another Note: unitpngfix.js replaces the frame.png with the clear.gif and places transparency filters on every png element. So tinkering on css will not do anything until you remove the js.
Related
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
I am working on some front end design, and while fiddling with some stuff in Chrome developer tools I added the following to the webpage I am working on:
Even after reloading (and emptying cache and hard reloading) this style persists, regardless of whether or not I have the developer tools open.
I am not sure where this style is coming from or why it refuses to quit!
Has anyone experience something similar and were able to figure out a solution?
EDIT: If it matters this is being applied to a table element
Only two options really: either you defined the width: 100% as an inline style or it's being added via JS as an inline style.
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
basically a majority of the CSS styles defined for my website are not displayed when opening the page in IE8. This is not only happening for my custom styles (which I load separately through a custom css file), but also for the built-in features of Rockettheme IONOSPHERE template, for example the box1/2/3/4/5/6 module styles. Also, the rounded style is not rendered, and all modules are shown with sharp corners instead.
I am also using a custom css file (called ralph_golfanatics.css), which I load inside the index.php as follows:
$gantry->addStyles(array('template.css','joomla.css', 'ralph_golfanatics.css'));
All custom styles of this file are displayed fine in IE9, but the most important styles are not shown in IE8. Simply adding these css-styles manually in the file template_ie8.css (that file comes with the Ionosphere template package) did not change anything.
Looking forward to receive any help in this matter. The webpage is http://www.golfanatics.de
Thank you all in advance for your hints.
Ralph
Unfortunately, the link you've included isn't working so it's difficult to pin down exactly what the problem is.
If you're referring to rounded borders displaying with sharp corners this is because border-radius is a CSS3 property which is not supported in IE8.
See this link for border-radius browser support.
There are many CSS3 properties which don't work in older browsers; this is expected behavior and most web developers work around this by using either 'progressive enhancement' or 'graceful degradation'. See this link for more information.
Most websites using CSS3 techniques will never look the same in every browser.
I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.