The Arcive of Official vBulletin Modifications Site.

martin05rc · #1 04-12-2010, 06:44 AM

v4.0.3 clean install into XAMPP environment for testing.

I am after a simple 960px wide fixed-width layout.
I also want this layout to remain centered as the browser window width is changed.
I thought "simple enough" but that doesn't seem to be the case.

Clean installation of vB. No changes whatsoever.
Attachment 115642

Nothing but the Default style exists.
Attachment 115643

At this point I created a new style to experiment with.
Attachment 115644

"doc_width" was set to 960px.
Attachment 115645

"doc_margin" right and left set to "auto"
Attachment 115646

Switched to the new style.
Attachment 115647

Load into browser with new style enabled.
Other than the horizontal scrollbar being there and doing something weird there is no indication of trouble. The horizontal scrollbar should not be there at all. Something is wrong.
Attachment 115648

As the browser's right edge is moved in (making the browser window slightly narrower) various elements don't stay in alignment.
Attachment 115649

A manual refresh brings everything back into alignment.
Attachment 115650

Making the browser window wider shows that the problem is still there and it is broken in both directions.
Attachment 115651

Here's the score on the above:

Safari (on both PC and Mac): not broken.
Firefox (on both PC and Mac): not broken.
Chrome (on both PC and Mac): not broken.
IE7 - Broken.
IE8 in "compatibility mode" - Broken.
IE8 with "compatibility mode" turned off - not broken.

I tried this on about 15 different PC's running XP Pro, Vista Home, Vista Ultimate 64 and three different Macs. I even ran this on XP Pro and Ubuntu running in VMware virtual machines. The above results reproduced everywhere (IE could only be run on MS OS's, of course).

Any thoughts on this?

I'll post a reply to this with more details on my work.

Thanks,

-Martin

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

martin05rc · #3 04-12-2010, 08:53 AM

Using Firefox and the "Web developer" add-on I set out to identify the CSS areas I needed to focus on.

First I disabled all CSS just to see what the underlying HTML data looked like:
Attachment 115673

The nesting of the varioius items under "Forum" bothered me a bit at first. I think I ended-up learning that my concern was justified. Part of the issue is that we are not supposed to include display-related structure in the raw HTML data...CSS is there to put things where they belong. The <ul> from "Today's Posts" to "Quick Links" really belongs outside of the "Home" to "What's New?"

NOTE: I've butchered this up just to highlight the relevant aspects. The real code is has a lot more in it. "..." denotes something that was cut out

Code:

<div id="navbar" class="navbar">
<ul id="navtabs" class="navtabs floatcontainer">
     <li>
          <a ...>Home</a>
     </li>
     <li ...>
          <a ...>Forum</a>
               <ul ...>
                   <li>
                        <a ...>Today's Posts</a>
                   </li>
                   <li>
                        <a ...>FAQ</a>
                   </li>
                   <li>
                        <a ...>Calendar</a>
                   </li>
     
                   ...					
               </ul>
     <li>
          <a ...>Blogs</a>
     </li>
     <li>
          <a ...>What's New?</a>
     </li>
</ul>

If I didn't butcher the above too badly it might be easy to see that there is no way to reference the <ul> under the "Forum" branch of the "tree" to the fixed-width-and-centered body of the page. Well, at least I don't know if there's a way...but I did try really hard to find it! My guess is that the branch that is now under the "Forum" branch should have been an entirely separate <ul> at the same level as the "Home ~~ What's New?" <ul>. With this in place it is trivial (again, for me --a non-expert) to make both of these areas follow the body.

Instead this is what happens. I modified "vbulletin-chrome.css" --which is where most of the action seems to happen-- as follows in order to simply create borders around areas of interest:

Code:

...
/*************************************************/
/* NAVBAR */

.navbar {
/* START ADDED */
border: 4px solid black;
/* END ADDED */

	position:relative;
...

This is what it looks like on IE7:
Attachment 115660

Now, if I change the width of the browser:
Attachment 115661

I looked at the CSS and decided to make this change:

Code:

...
/*************************************************/
/* NAVBAR */

.navbar {
/* START ADDED */
border: 4px solid black;
position: static;  /* Want to inherit from parent container */
/* END ADDED */

/*	position:relative;    COMMENTED THIS OUT */
...

This is what it looks like on IE7:
Attachment 115662
Oh, yes, check out where the search textbox landed!

This is were I started to see the repercussions of having that submenu appear where it did within the raw HTML.

As the browser window was widened this is what happened:
Attachment 115663

OK, first things first...I wanted to go after that "Home" button. This is where Firefox and Web Developer came in handy again by being able to inspect the page and find the CSS code that needed attention:

Code:

...
.navtabs li.selected a.navtab {
/* START ADDED */
border: 2px solid black;
position: static;
/* END ADDED */

	color:{vb:stylevar navbar_tab_linkhover_color};
	background:{vb:stylevar navbar_tab_selected_background};
        _background-image:none;
/*	position:relative;   COMMENTED OUT */
	top:-{vb:stylevar navbar_tab_selected_top_width}px;
	padding-top:{vb:stylevar navbar_tab_selected_top_width}px;
	z-index:10;
}
...

After these changes this is what it looked like on initial load:
Attachment 115664

And after a sizable change of the browser's window width:
Attachment 115665

This looked very promising despite little details here and there.

Now for the sub-menu. Again, using Firefox/Web Developer:
Attachment 115666

Reposition with a CSS change:

Code:

...
.navtabs ul {
/* START ADDED */
border: 2px solid black;
position: static;

/* END ADDED */

/*	background: {vb:stylevar navbar_background.backgroundColor}; */
/*	position:absolute;    COMMENTED OUT */
	top:{vb:stylevar navbar_tab_size.height}px;
	{vb:stylevar left}:0px;
	width:100%;
/*        border-top:{vb:stylevar navbar_tab_border};  COMMENTED OUT */
...

This is what it looks like now:
Attachment 115668

And this is where I show my ignorance because I really don't know how to relate the submenu area to the container for the navbar. I also don't understand why the "Home" button container (I guess) is elongating and doing so because of a child element.

I played around with this a lot more. I got the search input area and links back up to the navbar --not perfectly-- and a few other tweaks. I can't say that I got the feeling that the puzzle could be easily solved. The feeling that I did start to get was that a number of elements were located in very inconvenient places within the raw HTML code, which made it difficult, if not impossible, to repair the positioning issues with CSS --at least at my level of understanding.

I forgot to mention that the fixed-width-and-centered layout is EXACTLY the layout vbulletin.org uses! Which leads me to believe that it may have been easy to do this in 3.6.x but nearly impossible in 4.x.x ? What changed?

Any thoughts? How hard would it be to fix this?

Thanks,

-Martin

martin05rc · #4 04-16-2010, 10:41 PM

Any thoughts, revelations, pointers, tips or miracles to offer on this?

Thanks,

-Martin

mikey1991 · #5 04-17-2010, 11:52 AM

To center my skins I always go to the StyleVars and set "doc_width" to my value, and "doc_margin" right and left set to "auto" like you.. but I make sure to make that dropdown have "px" in it, I dunno if that has any significance. I read your whole thread and you've provided some interesting insight into this situation. Have you looked at the css class which is on those navlinks? You may have to position them using CSS.. ?

martin05rc · #6 04-19-2010, 06:16 PM

Problem solved!

This took two weeks of digging through code and figuring things out. In the end the solution is ridiculously simple, which reminds me of something an ex-boss of mine used to say: The second person who saw the wheel thought it was obvious.

Quick recap:

vb version 4.x.x
To achieve a fixed-width, say, 960px, and centered layout the common advise is to set three stylevars as follows:

doc_width = 960px

doc_margin
Right = auto
Left = auto

This works for all browsers except IE7 and IE8 in compatibility mode. No testing was done with IE versions prior to IE7. On IE7/8c some of the page elements become disjoint from the rest of the page and the layout decomposes as the browser's width is modified.

Solution:

Change the above stylevars as indicated.

Edit "vbulletin-chrome.css" template to add the code noted below at the very top of the file:

Code:

@charset "UTF-8";
/* CSS Document */

/* FIX IE7/8C FIXED-AND-CENTERED LAYOUT PROBLEM */
body { 
     position: relative;
}
/* END IE7/8C FIX */

/**
* CHROME: HEADER, NAVBAR, BREADCRUMB, FOOTER
*/

That's it. Obvious, isn't it?

Not so when you look at the problem without knowledge of internals. To make things even more interesting the available documentation was of no help and my paid vB support was only good to tell me that either this was an obscure problem that they couldn't bother to work on or that I had to go to vBulletin.org because this was a custom mod (you know, like running vBulletin.org on v3.6 fixed-and-centered is custom).

It was obvious that I was on my own. Even my skin vendor gave up. I had to tear apart several CSS files and templates, figure out the structure of both and muck around with positioning settings of various layers of <div>'s before realizing that the problem was at the very top.

Two weeks later, here we are. As a brand new vB customer this experience felt --to be very kind-- far less than ideal on all fronts. I have no choice but to use vB at this point as we've gone too far with development and setup. I am currently considering switching our board to IPBoard within the next six months. The primary reason for this is that again, as a brand-spanking-new customer, we felt like we were simply left to fend for ourselves which cost us at least two weeks, if not three. I would have done better with phpBB --probably better support and eveything is free-- but we went with the paid option for what we thought would be real support from the authors. Wrong.

Oh, yes, today I was told that the problem does not exist in the upcoming v4.0.4 release. However, they have no idea why the problem was fixed or how. It's just a side-effect of some of the other stuff done/fixed in 4.0.4. Groovy.

I sincerely hope that as we start running the site I'll get to experience redeeming values of both the software and the support team. So far I am not impressed.

Anyhow...

The above fix seems to work fine across all browsers and platforms I was able to test (about 20 machines with different configurations and several virtual machines setup for testing). I'll run more exhaustive testing tomorrow but I think this is it.

Thanks,

-Martin

mikey1991 · #7 04-20-2010, 10:33 AM

Congratulations! I was messing with CSS and auto yesterday and left out position: relative; and thought of this thread.. Sorry it didnt occur to me in time to help you out.

Creekdweller · #8 04-30-2010, 10:49 PM

Never would have thought to check compatibility mode to see that this doesn't work without the fix. Thanks! But is this really the proper css file to put this in? Or just a convenient one that works?

martin05rc · #9 05-07-2010, 12:31 AM

I just determined that you can add the required css at the end of "additional.css" and it works just as well. This might be a better place to put it.

-Martin

alfanexus · #10 09-18-2011, 08:38 AM

Well its over a year later and its seems that this problem stil exist in vb 4.1.6.

Thanks for sharing the solution

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.07961 seconds Memory Usage 2,301KB Queries Executed 14 (?)
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)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (7)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (10)postbit_onlinestatus (10)postbit_wrapper (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_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 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 pagenav_page pagenav_complete 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!