Why same CSS code for Safari and IE but not Chrome and Firefox?

[knowledgenotebook]

Here’s the URL,
http://www.knowledgenotebook.com/index4b.html

Per advice of a kind soul here, I added `style=”position:absolute; top:50px; right:600px;”`
to `div` id of `wrapper2`

/* better css programming of putting it int the css file, not inline is a major concern for now. solve the problem first */

It works in Safari 5, IE 10 but not Chrome 28 nor Firefox 22. How come?

Thanks.

[Paulie_D]

>Per advice of a kind soul here, I added style=”position:absolute; top:50px; right:600px;” to div id of wrapper2

I doubt positioning absolutely is required, there are much better ways of laying out divs etc. than absolute positioning. I’m not saying that there aren’t sometimes cases to be made for using it **sparingly** but generally…not a good idea.

Tell you what…do you have an image of the way the **completed** page should look? If we know what you are shooting for we might be able to advise on the best methods.

>/* better css programming of putting it into the css file, not inline is a major concern for now. solve the problem first */

If you don’t start now you’ll just get into deeper trouble. I’d make a serious effort to get your stylesheet started now so we can help you keep it neat.

[Paulie_D]

All HTML elements are rectangular (despite appearances sometimes) so it’s often a good idea to think in terms of breaking up a design into boxes.

We can move those boxes around if necessary (let’s leave that for now) but here’s how I would break down your header.

http://codepen.io/Paulie-D/pen/vwdJj

4 boxes inside some sort of wrapper (I’ve used the `

` element).

They are arranged using floats (http://learnlayout.com/) and the percentages are just rough as are the heights. In general, I would let the content of each box determine it’s height and add padding (or margin if necessary) to get it just the way I want.

Using the z-index property I got the image (or whatever element we might choose) to appear above other later elements.

[Paulie_D]

>Paulie, your code is clean and nice.

I showed you how I would lay it out It has all the bits you need in the right places.

>my logo and menu are on the same div because the logo image height is much bigger than menu item height

I wrapped all my divs in a header tag…so it’s no different. I’m not sure exactly what issues you are still having.

[TheDoc]

It’s not repeating at all. You have a background image on the header *and* an ``, so it appears twice.

[Paulie_D]

Remove all of this

#header img {
padding-left: 125px;
vertical-align: bottom;
overflow: visible;
}

You don’t need it.

However, also add widths and floats as I showed in my example although you can use your own numbers.

[Paulie_D]

Which link should we be looking at?

[Paulie_D]

You haven’t added the floats or widths I mentioned.

[Paulie_D]

I meant **all** the floats and widths as i showed in my example.

And yes, the overflow is needed **because** the internal divs **will be** floated.

[Paulie_D]

if we are still using: http://www.knowledgenotebook.com/index5.html

You have div with a class of `.social’ which, I think, is intended to hold the buttons (which are not currently in the HTML).

The H1, for some reason, has been moved to this div when it should be in the div with a class of `.title’.

By the way, please don’t use breaks `
` as spacing elements…that’s what bottom margins are for.

[Paulie_D]

Wait, hold on.

The div with the ID of #buttons (which I missed before) is in the wrong place.

It should be in (or replace) the div with a class of .social.

[Paulie_D]

>So, now, the original “social” has become “title”, and I leave the originial “title” for vertical empty space.

Rather than have any empty div…just increase the height of nav.

Next, rather than add an extra div inside an li I would just add it as the last item inside the nav.

You may have to play with some widths / add a float property to the buttons div to get it right.

**I’m happy to help with specific situations but i really feel that you need to get the basics of layout down before continuing and i don’t think this continual tinkering is letting you do that..**

[Paulie_D]

>In the meantime, I find this approach is more fun.

That being the case, I would suggest that after each particular issue is finished you mark the thread as solved and start a new one for the next issue (with an appropriate link)

[Paulie_D]

Style2.css shouldn’t be that large. There isn’t that much in it.

In fact, it might be worth commenting it out of your `` and see what difference it makes.

[Author]

Posts