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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Toolbar messed up in Opera And Padding Issues...

    I have this site I'm working on:

    http://www.nebrad.org

    I just did the menu, and I want the orange color to connect with the main text box when you hover over it. I messed with the padding, until it reached the content box, but when I open the site in opera, it doesn't connect? And I'm assuming it isn't connected in IE either? Firefox and Safari display it fine. Any help?

    My other question, has to do with padding. The words "Welcome" I wanted to add padding to the style of the words in the CSS. But every time I do that, it makes the box expand weirdly, even though, obviously a 10px padding, shouldn't push the right side of the box out? What am I doing wrong?

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    The html seems wrong. This would be more logical:
    Code:
    <div id="maincontent">
    <p class="maincontentheader">Welcome</p>
    </div>
    Then add padding to .maincontentheader

  • Users who have thanked Fang for this post:

    t-buck (10-28-2007)

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That change in code fixed my one problem. Does anybody know why the toolbar won't connect to the orange box below it in Opera, but it will in safari and firefox?

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    doesn't seem to connect for me using FF2, either, but Opera has a wider gap.
    can't quite figure it either...

    you might try eliminating all padding and margin from the page by inserting the following css rule:
    Code:
    * { margin: 0; padding:0; }
    to see what happens.

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    #maincontent{
    position:absolute; left:137px; top:245px;width:609px; height:437px;z-index:1; visibility:visible; background-color:#f7f5e7;
    }
    and 
    * { margin:0; padding:0; }
    Mostly just the absolute positioning of the maincontent area needed to come up towards the menu.
    Appears good in my Local copy. ff2.0.0.8, safari(win), IE7 and opera9.24
    The horiz nav is a little different in several of them. Might need to tweak it a little.

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I changed that size on the top, but now in Opera it's completely messed up? I have no idea what happened now?

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Fortunately, i still have a copy of the file I was using. Try it.

    Code:
    body{
    margin: 0px 0px;
    color: #FFFFFF;
    text-align:center;
    background-color: #E7EBF1;
    }
    
    #container {
    margin: 0px auto;
    padding:0;
    text-align:left;
    width:1062px;
    height:900px;
    position:relative;
    
    
    }
    
    #headergraphic {position:absolute; left:0px; top:0px;width:1062px; height:215px;z-index:1; visibility:visible;}
    #headerleft {position:absolute; left:0px; top:215px;width:137px; height:49px;z-index:2; visibility:visible;}
    #headerright {position:absolute; left:746px; top:215px;width:316px; height:49px;z-index:4; visibility:visible;}
    
    #maincontent{ 
    position:absolute; left:137px; top:245px;width:609px; height:437px;z-index:1; visibility:visible; background-color:#f7f5e7;
    }
    
    .maincontentheader {
    font-family:georgia;
    font-size:24px;
    color:#b6a623;
    padding-left:40px;
    padding-top:20px;
    
    
    }
    
    .maincontenttext {
    font-family:arial;
    font-size:12px;
    color:#000000;
    padding-left:40px;
    padding-top:5px;
    }
    
    #menu {
    position:absolute; left:137px; top:215px;width:609px; height:49px;z-index:1; visibility:visible; background-color:#FFFFFF;
    }
    
    #advertise {position:absolute; left:762px; top:280px;width:175px; height:176px;z-index:5; visibility:visible;
    font-family:arial;
    font-size:10px;
    color:#254a7c;
    background-color:#e7ebf1;
    text-align:center;
    padding-top:10px;
    }
    .ad {padding-bottom:20px;}
    
    #infobox {position:absolute; left:762px; top:472px;width:175px; height:221px;z-index:1; visibility:visible;
    background-color:#e7ebf1; text-align:center;}
    .styleinfoboxheader{
    font-family:arial;
    font-size:18px;
    color:#254a7c;
    z-index:1;
    
    
    }
    .styleinfoboxtext{
    font-family:arial;
    font-size:12px;
    color:#777777;
    
    }
    
    #contentbackground {
        position:absolute;
        left:87px;
        top:264px;
        width:900px;
        height:636px;
        
        background-color:#FFFFFF;
        
    }
    
    
    ul#navlist
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    }
    
    #navlist a { padding: 3px 13px; }
    
    #navlist a:link, #navlist a:visited
    {
    color: #abaaaa;
    background-color: #FFFFFF;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    font-weight:600;
    }
    
    #navlist a:hover
    {
    color: #b6a623;
    background-color: #f7f5e7;
    text-decoration: none;
    padding-bottom:18px;
    }

  • #8
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok I got it to look correct in opera again. I changed the position of the maincontentbox, but then in firefox it makes the menu too close to the content box. I mean, it looks ok, you can see everything, but I wanted the items to be higher up from the content area? Any other idea on how to get this to look correct?

  • #9
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    That's too high.

    FF2 has space under the links.

    Also, the index page is missing the "Home" tab, which should show as class=current when you arrive at the Index page, to avoid the Navbar moving when you click a navbar item. Display all of them, all the time for a consistent look to the page.
    Last edited by jlhaslip; 10-29-2007 at 02:40 AM.

  • #10
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I fixed the Home button issue. Thanks for catching that.

    But as far as the menu not reaching the content box. When I change the style sheet to what you recommended it makes the menu touch the content box, but it makes the buttons on my mac in firefox and safari very small. I wanted them to be bigger. Is there any way i can fix this, and still have them touch the content area?


  •  

    Posting Permissions

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