Layout overlapping/collapsed shows in IE7

hey folks,
i am in way or revamping a web app and the lower two blocks which says location and sharing. are connected to to upper box. whereas if u see if chorme and IE8, its fine. how can i fix that?

if u see the result search box (dark blue), its right corner the rounded sort of class name rightcorner. its height is affecting the search hearings like site ID, Address. (there is a white gap above it) caused by right corner div of rounded image element

Just set overflow:hidden on the element I gave (I think) 3 posts ago (too lazy to go back and see which post)

I don’t have time to debug this-pulling a double shift at work. Bye


Misunderstood…got everything sortedo ut?

after banging my head so much on wall. i finally have to use div and float and positioning property to fix this to [URL=“”]this the main problem was the second column as it started where the first ended. like not flowing parallel i hope my approach it right

So i might solved my own problem that was been told by paul and you for a long time :Pmy box is 1040 width with 12px border. that make 1040-24=1016. now i want two table one for picture and other for table information table.lets say i want my table for picture to be 320px wide and every table will have propety of 10px. having said that when i give 320px width to table a table. i have to add 20px of margin (of course not add them physical) which leaves me with 676 out of 1016. now i will subtract more 20px as part of table element propety which states that margin:10px. which leave me with 656. and that is perfect to fit in content. isn’t that what box model is? correct me if i am wrong about box model or at least if i am wrong about my layout and maths

Well your box you say is 1040px with 12px borders. That actually gets added on the width

So 1040+24=1064

Everything else is right :slight_smile:

ok, thanks. but in post # 46. the problem is the same of widths? as u can see they are not parallel

Actually don’t use overflow:hidden. Lets get to this.

On .upload and .Gal you set widths/margins which equal 1040px. Correct right? But then on .upload you set an extra 2px total in borders. Which is too much. Lower the width


You really need to watch your math. I’m going through the code to have it so you don’t need overflow:hidden but there is just too much to fix (almost every element needs me to count up the total width and see if it’s too much/see for double float margin bugs)

Be more careful with your coding! :slight_smile:
PS-That’s all double float margin bug fixes (fulll code fix there)

Hi, for one thing, .upload is falling to the double float margin bug (right floated element with a right margin) so fix that up :).

Since you set a pixel width on the column, you can easily fix this by just restricting hte width on outer to the value set :wink:


i have a problem. in IE 6 when i see this page. it break box. from normal flow. what’s wrong with it?

Mind showing us where you read that faux column technique? Most likely you misunderstood the technique :slight_smile:

Use Pauls overlay technique (that’s the easiest) or use a repeating image on a parent (to simulate the look as well)

Use either or, there’s no “quick” way to get faux columns (well faux columns are easy to begin with, but not in the way you want, I think :))

I’m sorry you are very hard to understand :(.

From what I’m understanding, the header “Search” isn’t connecting to the box under it. That’s how I’m understanding it.

However, upon checking IE6/7/FF, I can’t see anything like that happening. It would be best to upload a screenshot (post a direct link there so I can get to it faster) and highlight where (also note which browser)

Sorry :slight_smile:

lol indeed its horrible :D: i so wanted to fix this i figured out my mistake later. that i was using with width of div that is letting element on float side less than what is total (i m so bad at maths :P) however that is old version. i fixed in the new though that’s not uploaded. btw i do have a problem [URL=“”]here, the right corner element’s height of the search box do not let the heading sit just next to where it should be (connected to border) how can i fixed it?

ok here is a question. my border of content is 12px with total of 1040 so if i wanna make a inner table. i would subtract 12 from left and 12 from right to get the right inside table box. i will look into in more.
on a sidenote. i m having trouble with this page , the second column should float next to first column instead its floating chorme ir look fine but in FF it is as i described.:frowning:

i didn’t understand. why weren’t my tables weren’t flowing in normal i wanted

[ot]I personally don’t offer help via PM (just today I’ve gotten at least 4 pm’s, though granted one of them was a link to a site because he didn’t want it out in the open for everyone to see (was part of a thread)).

It just gets too annoying to be frank :(. I don’t mind helping in threads though[/ot]

Ryan, i know lot of miscalculations are there. confusions too. i admit

well for me applause goes to both of you. i wish u guys can teach me via pm :stuck_out_tongue:

No no. I’m the ninja. Me. Only me. :eyebrow:

Glad everythings sorted :slight_smile:

If you believe you are getting faux columns then by all means stick with it :). You shouldn’t set heights though (that’s not really faux) because then if one table outgrows another, then you are SOL :slight_smile:

A very horrible way of using tables to get faux columns is have all the content within a <td> (a table cell) and just place all the column data / stuff into each <td> (one <td> per column)

THat’s a horrible way though and you shouldn’t even be using tables unless you have tabular data.

IMO just use Pauls link :). Or overlay a graphic on a parent (repeat-y) to give the appearence :slight_smile: