SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images within a list not lining up

    Hi,

    I am trying to create a main image (orange) to float on the left (#homeimage) of my homepage and three to float to the right. The three righthand images will be image links to different sections of the site and have been coded using an unordered list.

    I get a wacky result in MSIE as it seems to break and bullets appearing and firefox/opera is a bit our on its alignment.

    Any mac issues?

    Location: http://www.eastdayspa.com/index-test.html

    Full test css: http://www.eastdayspa.com/styles/main-test.css


    Relevant CSS code :
    #homeimage {margin-top: 5px;
    width: 441px;
    height: 324px;
    float: left;}

    #rightimage {
    list-style-type: none;
    width: 207px;
    height: 324px;
    float: right;
    }

    #rightimage li {
    margin: 0;
    }

    #rightimage img {
    display: block;
    }


    Appreciate your comments for this newbie

  2. #2
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gave it a shot, didn't manage to get it working proper though, having a hard time familiarizing myself with your code. Plus I'm not the biggest expert on CSS around.

    Instead of floating your anchors you could just break before the end of the code to get rid of the white space inserted between a/li elements. The code would look ugly I guess but I haven't personally figured out how to successfully float the a or list elements without breaking flow.

    Code:
    <a href="#.htm">Link 1</a><a
     href="#.htm">Link 2</a><a
     href="#.htm">Link 3</a>
    Have you tried containing the images on the right in a div of their own and then float that?

    Might help, or it might not, wish you luck in any case.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The easiest way to sort this is to simply give ie what it needs.

    Code:
    ul#rightimage {
    margin:5px 0 0 0;
    padding:0;
    list-style-type: none;
    width: 207px;
    height: 324px;
    float: right;
    }
    #rightimage li {
     margin: 0;
     padding:0;
    }
    * html #rightimage li{height:108px;margin-bottom:-3px}
    #rightimage img {
    display:block;
    }
    #rightimage a {
     text-decoration:none;
    }
    Specifically the bottom margin is reduced to allow the images to butt together and a height to force layout.

    Alternatively put the images in the background of the anchors (or the lists) and set the size of the lists and anchors to match (use display:block for the anchors).

  4. #4
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ICO and Paul. I used your code and works well in IE6/FF/Opera. However still breaks in IE5+. any suggestions?

    Will this be okay on Safari/FF for our Mac users?

    Also noticed I don't get alt tags on Opera and firefox on this test page and on my other pages - do i need to do anything to my <img> code apart from Alt="sometext"?

    http://www.eastdayspa.co.nz/index-test.html

    Cheers!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE5.+ adds about 16px left margin to lists for the bullets and won't go away uness you use a negative margin.

    Code:
    * html #rightimage li{
    height:108px;
    margin-bottom:-3px;
    margin-left:-16px;/* for ie5.+ */
    ma\rgin-left:0;/* for ie6*/
    }

    Code:
    Will this be okay on Safari/FF for our Mac users?
    Every browser is different and the only certain way is to try it out and see. However if you have firefox and opera working ok and the code is pretty simple you might be lucky

    Also noticed I don't get alt tags on Opera and firefox on this test page and on my other pages - do i need to do anything to my <img> code apart from Alt="sometext"?
    alt (attributes not tags) are meant to be displayed when the image is missing (alternative text). It's not supposed to be a tooltip even though ie renders it so.

    Compliant browsers use the title attribute to display a tooltip and therefore you need both the title attribute and the alt attribute on the img tag. title attributes can be placed on other elements and not just images and will provide a tooltip for paragraphs etc.

  6. #6
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul will give it a try. Gee CSS layouts are a steep learning curve.

    Cheers JD


Bookmarks

Posting Permissions

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