HTML and CSS

In navigation display:block; property is giving problem in IE6

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jan 2008

Posts: 1

Reputation: designer21 is an unknown quantity at this point

Solved Threads: 0

designer21 designer21 is offline

Offline

Newbie Poster

In navigation display:block; property is giving problem in IE6

Jan 31st, 2008

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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.

•

Join Date: Sep 2007

Posts: 1,080

Reputation: SheSaidImaPregy is an unknown quantity at this point

Solved Threads: 68

SheSaidImaPregy SheSaidImaPregy is offline

Offline

Veteran Poster

Re: In navigation display:block; property is giving problem in IE6

Jan 31st, 2008

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.

Quick Reply to Thread

Show Printable Version

Other Threads in the HTML and CSS Forum

Previous Thread: how to change the size of Element Id's runtime in css
Next Thread: Templates and Using them

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes