How i tried to fix the problem:
Did a HTML validation test and it came up with this cryptic message -
Line 108, Column 16: ID “split_list” already defined
<div id=“split_list”>
I think this is telling me i can only use that id ref once but would that fix the problem?
Would love to know if there is a css fix and why in the name of zeus but hole the list look how i want in firefox 3.5.9 :mad:
Thank you so much everyone who worked out this problem for me. Its now fixed
As always I am indebted to the been given a css fix. Ive applied Ryan’s as it was the easiest! Stomme big thanks for the idea of ol lists, I can see the semantic advantage of that and might add if I get a spare 20 mins today (Many more manuals to add ).
Thanks for the explanation on compatability mode in IE 8. From now on I’ll make sure the compatability mode is set to IE 7 so I get an accurate picture.
Thanks for the explanation on compatability mode in IE 8. From now on I’ll make sure the compatability mode is set to IE 7 so I get an accurate picture.
The compat mode thing always confuzled me.
My recommendation: if you have a copy of IE7, use that to look at IE7 and leave IE8 as “normal” (the number of IE8 users is growing and they’ll mostly not have compat mode on!).
If you DON’T have your own copy of IE7, still keep IE8 in regular normal mode, and switch into compat mode to take a look at what it might be doing in IE7 (I hear it’s not exact, so even if it looks ok in compat mode, a real IE7 might still show something wrong).
I couldn’t see the screenshot very well, I thought letters were being cut off/covered up.
Instead, you have floats, but without stated widths (on the li’s). And overflow: hidden on someone. So, the #2 item is floated, but isn’t taking up ALL the room, meaning there was still some room for the #3 float to try to squeeze in there… basically, #3 is snagging on the bottom of #2 instead of just starting on a whole new line. Then there’s the side padding inside that li, and the letters are gettting cut off on the right from the overflow: hidden.
You’ll see this if you add the ugly colours : )
If you like them floated for whatever reason, you can keep that, but set a width on those li’s then. Make them something less than 100% since you have sidepadding.
If you remove the float as Ryan suggests and let them go back to being blocks, they’ll be 100% wide by default and can’t even try to stack up along each other.
So, either one should fix it, and still look ok in all browsers. IE <8 has a float-ride-up bug that I get when I have floated definition lists.
BTW, your lists have numbers as they are ordered lists (it matters what order the list items come in). Why not make those OL’s and just remove the list-style so that the element you’re using has better semantic meaning? You’d keep your current numbering in the content, if you want. IE has plenty of list-item bugs anyway : )
opened the page on a collegues laptop in IE 7 and list is jinxed as in screen shot again. I looked to switch of compatability mode in IE 7 but no luck.
Do I need an IE 7 fix or do i just need to switch off compatability mode in IE 7?
Other way around: IE8 is doing what the better browsers do. Putting IE8 in compat mode means “Act like you’re stupid like Ie6 and 7” which it did.
So it’s not that there’s a compat mode for IE7… you were just seeing “IE7” in IE8.
So likely IE6 also looks bad right now, and since IE6 and 7 have Haslayout (which causes a lot of bugs and which IE8 no longer has), it’s very likely a Haslayout issue.
I need to stop looking at this forum on other people’s computers. I don’t have access to Windows right now…
*edit I did take a quick look in the Linux browsers I have, and you do already have Haslayout triggered on the ul and the li’s (they’re floated)… though strangly you have list-style on the div???
I should be able to take a look at work tomorrow… : ( in the meantime, give the div, the ul’s and the li’s all different ugly background colours to help see who is where.
opened the page on a collegues laptop in IE 7 and list is jinxed as in screen shot again. I looked to switch of compatability mode in IE 7 but no luck.
Do I need an IE 7 fix or do i just need to switch off compatability mode in IE 7?
