PDA

View Full Version : Top margin in IE v Chrome


Finland Blue
03-15-2010, 08:53 AM
I am testing out a new layout using div tags.

I notice that main text block in the page is starting lower down in Chrome than in IE. Could someone explain why, so I can attempt to fix it.

The page : http://www.travel-experience.net/testdiv2pics.htm

The text is directly under the blue line with "Home" : "The Travel Experience is blah blah ..."

Thanks

Finland Blue
03-15-2010, 12:09 PM
Answering my own question ... I fixed it by making a 2nd div to hold the text, and this seemed to show exact same results on IE, Firefox, opera, and Chrome.

So, I guess I need one div to hold the complete content, and then a 2nd one to hold the text itself? I don't know if that is the most efficient or correct way, but at least it displays what I want/expect.

<div id="right_column">
<div class="textdiv" style="position: relative; width: 587px; margin: 10px 0px 0px -5px;; ">
<p class="introdiv">The Travel Experience is blah blah ...</p>

</div>
</div>

Corrosive
03-15-2010, 02:14 PM
No, you shouldn't need to wrap divs inside divs to get your positioning.

gentleone
03-15-2010, 04:23 PM
No, you shouldn't need to wrap divs inside divs to get your positioning.

Indeed! You have already a block element (the paragraph tag) in your right_column div, so if you set margins to that paragraph tag you should also be alright.

Finland Blue
03-15-2010, 04:29 PM
It was the <p class="introdiv"> that seems to cause the issue. This displays the text in Chrome lower down than in IE.

Changing it to <span class="introdiv"> and the text displays in the same place in both.

I have no idea, what is the difference between p class, span class, and also in other place div class (for text) ??

Corrosive
03-15-2010, 05:07 PM
Paragraphs (p) are block elements and have default styles. Span is an inline element and doesn't.

gentleone
03-15-2010, 05:13 PM
It was the <p class="introdiv"> that seems to cause the issue. This displays the text in Chrome lower down than in IE.

Changing it to <span class="introdiv"> and the text displays in the same place in both.

I have no idea, what is the difference between p class, span class, and also in other place div class (for text) ??

The display difference could be the CSS defaults. The IE defaults are different then those from Chrome. Its recommended to use a global CSS reset at the beginning of your stylesheet. Or put it in a separate stylesheet and load this before your layout stylesheet.

The following article explains everything about CSS resets:
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

The <p> tag (block element) is for text (paragraphs), the <span> tag is an inline element to change for instance a word to a red color and a div tag (block element) is to divide your layout/content and is thus not meant to hold only text.

Finland Blue
03-15-2010, 09:08 PM
Thanks to you both again. CSS resets, I never would have thought, but it seemed to do the trick.

Corrosive
03-16-2010, 01:28 PM
Personally I am not a big fan of resets whilst in the learning phase. It is better to learn and understand defaults rather than resetting and so ignoring them. For example, header (h) tags are default to decreasing sizes from h1 to h6. This just makes sense to me and, although you may reset them, it helps to consider why defaults are the way they are when laying a page out. There are auto gaps between paragraphs? That makes them easier to read.

Finland Blue
03-16-2010, 02:44 PM
In this case, if I hadn't learnt about the resets, I would simply never have managed. Since using it the "right way" was simply not producing the expected results across browsers. Now, I am getting the exact results I expect.

Although, I will be careful to check nothing else odd happens because of the reset. It did do on some tests I made, so I made as simple a reset as I could in order to get the results I needed.

I certainly learnt a LOT.

gentleone
03-16-2010, 02:47 PM
Personally I am not a big fan of resets whilst in the learning phase. It is better to learn and understand defaults rather than resetting and so ignoring them. For example, header (h) tags are default to decreasing sizes from h1 to h6. This just makes sense to me and, although you may reset them, it helps to consider why defaults are the way they are when laying a page out. There are auto gaps between paragraphs? That makes them easier to read.

Agree and disagree! :)

I agree with you that if you use a heavy CSS reset, then you really should know what's all going to be reset. I use a CSS reset because the default styling on for example the paragraph is in every browser different, so you will end up with differences. I also understand that the autogap is there for reason, but I want the auto gap to be the same in every browser, so I'll set the auto gap for myself with padding-bottom in the CSS to what ever height I want it... most of the time the same height as the line-height (which is also different in every browser).

Corrosive
03-16-2010, 03:21 PM
Agree and disagree! :)



Ha, ha. You would ;)