Simple CSS question, stumped me.

Hello guys. My name is Lynne and I am currently trying to build a website for a game that I play online called Exodus.

This is the page --> http://exodus.mudmagic.com

Immediately you can probably see my issue. While I -finally- figured out how to properly center the page so it showed up centered on all resolutions, I now have run into another couple problems.

While some of the items on my page can be centered, MOST of them cannot because a lot of things have to be at a certain spot on the page, not centered as you can probably see. I'm using percentages on the centered items to keep them in the middle, and pixels on everything else, I wanted to change everything to percentages because it tends to look nicer, and it auto realigns if you shrink up your browser. However, if you look at the page you will see that the little exodus picture displaying our Host and Port does not completely match up with the bars above it (I am quite aware everything else doesn't match up either, ignore that for now) If I make the margin left % any higher or lower, it is too extreme in both cases.

The SECOND major issue is this. I have a 22 inch monitor and, like a 12 inch lap top monitor. When I look at my laptop, I see that the banner at the top of the page and the two bars above and below the link gifs are perfectly centered, and that the exodus image is just a tad to too far to the right. As if this wasn't annoying enough, given the fact that no matter what I do that image won't match up right, when I look at my 22 inch monitor, the exodus image is WAY too far to the left. This confuses and infuriates me.

Does anyone have any suggestions? I'm really stumped and annoyed on this one.

Here is the code:

[html]
<HTML>
<HEAD>
<TITLE>Welcome to Exodus</TITLE>
</HEAD>
<BODY bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<background img="http://www.anthonette.com/wp-content/uploads/2007/04/tonet3.jpg">
<DIV style="position:absolute; left:10%; right:10%; top:171px; z-index:0" align="center" align="top">
<img src="bar.jpg" align="top" border=0 width=818 height=13 >
</DIV>
<DIV style="position:absolute; left:10%; right:10%; top:206px; z-index:1" align="center" align="top">
<img src="bar.jpg" align="top" border=0 width=818 height=13 >
</DIV>
<DIV style="left:100%; right:100%; top:25px; z-index:2" align="center" align="center">
<img src="chromeMasthead_purple.jpg" align="top" border=0 width=817 height=143 >
</DIV>
<DIV style="position:absolute; left:1090px; top:224px; z-index:3" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:850px; top:224px; z-index:4" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:480px; top:409px; z-index:5" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:500px; top:226px; z-index:6" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:621px; top:225px; z-index:7" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:480px; top:411px; z-index:8" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:480px; top:622px; z-index:9" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:480px; top:624px; z-index:10" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:480px; top:1026px; z-index:11" align="center" align="top">
<img src="bar.jpg" align="top" border=0 width=818 height=13 >
</DIV>
<DIV style="position:absolute; left:480px; top:835px; z-index:12" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:480px; top:837px; z-index:13" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:715px; top:440px; z-index:14" align="center" align="top">
<img src="content.jpg" align="top" border=0 width=585 height=553 >
</DIV>
<DIV style="position:absolute; left: 18%; top:225px; z-index:15" align="center" align="top">
<img src="picture.jpg" align="top" border=0 width=351 height=177 >
</DIV>
<DIV style="position:absolute; left:850px; top:229px; width:114px; height:23px; z-index:16" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Some Header</FONT>
</DIV>
<DIV style="position:absolute; left:1095px; top:228px; width:114px; height:23px; z-index:17" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Some Header</FONT>
</DIV>
<DIV style="position:absolute; left:485px; top:413px; width:114px; height:23px; z-index:18" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Content Box</FONT>
</DIV>
<DIV style="position:absolute; left:485px; top:626px; width:114px; height:23px; z-index:19" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Content Box</FONT>
</DIV>
<DIV style="position:absolute; left:485px; top:838px; width:114px; height:23px; z-index:20" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Content Box</FONT>
</DIV>
<DIV style="position:absolute; left:850px; top:252px; width:198px; height:151px; z-index:21" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:1095px; top:251px; width:182px; height:151px; z-index:22" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana"><A HREF="http://forumtopic.html">
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:490px; top:438px; width:179px; height:167px; z-index:23" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
</FONT><FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:490px; top:651px; width:179px; height:167px; z-index:24" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
</FONT><FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:490px; top:864px; width:179px; height:167px; z-index:25" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
</FONT><FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="overflow:hidden; position:absolute; left:775; top:460; z-index:26" align="center" align="top" width=464 height=8>
<HR size="3" width="459">
</DIV>
<DIV style="position:absolute; left:775px; top:446px; width:432px; height:23px; z-index:27" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Some Header</FONT>
</DIV>
<DIV style="position:absolute; left:750px; top:479px; width:517px; height:87px; z-index:28" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. <BR>
<BR>
the rest of the body goes here</FONT>
</DIV>
<DIV style="position:absolute; left:520px; top:184px; z-index:33" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:670px; top:184px; z-index:33" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:820px; top:184px; z-index:34" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:970px; top:184px; z-index:35" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:1120px; top:184px; z-index:36" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:540px; top:185px; width:117px; height:23px; z-index:37" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="http://index.html">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:690px; top:185px; width:116px; height:23px; z-index:38" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:840px; top:185px; width:64px; height:23px; z-index:39" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:990px; top:185px; width:120px; height:23px; z-index:40" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:1140px; top:185px; width:117px; height:23px; z-index:37" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
</body>
</HTML>[/html]

