Floated Grid Problems

Hi

Please let me know if I am posting what is required for answering my questions as I would like to make things as easy as possible for you.

Here is my first problem:-

I have been trying to move our sitesdesign across to being css based and in the large part have succeeded but I have run into difficulties when it comes to displaying our results.

I am trying to wrap 9 search results on a page using float but the results I am getting are different between mac IE 5.1, opera 5 Mac (not that bothered though) and Windows IE 6.0.

My problem is that on windows the float works as it should and wraps so that I have a grid of 9 images, on a mac the images wrap but jump to the bottom of my left floated navigation and then continue the grid and on opera they just don't wrap.

The URL is

URL

CSS file
URL

Can anybody shed any light on why this might happen as I am a little lost.

TIA

hanonman

The float is required to have a width defined.

cheers,

gary

Hi Gary,

I was under the impression that I had provided a width for the containing div although I didn't with the floated element (which I have done now...).

Here is what I have done now but it still has the same results, I have placed the following on my template:-

<!-- Top Half -->
<div style="width: 580px; height: 350px; text-align: left;">
<!-- Search Results -->
<div class="resultsFloater">
<a href="#"><img src="/images/imagename.jpg" width="150" height="150" border="0" alt="Product Title" /></a>
</div>
</div>
<!-- End -->

I put the following into my stylesheet so it is no longer inline:-

.resultsFloater {
float: left;
margin: 10px;
width: 170px;
}

Any advice is appreciated.

Alan

Opera and Moz handled everything OK, but IE had brain-farts on some width:100%; and AP elements. There were also several errors found throughout the html. I cleaned up the HTML and made the CSS more palatable to IE.

I would lose the tables in your banner area. There is no compelling reason to use them and they have no semantic meaning. Also, in the banner area, when using text as image, the alt text should mirror the image text. Consider wrapping the logo image in h1 tags. That is your main header.

Every page should have one, and only one h1 tag. Your headers for the navcol should be h2 or lower. Look at the page sans stylesheet and images. That will show you the apparent structure of the page. As it is, I don't think it's what you mean.

Compare your code to mine (both html and css) line by line. Some of the changes are subtle and easy to miss.

The files will not be left up indefinitely.

cheers,

gary

Hi Gary

This is what I did to get it all up and running, I notice you have made some similar changes also. I will be changing the top navigation area to run as pure css / xhtml, I just put it in there as a table for speed to give me a woking model to test the rest of the site. I do like your ideas about <h1>, I have been looking into the Fahrner Image Replacement technique but I read somewhere about using padding for text to nudge it out of the viewable area... I think I am going to maybe try that.

#leftNav {
width: 160px;
/* float: left; */
margin-right: 1px;
position: absolute;
top:73px; /*added, you might need to play with this*/
left:0; /*added*/
}
#leftNav li {
/*width: 100%; commented out*/
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
margin: 0px;
}


#leftNav li a {
display: block;
text-decoration: none;
color: #000000;
padding: 2px 0px 2px 10px;
/*width: 100%; commented out*/
}

Thanks for your help, I really appreciate it

You have helped me overcome a really confusing issue. As you can see I am getting my head around CSS but I still don't understand all the rules to their full extent so and advice whilst troubleshooting always goes a long way.

Cheers
Alan

Once you well and truly grok the cascade concept, and you get comfortable with the structural semantics of html, it will all come together. After that, it's just detail.
Nah. Not worth the effort for a simple banner image. If the image is wrapped in <h1></h1> tags, the image will be the semantic h1. If the link is broken or if graphics are not loaded by the user agent, the alt text will be displayed by whatever rules you declare for h1.

cheers,

gary