• 0

CSS Alignment?


Question

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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Burrrrn. Bought COD WWII last month when it was on sale for PC. Oh well. Excellent game tho, and the PC version plays/looks amazing (and has it's own PC achievements). ...wondering if this is a lesson on waiting on sales. ...also hoping Rise of the Tomb Raider has it's own PC Achievements
    • Google Chrome 137.0.7151.120 (offline installer) by Razvan Serea The web browser is arguably the most important piece of software on your computer. You spend much of your time online inside a browser: when you search, chat, email, shop, bank, read the news, and watch videos online, you often do all this using a browser. Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier. Use one box for everything--type in the address bar and get suggestions for both search and Web pages. Thumbnails of your top sites let you access your favorite pages instantly with lightning speed from any new tab. Desktop shortcuts allow you to launch your favorite Web apps straight from your desktop. Chrome has many useful features built in, including automatic full-page translation and access to thousands of apps, extensions, and themes from the Chrome Web Store. Google Chrome is one of the best solutions for Internet browsing giving you high level of security, speed and great features. Important to know! The offline installer links do not include the automatic update feature. Google Chrome 137.0.7151.120 changelog: [$7000][420697404] High CVE-2025-6191: Integer overflow in V8. Reported by Shaheen Fazim on 2025-05-27 [$4000][421471016] High CVE-2025-6192: Use after free in Profiler. Reported by Chaoyuan Peng (@ret2happy) on 2025-05-31 [425443272] Various fixes from internal audits, fuzzing and other initiatives Download web installer: Google Chrome Web 32-bit | Google Chrome 64-bit | Freeware Download: Google Chrome Offline Installer 64-bit | 128.0 MB Download: Google Chrome Offline Installer 32-bit | 115.0 MB Download page: Google Chrome Portable Download: Google Chrome MSI Installers for Windows (automatic update) View: Chrome Website | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • -Drop the art style, it's cool but doesn't fit the franchise at all. -Make it a gritty single player game, like Halo -Include deathmatch and all that stuff, extraction can be a separate mode If they don't do that, it's dead on arrival IMO.
    • It's a shame because it's one of the best immersive sims ever made, even though it could have used a bit more monster variety IMO.
  • Recent Achievements

    • One Month Later
      Custom Greek Shirts earned a badge
      One Month Later
    • Week One Done
      Custom Greek Shirts earned a badge
      Week One Done
    • One Year In
      Custom Greek Shirts earned a badge
      One Year In
    • Week One Done
      topantidetectbrowser earned a badge
      Week One Done
    • Explorer
      Jdoe25 went up a rank
      Explorer
  • Popular Contributors

    1. 1
      +primortal
      672
    2. 2
      ATLien_0
      281
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      190
    5. 5
      Steven P.
      146
  • Tell a friend

    Love Neowin? Tell a friend!