vb.org Archive - View Single Post - Yet another fixed-width & centered question

martin05rc · #2 04-12-2010, 07:03 AM

I did a lot more work on this issue by slicing-and-dicing various CSS templates to see if I could fix it. I now have a bad feeling that there might be some structural issues with the way either or both vB HTML and CSS are put together than might cause this issue.

For what it is worth, doing a fixed-width-and-centered layout on phpBB that works across all browsers is pretty much trivial. I used this as a sanity check after chasing this vB problem for a week. From download to a working fixed-width-and-centered layout it couldn't have been more than 45 minutes. Not a put-down, just a statement of fact.

I also wrote HTML and CSS from scratch to see if there were fundamental problems with IE7 being able to do this sort of a thing. No problems at all. Got it done with some pretty vanilla HTML/CSS:

NOTE: I am not a professional HTML/CSS coder...I am sure there's a far more elegant way to do this...but it served the stated purpose of testing whether or not this could be done with IE7 without any trickery at all.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style title="text/css">
	body{
		background-color: #cc8888;
		}

	#main-container{
		width: 940px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 2em;
		padding-bottom: 2em;
		background-color: #FF0000;
		border: 2px solid #000000;
	}

	#secondary-container{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 1em;
		background-color: #808000;
		border: 2px solid #000000;
	}

	#column-container{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 1em;
		padding-bottom: 1em;
		background-color: #808080;
		border: 2px solid #000000;
	}

	#column{
		float: left;
		width: 30%;
		margin-left: 2%;
		margin-right: 0;
		background-color: #202020;
		border: 2px solid #000000;
	}

</style>
</head>

<body>
	<div id="main-container">
		<p><h1>This is the title</h1></p>
		
		<div id="secondary-container">
			<p>This is where the action is!</p>
			<ul>
				<li>Option 1</li>
				<li>Option 2</li>
				<li>Option 3</li>
				<li>Option 4</li>
			</ul>
			
			<div id=column-container>
				<div id="column">
					<ul>
						<li>A</li>
						<li>B</li>
						<li>C</li>
					</ul>				
				</div>
				<div id="column">
					<ul>
						<li>A</li>
						<li>B</li>
						<li>C</li>
					</ul>				
				</div>
				<div id="column">
					<ul>
						<li>A</li>
						<li>B</li>
						<li>C</li>
					</ul>				
				</div>
				<div>
					<p>This is text below the columns</p>
				</div>
			</div>
		</div>
		<p>This is some content in the main frame.</p>
	</div>

</body>
</html>

If you take the above, paste it into a text document, save it as something.html and open it with any browser you should see something like this:

Attachment 115658

And, it should pretty much behave as expected as the browser's window is resized. No issues with any one of the several browsers I tested.

So, the question was: If it is that simple to make some thing like this work on every browser, why is it that vB is having such a hard time making it work?

I used Firefox with the "Web developer" and "Firebug" add-on's to try to investigate further. I focused on the navbar to make life a little simpler. I figured that if I could fix the navbar the rest would be reasonably easy to figure out.

I'll report on that in my next post just to keep things a little organized.

-Martin

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01172 seconds Memory Usage 1,798KB Queries Executed 12 (?)
More Information
Template Usage: (1)SHOWTHREAD_SHOWPOST (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_box (1)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit_info (1)postbit (1)postbit_onlinestatus (1)postbit_wrapper (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit reputationlevel showthread	Included Files: ./showpost.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showpost_start bbcode_fetch_tags bbcode_create postbit_factory showpost_post postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start showpost_complete
Messages: