Blog doesn't look the same on Chrome, IE and Firefox

I use both Chrome and Internet Explorer from time to time and noticed that my blog looked different on each of them. The picture I use in the header and the search bar drop down when using IE but looks fine when I'm using Chrome. I'm using Blogger to build my blog. Please if anyone could help I would be very grateful

Here is the link to see for yourself check both browsers Chrome and IE to see the difference that I'm talking about. I even checked Firefox but it looks messed up like it does on IE as well. Thanks in advance to anyone who is able to help me.

http://www.quirkymart.com/

 

Anybody have any ideas?

 

Google Chrome uses a different rendering engine than Internet Explorer and Mozilla Firefox, so it may display web pages differently than those browsers do.

 

Is there a way to fix it?

 

No, I have no idea about it.I'm very sorry about it.

 

i also have same problem with you...

 

It frustrates me because I am happy with every other part of the site besides that. I want for it to look good no matter what browser someone is using.

 

you get update version of all browser then you see website same in all browser

 

^ No no NO, that is just not true. And it's an extremely flawed mindset to have. When you design, you design for a wide variety of end-user configurations. If it's broken on a commonly used one, that's a problem you have to address. It isn't the end user's fault for not having the right software.

(Well, unless they're using, I don't know, IE4.0...)

 

Do you know how to fix it?

 

I read something about using % instead of px but I tried it and had no results. It would be really cool if someone could give me some useful advice or at least point me in the right direction.

 

Sorry, WillFlipIt, I know it isn't very helpful of me. I had time to comment on someone else's reply but not really to look through your site.

My best advice to you, to help other people to help you with this, is to attempt to solve it yourself first, and that way you will be able to have a more concrete, specific description (and understanding) of the issue than "It doesn't look the same; how to fix?" If you aren't aware of Chrome's incredible development tools, right click on the relevant portions of the page within Chrome and 'Inspect Element'. Although I guess you should probably do this in Firefox - inspect using Firebug, which accomplishes much the same things.

You'll be able to highlight over block-level elements and see their structure outlined (with margin, padding, and dimensions), and you'll also be able to edit the styles and see the result on-the-fly. So that way you will get a sense of the moving parts and if not fix it outright, at least what exactly is causing the snag. Hope that sets you on the right path.

 

First off let me apologize HBz the message wasn't really directed at anyone in particular, it was a comment of frustration. This problem is keeping me from moving forward with any effort to advance it's popularity, because to make a good first impression.

In response to your suggestion, I have tried all of that and haven't had any luck with it. I'm at a loss for where to go from here. I've Googled the problem and read quite a few different forums trying to find a solution and decided, as a last resort, to post my problem here in hopes of finding someone who might have some advice for what I can do to solve it.

Again, I apologize for any misunderstanding caused by my comment above. No worries HBz, have a good day my friend.

 

Oh no, you don't need to apologize! I was apologizing all on my own, since I realized how silly it was of me to be posting without offering help. Just trying to point you in the right direction there, in lieu of digging through the site myself

Since you've tried all of that, do you think you could describe the problem in any more detail? Such as, the elements in question that are out of whack in Firefox. Someone reading through this thread might find that useful, so they know where to look. What changes have you tried to those elements?

 

The best suggestion that I have found was someones forum post talking about using % instead of px, I tried that and it didn't work. The problem is in the header-wrapper element of the page. Here are some screen shots of the problem to better understand it.

What it looks like on Chrome
http://www.flickr.com/photos/87789825@N04/8033621806/

What it looks like on IE & Firefox
http://www.flickr.com/photos/87789825@N04/8033628324/

 

I dug around in Firefox briefly and it seems the <div> devoted to Adsense is what's causing the problem. Try it - delete that div wholesale via Firebug and your other elements will fall in line. I'm not sure why it isn't doing this in other browsers or what about it is causing the problem, although the Adsense code is sorta a mess! haha.

It seems sort of like it's too wide, and as a result the float:left div containing your header image under it is pushed down below it, as there's no room for it to display adjacent.

 

That did it but I really wanted that leaderboard there lol

 

yeah, you will probably have to fix the way that thing is styled somehow...although, that part of the code is really gross-lookin'. Good luck!

 

Not exactly what i was looking for and I thought that was the problem, but I wanted to find away to actually keep the leaderboard.

 

It's funny that it looks so "gross", because I didn't add the code myself I just used an Adsense widget on Blogger.