No replies
pahuttun
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2008-12-05
Posts: 1
Points: 0

I have problem with sharepoint navigation where in small monitors with IE7 some of the navigation components disappear. I was trying to find the problem and stripped html to bare minimum and I found the difference between IE7 and Firefox.

The simplest way to reproduce problem:
There are two divs. One is float left, on is float right. Inside those divs are plain text. Divs are too big to fit in one page. IE7 and Firefox works identically, so first comes float:left div and in the next line is float:right div. Thats ok.

But when I remove text and put it in as list with some elements, IE7 and Firefox are not working same way. Firefox still does what it did before, so divs are in different rows (this is behaviour I am seeking), but in IE7 the left div is as big as it can and the right div is in the same row and the div element height is getting bigger.

The problem is that if you have lots of navigation elements in float:left and float:right in IE7 the navigation bar will take more than two lines but in Firefox it takes only two lines as it should. I am not sure how to browser should work regardin to specifications but I am trying to make IE6 and IE7 work like firefox in this case.

In real sharepoint case doctype is not defined but the same problem happens with valid strict doctype.

HTML:

<!-- Without list, this works in IE7 and Firefox -->
<div id="topNavi">
ABCDEFGHJKOLMNPOQABCDEFGHJKOLMNPOQABCDEFGHJKOL
</div>
<div id="topNaviRight">
ABCDEFGHJKOLMNPOQABCDEFGHJKOLMNPOQABCDEFGHJKOLMNP
</div>
<br /><br />
 
<!-- With list, this works differently in IE7 and Firefox -->
<div id="topNavi">
<ul>
<li>
A1234567890
</li>
<li>
B1234567890
</li>
<li>
C1234567890
</li>
<li>
D1234567890
</li>
</ul>
</div>
 
<div id="topNaviRight">
<ul>
<li>
G1234567890
</li>
<li>
H1234567890
</li>
<li>
I1234567890
</li>
<li>
J1234567890
</li>
</ul>
</div>

CSS

#topNavi {
float:left;
background-color: yellow;
}
 
#topNaviRight {
float: right;
background-color: red;
}
 
li {
float: left;
}