div falling underneath image in FF and Safari

[jianxin9]

Does anyone happen to know what might be causing this div to fall underneath an image in FF and Safari? Thanks.

#liblinks {
margin: .2em 0 0 .5em;
font-size: 80%;
position: relative;
z-index: 5;
margin-top: -80px;
left: -340px;
width:160p;
height:17px;
display:block;
}

[boogyman]

there are a couple things that could cause this but without seeing the rest of the code we will be unable to help you, because that alone is not going to help us at all...

Please post a url / the whole code when you ask for some help.



display:block;

that will automatically force whatever element it is attached to be on its own line.


position: relative;
margin-top: -80px;

that would actually attempt to put some negative margins meaning the element should be cut off. if you were attempting to make the element appear above the parent element you should use top: -[height];
its important to note on that also that you should not use pixels because they are rendered differently across each browser.



width:160p
missing x
damn them typo's

[jianxin9]

Sorry about that. Here is my link (it's a work in progress....):

http://www.twu.edu/library/new_design_template/new_template_file/default2.htm

I went ahead and set the div back to:
#liblinks {
margin: .2em 0 0 .5em;
font-size: 80%;
position: absolute;
z-index: 5;
visibility: show;
width:160px;
height:17px;
left: 430px;
top: 67px;

so tht it would show--basically what I'm trying to do is fix it so that it won't move around on the page when the browser is different sizes.

thanks for any help.

[boogyman]

when you explicitly set the width of an element like you did it will stay that width in regards to text-size increases/decreases. thus the padding / margin you have on it will still take affect, and its causing the text inside the element to be placed on the line below.

rather than trying to prevent the user from resizing the text what you should do is design the page so it doesnt "break" when this action does occur. using absolute position to accomplish this is definitely not going to help because the text size will increase and those elements not set explicitly will expand accordingly, thus making the part you do not want to break, break.

try to use floats rather then absolute positioning because it offers better support for this type of browser action that there is no way of absolutely forbidding the user from initiating.

[jianxin9]

I tried float earlier and it didn't work. Thanks anyway, I do appreciate the help.