Clickable divs with bg/ col and link problem in ie

**Rob_H** · Sep 20, 2006 23:29

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

**Tyssen** · Sep 20, 2006 23:35

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.

**Rob_H** · Sep 20, 2006 23:54

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

**Tyssen** · Sep 21, 2006 00:07

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.

**Rob_H** · Sep 21, 2006 00:10

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

**Rob_H** · Sep 21, 2006 03:29

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!

**Tyssen** · Sep 21, 2006 05:11

Put the span inside the anchor, not the other way around.

**Rob_H** · Sep 21, 2006 05:34

Thanks, that did it. You're a gent!!

User Tag List

Thread: Clickable divs with bg/ col and link problem in ie

Thread Tools

Display

Clickable divs with bg/ col and link problem in ie

Bookmarks

Bookmarks

Posting Permissions