PDA

View Full Version : CSS/HTML Help



The Supreme Canuck
2007-Oct-29, 05:51 PM
Does anyone here know much about CSS and HTML? I've hit a slight snag. I'm trying to centre a box (have it as a span with a div inside - a box in a box) both horizontally and vertically. I can get it to work just fine in Firefox, but IE won't let me do it. I've tried everything I can think of, I've looked for help online and tried what I found. Nothing. Does anyone know how to do it?

tofu
2007-Oct-29, 06:59 PM
Post ye. code and I'll happily take a look!

1. I find that using the strict DTD and writing valid HTML cuts down on browser compatibility issues. I used to pull my hair out making IE and FF look the same, but since I started writing valid HTML with the strict DTD, I can't remember the last time I had a problem.

2. margin: auto (the way I normally center a div) only works when the div has an explicit width.

3. I don't think there's a standard way to center vertically that works in every browser.

Jeff Root
2007-Oct-29, 09:18 PM
Six or eight years ago I read a web page on how to center vertically.
Whatever the method was, it was very simple. I vaguely recall trying
it in either IE or Netscape. I have not actually used it in any pages,
though.

-- Jeff, in Minneapolis

tofu
2007-Oct-29, 09:55 PM
This sort-of works:



<!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" lang="en">

<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color:#fcc;
}
div#center {
background-color:#fff;
width: 300px;
height: 300px;
margin: auto;
position: absolute;
top: 40%;
right: 40%;
bottom: 40%;
left: 40%;
}
</style>
</head>

<body>

<div id="center">
<p>The cake is a lie!</p>
</div>

</body>
</html>

The Supreme Canuck
2007-Oct-30, 02:27 AM
Right-o. Here's my sloppy, sloppy code (still trying to learn):



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<p>
<span class="MainBoxSplash">
<map name="TableWorkaround">
<div class="SplashContent">
<table class="SplashTitle" border="0" rules="cols" frame="vsides">
<tr><td>Text</td></tr>
<tr><td><img id="SplashBadge" src="badge.gif" alt=""></td></tr>
<tr><td>Text</td></tr>
</table>
</div>
<p id="SplashSlash">
<a class="SplashLink" href="Link.htm">English</a>
/
<a class="SplashLink" href="Link.htm">Franšais</a>
</p>
</map>
</span>
</p>
</body>
</html>
It has some table junk in it - I think I was trying to jerry-rig the HTML to display like I want to in IE. No luck. Here's the relevant CSS code (since it isn't in the same document):



body {
background-color: #660000;
text-align: center;
font-size: 100%;
}

div.SplashContent {
margin: 0px;
margin-top: 5px;
width: 460px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
font-size: 2em;
padding-top: 10px;
margin-left: 5px
}

img#SplashBadge {
border-style: solid;
border-color: #000000;
border-width: 0px;
margin: 0px;
margin-top: 10px;
}

p#SplashSlash {
margin-top: 7px;
font-size: 1.125em;
}

span.MainBoxSplash {
margin: auto;
width: 472px;
height: 330px;
background-color: #dddddd;
border-style: solid;
border-width: 1px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}


table.SplashTitle {
margin: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
text-align: center;
border-width: 0px;
}
Probably a lot of useless junk in there, too. Note - the code is probably bare-bones, since I've taken anything out that might identify what it is. The site I'm trying to throw together is a bit political for BAUT.

Edit: Tofu, just looked into your code. Interesting, but it isn't centred in either browser.

Edit 2: I forgot to say that I ran both codes through the w3 validators. They passed.

The_Radiation_Specialist
2007-Oct-30, 06:08 AM
If you're using vertical-align or valign then that's the problem since it doesn't work well for divs in IE.

try to go with a table cell, or use absolute positioning:



<html>
<body leftmargin="0px" topmargin="0px">
Using absolute positioning
<div style="width:300px;height:300px;border:solid 1px #000000;">
<div style="left:100px;top:100px;width:100px;height:100px;bord er:solid 1px #000000;position:absolute;z-index:2">

</div>
</div>
Using table cells
<table cellspacing="0px">
<tr>
<td align="center" valign="middle" width="300px" height="300px" style="border:solid 1px #000000">
<div style="width:100px;height:100px;border:solid 1px #000000;"></div>
</td>
</tr>
</table>
</body>
</html>

tofu
2007-Oct-30, 01:42 PM
Edit: Tofu, just looked into your code. Interesting, but it isn't centred in either browser.

Well, I can center horizontally in every browser, but not vertically. Maybe the problem is that I just don't know how.

In your css, the reason the box is flush-right in IE is because of the top, right, bottom, and left attributes for the span.MainBoxSplash class. If you change them to something like this:

top: 30%;
right: 30%;
bottom: 30%;
left: 30%;

Then you can move the box out of the corner. But like my previous post, that's not a perfect solution.

The Supreme Canuck
2007-Oct-30, 05:16 PM
Thanks for your help, guys. It turns out that a clever little workaround was just figured out here (http://www.wpdfd.com/editorial/thebox/deadcentre4.html). Works perfectly.