Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    Relative positioning won't work in IE!?

    I don't understand why. Can anyone help? Works in Firefox...

    Code:
    <div id="navigation-row">
    <ul id="mainmenu">
    <li>Home</li>
    <li>Gallery</li>
    <li>About</li>
    <li>Contact</li>
    </ul>
    </div>
    Code:
    #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?
    Last edited by Daniel_A_Varney; 07-04-2011 at 05:04 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Post a screenshot of the problem. All 3 browsers look fine on my comp

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by shankar.adodis View Post
    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
    Last edited by Sammy12; 07-04-2011 at 07:51 AM.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Dear,

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

    Code:
    * {
        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;
    }
    Last edited by vikram1vicky; 07-04-2011 at 08:52 AM.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •