Member Avatar for designer21

Hello

I have a navigation vertical bar on left hand side. I want to use two different text on one button in one line. first text should be align to left and second text align to right under that div. problem is in IE6, second text is coming down.in mozilla its working fine. i cannot fix width of bothe text because right text increases according to database vale.

In IE6 it is giving problem because of display:block property, if i removed dispaly:block property then text is coming in one line but on hover i want to change full square color of that link.

Here is the code

div#west {                
    background: #EBEEF2 url(../images/navi_shadow.gif) repeat-y right; width:172px;
    height: 100%;}

.left_selected { display:block; width:165px; height:32px; text-decoration:none;  background: url(../images/nav_Vbg.png) repeat-y right; text-indent:9px; font: bold 11px/28px Tahoma, Arial, Helvetica, sans-serif; color:#000;}

.leftnav {background: #EBEEF2; font: normal 11px/28px Tahoma, Arial, Helvetica, sans-serif; color: #004C85; text-decoration:none; text-indent:9px; vertical-align:top; display:block; width:165px; height:30px; border-top: 1px solid #fff; border-bottom: 1px solid #ccc;}

.leftnav a{background: #EBEEF2; font: normal 11px/28px Tahoma, Arial, Helvetica, sans-serif; color: #004C85; display:block; text-decoration:none; text-indent:9px; vertical-align:top; width:165px; height:30px;}

.leftnav a:hover{background: #fff url(../images/nav_Hbg.png) repeat-y right; color: #004C85; text-decoration:none; display:block; text-indent:9px; vertical-align:top; width:165px; height:30px;}

.left_bar_num {
    font-family: Tahoma;
    font-size: 11px;                
    color: #333333;
    float:right;
}

HTML Code:

<div id="west">
<div class="leftnav"><a href="#">Job Search<span class="left_bar_num">32</span></a></div>
<div class="leftnav"><a href="#">Find Traveler<span class="left_bar_num">5|232</span></a></div>
</div>
</div>

Hope you will understand the probelm. i am first time using this forum site.

Thanks in advance.

  • 2 Contributors
  • 1 Reply
  • 101 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by SheSaidImaPregy
Member Avatar for SheSaidImaPregy

You can set the autoflow property so it doesn't wrap. Problem with this is that if the value is too large, it will most likely wrap ontop of your right value. But that depends on what kind of lengthy values you're using.

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.