Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

My Website Look's different in IE vs other Browsers

Is there an easy way to fix this problem Website in question www.TheQueenOfbusiness.com

Try it in Google chrome and IE

and please explain in the most basic way I am new to this

6 Answers

Do you mean how the images are wrapped by the text in Chrome, but in IE the image is on top of the text (the text doesn't wrap around the image, it starts under the text)?

If so, in your style.css, for the featured image class (".featured-image") try changing the "float: inherit;" to "float: left;" instead. (It's down at around line 101 in your style.css file.)

If that's not what you meant, please provide a little more detail.

I'd suggest using a normalize style sheet to reset all elements before applying your styling.

Chrome 28 & IE 9 look fairly similar to me at first glance. Maybe you can post a screen shot of what you are seeing. Of course it's always a good idea to use normalize.css as Connor Kuehl alluded to earlier.

Keep in mind this helpful advice

There is a reset section at the top of style.css (looks like handles much of what's in something like normalize.css -- I didn't do a one-for-one comparison, though).

There's a reason to use normalize.css over Eric Myer's traditional reset, the goal of normalize isn't to reset elements instead it's to try and get all elements to look the same as a starting point for your design.

Understood.

Dominique -- I'm seeing other differences when I look in IE8 (the sidebar is all stretched, for example) than what I saw in IE10 and Chrome 28. To troubleshoot them, I'd recommend you come up with a list of all of the elements that are different that you want to fix (if they're displaying different but fine, they don't necessarily have to be fixed -- as others have noted above), and then get familiar with the Inspect Element option in your browser(s). That will allow you to tweak the CSS on the site to see what helps, and then you can implement the revisions in style.css (preferably in a child theme). See: https://developers.google.com/chrome-developer-tools/ and http://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx for more info.

I understand that might all seem a bit complicated since you mentioned you're new to this. I'd recommend you take it a step at a time -- ask questions here or in other WordPress support forums (on http://wordpress.org/support/ or Facebook groups or LinkedIn groups or the theme developer's support page) as you go along. Another option would be to hire a developer to either walk you through how to do the revisions yourself or to do the changes for you (I often help clients out with this kind of thing).

Good luck!

Thanks guys for all your help but this isn't clear enough for me to make the changes on my own. I will just work with my designer for help!

Well normally it's as simple as downloading a pre-made normalize.css stylesheet and applying it to your HTML mark up.

For example:

<link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css">

When you link it, make sure it's the first css document that you link, because when you add your own styling, you want the cascade to override the normalized elements with yours.

normalize.css

That what I did instead I used @import 'normalize.css'; to import the style sheet on the main css file I could try linking it instead though and see if that makes a difference