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.
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 have a HTML page where i have div to show help as shown in image above at bottom.
I also have combo box (select input) which is comming on top of this help div in IE 6.
For other browser and and IE6+ versions, it is working fine.
Is there any CSS hack for this issue for IE 6?
This is a very famous and old bug with IE6. What you need to do is to have an iframe before the div. This bug is quite well documented. It happens because in IE6 select boxes were ActiveX controls and were meant to be above all the elements of the page. iframe is also an ActiveX control and can be set above the select box. You can read up about the hack on this website http://www.javascriptjunkie.com/?p=5.
I am pretty sure a similar question has been asked around on SO as well but I couldn't find it.
There are well-documented CSS hacks for all the versions of IE.
For IE6, use the underscore hack -- put an underscore character at the front of the selector to target just IE6.
This page has full details: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
As i know, by default IE6 will put above the other elements.
You could hide them (display: none) when this div.help is shown
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.
I am working on a site that has a couple columns in it and I've fought with it for a while and finally thought I had everything lined up correctly. I cross checked it in Adobe BrowserLab and everything seemed good (except IE6 and IE7 but I just accepted that).
I tried it on a different computer though and IE9 on the computer I tried it on displayed it like IE7 was displaying it in BrowserLab. Essentially what's happening is the "Daily Tech Blogs" column slips way down to the bottom of the page out of line.
Can't for the life of me figure out why. As you'll note in the CSS, I'm using display:table and display:table-cell because that was the only thing I could get to line things up on all browsers (or so I thought). I initially just used DIV's but they were being treated different by different browsers. I then tried to recreate it with just <table>s but that put everything out of whack. Here's the link to my JSFiddle:
http://jsfiddle.net/uBahh/1/
Any thoughts?
I've found for my purposes that the best way to go about it is <!--[if IE 7]><body class="ie7"><![endif]--> at the top of code. I can then just adjust things where I want them with position:absolute. While I generally tend to avoid hacks like this (and most people would second that), it was really only a major problem in IE7 and it was the most efficient way for me to go about it rather than mess with code that's proven on every other browser.
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.