The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
#1
04-12-2010, 06:44 AM
|
|||
|
|||
Yet another fixed-width & centered question
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 
|
|
#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>
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
|
|
#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>
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;
...
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 */
...
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;
}
...
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 */
...
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
|
|
#4
04-16-2010, 10:41 PM
|
|||
|
|||
|
Any thoughts, revelations, pointers, tips or miracles to offer on this?
Thanks, -Martin
|
|
#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.. ?
|
|
#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
*/
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
|
|
#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.
|
|
#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?
|
|
#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
|
 |
«
Previous Thread
|
Next Thread
»
Linear Mode
|
|
All times are GMT. The time now is 06:03 PM.