funky widths

[Abby]

I'm back! I'm playing with a link element (image, displayed as a block), trying to set its margin so it spaces out as a percentage from other similar link elements. Whenever I enter a percentage or em instead of px, the links wrap when the browser is resized. Wrapping is an undesirable effect. I can set a very low percentage without them wrapping (like 1%), but they don't move as intended when the browser window is resized. I would like them to scrunch together if the browser is small, and expand apart if the browser is big.I figure the percentage or whatever is being drawn from its parent/ancestor element. This element is an id. However, no matter how I resize the width of the id element, the problem still happens, just with varying degrees.Right now, I have the id element set to:margin:9px 0 0 174px; min-width:600px; width:1800px;and the child link element set to:padding:0; margin:-2px 2%;(Note: The link element has its own children elements.)Yes, I tried setting a max-width, and I tried getting rid of the width, and I also tried making the width a percentage. No dice. Does anyone have any idea why this is happening?

[dsonesuk]

I think the problem is that it assigns a percentage to current total width available for each anchor say for instance margin: 0 15%, so the first anchor will have largest margins of 15% of total width, and also make its parent li this combined button width and margins, second will have total width - button width+margins from first, making the margin smaller and so on, the margin getting smaller for each anchor.to prevent this, you have to set the width of the links parent li to make it a approximate equal width for allthree links = 100 / 3 = 33.3%#topbar li {width:33.3%;}then adjust % value of margin of anchor until equally spaced, this could be done using javascript to get the correct value, but easier doing it manually.#topbar a {margin:-2px 27%;}tested it in FF only, but it seems to work.

[Abby]

This makes sense, but when implemented, the button images all wrap so it becomes a vertical menu. I think there must be something else in the code overriding or conflicting with the width percentages. I have the same problem with the vertical (sidebar) menu. I have the parent id's height set to auto, and the top-margin for the child links is set to 15%. However, the visible margin between each link doesn't change when I resize the browser.Here's the page. Do you see any code problems that might be causing this?I'll keep experimenting and post a solution when/if I find one.

[Abby]

Problem solved, for the top horizontal menu! I'm not 100% sure why it worked, but it looks like the key solutions were to add a float:left and display:inline to the direct parent element (the li).Now I'll try to figure out the vertical sidebar menu.

[dsonesuk]

As usual IE problemFIXadd#topbar a {margin:-2px 27% !important;margin:-2px 5%; /*for IE6 */}#topbar li{width:33%; display:inline-block;/*IE7-8*/ float:left; /*IE6 - 7*/}IE6 willl still result in menus stacking on top of each other, when resizing takes place, but since its coming to then end of it's day (praise the lord), i should not worry to much about it.

[Abby]

Thanks! That's interesting, the !important; tag.My page looks like crap in IE6.

[RobberBaron]

At line 217 you have <\br /> which should be <br />

[dsonesuk]

You should try to avoid using <br /> for spacing all together, thats what padding and margins are for.IE6 problemtry .box{background-color:#eeff99;border:6px ridge green;/*float:top; does not exist*/width:auto;/*height:25%;*/height:auto;max-height:300px;padding:5px;margin-left:172px;margin-right:6px;/*overflow:auto;*/overflow:hidden;}</style><!--[if lt IE 7]><style type='text/css'>body { height: 100%; overflow: auto ; overflow-x: hidden; }html{overflow-y: hidden;}#bottom, #top, #home, #andbar, #cuatro {position:absolute; }#bottom, #top {margin-left:-16px;} /*to prevent overlapping of scrollbar*/#bottom{z-index:999;}</style><![endif]-->The overflow: auto; produced scroll bars when the set height is exceeded, this probably happens because IE has different margins and padding set by default compared to other browsers for paragraphs etc. Either change to overflow:hidden; or increase max-height: value, if you require a fixed set height.