Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox vs IE: Margins and H-Scroll bars with CSS

    I'm having some difficulties getting a page to display consistently in Firefox (1.04) and IE (6.whatever).
    I'm using CSS with an absolute position to put my main content to the right of a menu. Code from the CSS is below:

    #content {
    position: absolute;
    top: 0;
    margin-left: 15em;
    wrap: on;
    }

    In Firefox, the text in the main document wraps as you'd expect, and no horizontal scroll-bar is evident. So far so good.

    If IE, some of the text is off the screen and there is a horizontal scroll bar. The text still wraps, eventually, but it's as if the scroll bar was created to make the overall page width larger by the size of the left margin.

    I've had a good look around various forums and FAQ's and haven't found anything that has an effect yet.

    Any pointers would be greatly appreciated.

    John.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why even use absolute positioning?
    If you float your menu to the left and give your content enough left margin to clear the menu then you shouldn't need absolute positioning. What the heck is wrap:on? That isn't valid CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox vs IE: Margins and H-Scroll bars with CSS

    Thanks for the reply. You're right about the wrap:on thing of course, it was some rubbish left over from some desparate attempts to get things working.

    Regardless of the positioning model I use, the effect remains unchanged.

    I've got a test page at:
    http://home.exetel.com.au/oas/testmain.php
    with a link to a version without the menu/css, without the CSS it's fine in both browsers, with it, the flaky behaviour is still present in IE.

    I suspect it's to do with the margin-left shifting the starting point for the content division, but increasing the page width by the margin.

    Any ideas would be greatly appreciated.

    I've included my entire CSS file below (sans header comments):

    li { margin-left: 0em; }

    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; /* Was absolute */
    top: 0;
    margin-left: 15em;
    color: white;
    }

    body {
    color: white;
    background: black;
    }

    a:link, a:visited { color: white; } /*Already vistited links*/
    a:hover, a:active { color: yellow; } /*text color while highlighted*/
    a:hover { backround-color: yellow; } /*background colour while highlighted #fff */

    h1 { color: red }
    h2 { color: yellow}
    h3 { color: yellow }
    h4 { color: white }
    h5 { color: red }

    p {color: white }

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure what you mean, but maybe it helps if you consider using a unique id. Navigation is defined twice.

    Also your code could be much more compact. If you just put in #navigtion * { margin:0; padding: 0 } it would already take a few bytes.

    Also, the headings and paragraph's, you're already saying you want it white in body. So there's no need to define them there anyway.

    And I also have to nag about the <font>, "orange" is no valid value. #FFA500, or even better, #f90, is the right value.

    Edit: OK, I see. The problem probably lies in the fact of absolute positioning. Float #navigation, give #content a margin-left of the width of the menu, and fix the 3px bug in IE.
    Last edited by mrruben5; 10-04-2005 at 09:25 PM.
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I'm not sure what you mean by "navigation" being defined twice - arent't the repeats simply more specific cases?

    At any rate, I've floated the navigation items as suggested but to no avail.

    I've tried playing with the content position value, and found the following:

    position: absolute; /* Works as before, 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.

    I've updated the test page to be a little more helpful, but you get the idea:
    http://home.exetel.com.au/oas/testmain.php

    Also, thanks for the optimisation tips, I'll take them on board, but I'm trying to get the site looking functional first. I've already fixed the orange colour reference, thanks.

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Position static is what you get without any styles applied. Document flow. Position fixed isn't supported by IE.

    Blablabla

    Validating will make your work much easier.
    Last edited by mrruben5; 10-05-2005 at 11:48 PM.
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Firefox vs IE: Margins and H-Scroll bars with CSS

    I ended up going through the validation processes for both the html and css. A combination of the error messages, some RoTFM and a bit of trial and error with IE and FF sorted me out.

    Thanks to all who pointed me in the right direction. Your advice and patience is appreciated.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem. I'm glad I helped you.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •