...

View Full Version : Bulleted List Image Wrap Problem in Firefox



cssJem
02-26-2007, 06:34 PM
Hello! The site I have been working on has a problem I just can't figure out.
I have floated left aligned images, and I want bulleted text beside them. Surprisingly it displays fine in IE, but when viewed in Firefox the list is pushed down below the image! I've been trying to debug this for a few days now, with no luck! I wonder if I'm missing something obvious?
Here's the page with the problem:

http://www.starlandtelescopes.com/QT/prod_c_arm_upper.htm

You may notice, the last part on the main products page has a bulleted list that is beside the thumbnail image. I wonder why its fine here, but on the parts pages, the list won't wrap?

I've been playing around with margins, but nothing seems to work. :confused: Help! Help! Please!!

Thanks,
Jeni

Relavent CSS:

#prod-box img.left {
padding-top: 0px;
padding-right: 15px;
margin: 0px;
border: 0px;
float: left;
}

img.left {
float: left;
position: relative;
padding-right: 10px;
padding-bottom: 10px;
}

ul {
float: left;
display: inline;
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul li {
margin: 0px 0px 5px 15px;
padding: 0px 0px 5px 15px;
list-style: none;
list-style-position: outside;
background: 0px 2px url(../images/qt_bullet.gif) no-repeat;
}

Relavent HTML:
<div id="prod-box">
<img src="images/product_chrome_upper.gif" alt="Upper Control Arm" width="300" height="254" class="left" />
<h3>Features:</h3>
<ul class="style5">
<li>Tubular 4130 Chrome Moly- TIG welded w/polished rod ends </li>
<li>Billet Aluminum cross shafts </li>
<li>Adjustable limiters </li>
<li>Improved positive caster geometry and reduced Bump Steer </li>
<li>Direct replacement bolt-on </li>
<li>Moog ball joints </li>
<li>Weigh only 4 1/2 lbs ea. </li>
<li>Powder coated or optional chrome (as shown) </li>
</ul>
<div class="clear">
<p><strong>For Body Styles:</strong> '78-'87 G Body ( Chevelle, Monte Carlo, Buick Regal, Grand Prix, Cutlass, El Camino, S - 10), '67 - '69 Camaro &amp; '68 - '74 Nova </p>
<p><em>Don't forget to complete the set! </em>Convert to a coil over shock front suspension with our <strong><a href="prod_c_arm_lower.htm">Tubular 4130 Chrome Moly</a></strong> <a href="prod_c_arm_lower.htm">Lower Control Arm!</a>
<a href="prod_c_arm_lower.htm"><img src="images/qt_more.gif" alt="More" width="68" height="14" border="0" class="right" /></a></p>

</div>
<h3 align="center" class="clear"><span class="style6">To Order:</span> <span class="style7">Call <strong>Toll Free (866) 683-7182</strong> <br />
Email</span> <a href="mailto:info@quartertech.com">info@quartertech.com</a> <span class="style7">today!</span></h3>
</div>

Thanks Again!
:)

Excavator
02-26-2007, 07:07 PM
Hello cssJem,
This moves the ul up in FF:
ul {
display: inline;
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Have you seen your page in IE7 yet?

Some things that could be fixed here. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.starlandtelescopes.com%2FQT%2Fprod_c_arm_upper.htm)

cssJem
02-26-2007, 07:25 PM
Thanks for the reply!
Hmm....yes, removing the float: left; from the ul seems to work for allowing the bulleted list to display beside the text....but now....in IE 6 the bullets have disappeared! I think they are hiding behind the graphic. The only way I have found to fix this problem is to float it left...It seems a trade off between problems. Is there any other fixes for this that won't mess up the layout?

Looks like I need to work on validating my code...not to bad though! But don't think fixing the validation will solve my alignment problem though....No, I haven't checked the page in IE 7 yet...will do!

So, if anyone knows how to fix the nasty little "bullets behind graphics" IE bug, without having to float the list...please let me know!

Thanks Again!
Jeni

Excavator
02-26-2007, 07:27 PM
ul {

display: inline;
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul li {
margin: 0px 0px 5px 15px;
padding: 0px 0px 5px 15px;
list-style: none;
list-style-position: outside;
background: 0px 2px url(images/qt_bullet.gif) no-repeat;
}

cssJem
02-27-2007, 02:50 AM
Well, alrighty then! I've got the site validated, once I changed my doc type...yes, I'm cheating, but at this point, I'm just trying to get it done...
I've also debugged again, and fixed a few things, namely the IE 7 nav bar. But still, can't seem to get the bulleted text to sit beside the image in FireFox. I'm stumped....If I defloat the list, it displayes fine in FireFox but in IE the bullets are aligned to the far left (outer) margin and are hidden by the image, while the text wraps around it nicely...Ahhh! Is there a fustrated smiley face anywhere? Sheesh....
I'd really appreciate any help on this...I'm at my wits end!
Overflowing gratitude in advance!
Jeni

Just to rehash, here's the site link:
http://www.starlandtelescopes.com/QT/prod_c_arm_upper.htm

Here's the updated CSS:

#prod-box ul {
float: left;
display: inline;
list-style: none;
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#prod-box ul li {
margin: 0px 0px 5px 15px;
padding: 0px 0px 5px 15px;
list-style-position: outside;
background: 0px 2px url(../images/qt_bullet.gif) no-repeat;
}


ul {
display: inline;
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style: none;

}
ul li {
margin: 0px 0px 5px 15px;
padding: 0px 0px 5px 15px;
list-style-position: outside;
background: 0px 2px url(../images/qt_bullet.gif) no-repeat;
}

Here's the HTML:
<div id="prod-box">
<img src="images/product_chrome_upper.gif" alt="Upper Control Arm" width="300" height="254" align="left" class="left" />
<h3>Features:</h3>
<ul class="style5">
<li>Tubular 4130 Chrome Moly- TIG welded w/polished rod ends </li>
<li>Billet Aluminum cross shafts </li>
<li>Adjustable limiters </li>
<li>Improved positive caster geometry and reduced Bump Steer </li>
<li>Direct replacement bolt-on </li>
<li>Moog ball joints </li>
<li>Weigh only 4 1/2 lbs ea. </li>
<li>Powder coated or optional chrome (as shown) </li>
</ul>
<div class="clear">
<p><strong>For Body Styles:</strong> '78-'87 G Body ( Chevelle, Monte Carlo, Buick Regal, Grand Prix, Cutlass, El Camino, S - 10), '67 - '69 Camaro &amp; '68 - '74 Nova </p>
<p><em>Don't forget to complete the set! </em>Convert to a coil over shock front suspension with our <a href="prod_c_arm_lower.htm">Tubular 4130 Chrome Moly Lower Control Arm!</a>
<a href="prod_c_arm_lower.htm"><img src="images/qt_more.gif" alt="More" width="68" height="14" border="0" class="right" /></a></p>

</div>

Arbitrator
02-27-2007, 05:01 AM
Your bullet images are assigned as background images of your list item elements, yet these same elements are obscured by the presence of another background on your anchor elements. You need to put the bullets as a background of something in the foreground. One idea might be to put span elements inside the anchor elements and assign a background to that.

Other issues for consideration:

Your document type declaration has a line-break inside the system identifier string. You can have a line-break between the public and system identifier strings, but not inside the strings (inside the quotation mark delimiters).
You’ve commented out your CSS. In proper XHTML, that CSS will literally be commented out. You should get rid of the comment markers, especially if you’re not certain why you’ve even put them there.
The style rule for the body element in your external style sheet contains an invalid declaration.
Your CSS is inefficient. For example, you’ve declared usage of the same fonts numerous times when declaring them once on the root element and relying on inheritance would save a lot of code; used list-style properties on elements without list-style bullets; positioned and floated elements simultaneously (can’t do both); and declared unordered list elements to have inline-level display while their children still have block display (blocks can’t be children of inlines). I’m also curious if the first rule, affecting the root element and not doing anything, is supposed to be the following:


