Problems with left and right margins and 100% width

mixermanic · Post by **mixermanic** » Tue Apr 06, 2004 4:51 pm

Hi everyone!

I have set my page L and R margins to 20px using CSS:

body{
margin-top : 200px;
margin-bottom : 10px;
margin-left : 20px;
margin-right : 20px;
font : 9pt verdana, arial, sans-serif;
text-align : left;
background : #FFFFFF url("img/schematic_bg.gif") fixed no-repeat;
}

The problem is, when I have the menu set to 100% width, it only goes margin to margin, not the full screen width.

I set the page margins to 0px and that worked, but then because a <div> on the left of the page was right up against the screen edge, I set the CSS margin properties of the div to 20px (keeping the <body> margins to 0px), and the menu was again 20px short on the left...???

Am I doing something wrong here?

Thanks,

Martin

Post by **Ruth** » Tue Apr 06, 2004 5:40 pm

Do you have a url for a test page? It's much easier to test the actual page and try and find the problem. Without seeing your actual menu coding and the css file, it's kind of a guessing game

Ruth

Maz · Post by **Maz** » Tue Apr 06, 2004 6:35 pm

Without the url it could be a couple of things, the menu is placed in a div is not good.

Or the menu is taking on the body margin, I'm not sure if this would work, if the body margin is 2% each and the menu width is 104%? It might need a little adjustment from there.

Let us know and post a url.

maz

mixermanic · Post by **mixermanic** » Wed Apr 07, 2004 9:19 am

Hiya,

http://www.designersounds.co.uk/test/index.html

The data for the top menu is:
http://www.designersounds.co.uk/test/sc ... nu_data.js

The menu isn't actually in a div - I have a tree navigation in the div and it is this div that seems to affect the menu placement.

Ignore the second menu on there - it's the top one I'm bothered about!

It would seem that the menu is taking on the left page margin, but not the right.

Many thanks everyone!!

Martin

Post by **Ruth** » Wed Apr 07, 2004 10:08 am

It is the global.css file, specifically this

Code: Select all

BODY {
	BACKGROUND: url(schematic_bg.gif) #ffffff fixed no-repeat; MARGIN: 200px 0px 10px 20px;

That 20px margin is the problem. If that is removed the menu spans the full page. If you have to have that, you will need somehow to get the margin using some class definition. I dont' know if you have tables, or divs over there that you can put a class to with the necessary margin. Declared as a class the menu should then ignore it. "I think

"

Rutn

mixermanic · Post by **mixermanic** » Wed Apr 07, 2004 11:02 am

OK I changed the left page margin to 0px, which worked fine, but put the tree div against the left screen edge.

Then I changed the left margin of the tree div to 20px to shift that to the right, but that also moved the menu to the right again

I'm sure I'm doing something dumb. Just can't work out what it is!!

Thanks!

Martin

(PS: I haven't updated the test page because I'm at work now and don't have FTP access

)

Maz · Post by **Maz** » Wed Apr 07, 2004 2:46 pm

To adjust for the 20px you can use
left="offset=-20";

maz

Post by **Ruth** » Wed Apr 07, 2004 3:27 pm

Ok, I fixed it. It works in ie5.5 on win98se, netscape6, 7, firebird .07. I have absolutely no clue as to why and it may not even be acceptable, but... I put a .divtest {MARGIN-LEFT: 20px} in your global.css file. Then I put a div around that div.

Code: Select all

<!-- NAVIGATION TREE -->
<div class=divtest><DIV class=dtree id=sidenav>
<P class=align_c><A href="javascript:%20d.openAll();">open all</A> | <A 
href="javascript:%20d.closeAll();">close all</A></P>
<SCRIPT src="tree_data.js" type=text/javascript></SCRIPT>
</DIV></div>

Now I don't even know if you can do that, nest a div in a div. But, I tried that and it didn't work, and I just shook my head, then I thought...wonder if I 'moved' it down a bit if that would do it? So, right after the body tag I put in a

Code: Select all

<p>& n b s p ;

That's the non-breaking line space with the paragraph. Now, again I have no clue as to why that would do it, but it did. The menu stretches all the way across the page in the browsers I mentioned. I also put in Maz's suggestion on the offset. That didn't work by itself, however, without it the menu stays like it has been in opera 7. With that code in the menu at least in Opera 7 it doesnt look bad, it 'balances' it so it's got the same spacing right and left. Opera is a real problem, it messes up the simplest things. I cannot check it on a Mac.

Ruth

mixermanic · Post by **mixermanic** » Sun Apr 11, 2004 9:10 pm

Sorry for the delay in replying - I been on holiday!!

Thank you so much!!!!! That has made my life a lot easier.

I have no idea why it works either - but it does, so there we are. Ah the mysteries of the web.....

Thanks again,

Martin