• 0

CSS Alignment?

Asked by keitheronie,

 Share

Question

Community Regular

keitheronie

Posted
Posted

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:

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

&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.post-62680-1138151557_thumb.jpgpost-62680-1138151609_thumb.jpg

Link to comment
https://www.neowin.net/forum/topic/424782-css-alignment/
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

dnast

Posted
Posted

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.

Link to comment
https://www.neowin.net/forum/topic/424782-css-alignment/#findComment-587110349
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.