CSS positioning problem

1 New Member

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.

Expand|Select|Wrap|Line Numbers

 <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;

}

Feb 27 '08 #1

Subscribe Reply

1255

just a feeling

New Member

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.

Expand|Select|Wrap|Line Numbers

 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,

Feb 27 '08 #2

Similar topics

2312

Absolute positioning controls

by: Tom Szabo | last post by:

Hi, Just wondering if there are any disadvantage in absolute positioning controls on a page? In example instead of putting the text fields into a table to align properly, one would absolute...

PHP

32028

CSS Positioning and Browser Resizing

by: Bryan R. Meyer | last post by:

Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...

HTML / CSS

2685

Help with positioning - I'm too stupid

by: Jane Withnolastname | last post by:

I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...

HTML / CSS

2451

Absolute positioning--what am I missing

by: Harlan Messinger | last post by:

What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...

HTML / CSS

2660

Positioning context - does it work?

by: rajek | last post by:

I posted a similar question yesterday, but didn't get an answer that resolved the issue. (Thanks to those who tried though.) The background: I've read in books and online that if you have one...

HTML / CSS

1796

positioning/Netscape..

by: Frances Del Rio | last post by:

I have a pg with lots of divs, one of them is a gray bar about 150px down from the top and 20px from the left... this bar (an image) is 767px wide and 1px high.. however, even though all divs are...

HTML / CSS

2622

CSS positioning question

by: NS | last post by:

I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--

HTML / CSS

7798

DIV positioning fine in Firefox but out of place in IE

by: TheCeej | last post by:

I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm...

HTML / CSS

16395

Absolute Positioning within Table Cell Alignment Problem in FireFox (Mozilla)

by: nino9stars | last post by:

Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...

HTML / CSS

1921

Simple positioning problem

by: TheCruelPanda | last post by:

Hey there. My name is Rowan, and it's been three weeks since I last used tables for an HTML design. Okay, I'm rather new to CSS and I have a big positioning problem here. It might not be a...

HTML / CSS

7064

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7261

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7315

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

6974

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5559

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4665

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3147

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

721

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

369

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General