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
  • 116 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by SheSaidImaPregy

Dani AI

Generated

This is a classic IE6 layout/float issue rather than a problem with the idea of two labels in one link. As reported, modern browsers keep the floated value on the same line while IE6 can drop it. was right that preventing wrapping helps, but that alone can cause the right-hand value to overlap the left text when it grows.

Three practical, low-risk fixes (pick one):

  1. Use absolute positioning for the counter inside the link. Make the anchor position: relative and position the counter position: absolute; right: Xpx; top: 50%; margin-top: -halfHeight;. This keeps the counter pinned to the right without needing a fixed width and preserves the anchor hover area.
.leftnav a { position: relative; padding-right: 40px; }
.left_bar_num { position: absolute; right: 9px; top: 50%; margin-top: -9px; float: none; }
  1. Trigger IE6’s layout behavior (hasLayout) so floats behave. Adding the common nonstandard fixer zoom:1 to the anchor/container often resolves float-dropping in IE6 without changing appearance in modern browsers:
.leftnav a { zoom: 1; } /* safe, IE-specific layout trigger */
  1. If overlapping is acceptable to control, use white-space: nowrap on the anchor to force a single line. It’s the simplest, but monitor overflow for long values.
.leftnav a { white-space: nowrap; }

Troubleshooting notes: remove the float from the counter when you absolutely position it; keep the counter inside the anchor so the hover color still covers it; add adequate right padding so the left text never collides with the counter. If you need the fix only for IE6, deliver it via an IE-only stylesheet or conditional comment.

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.