Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Floats and images in IE
In IE the containers on the right relocate themselves to the bottom of the page, and the images that should show up in the left containers are decapitated. I’ve validated the code and css and it’s all fine.
Is the float too big? Is it the margin? And why are the images cut off?
Thanks in advance
Offline
Re: Floats and images in IE
Nice site.
I’m far to be the CSS master here… but… i will try to guess…
And why are the images cut off?
Maybe because of that margin-top: -85px;.
Is the float too big?
I would apply the fixed width only to side-a and side-b containers.
Then, try apply width:100%; to the inside containers (or even not to apply any defined width)… The inside containers (bookcharts, filmcharts, etc) should stretch to the 100%.
I would also float side-a to the left and side-b to the right (really don’t know if it makes any difference)
And now… “if I was you…”
I would try to achieve exactly the same layout by doing the following..
- I would rearrange the html code to have each HTML snippet for the right charts following each corresponding left block. I think that rearrangement
- Then, I will float the left block to the left and the right chart to the right.
- I would repeat that for each left block (film, book, music, etc) and each right block…
- I would apply a clear: both (or clear: left; or clear:right) to each left block so the previous floating elements are cleared.
Why? I think that at a HTML-level (or maybe IA), it makes more sense to have the right chart following the corresponding left block…
You are trying to achieve that in a visual way, but your code is arranged in other way…
Maybe, you can get that nice “visual-related-rows layout” by rearranging your code as I said above.
Also, an advantage is that you can make those “visual-rows” (left and right blocks) to have a more flexible height.
I’m seeing that you are working with fixed height.
Following the above, you could have a flexible-height “row”.
well, that’s all, sorry if i didn’t answer your questions :)
edit: <small>excuse my english</small>
Last edited by maniqui (2006-06-27 04:04:50)
Offline
Re: Floats and images in IE
Add this just to be more clear:
I will arrange the code in this way:
div id=“film”
#filmblock (float left)
#filmchart (float right)
/div
div id=“music”
#musicblock (float left)
#musicchart (float right)
/div
div id=“book”
#bookblock (float left)
#bookchart (float right)
/div
Etc…
Option B:
div id=“film”
#filmblock
#filmchart (float right)
/div
div id=“music”
#musicblock
#musicchart (float right)
/div
div id=“book”
#bookblock
#bookchart (float right)
/div
(or even, floating the blocks and no-floating the charts)
This way, the “non-floated” element can be used to set the height.
I will choose the heightest as the “non-floated” element.
That’s because if you float both elements (one to the L and one to the R), the wrapping div will have no-height at all.
(that’s what i think!)
Last edited by maniqui (2006-06-27 04:12:50)
Offline
Re: Floats and images in IE
thanks for pointing out the -85px margin – that was from some old code that some how crept in there, and once removed it restored the floats. I’ll take your other tips into consideration but this really a temporary design until my friend comes up with something a bit more professional.
thanks again
Offline
Pages: 1