The Arcive of Official vBulletin Modifications Site.

martin05rc · #1 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

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.03375 seconds Memory Usage 2,227KB Queries Executed 13 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)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)showthread_list (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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_threadedmode.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids_threaded showthread_threaded_construct_link showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory 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 tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!