...

View Full Version : page centering in ie



esthera
07-19-2007, 02:49 PM
can someone please advise as to how I can center this in ie?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>d</title>
<style>

/* CSS Document */

body{

padding:0px;

}
#outer{
margin:auto;
width:750px;
}
#mainhome{
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/home_page_background.jpg);
background-repeat: no-repeat;
background-position: right top;
width:750px;
height:1082px;
position: absolute;
/* right: 0;*/
top: 0;



}
.linkguest{
position: absolute;
right: 31;
top: 218;
}

.linkdonor{
position: absolute;
right: 31;
top: 319;
}
.linkparent{
position: absolute;
right: 31;
top: 426;
}


.linkcaregiver{
position: absolute;
right: 31;
top: 526;
}


#news{
position: absolute;
right: 151;
top: 319;
}
#news img{
float:right;
}
#newstb{
background:#ffffff;
width:472px;
height:249px;
overflow: auto;
position: relative;
scrollbar-base-color:#FDC6CC;
text-align:right;
float:right;
}



</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id=outer>
<div id=mainhome>
<div class=linkguest><img src="images/guest.gif" alt="Guest" width="103" height="101" border="0"></div>
<div class=linkdonor><img src="images/donor.gif" alt="Guest" width="106" height="109" border="0"></div>
<div class=linkparent><img src="images/parent.gif" alt="Guest" width="106" height="104" border="0"></div>
<div class=linkcaregiver><img src="images/caregiver.gif" alt="Guest" width="99" height="103" border="0"></div>
<div id=news>
<img src="images/news.gif" width="229" height="37" border="0"><br>
<div id=newstb> this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
</div>
</div>

</div>
</div>
</body>
</html>

VIPStephan
07-19-2007, 03:06 PM
Yes, use a full and complete doctype (http://www.alistapart.com/stories/doctype/).

And note: strict is the only option! Transitional equals “sloppy” and why write sloppy code if you cn do it right in the first place? (also “valid” sloppy code is just a weak excuse)

esthera
07-19-2007, 03:44 PM
ok - i don't really like using strict as I feel it limits me.

now what's the right positioning to use?

I want mainhome with it's background in the middle and all otehr div's positioned according to main home

do i use position:relative or absolute

ahallicks
07-19-2007, 04:46 PM
Well, using a strict doctype does the complete opposite! To build a good web site, semantically it's the key! And it's more likely that you will be able to show the same page on each of the different browsers! At the moment IE will be rendering in Quirks mode because of your incomplete doctype... I suggest, as Stephan said, that you switch to a strict doctype and never go back because you'll pass validation with sloppy code, and errors that could cause problems with other browsers.

The best methods for positioning are relative and floats, but I'd swear by the floats method because it really is simple to do. If you start by adding a proper doctype the code you have now in #outer should be sufficient to center your page in all major browsers. I'd consider adding overflow: hidden; to it as well if you are considering using floats.

Actinia
07-23-2007, 02:03 PM
This is the solution I always use. I believe it came from Stu Nicholls.

In the head:


<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->


In the main body:


<div id="Main">


And in the CSS:


#Main { margin: 0px auto; display:block; width:700px;
padding:2em; text-align: left; }


This works in FF, Safari and IE6 and IE7.

John Rostron

Arbitrator
07-23-2007, 03:39 PM
i don't really like using strict as I feel it limits me.At the very least, you should add a system identifier (URL) to the end of your document type declaration. Look at the table on Wikipedia [1] and you will note that major browsers will display your page in quirks mode when the system identifier is missing while the HTML 4.01 Transitional declaration is being used. This is primarily relevant because Internet Explorer ignores the centering behavior of the margin: auto declaration when in quirks mode.


http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

ccemmett
08-07-2007, 12:15 AM
Another solution worth a peek: http://bluerobot.com/web/css/center1.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum