...

View Full Version : Why in IE, but not NS?



kraftomatic
12-30-2003, 05:26 PM
Hey All,

I have stripped my CSS design to the bare minimum and can't even get the main window (framework) to center correctly. Is there something I'm doing wrong here? And even more so, is there specific things I should do when designing this to accomodate Netscape (7) as well as IE?

Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
height:100%;
margin:0px;
padding:0px;
background-image: url(images/background.gif);
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}

#framework {
width:760px;
height:100%;
text-align:left;
margin:2px;
border: 1px solid #ccc;
border-width: 0 1px;
background:white;
}

#topHeader {
width:100%;
height:150px;
text-align:center;
margin:0px;
padding:2px;
}

#nav {
width:100%;
height:20px;
text-align:center;
margin:0px;
padding:2px;
/*border:1px solid #ccc;*/
}

#sectionHeader {
width:565px;
height:125px;
text-align:left;
margin:5px;
padding:2px;
border:1px solid #ccc;
float:left;
}

#catSection {
width:160px;
height:125px;
text-align:center;
margin:5px;
padding:2px;
border:1px solid #ccc;
}

#quoteSection {
width:739px;
height:75px;
text-align:center;
margin:10px;
padding:0px;
border:1px solid #ccc;
}

#quoteContent
{
text-align: center;
margin-top: -33px;
margin-left: -369px;
position: relative;
top: 50%;
left: 25%;
width:730px;
height:67px;
}

#mainContent {
width:565px;
height:500px;
text-align:left;
margin:0px 5px 5px 5px;
padding:2px;
border:1px solid #ccc;
float:left;
}

#mainBody {
width:555px;
text-align:left;
margin:0px;
padding:4px;
}

#rightContent {
width:160px;
height:125px;
text-align:center;
margin:5px;
padding:2px;
border:1px solid #ccc;
}

p {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}

</style>

</head>
<body>

<div id="framework">
<div id="topHeader">header image</div>
<div id="nav">nav</div>
<div id="catSection">cat</div>
</div>

</body>
</html>

Skyzyx
12-30-2003, 07:20 PM
Well, first of all, you're not using a valid DOCTYPE. You need to use a complete XHTML DOCTYPE to use IE in "standards mode". Otherwise, you're just getting "Quirks mode" which uses the jacked-up box model of IE 5.x.

That's most likely your problem. Use a valid DOCTYPE, then design your page for Mozilla (since it's the most compliant browser out there right now), and then work backwards to the less compliant browsers (usually Mozilla, then Opera, then IE/Win).

Doing it that way will nearly always save you headache. :thumbsup:

kraftomatic
12-30-2003, 07:38 PM
I'm new to the DOCTYPE statements with XML/XSL, so what tag should I be using exactly? And how does that tag affect my page in NS when I've removed the XML/XSL code?

Designing in Mozilla does make sense. How does it differ from NS?

Thanks.

kraftomatic
12-30-2003, 07:51 PM
I've tried the following DOCTYPES without any luck. And this is just the above, barebone code where I want the page centered:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Any ideas?

kraftomatic
12-30-2003, 09:29 PM
To futher complicate things .. I'm now just trying to validate the file. I get a "unable to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to validate the document."




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
height:100%;
margin:0px;
padding:0px;
background-image: url(images/background.gif);
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}

#framework {
width:760px;
height:100%;
text-align:left;
margin:2px;
border: 1px solid #ccc;
border-width: 0 1px;
background:white;
}

#topHeader {
width:100%;
height:150px;
text-align:center;
margin:0px;
padding:2px;
}

#nav {
width:100%;
height:20px;
text-align:center;
margin:0px;
padding:2px;
/*border:1px solid #ccc;*/
}

#sectionHeader {
width:565px;
height:125px;
text-align:left;
margin:5px;
padding:2px;
border:1px solid #ccc;
float:left;
}

#catSection {
width:160px;
height:125px;
text-align:center;
margin:5px;
padding:2px;
border:1px solid #ccc;
}

#quoteSection {
width:739px;
height:75px;
text-align:center;
margin:10px;
padding:0px;
border:1px solid #ccc;
}

#quoteContent
{
text-align: center;
margin-top: -33px;
margin-left: -369px;
position: relative;
top: 50%;
left: 25%;
width:730px;
height:67px;
}

#mainContent {
width:565px;
height:500px;
text-align:left;
margin:0px 5px 5px 5px;
padding:2px;
border:1px solid #ccc;
float:left;
}

#mainBody {
width:555px;
text-align:left;
margin:0px;
padding:4px;
}

#rightContent {
width:160px;
height:125px;
text-align:center;
margin:5px;
padding:2px;
border:1px solid #ccc;
}

p {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}

</style>

</head>
<body>

<div id="framework">
<div id="topHeader">header image</div>
<div id="nav">nav</div>
<div id="catSection">cat</div>
</div>

</body>
</html>

kraftomatic
12-30-2003, 09:32 PM
Okay .. I added:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

And it validates. Phew. :)

But NS still can't center the content.

Skyzyx
12-31-2003, 12:23 AM
In the CSS for the "framework" div, change margin:2px; to margin:2px auto;

That will tell the margins on the top and the bottom to be 2 pixels each. It will also tell the right and left margins to be whatever they need to be (hence "auto") to center the content.

me'
12-31-2003, 09:33 AM
margin: x auto doesn't work in IE. You'll need to use horizontal margins and absolute positioning to get that effect.

kraftomatic
12-31-2003, 02:02 PM
So will that work across the board? If it's absolute, won't it get messed up when resizing the window?

me'
12-31-2003, 02:46 PM
Don't think so... this page (http://spiritual-pixel.com/there/vertical.html) has the method if you're interested.

kraftomatic
12-31-2003, 04:36 PM
Thanks .. that works in NS and IE right now. It's screwed up some other DIV's I have right now, but it should be something I can make work.

One question: What's the point of this:

body>#content {
margin-left:-380px; /* Correct value. */

margin-left is already declared in #content, so why does it need to be duplicated?

me'
12-31-2003, 05:13 PM
-150px isn't the right value.

in IE5: width = 300px. width/2 = 150px.
in correct browsers: width = 10px padding + 300px + 10px padding = 320px. width/2 = 160px.

body>#content hides the correct measurements from IE5, and as it has higher specificity, it overrules the -150px and Mozilla takes the -160px measurement.

kraftomatic
12-31-2003, 05:18 PM
Ah .. that makes sense.

So I'm working on realigning the rest of the page, now that I have the centering done. Just as an FYI, here is how the page looks before and after:

BEFORE:

www.witchkraftracing.com/xml/secondary.asp

AFTER:

www.witchkraftracing.com/xml/secondarytest.asp

Skyzyx
12-31-2003, 05:26 PM
Originally posted by me'
margin: x auto doesn't work in IE. You'll need to use horizontal margins and absolute positioning to get that effect.

It seems to work just fine. I use it on my own website without any problems. I just tried it with Kraft's code, and it worked fine.

What would the problem be? :confused:

me'
12-31-2003, 05:31 PM
Okay, it works in IE6 in 'standards' mode, but not at all in IE5.5 or IE5.

kraftomatic
12-31-2003, 07:31 PM
This is a mess. I don't know what to do. Looks great in IE, but completely butchered in NS.

Please help. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<%
'Load XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("news.xml"))

'Load XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("news.xsl"))
%>

<html>
<head>
<title>consumer credit</title>

<style type="text/css">

html, body {
text-align:center;
height:100%;
margin:0px;
padding:0px;
background-color:#f7f7f7;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
scrollbar-face-color: #EEEEEE;
scrollbar-highlight-color: #EEEEEE;
scrollbar-shadow-color: #EEEEEE;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #DDDDDD;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

#content {
position:absolute;
left:50%;
width:760px;
height:100%;
/* the width/2 */
margin-left:-380px;
border: 1px solid #ccc;
border-width: 0 1px;
background-color:#fff;
text-align:left;
}
body>#content {
margin-left:-380px; /* Correct value. */
}

#topHeader {
width:100%;
height:150px;
text-align:center;
margin:0px;
padding:2px;
}

#nav {
width:755px;
height:20px;
text-align:center;
margin:0px;
padding:2px;
border:1px solid #ccc;
}

#sectionHeader {
width:565px;
height:125px;
text-align:left;
margin:5px;
padding:2px;
border:1px solid #ccc;
float:left;
}

#catSection {
position:relative;
width:160px;
height:125px;
text-align:center;
margin:5px;
padding:2px;
border:1px solid #000;
}

#quoteSection {
width:739px;
height:75px;
text-align:center;
margin:10px;
padding:0px;
border:1px solid #ccc;
}

#quoteContent
{
text-align: center;
margin-top: -33px;
margin-left: -369px;
position: relative;
top: 50%;
left: 25%;
width:730px;
height:67px;
}

#mainContent {
width:565px;
height:500px;
text-align:left;
margin:0px 5px 5px 5px;
padding:2px;
border:1px solid #ccc;
background-color:#fff;
float:left;
}

#mainBody {
width:555px;
text-align:left;
margin:0px;
padding:4px;
}

#rightContent {
width:160px;
height:125px;
text-align:center;
margin:5px;
padding:2px;
border:1px solid #ccc;
}

p {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}

</style>

</head>
<body>

<div id="content">
<div id="topHeader">header image</div>
<div id="nav">nav</div>
<div id="sectionHeader">
<img src="images/header_cc.gif">
</div>
<div id="catSection">cat</div>

<div id="quoteSection">
<!--
<div id="quoteContent">
<img src="images/quotes11.jpg">
</div>
-->
</div>

<div id="mainContent">
<img src="images/header_cc.gif">
<div id="mainBody">
<p>
<%
'Transform file
Response.Write(xml.transformNode(xsl))
%>
</p>
</div>
</div>
<!--
<div id="rightContent">
<img src="images/header_features.gif">
</div>

<div id="rightContent">
<img src="images/header_countdown.gif">
</div>

<div id="rightContent">right</div>
-->
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum