Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Winnipeg, Manitoba, Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bulleted List Image Wrap Problem in Firefox

    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..._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. 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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cssJem,
    This moves the ul up in FF:
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Winnipeg, Manitoba, Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Winnipeg, Manitoba, Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..._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>
    Last edited by cssJem; 02-27-2007 at 02:14 AM. Reason: Post Updated Code

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    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:

      Code:
      * { 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?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Winnipeg, Manitoba, Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Image Problem

    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!

    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

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by cssJem View Post
    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.

    Quote Originally Posted by cssJem View Post
    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?
    Code:
    <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.

    Quote Originally Posted by cssJem View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •