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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Strang Issue with 2 CSS tags

    1st I want to thank you for your reply before hand.

    You can see the issue here: http://lcudhost.com/samples/bmart/

    On my page the dark blue box at the top of the page should be bellow the logo and the business name. When I tried to find the issue I added this to the menu bar's css bracket:

    Code:
    top-margin: 20px;
    That then moved the entire page down 20 px. I have no idea what is going on, please help.

    Link to my Style Sheet: http://lcudhost.com/samples/bmart/layout.css


    Here is a copy of the code in my index.php:

    PHP Code:
    <head>
    <
    title>B-Mart Inc.</title>
    <
    link href="layout.css" rel="stylesheet" type="text/css" />
    </
    head>
    <
    style type="text/css">
    <!--
    body {
        
    background-color#3f3f3f;
    }
    -->
    </
    style>
    <
    html>
    <
    body>
    <
    div id="wrapper">
    <
    div id="header">
    <
    div id="logo"><div id="bmartname"></div></div>
    <
    div id="menubar"></div>
    </
    div>
    </
    div>
    </
    div>
    </
    body>
    </
    html

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Add clear:both; to your menubar CSS.

    Is this what you was trying to achieve?
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the code that I posted I have one to many </div>'s and that IS NOT in the live code.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello wesslayneb,
    You have no DocType -
    Your #logo is 250px wide but you are trying to place 400px wide #bmartname inside it. The box model shows how whatever you place in a container should not exceed that containers size... margin/padding/border all count when figuring sizes too.

    Adding clear to that #menubar will make it act better -
    Code:
    #menubar {
    background: url(images/menu.png) no-repeat;
    height: 50px;
    width: 1000px;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 20px;
    clear: both;
    } /*note missing bracket*/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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