I have run into this a couple of times - I coded or modified a CSS template with a specific thing in mind, yet the browser displays it differently than intended. When i use "Inspect Element" in Chrome, it shows the attributes I intended associated with that element, yet the browser is showing something different. What are the possible options from here as far as figuring out the issue/getting the site to look how you want?
Before I had an issue that I can't remember exactly where it didn't display correctly in Chrome (but Chrome Developer Tools showed it as I intended), but it did display in another browser.
Now, I am having an issue where multiple pages on the same site have different fonts for the same menu although the CSS showing in Inspect Element is correct for all - the behavior is consistent between Chrome and Safari (haven't checked other browsers yet).
You could always check for !important on lower down lines. I think that happened to me once, and I don't think it put a line through my style that was being overidden. (It may have though it was a long time ago it happened.) The only way really around that if that's the case and if that !important is necessary is to add !important to your rule you want to overwrite with. (Try to avoid using importants wherever possible though, because in most cases an important isn't necessary.)
Related
When I view my page in IE10 w/compat. mode (IE7 Standards) the page renders certain elements incorrectly. However, when I go to inspect the elements with Developer Tools (F12) and change anything, all of a sudden, the elements are rendered correctly.
Anyone ever seen anything like this before? If so, how did you fix it? It is maddening trying to troubleshoot, while not being able to touch anything.
Same thing here, IE10 dev. tools make certain CSS styles completely dissapear!
I noticed that with class-name "top" loosing its definition.
Funny is when I renamed it to class="topbar" my problem was solved.
I am writing some CSS files, but when I make a mistake, Chrome appears to just silently ignore the parts that I screw up, and renders the rest.
This makes it annoying to debug since I can't figure out what is going wrong.
So, is there a way to get Chrome to "scream at me in big red letters," so that I can spend less time finding the error and more time fixing it?
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). The Styles pane is also useful because of it's ability to LiveEdit the document being inspected, which may help you iron out the issues. If the styles are being overridden, you can then view the Computed Style pane to see the CSS that is actually being utilized to style your document.
To bring up the Chrome DevTools window, hit Ctrl+Shift+I in a Chrome browser tab. (Command+Opt+I for a mac)
For more info visit https://developer.chrome.com/devtools/index
As CSS is not a scripting language, you cant properly debug it. Anyway if you know where it goes wrong you can try to tune it by hand.
Aditionally you've got the w3c validator here: http://jigsaw.w3.org/css-validator/ which may give you some feedback
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.
I'm having a problem with CSS not displaying correctly between IE and Firefox... The big problem is that we have a ridiculous number of CSS files (and this isn't something that is currently scoped to fix), and I can't seem to find what style is being applied.
Any way, here's what I'm looking at: On the shopping cart page for our site, we have a table (yes, I know) where each row is an item in the cart. On IE, Chrome, Opera and Safari, this table renders fine - everything looks good, borders are all hidden, it looks great. On Firefox, however, while the outer border on the table remains hidden, lines separating columns/rows inside the table are displayed.
I don't have direct links to show the problem, but if you go to
https://store.petango.com/Roc-P6986.aspx
and click the "Add to cart" button, it brings you to the cart page (where you can see the lines showing in FFox, but not in IE).
For what it's worth, this is a third party E-Commerce package that we purchased, and on top of that we hired out our web design to a DIFFERENT third party web developer. Hence the jumbled mass of CSS files/confusion. Trying to look at the CSS for specific TD elements (in Firebug) is basically impossible to read it's so long, but I can't see anything obvious in there either.
I would be thrilled if this is just something stupid I'm missing, and there's a well known mistake that has been made in our CSS that lets it render fine in every browser but Firefox - any help would be greatly appreciated.
A bit of poking around in Firebug reveals that removing the border-collapse:collapse style from the ctl00_wpm_Basket_ctl04_BasketGrid table removes the borders. I'm not even going to try to explain this - the style should be completely unnecessary, as like many of the other applicable styles it's set and reset multiple times at multiple levels... I suspect you're encountering some subtle difference between how styles are applied in Gecko and other browsers; it's probably a bug, but I would encourage you to slim down the test case if you decide to report it...
this isn't something that is currently scoped to fix
It probably should be... Otherwise, you'd better get comfortable using Firebug.
"We fully recognize that IE is behind the game today in CSS support."
ieblog
I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. In relation to Firefox, the following is wrong in IE (in order of importance):
the main body box is pushed below where the left boxes end
the upper-right drop-down stuff (mouse over "Settings") is totally off in the weeds (it's off in Chrome also but in a different way)
"Recipes" tab is supposed to have no visible bottom border
search button is askew in relation to search box
logged out version: the upper-right login elements are askew
Logged in,
Logged out,
CSS,
Links, functionality, etc. are not guaranteed to work on these pages. It's just static snapshots to show layout.
Can anyone point me in the right direction for whatever I'm doing wrong?
You need to Reset your CSS (Dean, above recommends Eric Meyer's Reset CSS). I prefer Yui Reset CSS (I actually like their own Reset / Fonts / Grids CSS). As part of doing this you also need to use Standards Mode.
Finally, you need to be aware that some things will differ in browsers no matter what. So if you run into this situation, it's either work around it, or live with it.
What version of IE are you running? Sounds like most of your issues may be caused by the IE Box Model Bug.
I never start a new website design in css without putting Eric Meyer's Reset CSS in first.
It resets all the differences in all the browsers, so that you've got a even playing field to start from.
From there-out, everything should be the same in all browsers.