html items display at different sizes

Now this is odd. I’ve got a small box-model site going, and I’ve inserted a white html item to serve as a spacer in order to push the content below it a certain distance down the page. Thing is, when I view the page in IE (Net Renderer) and Opera (Mac) I get the the height I want, but all other Mac browsers (Safari, Camino, FF, Omniweb) display it noticeably smaller.

This would seem to be a basic issue. Does anyone know what’s going on here? I know I could use padding to achieve the same results, but I’ve read that IE has issues with that (though I could be mistaken). Any thoughts?

Thanks

Derek


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you have any text inside that box? The only thing I can think of is rendering in different default font sizes. Which makes the box appear in different heights.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No text inside the box, just a plain white div set to a height of 40 px.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Make sure you haven’t applied a style to the box.

Also have you tried setting a custom Margin (in Inspector) to the top
of the box you want spaced down? Then check again in Netrenderer for
IE, or better still, let some one check in a live IE browser. (Post a
URL - there’s usually someone who’ll check for you).

Colin

On 8 Jan 2010, at 12:57, derekzinger wrote:

No text inside the box, just a plain white div set to a height of 40
px.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the tip, Colin. However, it seems that adding the space via a top margin does the same thing, only the difference appears to be greater! IE looks fine, with the desired 48px margin, but pretty much everything else displays it as something like 4px. How can this be?

Anyone who’d like to have a look, the page is here:

http://web.me.com/flyvebaad/phyllis_test/olderworks.html

Very very weird.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have you tried it with a graphic box as spacer - i.e. empty box or
transparent gif?

Just an idea. Colin.

On 8 Jan 2010, at 15:14, derekzinger wrote:

Thanks for the tip, Colin. However, it seems that adding the space
via a top margin does the same thing, only the difference appears to
be greater! IE looks fine, with the desired 48px margin, but pretty
much everything else displays it as something like 4px. How can this
be?

Anyone who’d like to have a look, the page is here:

http://web.me.com/flyvebaad/phyllis_test/olderworks.html

Very very weird.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - looking at this in IE8 and Safari and cant see a difference.

Where am I supposed to be looking?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dave, it’s between the menu bar and the image gallery.

I suppose a gif would work better, but I’m just surprised that using margins is so inconsistent (at least as viewed from here—with Safari, Camino, Omniweb, and FF I get almost no space between the items in question, despite the 48px margin above the “body” div).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try adding the margin-top to the motioncontainer Div instead

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tried that already, but got the same effect. :frowning:

I seem to remember this happening to me on a previous site as well. Am I unlucky? All I’m doing is inserting an html item and adjusting the top margin. Is there a browser display issue I don’t know about?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry - I am out of ideas apart from the gif spacer instead.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for helping, Dave. I think I’ll just go with the gif.

Happy weekend


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I haven’t looked at your code so this is just a suggestion but such
things are sometimes caused by a simple float/clear issue (this is an
inline layout, yes?). It may or may not be the cause but there’s
absolutely no reason why you should need to use a spacer div to do
this. If it were me I would start by looking closely at the CSS.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yup, it’s a inline layout, and floating the div with the margin set on it has solved the problem! Big thanks, Todd.

Derek


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options