ul list problem between FF and IE7 [Archive]

Click to See Complete Forum and Search --> : ul list problem between FF and IE7

Limozine

01-23-2008, 07:45 PM

On the page http://www.mahloamerica.com/draft.htm, I have some nested list items on the right. They are nested so that the list curves around the image in the center. The vertical spacing between the list items looks fine in IE7 but is too much in FF. Suggestions?

drhowarddrfine

01-23-2008, 07:58 PM

As always, the problem is IE. You are using an incorrect doctype which puts it in quirks mode. Also, you have missing end tags and misplaced elements. Validate for that list of errors, then validate your css for that list.

WebJoel

01-24-2008, 02:04 PM

Error(s) and warnings aside, this part:<ul id="connav">
<li><a href="#">Textiles</a></li>
<ul><li><a href="#">Carpets</a></li>
<ul><li><a href="#">Nonwovens</a></li>
<ul><li><a href="#">Coating/Converting</a></li></ul> <li><a href="#">Extrusion</a></li></ul>
<li><a href="#">Calendering</a></li></ul>
<li><a href="#">Paper, Board, & Tissue</a></li>
</ul> could actually be done with ONE "<ul>" and position the "<li>"s. I have done similar things this way.
The margins & paddings vary because there isn't anything to re-set them to a default.
Usually, " * {margin:0; padding:0;} " and re-state the paddings & margins for whatever, including the one UL needed here. Currently, there are default differences in the margins, hence, the overlap.

Limozine

01-25-2008, 09:40 PM

Thanks for the advice. I've validated both the html and css, so that's out of the way. I removed the nested uls since they didn't validate, and changed to in-line margins instead. I tried resetting margins/paddings to zero for all li's in the stylesheet. Still, no luck. IE7 looks fine, but FF doesn't.

WebJoel

01-26-2008, 09:10 AM

First order of business, let's get your !doctype straightened out...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html401/loose.dtd"> The RED has to go. Nothing can exist *before* the valid !doctype with qualified URL. Besides, -it is written incorrectly. "". This is improperly 'commented out' and under some condition in Firefox, will be VISIBLE on the page if you click-hold-&-drag the pointer-tool over the page. Harmless, but it causes a virtual invisible 'line-height' that can mess-up your layout if you require the 20-px discrepancy this creates..
---
Second, the HTML should be "lowercase" to be valid. <body bgcolor="ffffff" text="000000" link="000000" vlink="000000" alink="000000" style="margin-left:0px; margin-top:0px;"> These would be more effectively stated in CSS (either inline and in "<STYLE></STYLE>", or externally), but without the "#" in front of them, -they aren't going to work in 'compliant' browsers. They only 'appear to work' because "white background" and "black foreground" are probably everybody's default colors. You could just not state any of this at all and have exactly the same effect (although, better to state them).
"#000000" is good. "000000" is bad. :)
---
And this..: #connav {width:300px;/*this width required to prevent right-hand clip of longest "li" */}
#connav li, #connav li a {height:40px; margin:0; padding:0; padding-top:15px;} ..solves the problem with the navigation list-curve: works the same now for IE and for Fx. :)

Enjoy!

Limozine

01-26-2008, 08:51 PM

Again, many thanks.

It's real close now, the only issue I'm really puzzled about is why the list items don't indent in ie7 as specified in the inline style. As expected, FF is working. For example, the middle button should be indented 135 pixels. When I measure FF is right on. But in IE it's only about 80 pixels AND it isn't in line with the other buttons. :mad: More of a nuisance than anything, but I'd love to know why, if someone knows.

WebJoel

01-26-2008, 09:15 PM

I don't know what you mean or intend by this 'indent 135px' and maybe that is part of the problem. A specified width, margin:0 auto to center it, and margins on the "<li>"s-proper, -and this thing can be solved. 'Indenting' it is ...strange. :confused: You might want to indent text (like in a "<p>"), but a "<ul>"? -I'm not following what effect this is supposed to impart.

If you want the center button to have a wider 'left-right' spacing, create a special class for it and change it's padding. Maybe like "<li class="wider">"
with li.wider {margin:0 15px 0 15px;} and that would 'space out' the center button, if that is your intention.
The width of the "<ul>" might have to be increased slightly as a result. -Just a minor tweakage really..

All this would be fairly simple if I understood your intended layout.. :confused: (sorry, -I review so many layouts every day I cannot intertwine my perception of 'correct' with that of every designer :o ).

Limozine

01-26-2008, 09:28 PM

By "indenting", I mean I would like for the second, third, fourth, fifth, and sixth buttons to form a half-circle around the image. The first and seventh buttons should be aligned to the left edge of the navigation bar. Maybe I'm not going about the right way - perhaps there's a more correct and efficient way to get the desired effect. It looks ok as is, but I just don't understand why I can't get the buttons to gradually form the semicircle in an even manner in ie7. When I view the page in ie7 the fourth (middle) button is clearly not positioned 135px from the left edge of the navigation bar (which I would think would be a margin position of 0px). Furthermore, it isn't even in line with buttons two and three, which are set to have left margins of 45px and 90px, respectively. Given those margins, I should be able to draw a straight line from the left edge of button one and touch the left edges of buttons two, three, and four, since all three margins are multiples of 45px, but in IE7 that's not the case. In FF, however, the middle button IS 135px to the right of buttons one and seven, as I would expect, and it is also aligned evenly with buttons two and three.

WebJoel

01-27-2008, 09:06 AM

Your thread's title includes 'problem between Fx and IE' (btw, the people at Mozilla prefer that "Firefox" be abbreviated as "Fx", not "FF" which I think in used by an Adobe product), -and things like this exist in your code:<style type="text/css">

</style> Browsers probably correctly 'guess' that you infer to use "px", but other possible values include "em", "ex", "in", "cm", "pt" and "pc", -and possibly a few more.
You should incorporate implicit specificity in every declaration, in every selector and in every value you state lest some default-normal inheritance 'assumes' "16" to be something other than the intended-desired "px"...

Anyway, -I'll snag your page again and see if I can get this figured out for you. It is not too complex and I have done 'curved-li "UL"s' before. ...

WebJoel

01-27-2008, 10:56 AM

I got alot of the widths and heights straightened out- see screengrab image. Borders added to display actual boundries of elements. There were alot of 'overlapped' boundries here... This rendered the 'hotspots' of the "<a>" to not be the same. That is fixed now though..

The problem that I am having now is one of placement of the "UL" in "#content". It isn't the same in IE and Fx. I've been trying absolute-positioning inside of the rleative-positioned "#content", and that is different too.. This seems to be the root cause of your problems with marginings. I haven't found the culprit yet, -but it isn't due to the current state of the UL..

Limozine

01-29-2008, 09:14 AM

WebJoel, thanks for all of your help thus far. You've been a tremendous source of information.