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

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 373,374 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,800 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1388 | Replies: 1

•

Join Date: Jan 2008

Posts: 1

Reputation: designer21 is an unknown quantity at this point

Rep Power: 0

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

(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

(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>

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

Thanks in advance.

•

Join Date: Sep 2007

Posts: 1,054

Reputation: SheSaidImaPregy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 61

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.