Hello,

Me and a Friend have been designing a website. Currently we've done one page and we're very puzzled by the Navigation bar. We fixed the issue when it was on the right hand side, but can't now it's on the left. It was on both but as explained, right was fixed.

http://screensnapr.com/v/vWwrCo.jpg As you can see there is a white line, instead of the other grey colour which is indented. We're trying to make it like that, so it looks perfect but it's not doing it. He used the same code as well.

Could you please let me know how to fix this, either by posting the code and telling me where to put it (most helpful) or other. If you need to see the menu.css it's http://mingul.co.uk/css/menu.css and the website page is http://mingul.co.uk/Donate.html

Thank You.

Recommended Answers

All 14 Replies

Cant Fix a picture
post the aberrant code

`

<html>
<head>
    <title>Mingul - A Minecraft Server</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/menu.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

</head>
<body>
    <div class="wrapper">  
                <div class="container"><div class="menu" rel="sam1">  
                 <div><a href="#">Home</a></div>  
                 <div class="active"><a href="#">About</a></div>  
                 <div><a href="#">Blog</a></div>  
                 <div><a href="#">Services</a></div>  
                 <div><a href="#">Portfolio</a></div>  
                 <div><a href="#">Contacts</a></div>  
                 <div><a href="#">Twitter @insic</a></div>
          </div>  
         </div>
         </div> 
<div class="bg">
    <div class="container_12">
        <div class="grid_6"><a href="http://www.mingul.co.uk"><img src="images/logo.png" alt="" /></a></div>
        <div class="grid_6">

        </div>



        <div class="clear"></div>
        <div class="grid_12" id="content">
            <div class="content-spacer">
                <h2>Our Donation Philosophy</h2>
                <p>Donations are just that, donations! They should not be viewed as purchases. Any perks or packages given to you by donating should be viewed as a gift and is our way of saying thanks. We do not sell any of the following packages.</p>
                <p>We will sometimes donate a small amount to Plugin Developers, especially if they've helped create personal ones for Mingul only. This will only happen if we have enough funds to see us through the next two months. </p>
                <h2>Donation Packages</h2>
                <p>Click donate on any package below to be redirected to PayPal. <strong style="color: red;">Be sure to include your in-game name when donating!</strong> If you do not include your in-game name the approval process will take much longer and you may not receive the perks at all if we cannot verify it to a player on Mingul. <a href="#pdetails">Package Details</a> are available below.</p>

                <div class="package" id="donation-stone">
                    <h3 class="package-title">Stone</h3>
                    <p class="package-cost">&pound;5</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8QY2H92KLR39L">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
                    </div>
                </div>
                <div class="package" id="donation-sandstone">
                    <h3 class="package-title">Sandstone</h3>
                    <p class="package-cost">&pound;10</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="E3X6CDX93BDQL">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="package" id="donation-iron">
                    <h3 class="package-title">Iron</h3>
                    <p class="package-cost">&pound;20</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="DP5Q8N9QTHWG8">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="package" id="donation-gold">
                    <h3 class="package-title">Gold</h3>
                    <p class="package-cost">&pound;35</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6G5FDQX5XU49L">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="package" id="donation-redstone">
                    <h3 class="package-title">Redstone</h3>
                    <p class="package-cost">&pound;50</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="DAFATRL8L3EPU">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="package" id="donation-emerald">
                    <h3 class="package-title">Emerald</h3>
                    <p class="package-cost">&pound;100</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6Y6V6DMM3NMKQ">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="package" id="donation-diamond">
                    <h3 class="package-title">Diamond</h3>
                    <p class="package-cost">&pound;150</p>
                    <div class="package-details">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BXLK9A8ZAD588">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="package" id="donation-bedrock">
                    <h3 class="package-title">Bedrock</h3>
                    <p class="package-cost">&pound;300</p>
                    <div class="package-details">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="MNDNWPUWJD7CU">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                    </div>
                </div>
                <div class="clear"></div>
                <p>Please read the <a href="#disclaimer">donation disclaimer</a> before making a donation!</p>
                <h2 id="pdetails">Package Details</h2>
                <p>Below is a gridded list of all donation benefits and at what rank they are received. These can change at any time and more may be added in the future.</p>
                <table id="donation-table">
                    <thead>
                        <th style="width: 150px;"></th>
                        <th class="donate-has"><font color="#B8B8B2">Stone</font></th>
                        <th class="donate-has"><font color="#D4D472">Sandstone</font></th>
                        <th class="donate-has"><font color="#cb7c32">Iron</font></th>
                        <th class="donate-has"><font color="#dede00">Gold</font></th>
                        <th class="donate-has"><font color="#cb0018">Redstone</font></th>
                        <th class="donate-has"><font color="#07eb4d">Emerald</font></th>
                        <th class="donate-has"><font color="#2ccdb1">Diamond</font></th>
                        <th class="donate-has"><font color="#30302F">Bedrock</font></th>
                    </thead>
                    <tr>
                        <td class="donation-item">Reserved Slot</td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">Nickname</td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">VIP Chat Channel (TS)*</td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">TPA and TPAHERE</td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">Multi-Home (3 Homes)</td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">No-PVP Mode</td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item"></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">Insta Eat</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">Block Hat (/hat)</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">/back Command</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">Fly Mode (/fly)</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">/warp Command</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">/feed Command</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                    <tr>
                        <td class="donation-item">DisguiseCraft</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><img src="images/donate_checkmark.png" /></td>
                    </tr>
                </table>
                <p>* This reward is not yet implemented and will not be immediately available. It is currently planned for a future update.</p>
                <h2>Mingul</h2>
                <p>The staff at Mingul work very hard to keep the server running, so sometimes some of the donations may be given to the high ranked staff if we have enough to see us through the next three months. Also, we can not promise donations won't be used for personal gain. However, we do promise anything purchased through donations will benefit the server somehow or another.</p>
                <p>For example, if there were enough donations to help fund a new company, and it was a hosting company we could move our Minecraft server onto a Dedicated Server, Free of Charge. In the long term, all donations help the server. However, as explained sometimes the staff need a reward as well as the players. We will never use donations for any illegal activities.</p>
                <h2 id="disclaimer">Disclaimer</h2>
                <p><strong>All</strong> donations are non-refundable. We do ask that you don't file a dispute with PayPal over a donation, You're not purchasing a product but donating in which gives you perks but are not <a href="#disclaimer">guaranteed</a>, read the rest of the Disclaimer. If for some reason you do not receive your donation package after donating, you can post on the forums or message an Admin online for assistance. We will do our best to assist you in a timely manner.</p>
                <p><strong>Donations do not protect you from the rules.</strong> A donator who breaks the rules will suffer the same consequences as any other player. You will not receive special treatment. If you are banned, donations will <strong>not</strong> be refunded.</p>
                <p>Donation perks may change at any time. They are not guaranteed. We will always strive to provide our donators with a good collection of perks, but unforseen issues such as plugins becoming incompatible is out of our control.</p>
            </div>
        </div>
<div class="clear"></div>
    <div class="clear"></div>
</div></div>
    <div id="footer">
        <div class="container">
            <p class="copyright">Copyright &copy; 2012. All Rights Reserved.</p>
        </div>
    </div>
</body>
</html>

`

HTML Code Above. CCS - menu.css below

.wrapper {
    width: 100%;
    height: 80px;
    background: -moz-linear-gradient(center top , rgb(168, 168, 168), rgb(69, 69, 69)) repeat scroll 0% 0% transparent;
    background: -webkit-gradient(linear, center top, center bottom, from(rgb(168, 168, 168)), to(rgb(69, 69, 69)));
    border-top: 2px solid rgb(147, 147, 147);
    position: relative;
    margin-bottom: 0;
}

.container {
    width: 960px;
    margin: 0px auto;
}

.menu {
    height: 80px;
    border-left: 1px solid rgba(255,255,255, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    float: left;
}

div.menu {
    height: 80px;
    border-left:1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);

}
div.menu div {
    list-style: none outside none;
    float: left;
    height: 79px;
    text-align: center;
    background: -moz-radial-gradient(center 80px 45deg, circle farthest-corner, rgb(31, 169, 244) 0%, rgb(0, 28, 78) 100%) repeat scroll 0% 0% transparent;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgb(31,169,244)), to(rgb(0,28,78)) );
}

div.menu a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, center top, center bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

div.menu a:hover {
    background: transparent none;
}

div.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

We'll need the sample code, or post the URL so that the source code can be accessed via a browser.

Did anyone find a fix to this?

Can you clarify what white line you are referring to? I see a line above your menu, but that appears to be related to wrapper class{border-top: 2px solid rgb(147, 147, 147);}?

Hello JorgeM,

It's the white line on the Navigation bar. Sorry if it wasn't made clear earlier. It's the white line on the left hand side of it, where the grey indents should be you can see a white line instead. We've tried fixing it but it doesn't work. If you could help, it would be appreciated.

Hi,
I think the problem is the following:

.menu {
height: 80px;
border-left: 1px solid rgba(255,255,255, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
float: left;
}
div.menu {
height: 80px;
border-left:1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
div.menu:first-child{
border-left: 0;
}

Give it a try pls.

http://mingul.co.uk/Donate.html

As you can see, it's made it less visible but it's still not the same indent as the others. Thank you for the code you provided, it did change it, but it still isn't the indent. Any idea's?

Try this one

    div.menu a:first-child {
    border-left: 0;
    }

The problem is still there.

If I have

div.menu:first-child{
border-left: 0;
}

and

div.menu a:first-child {
    border-left: 0;
    }

Then it all disappears. There is no indent, nor a white line. For now I've removed

div.menu:first-child{
border-left: 0;
}

And the issue is still there. Let me know.

I think you have to change the left border color of

.menu {
height: 80px;
border-left: 1px solid rgba(255,255,255, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
float: left;
}

to

.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
float: left;
}

Didn't change anything

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.