* { margin: 0; padding: 0; }
The code could be a bit more semantic (used according to its meaning). For example, I see an address and copyright notice marked up as a paragraph (neither content is a paragraph); you could mark up the former with an address element and the latter with a div element. I’ve never been fond of such copyright notices though, especially when you don’t indicate what’s copyrighted. For example, does the site owner own the copyrights to the fonts you used?

cssJem
02-27-2007, 10:01 PM
Thanks for taking such a close look at my code! I really appreciate it!
Sorry to post such inefficient code. I should have cleaned it up before posting...color me embarrassed! So, I've taken out the redundancies and useless stuff. And hey! Its a lot less confusing now! Apologies for my "newbie"-ness! :o

I see what Arbitrator is saying about two background images, but I'm not sure how to get the bullets into something in the foreground, or where I should apply a span element. I've tried to encapsulate the image in a <p> marker, but that doesn't do anything. So, I was wondering if anyone could clarify this for me...how do you put something in a span element and assign a background to it? And which element should I span? The image or the list?

I agree to Arbitrators advice that my code should be more semantic, but I'm not sure how to assign an address element...as for creating a div for the copyright notice, of course that is a good idea, I'll likely be making a few divs to replace my embedded formatting. Should I make an address div?

As to the nature of the Copyright notice, I'm not sure what Arbitrator means. I'm not sure about the copyrights of fonts, I’m sure we have a right to use them, but we didn't buy the copyrights to them...we just bought the OS and MS Office. The content was done by QuarterTech and me, the pictures are theirs, edited by me. The code, layout and graphics are done by me...my first attempt at a CSS site, on behalf of QuarterTech, so I suppose they have the copyright for all that jazz. So I just blanketed everything under “Copyright 2007 QuarterTech”. If that is not correct, what should I place there?

To get back on topic, if anyone has any suggestions on what I should span and how to assign a background to that, or how to get a list into the foreground, I’d be much obliged.

Thank you,
Jeni

Arbitrator
02-27-2007, 10:31 PM
I see what Arbitrator is saying about two background images, but I'm not sure how to get the bullets into something in the foreground, or where I should apply a span element. I've tried to encapsulate the image in a <p> marker, but that doesn't do anything. So, I was wondering if anyone could clarify this for me...how do you put something in a span element and assign a background to it? And which element should I span? The image or the list?You can’t put blocks inside of inlines as I mentioned before; span is an inline-level (text) element while lists are block-level (box) elements, so you can’t insert the latter inside of the former. I’m not going to take the time to check for what exact code you need, but you would probably put the span inside of the anchor elements, size it so that it matches the size of the anchor elements, apply a background image representing your bullet to the span, and use the background-position property to adjust the location of said background image.


I agree to Arbitrators advice that my code should be more semantic, but I'm not sure how to assign an address element...as for creating a div for the copyright notice, of course that is a good idea, I'll likely be making a few divs to replace my embedded formatting. Should I make an address div?
<address></address>Yes, that’s a valid HTML 4.01 element. Semantically speaking, you can stick any kind of address in there: physical address, email address, calling address, IP address, etc.


As to the nature of the Copyright notice, I'm not sure what Arbitrator means. I'm not sure about the copyrights of fonts, I’m sure we have a right to use them, but we didn't buy the copyrights to them...we just bought the OS and MS Office. The content was done by QuarterTech and me, the pictures are theirs, edited by me. The code, layout and graphics are done by me...my first attempt at a CSS site, on behalf of QuarterTech, so I suppose they have the copyright for all that jazz. So I just blanketed everything under “Copyright 2007 QuarterTech”. If that is not correct, what should I place there?I’m not going to argue this, but the point was that such generic notices indicate that everything is copyrighted by said organization when it, in all likelihood, is not. An example of a better copyright notice is that at the bottom of this forum; it specifically mentions what is supposed to be copyrighted: the technology for this forum.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum