Jump to content

FF vs IE problems with Floating Menu


JohnOAS

Recommended Posts

I have a problem with a menu item. The menu is rendered correctly, and is floated left. The content is displayed in the correct position to the right of the menu. The content has a margin-left to make it skip the menu. The problem is, in FF it looks OK, in IE6.x it looks as though the content extends the width of the menu beyond the screen before wrapping, whcih results in annoying horizontal scroll bars.I've updated a test page to help illustrate the problem:http://home.exetel.com.au/oas/testmain.phpI've tried playing with the contents position value, and found the following:position: absolute; /* Works as described, looks OK in FF, extra width (and therefore scroll bars) in IE */position: static; /* Static fixes the H-scroll problem, but the content starts below the bottom of the menu i(vertically) in both FF and IE */position: fixed; /* Same as static for IE, OK in FF! */Again, I don't think the left margin is to blame as such, but it seems as though the width of the content section is fixed at the fill browser width, even though it's offset by the margin.My CSS is below if it helps. Any suggestions would be most welcome.li { margin-left: 0em; }ul#navigation * { float:left;}ul#navigation { left: 0; width: 13em; margin-left: 0em; margin-right: 0; padding-left: 0em;}ul#navigation li { margin-left: 0; margin-right: 0; padding-left: 0em; list-style: none; background-color: #039; border-top: solid 1px #039; text-align: left; width: 13em;}ul#navigation li a { display: block; text-decoration: none; padding: .25em; border-bottom: 1px solid #3399FF; border-right: 1px solid #3399FF; width: 12.5em;}#content { position: absolute; /* Absolute OK except for H-scroll in IE */ /*position: static; /* Static fixes H-scroll problem, but content starts below menu in both FF and IE */ /*position: fixed; /* Saame as static, except renders OK in FF! */ top: 0; margin-left: 15em; color: white;}

Link to comment
Share on other sites

Not sure how to fix what you already have, but I can tell you a different way of doing it that will work, and you dont have to use any position stuff.

<div style="float:left; display:inline;">    <!--Here you put everything that will be in the nav bar--></div><div>    <!--everything here will line up next to the navbar--></div><div style="clear:both;"></div><!--everything here will be below both the content and the navbar-->

hope that helps.

Link to comment
Share on other sites

Not sure how to fix what you already have, but I can tell you a different way of doing it that will work, and you dont have to use any position stuff.
<div style="float:left; display:inline;">    <!--Here you put everything that will be in the nav bar--></div><div>    <!--everything here will line up next to the navbar--></div><div style="clear:both;"></div><!--everything here will be below both the content and the navbar-->

hope that helps.

Very nice, thankyou. I had to play with it a little to implement your idea with my CSS, but now it works fine.Is there a preferred method for keeping the area below the navbar "free" that's more elegant than a table cell or image of the appropriate width/height? Basically I want text to the right of the navbar to keep the indent once it's passed the navbar content.
Link to comment
Share on other sites

Is there a preferred method for keeping the area below the navbar "free" that's more elegant than a table cell or image of the appropriate width/height?  Basically I want text  to the right of the navbar to keep the indent once it's passed the navbar content.

setting the height of the inline navigation container to 100% should do it.
Link to comment
Share on other sites

setting the height of the inline navigation container to 100% should do it.

I'm afraid I'm going to ask the obvious question in: "What container?". Setting the height for the <div> isn't valid. What sort of encapsulation should the navigation section have?I tried giving all three sections (body, container (menu) and content )sections 100% height, but the content text still wraps under the menu.#content { color: white; list-style-position: inside; height: 100%;}body { height:100%; color: white; background: black;}#container { height: 100% }I've actually resorted to using a small table to create the appropriate space. I know this isnt the best way to do it.
Link to comment
Share on other sites

Had to play with it a bit but,In your navigation container, give it a width of 23%. In your content container, give it a left margin of 23%.that'll look fine in 1024x768, but you'll have to adjust for 800x600. This is why I wish css had variables and math... so I could just be like "margin-left: div.navcontainer.width+10px;"another solution would be to set the floating of the content to right, and play with that. Personally, I would just put the whole damn thing into a table. Then it would work fine.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...