menu positioned like Milonic home page

[wkilc]

Hi all,

I'm redesigning my site so that it is a centered, fixed-width theme, much like Milonic's site

What settings does one use to position the menu like it is on the Milonic home page?

screenposition="center" doesn't quite cut it, as the menu will appear fluid as I'm re-sizing the browser window.

The Milonic menu stays totally still as I re-size the browser, which looks great. I've tried downloading the Milonic Home Menu sample... it still doesn't stay in the nailed-down position like the Milonic home page.

Thanks.

~Wayne

[Ruth]

Hi,

The Milonic main site uses a php menu, it is placed in the div which has it's margin set in the css and the menu is a fixed width. The page is set up using css and the placement of that menubar div is set by the css so the menu itself just follows that div. I hope that made sense! You could do the same thing by setting the div you want to use and using a relative positioned menu inside that div, setting the menu at a fixed width. If the margin of that div is set as left=0 then the menu should go to that position, I think I don't do much css.

Ruth

[wkilc]

Thanks.

I found this...
http://support.milonic.com/beginners/ta ... /index.htm

It's working beautifully... except that the menus that open up under the parents are far, far away from the parents. Weird.

~Wayne

[Ruth]

Hi,

I need to see the page to see what's happening. That usually means the menu is placed incorrectly, or there is a css conflict. If I have your page I can track it down

Ruth

[wkilc]

I was working offline until now... but that's gotta be it. (A css conflict)

http://www.rimea.org/new/

Right before the css file uploaded, the menu behaved correctly...

http://www.rimea.org/new/default.css

Thanks.

~Wayne

[wkilc]

I found it... in the css, these two bits are causing the menu to act weird:

Code: Select all

#outer
{
z-index: 2;
position: relative;

and

Code: Select all

#menu
{
position: relative;
background: #009BDE url('images/menubg.gif') repeat-x top left;

I can move the "position: relative;" from the #menu, but not from #outer without breaking the page.

Any ideas?

~Wayne

[Ruth]

Hi,

I'm working on it. I downloaded your page, but I didn't see any outer, I'll have to take a closer look at the css.

Ruth

[wkilc]

Thank you Ruth.

Been testing in FireFox. Noticed that the menu looks fine in IE.

I separated the main_menu.js and subs_menu.js as described in method 1 here (thanks for this):
http://milonic.com/forum/viewtopic. ... oad#p48383

It's better now... but the sub menu is still slightly off from the parent, the culprit certainly seems to be the border in the css:

Code: Select all

#outer
{
z-index: 2;
position: relative;
/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 900px;
border: solid 7px #fff;
background-color: #fff;
margin: 0 auto;
}

If I remove the 7px border, the sub menu is perfectly aligned in FireFox. If I change the border to 2px, it's off center by 2 pixels.

Any idea?

~Wayne

[Ruth]

Hi Wayne,

I am so sorry I didn't get back to you. I started working on it, and then had something I had to do here and forgot about it. 50 lashes with a wet noodle!

Did you get this fixed? I looked at the link you put in and it seems to be the same in both IE and FF

Ruth

[wkilc]

Hi Ruth,

Sorry...I've been hacking away at this for weeks. It all seems okay now, save for one issue.

In Fire Fox, it's perfect.

But in IE 8, when I look at the menu here:
http://www.rimea.org/history.php

and then here:
http://www.rimea.org/forum/

... it's off a bit, probably a result of phpbb's own css? But for the life of me I can't find a work around. I'm thinking it's an "em" instead of a "px" issue?

If you look at them side by side in two tabs, you'll see the menu is smaller on the second page.

Any ideas?

~Wayne

[Ruth]

Hi,

I cannot see the problem. I have IE7 and it looks the same in that and FF. Can you screenshot the issue? I tried browser shots but I'm only seeing a bit of space at the right side, maybe 2 px or something like that, so I'm not sure if that is what you mean? I can probably figure out what the problem is if I can see it.

Ruth

[wkilc]

Hi Ruth,

Thank you.

http://www.rimea.org/screengrab.jpg

That small difference is what I'm talking about... it's more than a few pixels on my machine though. It took me forever to try to ingrate my site into phpbb... I'm kinda happy with how far I'm come, but it bugs me that I don't know what causes it. I was on a Windows XP IE 8 machine lat night and it was even more noticeable. I think that computer had other issues I've never seen on IE 8 as well.

I've also noticed that if you compare the two links in FireFox, the small black arrows in some of the parent menus appear to jump a few pixels higher on the forum page... kinda like the padding is forcing them up?

Thank you again.

~Wayne

[Ruth]

Hi,

OK, this is what I did, which is all I can suggest you do to see if you can find the actual place this problem is occuring. I don't think it is the menu. First, in your parent style make the borderwidth 1 so you can see a border around the menu. That will tell you where the menu is with regard the menu div. In my testing, the menu is inside that div by about 9px right and left, since you have the padding right and left set in the div as .9em, which is about 9px, though the conversion from ems to px is not exact since it is based on the base font size the person has set on their system. So, the issue is not the menu, since it is inside that menu div by that amount right and left.

Second, put a border around the outer div, the no print div and the menu div. This is what I did, rather than mess with the css over and over, I went to the page and put it on the divs as follows,

Code: Select all

<DIV id=outer style='border:1px solid black'>

<DIV class="menu no-print" style='border:1px solid red'>

<DIV id=menu style='border:1px dashed black'>

With that you can see the divs and see just what is off. That will let you take a look at the padding and margins in the various divs and see if any of that is the problem.

I hope this helps. I couldn't see anything with regard the menu itself as a problem, since you have the div in which it sits with padding on the right and left, so it will sit inside that div by that amount. So if there is an issue at the right side, I think it's in the menu div itself, or it's position inside the no print div, and the outer div.

Ruth

[wkilc]

Hi Ruth,

Thanks so much. I've added the borders.

I just discovered that on my laptop (same OS and version of IE), the menu appears identical on both pages.

Is this likely because I used em rather than px in the css?

The "broken machine" shows extra space below the "menubottom" div and the red border, which I assume is the 5px bottom margin that is specified. The "good machine" doesn't shoe this extra space. This is the same page (http://www.rimea.org/history.php) on the same browser, with the same OS. So the issue with the ccs seems to be in the history page on this one machine, and the forum page is rendering as it should.

http://www.rimea.org/screengrab2.jpg

I've tried everything I can think of and can't correct it.

~Wayne

[Ruth]

Hi,

OK, I'm looking at the screen shot you put up, but I can't really figure out what you are saying is wrong. Can you tell me what part is wrong? I am seeing the menu div go all the way across and seems to be the same in both top and bottom.

As to px versus em, there is a constant argument about them. Over-simplified - EM comes from typography, px refers to resolution. EM is a 'scaling' item, that is it scales from the parent font. So, if no font size is set in the css, then the em will take it from the default 'factory' setting which is 16px, so 1em is equal to 16px, or if no size is set, then it will take it from whatever the default size the user has set if they have change the default factory setting. If you set a font size in the body as 12px, then 1em is equal to 12px. If a person has their font settings for accessiblity at 32px, then 1em would be equal to 32px. PX from resolution comes from the dpi [dots per inch] of printers and can be found as ppi with regard to screens [pixels per inch].

The argument really ranges around the idea that ems let the user control the size of fonts etc, while px lets the designer control the sizes. This is really not valid, though no one says that, they argue that if you use px, people with IE can't resize for their own vision needs. Not true, since you can set accessibility in IE and that will over ride the px settings. What they mean is that you can't use the View / text size, you must set your needed font size in the accessibility menu and I guess they figure that isn't 'good' enough.

Anyway, there is more involved also, since px are more about resolution, and Mac and Windows use different dpi settings, Mac using 72dpi [ppi] and ms using 96dpi [ppi]. That's why the same font size will look different on mac and ms OS. And this is probably more than you ever needed to know, lol.

Me, I tend to set font sizes to 100% thereby letting the users system use whatever their setting are. I play with the design to see if it will look, if not good, at least OK at a 400% increase. But you must remember I am not a designer. I haven't even done a thing with my domain since around 2004, I think.

Dang I really ran on there. Anyway, if you can point out what the difference is that you are talking about in those images, I'll see if I can figure out what is controlling that.

Ruth

[wkilc]

Thanks Ruth.

There is a div called "menubottom", it contains the the small grayish border under the menu that looks kinda like \\\\\\\\\.

That div has a 5px margin at the bottom. It's the last item before I close the red-bordered "no-print" div.

In bottom screen shot, you can see the extra white space below the "\\\\\\" that is that 5px margin. On the other, you cannot, the red border on the "no-print" div that we added hugs that \\\\\\ image tightly, no extra bottom margin space. You can also see a slight difference in the dashed border around the menu div too.

If you look at:
http://www.rimea.org/history.php
and
http://www.rimea.org/forum

with IE 8, you'll see that extra bit of space on the former page below \\\\\\.

But strangely enough, on another computer, the menu, the red border, they are identical with IE 8.

Thanks again.

~Wayne

[Ruth]

Hi,

Well, I don't know but I see a few things. The history page is set up as XHTML 1.0 transitional and contains

Code: Select all

 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 

The forum page is XHTML 1.0 Strict and contains no reference to content IE8. I have no idea if that can be an issue, I don't really know if that has anything to do with it. It sounds like a margin, maybe margin collapse issue, though I don't see any margin set in the no-print class. But perhaps there is some kind of inherited issue ro something. I know that if there are two margins that meet, i.e. a bottom div margin that meets a top div margin that the smaller of the two margins collapse. Since, you have the css set so that there is a bottom margin in that menubottom section, it would seem that IE8 on the history page is working, that is, showing the 5px margin, and not working on the other pages, which don't have the content IE8 reference. After all, if you have a margin-bottom:5px, then shouldn't it show in all the browsers?

Ruth

[wkilc]

Hi Ruth,

I added that meta tag just this morning... I was trying to see if I could make the little IE compatibility view button go away. It's not helping or hurting anything, I think. I've removed it.

That's correct... that one page is NOT showing the bottom margin on the forum page, which I guess means I should suspect a conflict with the phpbb css style sheets. (But oddly enough, one my laptop, with IE 8, it also doesn't show the margin on the history page.) It always displays the margin correctly in Firefox. Although, as you toggle between the two pages with Firefox, the small black arrows move vertically a tiny bit.

The main phpbb style sheet would be this one, I think:

Code: Select all

/* General proSilver Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 101%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles - modified font-size */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 1.6em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
}

hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
	padding: 0 20px;
	min-width: 650px;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	margin: 4px 0;
	clear: both;
}

#page-footer {
	clear: both;
}

#page-footer h3 {
	margin-top: 20px;
}

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

a#logo:hover {
	text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

#search-box #keywords {
	width: 95px;
	background-color: #FFF;
}

#search-box input {
	border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
	padding: 1px 5px;
}

#search-box li {
	text-align: right;
	margin-top: 4px;
}

#search-box img {
	vertical-align: middle;
	margin-right: 3px;
}

/* Site description and logo */
#site-description {
	float: left;
	width: 70%;
}

#site-description h1 {
	margin-right: 0;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

.navbar {
	background-color: #ebebeb;
	padding: 0 10px;
}

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.panel {
	margin-bottom: 4px;
	padding: 0 10px;
	background-color: #f3f3f3;
	color: #3f3f3f;
}

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}

.bg1	{ background-color: #f7f7f7;}
.bg2	{ background-color: #f2f2f2; }
.bg3	{ background-color: #ebebeb; }

.rowbg {
	margin: 5px 5px 2px 5px;
}

.ucprowbg {
	background-color: #e2e2e2;
}

.fieldsbg {
	/*border: 1px #DBDEE2 solid;*/
	background-color: #eaeaea;
}

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
	display: block;
	margin: 0;
}

ul.linklist li {
	display: block;
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

ul.leftside {
	float: left;
	margin-left: 0;
	margin-right: 5px;
	text-align: left;
}

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
	/* See tweaks.css */
}

#ucp-main table.table1 {
	padding: 2px;
}

table.table1 thead th {
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1.3em;
	font-size: 1em;
	padding: 0 0 4px 3px;
}

table.table1 thead th span {
	padding-left: 7px;
}

table.table1 tbody tr {
	border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #f6f6f6;
	color: #000;
}

table.table1 td {
	color: #6a6a6a;
	font-size: 1.1em;
}

table.table1 tbody td {
	padding: 5px;
	border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
	padding: 5px;
	border-bottom: 1px solid #000000;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name		{ text-align: left; }
table.table1 .posts		{ text-align: center !important; width: 7%; }
table.table1 .joined	{ text-align: left; width: 15%; }
table.table1 .active	{ text-align: left; width: 15%; }
table.table1 .mark		{ text-align: center; width: 7%; }
table.table1 .info		{ text-align: left; width: 30%; }
table.table1 .info div	{ width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol	{ line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
	float: right;
	width: auto;
}

table.info td {
	padding: 3px;
}

table.info tbody th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	color: #000000;
	font-weight: normal;
}

.forumbg table.table1 {
	margin: 0 -2px -1px -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts
   Also see tweaks.css */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

dl.details {
	/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
	font-size: 1.1em;
}

dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}

dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	color: #828282;
	float: left;
	width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: right;
	margin-top: 5px;
	float: right;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 0 2px;
	margin: 0 2px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 2px;
	padding: 0 2px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	display: block;
	float: right;
	width: auto;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.9em;
	background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
	float: right;
	width: auto;
	padding-left: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: right;
}

.copyright {
	padding: 5px;
	text-align: center;
	color: #555555;
}

.small {
	font-size: 0.9em !important;
}

.titlespace {
	margin-bottom: 15px;
}

.headerspace {
	margin-top: 20px;
}

.error {
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1em;
}

.reported {
	background-color: #f7f7f7;
}

li.reported:hover {
	background-color: #ececec;
}

div.rules {
	background-color: #ececec;
	color: #bcbcbc;
	padding: 0 10px;
	margin: 10px 0;
	font-size: 1.1em;
}

div.rules ul, div.rules ol {
	margin-left: 20px;
}

p.rules {
	background-color: #ececec;
	background-image: none;
	padding: 5px;
}

p.rules img {
	vertical-align: middle;
	padding-top: 5px;
}

p.rules a {
	vertical-align: middle;
	clear: both;
}

#top {
	position: absolute;
	top: -20px;
}

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

Thanks again Ruth for all your efforts.

~Wayne

[Ruth]

Hi,

OK, I found a solution, instead of using margin-bottom:5px in that div, replace it with margin:0px; padding-bottom:5px;

True, the darned margin should work but since it doesn't using the padding-bottom, the margin isn't an issue and it seems to render the same in all the browsers I tested. Now that I actually know the problem is, i.e. not having that 5px bottom space after that menubottom div, I note that it doesn't show right in IE7 either.

I am still going to play and research to try and figure out why this is happening. I have a feeling it is going to be the no-print css which has the display: none; I remember reading something about an object having a 'layout' and any other than visible as display and margin problems.

Ruth

[wkilc]

Thank you so much Ruth.

Unfortunately, it still doesn't change the way the menu is displayed in IE8. The menu on the forum page is still smaller than the history page... the black dashed border around the "menu" div is different.

On the history page, the border sits right on the edge of the div:
http://www.rimea.org/screengrab3.jpg

On the forum page, it appears to sit just OUTSIDE of the div:
http://www.rimea.org/screengrab4.jpg

Thanks again.

~Wayne