SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Wales
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clickable divs with bg/ col and link problem in ie

    Hi all,

    I'm attempting to create a layout which includes several square divs floated left which include a link. Thery're styled with a bg colour which changes on hover. Now, have a look at the two attachments, particularly 'buttons_ie.gif' which is displaying incorrectly. 'buttons_ff.gif' is how it should look.

    Here's the css that I've used:

    Code:
     
    body {
    text-align: center;
    }
    #container {
    margin: 0 auto;
    width: 750px;
    text-align: left;
    } 
    ul#navigation {
    height:115px;
    list-style:none;
    }
    ul#navigation li a {
    font-size:20px;
    margin-right:2px;
    float:left;
    width:113px;
    height:113px;
    }
    li#one a {
    background-color:#CC0033;
    display:block;
    }
    li#one a:hover {
    background-color:#666;
    display:block;
    }
    li#two a {
    background-color:#cdef43;
    display:block;
    }
    li#two a:hover {
    background-color:#666;
    display:block;
    }
    And here's the HTML:

    Code:
     
    <body>
    <div id="container">
    <h1>The-Old-School</h1>
    <ul id="navigation">
    <li id="one"><a href="#">button1</a></li>
    <li id="two"><a href="#">button2</a></li>
    </ul>
    </div>
    </body>
    You can see that each button must be styled differently. Anyway, does anyone have any thoughts on why ie is behaving like this?

    Regards

    Rob
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attachments have to wait to get approved. Got a link instead?
    Also, you can save yourself three lines of code by adding display: block to ul#navigation li a instead of attaching it to each state of the different links.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Wales
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, didn't know about the approval on attachments (should have realised!!). Anyway here's a link to the test page:

    http://www.10eight-design.co.uk/testing/test.html

    I got the box alignment problem working but I'm still thinking about a couple of things:

    What would you do to align the button text to the lower right of the coloured boxes? Probably need a span around the anchor text?

    Is my code as streamlined as it could be? Like you pointed out I could already save three lines of code with your suggestion.

    Any help/advice appriciated.

    Rob

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand where you two images come from because when I open that page in FF & IE the buttons look the same, ie, side by side.
    As for streamlining, I've already made one suggestion. Another would be to use a class instead of IDs for the two links if they don't need to be unique.
    And for the positioning, yes, you could use a span. Make the list items position relative and then make the spans position: absolute; bottom: 0; left: 0.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Wales
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I mentioned I have sorted the alignment prob between ie and ff the images simply represented what I had before I fixed it. Sorry for the confusion!

    Thanks too for your suggestions for the other things I talked about. I've got to go out now and so I'll get onto that a bit later and post back here.

    Thanks

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Wales
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I've had a chance to look into this now and I'm getting strange results. Have a look at the url (above). I think it's something to do with the fact that the whole box is an anchor (a), so I'm not sure I can more the anchore text within it???

    Again, help appriciated!

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the span inside the anchor, not the other way around.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Wales
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that did it. You're a gent!!


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
  •