• Hi Guys
    I hoep someone can help this has been driving me up the wall tonight – I want the menu div to exist in a fixed sized box with overflow:auto; But sadly in Firebird 0.7 I get an horizontal scrollbar (the content fits the box easily) – I’ve set all the padding and margins to 0 in the hope that it’ll fix it but it hasn’t – in IE 6 and IE 5 there is no scrollbar.
    Heres the CSS

    #menu {
    position:absolute;
    top:71px;
    left:512px;
    width:183px;
    height:336px;
    overflow: auto;
    text-align: left;
    margin-left: 0px;
    padding-left:0;
    border: 0;
    }
    #menu form {
    }
    #menu input {
    }
    #menu ul {
    color: #ccc;
    font-weight: bold;
    list-style-type: none;
    margin: 0px;
    padding:0;
    }
    #menu ul li {
    font-family: ‘Times New Roman’, Times, serif;
    font-weight: normal;
    font-style: italic;
    font-size: 110%;
    margin: 0px;
    padding:0;
    border: 0;
    }
    #menu ul ul {
    font-variant: normal;
    font-weight: normal;
    font-style: ;
    list-style-type: none;
    text-align: left;
    margin-left: 0px;
    padding:0;
    border: 0;
    }
    #menu ul ul li {
    font-size: 0.85em;
    font-family: ‘Times New Roman’, Times, serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0;
    margin-left: 0px;
    padding:0;
    border: 0;
    }
    #menu ul ul li a {
    color: #fff;
    text-decoration: underline;
    }
    #menu ul ul li a:hover {
    color: #ccc;
    text-decoration: underline;
    }

    Any help would be appreciated
    McC

Viewing 9 replies - 1 through 9 (of 9 total)
  • Depending on how big your blog is in px, the left: 512px; may have something to do with it. Why are you declaring a height? Take that out as you should not need it. What is overflow used for? I don’t know as I don’t use it. What resolution are you viewing it? Do you have browse master? What’s the URL? I use Mozilla at 1024 x 768. I would like to view it. ??
    I use two sidebars in most of my .CSS. Here’s mine from one of my skins.
    #sidebar {
    position: absolute;
    top: 260px;
    left: 2px;
    width: 170px;
    text-align: center;
    }
    #sidebar1 {
    position: absolute;
    top: 260px;
    left: 608px;
    width: 170px;
    text-align: center;
    }

    Thread Starter arthuc01

    (@arthuc01)

    The menu block needs to fit inside a specific sized block to the right of the screen hence the fixed height and the 512px thing and – now the content fits the box but – no matter what size I make the box In Mozilla I still get a horizontal scrollbar where I don’t wan’t it
    what I’m trying to do

    I see! Okay, why not adjust the way the entire thing sits on the page? It could just be that the menu is too far to the right for Mozilla. ?? Scoot over the main blog and the menu a few pixels then make the menu a tad wider. I took my calendar out as it was messing with the width. Have you tried that?

    Arthuc01,
    Add a margin value in your #menu ul other than zero. I tried 8px all around and 5px of padding all around. The padding is optional…even if you leave it at 0px it will get rid of the horizontal scroller.
    #menu ul {
    color: #eee;
    font-weight: bold;
    list-style-type: none;
    margin: 8px;
    padding:5px;
    Also, your one background image, while being excellent, weighs in at 631 kb! That’s HUGE! Even on ADSL, your page took some time to load. Many people will not wait that long and will move on to other things. I think that it’s also a GIF image, is it not? You could probably convert that to a JPG and make it a lot smaller, which would ease some of your bandwidth costs and speed up the load time on your page.
    It looks good! Good luck with the site and have fun!!
    Craig.

    Sara,
    Do you have the Edit CSS sidebar for FB/Moz? I will open a sidebar (obviously!) and it lists all of the CSS used on that site. You can fool around with any and all of the values, without breaking anything. Then, if you do something that you really like, you can COPY/PASTE it into a style sheet, upload it, and faster than a moose with the raging scuts, your site is looking even better than before!
    I’ll have a poke around to find a link for you if you need it!
    Craig.

    Thread Starter arthuc01

    (@arthuc01)

    No matter what I change the width to I see the same problem so I don’t think its content size thing per say – block level items should be the width of their container – in this case #menu and the table for the calender isn’t a problem as its width is only about half the width of the #menu.
    The only thing I could think of is that the padding and margins are in someway mucking up the site – but setting them all to zero has done nothing – I’ve even tried setting the width of the ul and li below #menu to 90% width of the containing div and it still does it

    Art,
    Looks like we posted at nearly the same time. Did you see my change up above? I got it to remove the scrollbar with a margin setting.
    Craig.

    Thread Starter arthuc01

    (@arthuc01)

    Craig mate
    Its got rid of the Moz Scrollbar – Thanks it now works as expected in IE5, 5.5. 6 Firebird 0.7 Netscape 7.1
    Image is only 30.7K JPG I wonder why your getting it soo big??? – the server I’m on is shockingly bad which may explain the download times.
    Cheers again – McChris

    I’ll check the site when I get home. Maybe there was something I *thought* I saw…I often see one thing and think another ?? !!
    Craig.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Unwanted horizontal scrollbar’ is closed to new replies.