CSS Alignment?

January 25, 2006

I'm working on my own ASP Forum system...but that's besides the point. I am doing my best to code it in as much a cross-browser layout as possible. Well, I'm using as little table's as possible, and doing my best to only use DIV's. Well here's the problem:

On the forum page, the borders to not align up between the opening DIV and the table for the information. Anyone have any ideas? In IE they align on the left, but not the right. In FF they don't align on either side.

Here's the CSS:

*{
	margin: 0px;
	padding: 0px;
}

body
{
	vertical-align: top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 12px 20px;
}

/*MAIN*/
.MainDiv
{
/*	margin: 12px 20px;
*/	padding: 0px;
}
/*Current User*/
.MainDiv .CurrentUserAlert
{
	border: 1px solid #AA0000;
	background-color: #EFDFDF;
	padding: 3px;
	width: 100%;
}
.MainDiv .CurrentUserActive
{
	border: 1px solid #C2CFDF;
	background-color: #F0F5FA;
	padding: 3px;
	width: 100%;
}
.MainDiv #CurrentUser input
{
	border: 1px solid #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left: 2px;
}

/*ForumView*/
.MainDiv .DivTable
{
	width: 100%;
	border: 1px solid #000000;
	padding: 0px;
	border-spacing: 0;
	border-collapse: collapse;
}
.MainDiv .DivTableHeader
{
	width: 100%;
	border: 1px solid #000000;
	border-bottom: none;
	padding: 3px;
}
.MainDiv .DivTableRow
{
	border: 1px solid #CCCCCC;
	padding: 3px;
}
.MainDiv .DivTableCell
{
	border: 1px solid #000000;
	padding: 3px;
}

And here's the ASP page:

&lt;%@LANGUAGE="JAVASCRIPT"%&gt;
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;HTML&gt;
&lt;HEAD&gt;
&lt;META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;TITLE&gt;Devoro Classik Forums&lt;/TITLE&gt;
&lt;LINK href="Styles2.css" rel="stylesheet" type="text/css"&gt;

&lt;script type="text/javascript" src="Scripts/Standard.js"></SCRIPT>t;/HEAD&gt;

&lt;BODY&gt;
	&lt;!--#INCLUDE file="Scripts/Connections/Open.inc" --&gt;

	&lt;DIV class="MainDiv"&gt;

		&lt;!--#INCLUDE file="Scripts/CurrentUser.inc" --&gt;

		&lt;%
			//Main categories
			var Categories=Application("DevForums").Execute("SELECT [Forum].* FROM [Forum] WHERE [Forum].[foCategory]=-1 ORDER BY [Forum].[foOrder]");

			//Loop through - with check
			if(!Categories.EOF)
			{
				while(!Categories.EOF)
				{
					%&gt;
						&lt;DIV class="DivTableHeader"&gt;
							&lt;SPAN class="Title"&gt;&lt;%Response.Write(Categories("foTitle"))%></SPAN><BR				&lt;%Response.Write(Categories("foDescription"))%>t;/DIV&gt;

						&lt;TABLE class="DivTable"&gt;
							&lt;TR&gt;
								&lt;!-- &lt;TD class="DivTableCell" style="width: 30px;"&gt; &lt;/TD&gt; --&gt;
								&lt;TD class="DivTableCell" colspan="2"&gt;Forum&lt;/TD&gt;
								&lt;TD class="DivTableCell" style="width: 50px;"&gt;&lt;SPAN align="Center"&gt;Topics&lt;/SPAN&gt;&lt;/TD&gt;
								&lt;TD class="DivTableCell" style="width: 50px;"&gt;&lt;SPAN align="Center"&gt;Replies&lt;/SPAN&gt;&lt;/TD&gt;
								&lt;TD class="DivTableCell" style="width: 150px;"&gt;Last Post&lt;/TD&gt;
							&lt;/TR&gt;

							&lt;%
								//Forums in category
								var Forums=Application("DevForums").Execute("SELECT [Forum].* FROM [Forum] WHERE [Forum].[foForum]="+Number(Categories("forumID"))+" ORDER BY [Forum].[foOrder]");

								//Loop through with check
								if(!Forums.EOF)
								{
									while(!Forums.EOF)
									{
										%&gt;
											&lt;TR&gt;
												&lt;TD class="DivTableCell" style="width: 25px;"&gt; &lt;/TD&gt;
												&lt;TD class="DivTableCell"&gt;
													&lt;SPAN class="Title"&gt;&lt;A href="ThreadView.asp?ForumID=<%Response.Write(Forums("forumID"))%>"><%Response.Write(Forums("foTitle"))%></A></SPAN>											//Subforums
														var SubForums=Application("DevForums").Execute("SELECT [Forum].* FROM [Forum] WHERE [Forum].[foForum]="+Number(Forums("forumID"))+" ORDER BY [Forum].[foOrder]");

														//Loop with check
														if(!SubForums.EOF)
														{
															%&gt;
																&lt;SPAN class="SubForums"&gt;&lt;BR /&gt;Sub Forums: 
															&lt;%
																while(!SubForums.EOF)
																{
																	%&gt;
																		&lt;A href="ThreadView.asp?ForumID=<%Response.Write(SubForums("forumID"))%>"><%Response.Write(SubForums("foTitle"))%></A>																	SubForums.MoveNext();

																	if(!SubForums.EOF)
																		Response.Write(", ");
																}
															%&gt;
																&lt;/SPAN&gt;
															&lt;%
														}
													%&gt;
													&lt;BR /&gt;&lt;%Response.Write(Forums("foDescription"))%>				&lt;/TD&gt;
												&lt;TD class="DivTableCell"&gt;
													&lt;%
														//Count of total topics
														var Topics=Application("DevForums").Execute("SELECT Count(*) AS Topics FROM [Thread] WHERE [Thread].[thForum]="+Number(Forums("forumID")));
														%&gt;
															&lt;DIV align="Center"&gt;&lt;%Response.Write(Topics("Topics"))%></DIV>				&lt;/TD&gt;
												&lt;TD class="DivTableCell"&gt;
													&lt;%
														//Count of total replies
														var Replies=Application("DevForums").Execute("SELECT [Thread].[thReplies] FROM [Thread] WHERE [Thread].[thForum]="+Number(Forums("forumID")));

														//Loop with check
														var ReplyCount=0;
														if(!Replies.EOF)
														{
															while(!Replies.EOF)
															{
																ReplyCount+=Number(Replies("thReplies"));
																Replies.MoveNext();
															}
														}
														%&gt;
															&lt;DIV align="Center"&gt;&lt;%Response.Write(ReplyCount)%></DIV>;
												&lt;/TD&gt;
												&lt;TD class="DivTableCell"&gt;
													&lt;%
														var LastPost=Application("DevForums").Execute("SELECT TOP 1 [Post].*,[Thread].[thTitle] FROM [Thread] RIGHT JOIN [Post] ON (Thread.threadID=Post.poThread) WHERE [Thread].[thForum]="+Number(Forums("forumID"))+" ORDER BY [poDate] DESC");

														if(!LastPost.EOF)
														{
															while(!LastPost.EOF)
															{
																%&gt;
																	&lt;%Response.Write(LastPost("poDate"))%><BR														&lt;%Response.Write(LastPost("thTitle"))%>								&lt;%
																LastPost.MoveNext();
															}
														}else
														{
															%&gt;
																Post data unavailable.
															&lt;%
														}
													%&gt;
												&lt;/TD&gt;
											&lt;/TR&gt;
										&lt;%
										Forums.MoveNext();
									}
								}else
								{
									%&gt;
										&lt;DIV class="DivTableRow"&gt;
											&lt;DIV class="DivTableCell"&gt;There are currently no forums available for this category.&lt;/TD&gt;
										&lt;/DIV&gt;
									&lt;%
								}
							%&gt;
						&lt;/TABLE&gt;
					&lt;%
					Categories.MoveNext();
				}
			}else
			{
				%&gt;
					&lt;P&gt;There are currently no forums available.&lt;/P&gt;
				&lt;%
			}
		%&gt;

	&lt;/DIV&gt;

	&lt;!--#INCLUDE file="Scripts/Connections/Close.inc" --&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

Below are pictures of the pages and what's happening in each browser, first in Firefox, and next in IE.

3,130 · January 25, 2006

The DIVs should be put in a wrapper DIV with a set width with the contained DIVs having no width set, which will default to 100%. As far as the topic list, you should use a table (if you aren't already - I only glanced at your code) as that's semantically correct. It shouldn't need a width set, either.

January 25, 2006

Thanks! That works great!

Except...for in FF. It still is off by a pixel or two on the left side (see picture above if necessary).

But I do appreciate the help! (And any more you could possibly give :s)

Sign In

CSS Alignment?

Question

keitheronie

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

dnast

Link to comment

Share on other sites

keitheronie

Link to comment

Share on other sites

Recently Browsing 0 members

Company

Community

Social

Partners

Forums

News

Features

More

Themes