menu bar and link area: different heights

jcpcosta · #1 Mar 26, 2013, 09:23 AM

Can you please tell me how do I solve this difference between the menu bar and the "link area"??? I tried to change every padding and margin options but's not working :/ Please, see attached a print screen. Thank you

juggledad · #2 Mar 26, 2013, 09:28 AM

This was just answered a couple days ago, check the forums

jcpcosta · #3 Mar 26, 2013, 09:48 AM

Sorry juggledad but I'm not finding specifically what I need..have u got an idea of what was the title of the tread, key words, tags???

juggledad · #4 Mar 26, 2013, 11:48 AM

Ok, I'm going to make you work for it.
Install the FireBug extension of FireFox and use the inspector to examine the area in question.
What HTML and CSS do you see?

jcpcosta · #5 Mar 26, 2013, 12:25 PM

I assure you I tried to find it

I did that before too..but I'm kind of a newbie! So, I appreciate your help even more

I didn't know Firebug. I use Chrome so thank you for showing me this debugging which is much more simple and easy to read!

So the HTML is:

<body class="home page page-id-2 page-template-default">
<div id="wrapper">
<div id="container">
<table id="layout" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col class="coltwo">
</colgroup>
<tbody>
<tr>
<td id="header" colspan="1">
<div id="header1" class="bfa_widget_area">
<div id="widget_sp_image-2" class="widget widget_sp_image">
<img class="attachment-full" width="800" height="111" src="http://protocolos.mdsinsure.com/redunicre/files/2013/03/redunicre.png" style="max-width: 800px;max-height: 111px;" alt="">
</div>
</div>
<div class="horbar1"> </div>
<div id="menu1">
<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
<li class="page_item page-item-2 current_page_item">
<a href="http://protocolos.mdsinsure.com/redunicre/">
<span>Home</span>
</a>
</li>
<li class="page_item page-item-23">
<a href="http://protocolos.mdsinsure.com/redunicre/subscricao-mr-comercio-servicos/">
<span>Subscrição MR Comércio & Serviços</span>
</a>
</li>
<li class="page_item page-item-25">
<a href="http://protocolos.mdsinsure.com/redunicre/subscricao-acidentes-de-trabalho/">
<span>Subscrição Acidentes de Trabalho</span>
</a>
</li>
</ul>
</div>
</td>
</tr>

And the style is:

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div#menu1 ul.rMenu {
background: none repeat scroll 0 0 #D1D0D0;
border: 1px none #D1D0D0;
}
ul.rMenu-hor {
padding-left: 1px;
}
ul.rMenu, ul.rMenu li, ul.rMenu ul {
list-style: none outside none;
}
ul.rMenu, ul.rMenu ul, ul.rMenu li, ul.rMenu a {
display: block;
margin: 0;
padding: 0;
}
.clearfix {
display: block;
min-width: 0;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
margin-bottom: 10px;
margin-top: 10px;
padding-bottom: 0;
padding-top: 0;
}

juggledad · #6 Mar 26, 2013, 02:42 PM

Go put a border on 'menu1'

jcpcosta · #7 Mar 26, 2013, 04:17 PM

Doesn´t work! I tried adding

div#menu1 ul.rMenu {
border: 5 none #D1D0D0;
}

in the CSS inserts --> ATO

Then in ATO -->Style and edit header area--> both borders of hor bars..

Stills the same :/

juggledad · #8 Mar 26, 2013, 04:27 PM

so you put a border on the ul that is a child of the element which has the ID 'menu1'

jcpcosta · #9 Mar 27, 2013, 09:14 AM

Didn't work out too

juggledad · #10 Mar 27, 2013, 10:41 AM

sorry, I had a head cold yesterday and rereading what I wrote even 'I' can't understand it.

what I wanted to say is you put the border on the <ul> which is a child of the <div> with the class 'menu1' - put the border on the div

jcpcosta · #11 Apr 1, 2013, 08:48 AM

Hi!

Still doesn't work....

juggledad · #12 Apr 1, 2013, 10:58 AM

What did CSS you use and where did you put it?

lmilesw · #13 Apr 1, 2013, 11:24 AM

The CSS you mentioned earlier is

HTML Code:

div#menu1 ul.rMenu {
border: 5 none #D1D0D0;
}

Here is a test... What does "border: 5 none #D1D0D0" mean?

jcpcosta · #14 Apr 24, 2013, 10:00 AM

Sorry for my late answer...well now you set me up :P I'm a CSS newbie but let's see:

border: 5 none #D1D0D0;

- 5 should be the border... but I guess "px" is missing, no?
- none..hmm...is it the display???
- and #D1D0D0...border color??

juggledad · #15 Apr 24, 2013, 10:47 AM

if you are not sure of the syntax look it up! w3schools.com/css is a reference site I use all the time.