• 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.

  • Posts

    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By leonsk29 · Posted

      Sorry, I found your question odd, that's all 😅.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By leonsk29 · Posted

      "LOL The IoT version is for embedded systems" LOL. The IoT version is for whatever you want, why are you so stuck up? It's just A NAME. Open your mind, buddy 😅. It's not a different version of Windows, only the licensing model and the support dates change, nothing else. "there no real reason to do that" Everyone has their reasons. You love to use Linux. Why? You have YOUR reasons. Other people will have theirs. I use Windows 11 and Linux on the side. Why? I have my reasons. "No security updates? Who cares!" Many people do, just not you. Why not use a supported OS instead of an unsupported one if you can? LOL. I find it odd that a person that loves Linux and choice/freedom so much has such a hard time understanding why people do things different than him.
    • Another disappointing rumor: iPhone 17 won't get a ProMotion display

      By derekaw · Posted

      Most people don't know what a Hz is; They buy the iPhone they can afford. This is a non-story, and it's here to get the Apple haters engaging.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By adrynalyne · Posted

      I know what iot enterprise is, lol.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By Good Bot, Bad Bot · Posted

      Ummmm I thought we talking about the desktop for home users? LOL The IoT version is for embedded systems. No regular user is using that version and there no real reason to do that. Why does it seem like half the people here hate using an appropriate OS for the hardware they have? The kind of comments I see here all the time... No security updates? Who cares! I really like Windows 8.1 which was very underrated. Did I run it when it was supported? Well no I used Windows 7 at the time. My hardware doesn't support Windows 11. Windows 10 or Linux than? Nope! They are of course running Windows 11. LOL My hardware does support Windows 11. Never! I am running Windows 10 forever or at least until Windows 12 comes out and then you will have to rip my copy of Windows 11 from my dead, cold hands! I have a 12 year old PC and it's machine #4. Well that would be perfect to run Linux sir! Nah! I will run Windows on that too. Windows 7 of course and yes I absolutely sometimes must browse the Internet with it. Freedom! Did I cover all the scenarios we see here? LOL

  • Recent Achievements

    • Conversation Starter
      DarkShrunken earned a badge
      Conversation Starter
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      250
    2. 2
      snowy owl
      156
    3. 3
      +FloatingFatMan
      140
    4. 4
      ATLien_0
      140
    5. 5
      Xenon
      128
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!