SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An element stands on 2 different locatins on two different platforms

    Hi everyone,
    Here is a simplified version of my code:
    HTML Code:
    <!DOCTYPE html>
    <html lang="he">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
       <style type="text/css"> 
          html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym,   address, big, cite, del,dfn, em, img, ins, kbd, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,	fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, 
    details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time,	mark, audio, video 
    	{
    	 margin: 0;
    	 padding: 0;
    	 border: 0;
    	 font-size: 100%;
    	 font: inherit;
    	 vertical-align: baseline;
    	}
    Body 
           {
         background-image:url('images/background.jpg');
         background-repeat:no-repeat;
         background-position: 50% 0%
        }
     
    li:hover {color:#ee103f;font-size:100%;}
    ul 
        {
        position:absolute;
        margin:9% 0% 0 33%;
        width:33%;
        border-bottom:1px solid #9fa9aa; 
        border-right:1px solid #9fa9aa;
        border-left:1px solid #9fa9aa;
        list-style-type:none;
      }
    ul li 
          {
         text-align:center;
    	 width:23%;
         float:right; 
    	 border-right:1px solid #9fa9aa;
    	 color:#1c26a8;
    	 font-family:tahoma, arial,"sans serif";
    	 font-size:100%;
    	}
       </style>
     </head>
    <body>
        <ul>
    	    <li class="about">aaaaa<div id="about"></div></li>
    	    <li class="sign_up">bbbb</li>
    	    <li class="sign_in">cccc<div id="signin"></div></li>
    	    <li>dddd</li>
    	</ul>
      </body>
    </html>
    My table machine has a resolution of 1024 X 768 and the look of the page on it is attached hereby attachment#1.
    My laptop's resolution is: 1280 X 768 and how my page looks on it is attached as att. #2.
    My question is: Why is the ul element stands where it should on the table platform but on the laptop platform it
    stands at the same place where the background element stands?
    Thanks
    Attached Images Attached Images


Tags for this Thread

Bookmarks

Posting Permissions

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