Strange IE div fallout ?

[Aaron]

I'm very new to CSS. Just started switching page from Table design to CSS .. and finally overcame some of the other issues (thanks to John for assisting with that a little). My latest issue is occurring in IE7. When I started the switchover I noticed some "fallout" (don't even know what to call it - please educate with proper terminology) of the text composing one div and repeating it into another div area (pusing 2nd div down). It's really strange as it fits fine. And it displays fine in first div. But it is for some reason partially repeated to a degree. When I click on the text in second div it knows the text belongs to first div (if I attempt to highlight "fallout" text then it actually highlights the correct 1st div text). Then I figured ignore and push forward. So the problem kind of followed down the page as I progressed. Looked my best to try and find an extra div or /div but couldn't find. Perhaps someone experienced in forum has seen this before. It could be a common mistake that I'm just too rookie to recognize. In the attched image see the problem occurring below first set of select boxes. Part of the last select box string is appearing in div below. Actually it seems to be pushing the below div down.

The weirdest part is if I refresh IE7 page it sometimes goes away, and when I load page it sometimes appears. Never seen this in FF, Opera, Safari for win. Only IE7.

(woops, photobucket is doing maintenance ... i'll upload image shortly when they are back online)

Please educate. Throw me some wisdom.

[Spiritvn]

Can you give me the source code or links? Sry but i can't solve the problem with just text and text.

Anyway, i found this for you:


6. Disappearing Text or Images in IE?

IE exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present and, if you highlight everything on screen or hit refresh, they'll often re-appear. Kind of strange, huh?

This problem mostly occurs on background images and on text positioned next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason, that'll usually fix the problem. If this doesn't work (and sometimes, it doesn't), assign a width to the offending element in the CSS -- that should fix the problem.

From: http://www.sitepoint.com/article/top-ten-css-tricks

[Aaron]

dang Photobucket is still down. Would you email me and I'll reply. Don't want to put link on forum =google. Hope you understand. ( susan -dot- nyu @ gmail -dot- com ) Thanks.

[Spiritvn]

dang Photobucket is still down. Would you email me and I'll reply. Don't want to put link on forum =google. Hope you understand. ( susan -dot- nyu @ gmail -dot- com ) Thanks.

So i don't know you or me need help ^^ j/k

q9.spirit@gmail.com or post to this entry

http://spirit.q9-gaming.com/en/?p=21

[Aaron]

Hey, thanks a lot for that info.

I modified to add some position:relative; and also might have found it? The row with instructions where I first started seeing strangness ... might have been the containing div width too short. That was 730px (which should have been enough). So I made it 758 which is more in line with rest of columns. It's possible that was cutting the row early (strange) and showing it correctly fitting and also pushed down below. Dont' ask me why ... but it's possible IE7 thing interpreting my crappie rookie CSS worse then other browsers.



.table_fullcol {
float: left;
position: relative;
height: 20px;
/* width: 730px; */ /* ?????????????? why only 730 ? try 758 */
width: 758; /* trying this */
float: left;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 0.8em;
/* background-color: yellow; */
}


*********************

Dang ... just happen again in middle of page belwo the "from departure" select boxes. Guess that's not the prob.

[Spiritvn]

Received, you should use:



width: 100%;
text-align: center;


instead, it will be more useful if you check with anyway resolution.

and then, i test with IE 6 and you have 1 more bug with margin in the


Driver Offer-to-Drive ? (Your help ...)

(See at attachment)

You just need to smaller the margin of the title_text and delete the width of title_text_help:



.title_text {
height: 40px;
width: 340px;
margin-left: 50px;
margin-top: 5px;
float: left;
position: relative;
background-color: white;
text-align: center;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 2em;
}

.title_text_help {
height: 20px;
margin-top: 15px;
float: left;
position: relative;
background-color: white;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
}

One more suggestion: You should include that two div in another div with width 100% and text-align:center to center it exactly.

Hf ^^

P.S: Any problem? take screen shot and attach to post, i will try to help

[Aaron]

Just made some changes and added the "title_centering_container" which should center both the title text and the help div. But it's not. Hmmm. Would you tell me why? The "red and yellow" divs with left margins, -- they should be centered in yellow but aren't.

[Aaron]

think that is centered now. Do you think it was causing my other problem?

[Aaron]

damn, this is starting to suck. The IE recognized new .title_centering_container (brown) which is supposed to contain the title text and title help. It seems OK in IE7 now, but FF is not recognizing that container. I shift refresh ... and webdeveloper CSS has the style but it's not being recognized by FF ?

[naiani]

I'm not sure if I understood you. FF doesn't recognize the text-align: center; for the container? If that's what is happening, use margin: 0 auto; on the container too.

[Spiritvn]

Just made some changes and added the "title_centering_container" which should center both the title text and the help div. But it's not. Hmmm. Would you tell me why? The "red and yellow" divs with left margins, -- they should be centered in yellow but aren't.

If you use text-align: center, you must replace the div by the <p> or something etc., the browser and html can't understand the DIV same as the TEXT.

Hope you understand it.

Anyway, i don't think you need two div the for two links, just take some link class and put into the a tag

[Aaron]

(spiritvn: don't think I understand that. Made changes and uploaded to page. Would yo look at page again and comment again. It sounds like you might be on to something I don't know about.)

well prior to your common sense margin: 0 auto; I was looking at three browsers (Opera, IE7, FF) which were displaying the same page in 3 different ways. After doing what you suggest (I was tired after programming all night) it made IE7 and Opera similar. The FF finally cooperated after giving the div a height property.

But still don't understand the original reason for this thread: IE7 having strange "overflow" repeat of text outside div?

See it in middle of image. Some of the text composing options of 3rd select, in "FROM" group, are being repeated below it just above the "TO" group. This type of thing was occurring at top as well when I started programming. So it's probably at top and I just progressively pushed the issue down page as programming continued. Strange how it's not doing that at the moment. It's IE7 intermittent type of bug. Any ideas anyone?

http://i155.photobucket.com/albums/s306/fredthefreeloader/misc/strangeCSSissue2.gif