My website was designed for firefox, and now that I've got most of the stuff I'd like, I am trying to get standard functionality working on other browsers if nothing else.
One of the weirder errors I currently have (only in Opera 12.0), is that to the right of my page is a big empty space. Does anyone know what functionality in Opera might be causing this?
Note: If it helps I added borders, which actually duplicated the problem in Firefox (and possibly other browsers).
You have to fix the div with position:relative; left:300px; style by giving it a width.
Related
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'm working on some boxes where I'm forced to using the following css on a div in order to make it look right:
display:table;
It works fine in Firefox + Internet Explorer, but I just noticed that it adds a 1px border/margin/padding in webkit browsers (Safari / Chrome), which moves the box a bit... How can I get rid of this?
I've uploaded a picture example of how it's rendered:
http://imageshack.us/photo/my-images/854/examplez.jpg/
Is there a "simple way" of determining in the stylesheet whether you are using a webkit browser or not? Because then I could just add a "margin-left:-1px".. I know there is a way of determining the browsertype in jQuery, but I think it's kind of overkill for this..
I seem to have a glitch on in Internet Explorer and wondered if anyone could shed some light
Taking the following page as an example
http://www.flipfilter.com/websites-for-sale
When running in IE not under compatibility mode, all the Cufon (js font replacement) headings disappear. When I click the icon to enable compatibility mode, the pagination seems to go crazy and extends down the page.
Can anyone point me in the right direction, specifically as to what causes either of these problems?
If the problem is a validation issue could you point me to which one specifically causes the two errors?
Just have the pagination issue to
resolve now!
Compatibility mode emulates IE7, so fixing your site to work with it ensures that your site will look acceptable to genuine IE7 users.
You can fix the pagination problem by adding float: left to #pagination-flipfilter li.
You might also want to adjust the margin slightly.
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...
The products on the below page are getting displayed correctly in FF, Safari and IE8:
http://www.toomanydesigns.com/thefix/top10_watches/
However, IE6 is having issues. Does anyone know what I need to do to get it to display correctly in IE6?
Thanks
I don't have IE6 installed, but what this looks like is the IE6 Multiple Class Bug for this (and maybe more) div:
<div class="listing-type-list catalog-listing top10full">
It's a bummer, but if you really need IE6 support, that page will show you some techniques to work around it.
fixed it. I needed to add a larger line height to get the numbers to show and adjust the margins so the content fitted.