Feb 9 '08 #1

Subscribe Post Reply

1439

drhowarddrfine

7,435

Expert 4TB

You have no doctype which puts IE into quirks mode.
You have 105 HTML errors.
You have 2 CSS errors.

Please see the articles about doctypes and validation under Howtos at the top of this page, in the html/css section.

Feb 9 '08 #2

Similar topics

just a simple question

by: corleone | last post by:

im stumped! my expected input dialog box should be please choose value 1 2 3 *in this exact format.

Java

I think I'm gonna cry. (or newby problems with simple string function)

by: robbie.carlton | last post by:

Hello! I've programmed in c a bit, but nothing very complicated. I've just come back to it after a long sojourn in the lands of functional programming and am completely stumped on a very simple...

C / C++

Simple SQL Statement....broken brain...

by: D. Shane Fowlkes | last post by:

I'm stumped! I know this isn't exactly a .NET question but I know someone here is bound to be able to help. I'm trying to write a query to extract a list of records from a many-to-many "key"...

ASP.NET

Simple Question

by: Brian | last post by:

Hello, I am using a beginners book on VB .net and already stumped....when using this code (below) , it will tell me that MsgBox is not valid. This is a very simple program and I can't figure out...

Visual Basic .NET

simple question I think.

by: Brian | last post by:

Hello, I was having a problem saveing images that I edited with a vb.net program. Every time I would save the image I would receive a GDI+ error. I tried everything that I could think of...

Visual Basic .NET

_REALLY_ simple namespace question...

by: =?ISO-8859-1?Q?Morten_N=F8rgaard?= | last post by:

Hello everyone, I feel really dumb asking this, but I can't work it out. Searching gives me nothing, I'm down to thinking it's a bug in Visual Studio 2005, but of course it probably isn't... ...

ASP.NET

Utter newbie question re simple links

by: noisette | last post by:

Hi! Am a total newbie to XML and have been asked to update a questionnaire template that was created last year with new information for this year. I've got my head around most things now but am...

XML

Moved from VB6 to VS2005 and stumped on simple task

by: Kardon Coupé | last post by:

Dear All, I'm bemused, I'm moving an application I've written from VB6 into VS2005, and I'm getting all the fundamentals over before I delve into the hard part, like getting the forms layout...

Visual Basic .NET

Hopefully Simple Question re Variables

by: Andrew | last post by:

I'm learning PHP so this might be a simple question to more expeienced developers hopefully. I have a findrecords.php page which has the following code which creates a new record in a database...

PHP

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

Windows 11 and Access Combo Box Issue

by: DJRhino | last post by:

Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

Microsoft Access / VBA

Access Europe meeting on Wed 4 Oct - The future of Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

by: tracyyun | last post by:

Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...

Networking - Hardware / Configuration

Send Current Object to PDF

by: NeoPa | last post by:

Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...

Microsoft Access / VBA

Report value list

by: Teri B | last post by:

Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA

Access Europe Meeting - Wed 6 Dec - Streamline Your Import/Export Spec Workflow with VBA Classes

by: isladogs | last post by:

The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

Microsoft Access / VBA

Take a Database to the Next Level

by: GKJR | last post by:

Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

Microsoft Access / VBA