Hi
I have an ASP page with a container defined as follows:
#container {
position: relative;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: top left;
width: 1024px;
height: 764px;
}
It centres fine in every browser I’ve tried except IE (I’m using IE8). The first lines of the page itself are:
<%@LANGUAGE=“VBSCRIPT” CODEPAGE=“1252”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<meta http-equiv=“X-UA-Compatible” content=“chrome=1”>
Can any kind soul see why IE should stubbornly left-align it?
Many thanks.
Hi, I don’t know what VBScript is outputting (If I remember, vbscript is just like Javascript, just a different scripting engine). THough that also looks like ASP with the <% so I am probably just ramblign now :))
If something is above the doctype then IE goes into quirks mode and it behaves more like IE5. IE5 doesn’t allow auto margins to work (a different centering technique is used, not needed here though)
Remove any g enerated code that comes above the doctype and it should all go well :).
Thanks for the tip, but I’m afraid it didn’t work. I brought the Language line down below the DocType, HTML and Meta lines, but IE still fails to centre.
Back to the drawing board…
Can you post a link to the site wehre this is happening? For all IE to not center it has to be in quirks mode and there are only so many ways that can happen ;).
Thanks for the offer. The page is www.thehill.org.uk.
I see no DOCTYPE. While real browsers conform to standards and center your page, IE needs a DOCTYPE as the first line on a page.
BTW - 1024px wide is not very friendly to those with 1024px wide screens or smaller. Especially those like me with the task bar on the side and/or windows not maximized. I suggest the more common 960px for a fixed width.
Cordially, David
Oops! I must have deleted the line when I was shifting it to the top.
Doh…
Thanks.
But no! The doctype line is there in the page, but for some reason or other is being stripped out on load. I double-checked this on Chrome; it happens there too, but Chrome doesn’t care and centres nonetheless.
There’s another page, also called index.asp, which is the home page for the park (http://thehill.org.uk/park/index.asp). I’ve made sure the doctype and html lines are identical, but the problem persists, while the park home page carries on centring.
I’ve checked all the syntax and can’t see any <% or other tags that aren’t closed.
Talk about weird. Any ideas?
Thanks.
Chrome doesn’t need a doctype to use auto margins. IE does.
Post the original code (before a browser parses it) of the page (if the code is too complex you will need to go to the ASP (I believe <% is ASP) forum here 
Many thanks for the offer - here’s the code (below). As I say, I’m just about certain I haven’t any unclosed tags or ASP delimiters.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<% Dim message %>
<% Sub DrawPage %>
<%Response.Expires = -1 %>
<%Response.Expires = 0 %>
<%Response.ExpiresAbsolute = Now() - 1 %>
<%Response.AddHeader "pragma", "no-cache" %>
<%Response.AddHeader "cache-control", "private" %>
<%Response.CacheControl = "no-cache" %>
<% Response.Expires = -1000 %>
<% Response.Buffer = True %>
<% Response.Clear %>
<!--#include file="eventsconn.asp" -->
<% 'declare variables %>
<% Dim myconn, rstEvents, sqlSelect, sidebarheight %>
<% ' connect to database %>
<% set myconn = server.CreateObject("ADODB.Connection") %>
<% myconn.open(MM_myConn_STRING) %>
<% 'prepare the sql statement %>
<% sqlSelect = "SELECT * FROM qryEventsComingUp" %>
<% 'create recordset %>
<% set rstEvents = CreateObject("ADODB.Recordset") %>
<% rstEvents.Open sqlSelect,myconn,1,1 %>
<% if not rstEvents.eof then %>
<% if rstEvents.RecordCount > 6 then %>
<% sidebarheight = 770 + ((rstEvents.RecordCount - 6) * 50) %>
<% else %>
<% sidebarheight = 770 %>
<% end if %>
<% else %>
<% sidebarheight = 770 %>
<% end if %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to Telegraph Hill</title>
<!--#include file="menucss.html" -->
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="today">
<% =FormatDateTime(Date(),vbLongDate) %>
</div>
<!--#include file="menus.html" -->
<div id="homepic"><img src="images/galleries/homepics/rotate.php" alt="Rotating images of Telegraph Hill" width="994" height="728" border="0" />
</div>
<div id="welcome">
<h1><a href="http://www.boldvision.org.uk/" target="_blank">
<img src="images/boldvisionlogo.jpg" alt="Bold Vision" width="80" height="88" border="0" /></a></h1>
<h1><img src="images/elltrain.JPG" alt="East London Line train" width="175" height="103" /></h1>
<p class="thbodysmall" align="left">
It's back! Dalston to New Cross and New Cross Gate, limited preview service now open. <a href="http://www.tfl.gov.uk/corporate/projectsandschemes/5011.aspx" target="_blank">Details...</a> </p>
</div>
<div id="news">
<h1>Say no to railway cuts:</h1>
<p><a href="http://www.gopetition.com/petitions/opposing-cuts-to-southern-services-to-forest-hill.html"><img border="0" width="206" alt="GoPetition" src="http://www.gopetition.com/counters?pid=30683&t=2" height="60" title="Opposing Cuts to Southern Services via Forest Hill (powered by GoPetition)"/></a></p>
</div>
<div id="sidebar" style='height: <% =sidebarheight %>px;'>
<div id="weather">
<div style='height: 48px;' >
<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2.asp?partner=netweather&tStyle=normal&logo=1&zipcode=EUR|UK|UK001|LONDON|&lang=uke&size=7&theme=clouds&metric=1&target=_self'></script>
</div>
<div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 10px; line-height: 12px; color: #;' >
<a href='http://www.accuweather.com/world-index-forecast.asp?partner=netweather&locCode=EUR|UK|UK001|LONDON|&metric=1' target="_blank" style='color: #' >Weather Forecast</a>
</div>
</div>
<div id="clock">
<table border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><script type="text/javascript" src="http://www.worldtimeserver.com/clocks/embed.js"></script><script type="text/javascript" language="JavaScript">objGB=new Object;objGB.wtsclock="wtsclock001.swf";objGB.color="6495ED";objGB.wtsid="GB";objGB.width=75;objGB.height=75;objGB.wmode="transparent";showClock(objGB);</script></td></tr></table>
</div>
<div id="events">
<form id="login" action="validate.asp" method="post">
<fieldset>
<legend>
<% If Message = "" then %>
Log in to post events
<% Else %>
<% =Message%>
<% End If %>
</legend>
<table border="0" width="180" cellpadding="0" cellspacing="0">
<tr>
<td width="71" height="22" align="right" valign="middle">
<label>Username: </label> </td>
<td width="174" valign="middle" align="left" height="22">
<input type="text" name="username" size="14" /> </td>
</tr>
<tr>
<td width="71" height="22" align="right" valign="middle">
<label>Password: </label> </td>
<td width="174" valign="middle" align="left" height="22">
<input type="password" name="userpassword" size="14" maxlength="12" /> </td>
</tr>
<tr>
<td valign="middle" align="center" height="28">
<p align="center"> </p> </td>
<td valign="top" align="left" height="28">
<input type="submit" value="Submit" name="submit" /> </td>
</tr>
<tr>
<td height="30" colspan="2" align="left" valign="top" >
<p>
<a href="eventsreg.asp">Need to register?</a>
<a href="forgot.asp">Forgotten your password?</a><br />
<a href="events.asp">Show all events</a>
<a href="eventnew.asp">Add your own</a> </p> </td>
</tr>
</table>
</fieldset>
</form>
<h1>Coming up soon</h1>
<table border="0" width="210" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="2" align="left">
<p>
<% while not rstEvents.eof %>
<a href="eventdetails.asp?eventid=<% =rstEvents("lngEventID")%>&back=-2">
<strong><% =rstEvents("strTitle") %></strong></a>
<% =rstEvents("strLocation") %><br />
<% =FormatDateTime(rstEvents("dteStartDate"),1) %>
<%if rstEvents("dteEndDate") <> rstEvents("dteStartDate") then %>
to
<% =FormatDateTime(rstEvents("dteEndDate"),1) %>
<% end if %>
<br /><br />
<% rstEvents.Movenext %>
<% wend %>
</p> </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<% End Sub %>
<% Message = Session("Message") %>
<% Session("Message") = "" %>
<% Call DrawPage %>
I should add that the first includes is a connection string setup, and the second brings in the CSS file and a load of stuff to construct the dropdown menus, using Jquery. The latter is identical in the park page - http://thehill/park/index.asp, but here’s the first one, in case it has any bearing on things:
<%
’ FileName=“Connection_ado_conn_string.htm”
’ Type=“ADO”
’ DesigntimeType=“ADO”
’ HTTP=“false”
’ Catalog=“”
’ Schema=“”
Dim MM_myConn_STRING
MM_myConn_STRING = “Provider=Microsoft.Jet.OLEDB.4.0;Data Source=” & server.MapPath(“events.mdb”) & “;Persist Security Info=False”
%>
It does seem mighty odd that two lines can be stripped out of a page like this.
Thanks again.
Well taht ASP looks too advanced for me (I thougth that I could follow the general syntax based on my PHP knowledge) although even though it is similar I can’t find the culprit that could be causing the doctype to not show.
I know with PHP if you are opening a port to a database and if you are sending any headers it should be in the first lines of the docujent (well the headers need to be)
Try placing the Doctype and HTML tag after teh ASP code (so it matches up with <head> and the rest of the document)
If that doesn’t work then go to the ASP forum to see why it is doing that.
You are missing the head section, no DOCTYPE or HTML element.
So try what Ryan suggested, move those next to the HEAD element.
Bingo! Thanks to you both - it did the trick.
WOooo!! :). Glad it worked.