Bummer! You must be logged in to access this page.

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

Posted by Johan Delforge
Johan Delforge
13,317 Points

Cross-browsing layout problems

Hi there !

While I'm here brain-stretching, I am doing a little job for a friend. Coming from a PSD, i managed to get a pixel-perfect result from scratch with html, css, and a bit of Javascript.

It is working well on Chrome & Safari, however I get the same layout problems on Explorer & Firefox.

Here is the link

If you have any ideas... Or recommended forums i can go to...

Cheerz !

Johan

8 Answers

eck
eck
43,038 Points

Hey Johan, it looks like the -39px top margin you are giving to #content_wrap is causing the trouble.

Try the following CSS and see if it helps:

#content_wrap {
    position: relative;
    top: -39px;
    width: 1070px;
    height: 100%;
    margin: auto;
    z-index: 10;
}

I am not totally sure why this issue occurred, but using the position and top properties will get you a similar visual result.

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hi Johan, if you are using CSS3, I suggest you have a look at CSS3 Browser Support Reference, as some properties might not function properly due to not being supported in some browsers, some though (that aren't straight away supported) can get supported by using certain prefixes ie. ms, moz etc.

Johan Delforge
Johan Delforge
13,317 Points
Johan Delforge
Johan Delforge
13,317 Points

Thanx for the link Gloria, unfortunately i am only using pretty old-school commands, and the mark up could have been done back in 2004. So i guess it is more about common layout bugs IE & Firefox have that i need to find... still a newbie in that field...

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Oh okay. If you are using something older maybe some are deprecated and not functional anymore in the newer browser, for example for HTML there are some - Deprecated and Obsolete Elements check this link( http://msdn.microsoft.com/en-us/library/ie/hh773181(v=vs.85).aspx ) that might not be compatible with newer versions of Interner Explorer. Something similar could be happening on your project.

nnuxiragwh
nnuxiragwh
10,345 Points
nnuxiragwh
nnuxiragwh
10,345 Points

Hi Johan,

I would suggest adding these two files in a IE conditional in your header.

respond.min.js
html5shiv.min.js

Like this, after the html </title> tag

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

This is an easy way of fixing some of IE8 issues. To improve performance you can download the files, and include them into your project locally.

I hope it will solve some of your problems.

Regards,

Tomek

nnuxiragwh
nnuxiragwh
10,345 Points
nnuxiragwh
nnuxiragwh
10,345 Points

I would also add

#content_wrap {
    overflow: hidden;
}

#bandeau_gauche_wrap

and

#sheet_wrap

are floated left, so it means that they are take out of the natural flow of the HTML document, thus the parent element is collapsing. If you inspect it with FireBug in FireFox you will see that it has a Height of 0px;

You can read more about floating elements on Smashing Magazine: The Mystery Of The CSS Float Property

Johan Delforge
Johan Delforge
13,317 Points
Johan Delforge
Johan Delforge
13,317 Points

Hi Gloria, thanx again for the link (i'll keep it). But actually when i was saying old-school commands, it was more basic commands. So the markup does not contain any outdated ones. Actually Tomasz & Erik mentioned some very interesting stuff to look after, and these are already giving some promising results. I will answer them later tonight.

Cheerz to you all, and warm greetings from Belgium !

Johan

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Ah, all right. I now got it. Yes try their suggestions, I hope it works out :) You are welcome.

Johan Delforge
Johan Delforge
13,317 Points
Johan Delforge
Johan Delforge
13,317 Points

Hi Erik, you were spot-on with the margin-top:-39px issue, changing it to top:-39px fixes the layout in IE & Firefox. Thank you very much for this.

Here is the result.

One last thing, eventually : How can i make the left sidebar reach the footer when i add more content to the right sidebar ? In the link, i have added more text to the right sidebar. I would love the left sidebar to automatically adjust. I have tested many things, still not reaching my expectations.

Anyhow, my best regards !

Johan

Johan Delforge
Johan Delforge
13,317 Points
Johan Delforge
Johan Delforge
13,317 Points

Hi Tomasz,

Adding the mentions right after the title in the markup did not change my problem, but I'll keep it in the code anyway, and on the side for future reference.

However, the overflow:hidden did fix the layout problem in IE & Firefox (!), althought my sidebars are now separated from the header, thus losing the effect. Also the link you provided is very interesting and for sure there is a key understanding this Float Property Case.

I invite you read my answer to Erik, who provided the best fix. ... you are more than welcome if you have any idea for the additional question i am asking him.

My best regards, you guys are being fantastic helping me out.

Greetz,

Johan.