Weird CSS Issue - html

On this site, the footer displays incorrectly in IE, and older version of FF, however displays perfectly in FF 3.6.13, any ideas what i'm doing wrong?
http://therhythmhut.com.au/

IE7 doesn't support display: table, so your design is completely broken in IE7:
I think you are better off just rewriting the footer so it doesn't use display: table, and your problem might fix itself.
I really like the design in Firefox and Chrome though!

Related

my site breaks up in IE

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.

IE 11 displays CSS differently from other browsers

I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:
Here's what it's supposed to look like:
Now, I've looked through the dev tools on both Chrome and IE, and here's the results.
IE:
Chrome:
So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.
Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.
I have had similar problem.
Solution that worked for me was giving the button overflow: visible;
Working example (IE9+): http://jsfiddle.net/aBfF8/1/
The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.
You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.
Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)

Top nav bar broken in IE

I have a Top nav bar working in major browsers, including ie8 and above. HOWEVER. When I put IE8 into compatibility mode ( which I thought would test for ie7 browsers) it no longer works. i can find any logical reason why it doesn't. here's the site: http://redemptionconnect.com/pages/articles#
Can anyone help with this situation?
The logical reason is that older browsers have various problems (not just IE, but often times older IE can be a huge problem).
IE7 doesn't support inline-block. You're going to have to figure out a different solution.
Start here, it may help you.
http://www.brunildo.org/test/InlineBlockLayout.html
So I figured it out! All I had to do was apply float: left; to the li element. That worked in ie7!

Weird IE7 Bug/Error

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...

How could be HTML markup working in Safari and not working in Chrome

The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content