...

View Full Version : Relative positioning won't work in IE!?



Daniel_A_Varney
07-04-2011, 04:01 AM
I don't understand why. Can anyone help? Works in Firefox...


<div id="navigation-row">
<ul id="mainmenu">
<li>Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>


#navigation-row {
Width:100%;
height:2em;
border-bottom:1px dashed #000
}
#mainmenu ul{
position:relative;
top:0;
left:4em
}
#mainmenu li {
display:block;
width:125px;
font-family:"Comic Sans MS", cursive, sans-serif;
list-style:none;
float:left;
}


Actually, doesn't work in Firefox, either if I put #mainmenu ul instead of just #mainmenu but if I have it the other way around, it sticks outside the div in IE. Why is this?

Sammy12
07-04-2011, 05:00 AM
Post a screenshot of the problem. All 3 browsers look fine on my comp

shankar.adodis
07-04-2011, 06:24 AM
Hello ,

Avoid Using position relative unless you need a z-index .

because position relative will make an element free on a entire div and required can't be

positioned properly . try positioning the element without using position relative or absolute.

Sammy12
07-04-2011, 06:47 AM
Avoid Using position relative unless you need a z-index .


What?

position: relative; is the most powerful thing in css. I have never seen anything so powerful.

Use position: relative; for:

a) small changes in directions
b) absoluting icons, buttons, time stamps
c) creating a separate layer

vikram1vicky
07-04-2011, 07:50 AM
Dear,

Please try following.. it is working in all browsers.
Let me know if it useful for you or not.


* {
margin:0;
padding:0;
}
#navigation-row {
height:2em;
border:1px dashed #000;
padding-left:4em;
}

#mainmenu li {
display:block;
width:125px;
font-family:"Comic Sans MS", cursive, sans-serif;
list-style:none;
float:left;
border:1px dashed #06F;
}

Daniel_A_Varney
07-05-2011, 10:55 AM
Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum