I am sure you have all heard this all before, but IE8 sucks, the Div's are not lining up correctly in my site:
http://www.relayconcepts.co.za/home/
The problem is i can't find out why it's doing that. This is a Joomla site that I have hijacked and inserted my own HTML/PHP in certain places and changed CSS to no extent.
The thing is that it works well in firefox, Chrome and even IE9 works all right.
Related
A client recently informed us that a store site I helped develop was displaying weirdly in Safari on desktop. I checked into his question and sure enough the client company's logo is getting cut off by the search bar:
Safari desktop view
I checked it against Chrome, Firefox and IE and all those seem to be displaying ok:
Chrome view
I double checked element styling and it looks ok, I even got my developer involved, and even he is stumped - says Safari should be using Webkit and as such should display consistently.
Link to the site
I've tried searching if others have had Safari-related rendering issues and haven't found any relevant articles. Wondering if there needs to be browser-specific conditional formatting in my markup.
I don't think you have a need for the third section, so remove that section and leave the container to be nested under the nav, it is the sixth nested element. Hopefully that should fix it :)
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I have just finished the layout for my website, and it is working perfectly fine in all browsers (Opera, Safari, Chrome, IE 7, 8, 9, 10 (both), and several others) - but this time around, the Compatibility View button in the address bar of IE 10 is appearing. This has not happened for a very long time and it's really annoying me.
I don't want the Compatibility View button to display at all. It sends a bad message to viewers/visitors. In this case, I have tested my whole site on different computers all running different browsers and different versions of browsers and I have not noticed a single problem.
Why is the Compatibility View button appearing if there are no issues?
Here's the problem, and like I said, everything works fine - except for when I turn ON Compatibility View in IE 10. When I turn it ON, the only things in my entire website I can see is my logo, and a little image in the top right corner of the page (but they're positioned exactly where I wanted them). What gives?
There's nothing wrong with the code - seriously. i've had it validated several times, all AJAX stuff works like a charm, and I really tried so hard to find a problem and I even intentionally tried to mess it up but it's working really well. The positioning of everything is spot on.
So what's the deal with this Compatibility View junk? Why is it there - on a website that does not have any issues? And, most importantly, is it important that I make sure my website works well while in Compatibility View even though it works perfectly when it's off and even though it works perfectly in all the major browsers - and then some?
First and foremost, you can force IE not to display the Compatibility View button simply by adding this to your page head:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As for your other questions:
Why is the Compatibility View button appearing if there are no issues?
So what's the deal with this Compatibility View junk? Why is it there - on a website that does not have any issues?
It's there in case a site, typically one that was written many years ago, fails to work in a newer version of IE, to allow users to view or IE to display it in a legacy rendering mode where it will hopefully work better.
Additionally, it's there by default because legacy sites will not even have the meta tag above to begin with. In order for the button to display when viewing existing sites without having to update their code, it's only logical to make it an opt-out feature instead, by having the developer add it to new code to tell newer versions of IE to hide the button when it's not needed.
And, most importantly, is it important that I make sure my website works well while in Compatibility View even though it works perfectly when it's off and even though it works perfectly in all the major browsers - and then some?
Compatibility View is meant for websites that were specifically designed for legacy browsers, and as such, depend on legacy rendering quirks not present in more recent browsers which may cause "problems" in those more recent browsers.
Without seeing your site, we won't be able to determine why it works in IE7 and IE10 in IE7 mode but not Compatibility View, but if it works well in newer versions of IE, you do not need to ensure that it works well in Compatibility View. Using the meta tag above to hide the button when it's not necessary will suffice.
Can you provide us a link to your site? I always use
<!DOCTYPE html>
on the first line of the HTML document. This is a universal switch to the latest rendering mode in all modern browsers. Use BoltClock's solution to hide a compatible view button in IE's address bar. I would prefer a HTTP header rather than HTML meta tag, because the meta tag causes parser switch and reset.
For some reason, on this page, in Chrome 17, CSS3 transitions aren't working the first 3 links in the footer/nav: http://jacob.bearce.me/index2.htm. The links are exactly the same, no added classes, and I went through step by step to figure out what it was, it's changing the HREF property that breaks them. For some strange reason, services.htm works, but projects.htm does not. I have absolutely no idea why.
UPDATE: Tested in Firefox, Opera and Safari it seems to be only a Chrome issue. It makes no sense. It's not even a webkit issue (unless Chrome's got a newer version than Safari).
Sorry if this response is slightly late, however, I'm currently on Google Chrome 16.0.912.63 beta-m and I have the exact same problem as you do. In fact, on your website, out of the 4 links below, it is only the home link that doesn't seem to be working too well with CSS3 transitions (on my side).
On a website I'm currently working on, the transitions seems to only work on some links and not others. I can't really see any trend to understand what causes it. Strangely though, when I visit your website or mine through Incognito, everything works well. It doesn't work even with my extensions disabled.
It looks to be bug with Chrome. I've figured out that it's definitely an issue with :visited links, but can't fix it no matter what. In incognito mode you don't see the issue because Chrome isn't logging what links you've visited. From what I've seen, it looks like it's an issue in Chrome 16 or higher. Hopefully they'll fix this in the next release, but for now, we'll just have to ignore it.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.