April 23, 200818 yr Has anybody has any problems using floated elements in IE6 in combination with links? I have a page with a list of products, including an image thumb, product title, and description. I have the image set to float left so it appears on the left side of the div and the title and description will appear alongside. It works fine in FF and IE7 but in IE6 it seems to clear the float and drop the text below the image as soon as I make the image a link. Live page is here: http://www.creativgroup.com/sandpit/emmers...ershutters.html div code is: <div class="rangeList"> <a href="commander.html"> <img src="../assets/doorImages/commanderThumb.gif" alt="Commander Thumb" class="thumb" /> </a> <a href="commander.html"> <h1>Commander</h1> </a> <p>A self-coiling puch up / pull down shutter, for openings up to 9 sq meters appox, in area. Manually operated by means of a pole and hook or by lifting handles. Electrical operation can also be offered.</p> <a href="commander.html"> <img src="../assets/coreElements/moreButton.gif" alt="Commander More" class="more" /> </a> </div> controlling css is: /* Itemised Range List */ .emmerson .rangeList { background: url(../assets/coreElements/dot.gif) bottom left repeat-x; width: 477px; height: 120px; margin: 25px 0 0 0; padding: 0 20px 0 0; } .emmerson #rangeList h1 { display: block; font-weight: bold; font-size: 14px; color: #666; padding: 0; margin: 0; } .emmerson #rangeList p { display: block; font-size: 12px; color: #666; padding: 0; margin: 0; } .emmerson #rangeList img.more { display: block; margin: 4px 0 0 0; } .emmerson #rangeList img.thumb { display: block; float: left; margin: 0 10px 0 0; } It is also doing the same with this page: http://www.creativgroup.com/sandpit/emmerson/ gav
April 23, 200818 yr Probably something to do with display: block. I can't check though on a mac. If not maybe you can just put the h1, the p and the more button in a div and float that left too?
April 23, 200818 yr Author tried the display:block; that was my first thought. Never thought about the other stuff in a div will have a go and see
April 23, 200818 yr Author Nahh no luck have created two divs and tried all forms of floating, and display ways, it works fine if there are no links but as soon as I add them it breaks!
April 23, 200818 yr Hi eekhorn, I have only had a quick skim through your html posted above and I noticed that you're placing your h1 tags inside your a tags. You can't have block elements nested inside inline elements. It should be <h1><a href="commander.html">Commander</a></h1> I don't suppose it will fix your problem though. I'll have a look at your example just as soon as I've put the kettle on
April 23, 200818 yr Right, the problem is that you have put a H1 (block) tag inside of an A (inline) tag, which isn't good practice and shouldn't be allowed if you had a DOCTYPE to validate with (naughty! — put one in). What this also means is that the H1 inside the link is pushing it to full width in IE6 (and all other browsers, but they don't "show" it). Your first task is to put the link inside the H1, instead of the other way around, then set the H1 to be inline, or float it and set a fixed width. I would strongly advise losing the H1 all together as you should only be using one per page (for the page title), instead try using a <strong>…</strong> tag, that way you won't need to be fiddling around with all this floating malarky. Let me know if you want a code example, or have any problems
April 23, 200818 yr Author oops not paying attention, nahh not the problem, it works fine as long as there is no a tag on the image as soon as I apply this is seems to clear the float somehow!
April 23, 200818 yr I promise you, this is a/the problem — you can't put block elements inside an inline element and expect it to play nicely. Plus you need to put a DOCTYPE in there.
April 23, 200818 yr Author I have removed the h1 altogether and it still does the same thing as before, it somehow seems to clear the float on the image as soon as I apply the A tag to the image! When I remove the A tag from the image it works fine. that copy is only part of the page not the full page of code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> thats the doctype
April 23, 200818 yr Author Looking at your css, you're not floating the <a>, just the image inside it. bingo we have a winner, that seems to have done the job, been staring at this for to long now, only just added the links today and it all went 'Jericho' never thought about the simple things like that, cheers ElenMan
April 24, 200818 yr Author Glad to see you have the problem sorted eekhoorn Cheers Rob, I hate staring at code sometimes when you are tired, you always seem to miss the simple things, I think it is better to just give up go to the pub and have a beer, and nine times out of ten when you return you look at it and go, Doh thats why straight away.
April 24, 200818 yr You're right, sometimes it's best to sleep on something and come back to it the next morning, 9 times out of 10 you'll wonder why you couldn't do it the night before!
Create an account or sign in to comment