CSS positioning problem

mohammadtaha

New Member

Join Date: Feb 2008
Posts: 1

CSS positioning problem

Feb 27 '08, 07:35 PM

Hi,

I am using CSS to position objects (<SPAN> and <DIV> tags) on my webpage,
which is working great on regular computer monitors, when I view the same page on
a wide screen laptop monitor, one of my objects (<span id="logo">) changes
position and is placed about 5 pixels below where it suppose to be.
If I adjust the position to compensate for these five pixels,
then the object is correctly positioned on the widescreen monitor but is five pixels off on the regular monitors.
When I only use HTML TABLES with no CSS positioning, I do not grt this problem.

Below are the CSS and the HTML code.

Thank you for your help.

Code:

<htm>
  <body>
    <div id="container">
      <div style="width: 1100px;">
        <span id="google">
          <FORM method="GET" action="http://www.google.com/search">
            <input type="hidden" name="ie" value="UTF-8">
            <input type="hidden" name="oe" value="UTF-8">
            <A HREF="http://www.google.com">
              <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" width="80" height="20">
            </A>
            <INPUT TYPE="text" name="q" size="25" maxlength="255" value="">
            <INPUT type="submit" name="btnG" value="Search">
            <font size=-1>
              <input type="hidden" name="domains" value="www.xxx.com"><br><br>
              <input type="radio" name="sitesearch" value=""> Web 
              <input type="radio" name="sitesearch" value="www.xxx.com" checked>xxx<br>
            </font>            
          </FORM>
        </span>
        <span id="logo2_top">
          <em>XXX</em>
        </span>
        <span id="logo">
          XXXX
          &nbsp;
        </span>
      </div>      
    </div>
  </body>
</html>


//======================================
// CSS
//======================================
BODY
{ 
  color: black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-image: url('../images/background5.jpg');
}
#container
{ 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  top:0px; 
  left:0px;
  width: 100%;
}

#google
{
  width: 375px; 
  height: 80px; 
  text-align: left;
  background-image: url('../images/background.jpg');
  position: relative; 
  top:-4px; 
  left:0px;      
}

#logo2_top
{
 text-align: center;
 width: 215px; 
 height: 80px; 
 background-image: url('../images/background.jpg');
 position: relative; 
 top:-4px; 
 left:0px; 
 vertical-align: top; 
 font-family: script; 
 font-weight: bolder; 
 font-size: 30px; 
 color:#660000;  
}

#logo
{
  width: 375px; 
  height: 80px; 
  text-align: right;
  background-image: url('../images/background.jpg');
  position: relative; 
  top:-50px; 
  left:0px;
}

Tags: None

just a feeling

New Member

Join Date: Aug 2007

Posts: 86
#2

Feb 27 '08, 09:22 PM

Hi,
There are a number of options:

1- Make a fixed width design. Set the CSS width of your body tag to the width you want in pixels (so for 800x600, width: 780px) and set the CSS margins to auto, as this will put your fixed-width page in the centre of larger screens. This is the most popular solution to the resolution problem (just design as if everyone was using 800x600 ).

2- Use javascript detection.

Code:

var mini = 1024; var big = 1280; if (window.screen.availWidth == mini) { document.write('<link rel="stylesheet" type="text/css" href="1024.css" />'); } else { document.write('<link rel="stylesheet" type="text/css" href="1280.css" />'); }

3- Use 'elastic' design. If your design has three columns, for example, make the left and right columns fixed-width and leave the middle column to take up all the remaining width.

4- Use percentage. Change the widths on all of the block level elements to %.

5- Rely on the majority of visitors having a suitable resolution and leave the 1024x768 "warning" in place.

I'd favour 1, but it's up to you.
HTH,
Comment

CSS positioning problem

CSS positioning problem

Comment