6 replies [Last post]
mdd4696
mdd4696's picture
Offline
Regular
Buffalo, NY, USA
Last seen: 17 years 18 weeks ago
Buffalo, NY, USA
Timezone: GMT-4
Joined: 2004-05-18
Posts: 13
Points: 0

Suppose I were to give some text (within a DIV) a negative margin that puts it outside of parent element (another DIV).

In FF0.8 the text is rendered as normal, albeit outside of the outer DIV. In IE6 the text outside of the outer box is not visible... am I clear enough with the problem?

Here is an example of code that does what I mean:

<div style="border-style: solid; border-color: #000000; border-width: 1px;">
<div style="margin-top: -4em; float: left;">mdd4696</div>
</div>

Which browser renders this correctly? Is text with a negative margin supposed to be visible outside of the 'parent' box?

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 45 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text with negative margins not rendered outside box in IE

As far as I can see both render it the same way. You can not see the text.

Quote:

Is text with a negative margin supposed to be visible outside of the 'parent' box?

Not if you send it outside the viewport (browser window)

So my guess is you have not shown us all your code, and as 1em for IE =16px and 1em for FF=14px,
then -4EM = IE-64 and FF-56,
and maybe that is why you can see one and not the other.

Set body{font-size: 14px} and then 1em will equal 14px for all browsers.

Regards
Day

The only way to learn is to do it yourself

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 17 years 18 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Text with negative margins not rendered outside box in IE

no, this is an IE bug:

http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html

One way of making the text appear outside its container is to use position:relative;

bear in mind that doing this will not affect the objects around it, IE if you use

position:relative;
left:-20px;

you will effectively get a 20px margin to the right, so you will need to add a negative right margin to the text that has moved.

This should work in both IE and Netscape.

//edit: I have jst noticed a more complicated version on the eric meyer's site. I have not looked properly but I'm not sure why it needs so much code.... Best to check that out as well if mine doesn't work :?

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 45 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text with negative margins not rendered outside box in IE

ahhh not sure if I understand, but if you have your object hard up against the top of your page and you put in a large negative top margin, then both IE and FF will lose the object outside the viewport.

The Meyer example you have pointed out uses negative margins but does not push them outside the viewport. It only moves them -1px to cover the border, and for both IE or FF the text never dissapears as per your problem. Meyer is pointing out a border problem not a problem with the text.

Are you having a problem with dissapearing text?

Regards
Day

The only way to learn is to do it yourself

mdd4696
mdd4696's picture
Offline
Regular
Buffalo, NY, USA
Last seen: 17 years 18 weeks ago
Buffalo, NY, USA
Timezone: GMT-4
Joined: 2004-05-18
Posts: 13
Points: 0

Position: relative; works

Adding position:relative; to the text with a negative margin works. Now it renders how I wanted it to in IE and FF0.8. Thanks!

If you would like to see an example of what my problem was before, see:
http://www.rit.edu/~mdd4696/dev.html

(excuse the ugly code)

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 17 years 18 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Text with negative margins not rendered outside box in IE

The meyer eg will work for larger negative margins, but NOT in IE. Ie hides it which is the reason for using position:absolute.

In mozilla/NS/Opera/Firefox you can use the negative margin to move something completely outside of it's container - I've done it lol. It will show up fine in those browsers but IE will not render anything outside of the box. in IE a -20px margin loses 20px of text. The only reason the text does not dissapear is because the margin is only -1px

Sorry if I am not making myself clear - just try a quick example and you will see.

the example mdd4696 talks about is losing the text outside of a parent element (the div) not the viewport. I'm sure this is the reason and a position absolute will sort it.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 45 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text with negative margins not rendered outside box in IE

I stand corrected, had not come across this before. I have deliberately negative margined something outside the viewport, but not as you have done.

Thanks
Day

The only way to learn is to do it yourself