Img Is Dissappearing in IE - Guillotine bug???

[Nikolaos Giannopoulos]

I have the following page:

http://solmar.ca/temp6/index.html

On IE5 and IE6 win the "solmar" logo dissappears when the window is made
smaller horizontally.

Any idea how to fix this problem?

I have found many suggestions such as wrapping the floated div in
another div, setting a div to 100%, etc... but nothing seems to work.

What did work was when I used absolute positioning instead of float for
the software box *but* that causeed other problems (right column
colliding into the box when window was made smaller horizontally).

Any help is appreciated?

The page is fin in Moz 1.3 and Opera 6.05.

--Nikolaos

[Nikolaos Giannopoulos]

Nikolaos Giannopoulos wrote:

I have the following page:

http://solmar.ca/temp6/index.html

On IE5 and IE6 win the "solmar" logo dissappears when the window is made
smaller horizontally.

Any idea how to fix this problem?

I have found many suggestions such as wrapping the floated div in
another div, setting a div to 100%, etc... but nothing seems to work.

What did work was when I used absolute positioning instead of float for
the software box *but* that causeed other problems (right column
colliding into the box when window was made smaller horizontally).

Any help is appreciated?

The page is fine in Moz 1.3 and Opera 6.05.

I fixed the problem by floating the logo left and wrapping both the
float left and float right in a div.

Just in case anyone was interested in a work around.

--Nikolaos

[Nikolaos Giannopoulos]

Brian wrote:

http://solmar.ca/temp6/index.html

I'm afraid you did not fix the problem.

As there was no dialogue on this thread I simply provided the work
around that I utilized - verbally - out of courtesy.

I didn't update the test page as it didn't seem like anyone was
interested in discussing this problem. I do most of my development
locally and only post test pages (I update them when someone has made a
suggestion of course).

MSIE 5.0/Win2k the solmar logo still disappears.
That said, I just updated the test page with the work around and find
that the both the logo and the software box dissappear at browser window
(IE6/5 Win) width of about 700-720 pixels. However unlike before the
work around smaller/larger browser window widths still show both images.

Would you mind testing it with your browser again - Thanks.

:( You said you had already tried putting the logo
in a div and floating the div left?
I did but the test page was not updated....

I find that floating elments that are inline by default
screws things up, but changing the float to something
block level fixes it.

I agree - but I'm not sure how I could acheieve the effect I have now
without floating the software box to the right (see below for why
absolute positioning didn't work either).

To be clear (hopefully) - I had a logo image on the left side of the
page (non-float) and an software box image to the right that was
floating; when the horizontal width of the browser was reduced the logo
would simply dissappear. What I have done is apply float: left on the
logo - this causes the logo to get pushed down (instead of
dissappearing) when the browser window is constrained.

I originally had the right image absolute positioned - but the right
column would collapse onto the right image when the browser window was
reduced horizontally. After you pointed it out in another thread I
decided it was about time to fix it.

One thing I definately don't like with my current solution is that
because of the large top margin that the logo has (to push it down to
align its baseline with the software box) when the browser window is
reduced horizontally such that it gets displaced it gets displaced with
this large top margin and thus pushes the content down quite far.

The 2nd thing I don't like about the current solution is that this has
added to the complexity of the html in that there is more div wrapping
than was necessary before.

If you know of a better solution to the problem then I'd would be very,
very, interested in hearing it.

Thanks again.

--Nikolaos

[Brian]

Nikolaos Giannopoulos wrote:

Brian wrote:

http://solmar.ca/temp6/index.html
I'm afraid you did not fix the problem.

As there was no dialogue on this thread

I didn't have any ideas to offer you. :-/
I simply provided the work
around that I utilized - verbally - out of courtesy.
Ah. Well, that is good policy. I assumed that the test file was
updated when it wasn't.
That said, I just updated the test page with the work around and find
that the both the logo and the software box dissappear at browser window
(IE6/5 Win) width of about 700-720 pixels. However unlike before the
work around smaller/larger browser window widths still show both images.
Exactly what I see using MSIE 5.0/Win2k.
I'm not sure how I could acheieve the effect I have now
without floating the software box to the right
Hmm. You may have already tried this -- apologies if you have; I am
trying to keep all the issues straight. I know there has been a
couple of threads re: this site.

It looks to me like you have a div with the solmar logo and the
software box, just above div.menu. The images are inline by default.
So all the floats and extra divs are to get those two image files on
either side of that box. Is that correct? I'll assume I am.

I would not float the solmar image at all. I would not put it in a
separate div. Actually, there are markup issues here. I see h2 and
h3, but no h1. Solmar is in div#logo. Make that h1, at least on this
page. On other pages on your site, that is, not the home page,
div#logo is more logical, since other pages will have a h1 element
appropriate to that page.

In your html, div#show first, then h1#logo. In your css, try

h1 {
width: 230px ; /* width of image plus a margin */
}
div#show {
width: 259 px ; /* width of image */
float: right ;
}

Now, at narrow widths, the solmar logo will just stay where it is, and
the software box will slip below it if it becomes necessary.

The other solution is to reverse things. Change the text align to
right and float the h1. In your html, h1#logo first, then the
software box image. Remove div#show markup. In your css:

h1 {
width: 230px ; /* width of image plus a margin */
float: left ;
}
div#header {
text-align: right ;
}

Now, the software box image, which is inline content, is aligned
right. The h1 that comes before it is floated left. At narrow
widths, the logo slips below the software box.

FWIW, my philosophy is that there's nothing wrong if things don't look
identical in every browser, and I tend to let go of certain things if
they don't work just the way I imagined it. Along the same line, why
have you specified a small font size? I never specify any size for
body -- or p, or table -- only for headings and such. I leve it up to
the user. But that's me.
To be clear (hopefully) - I had a logo image on the left side of the
page (non-float) and an software box image to the right that was
floating;
Hmm, that's exactly what I suggested in my first solution, isn't it?
:-/
when the horizontal width of the browser was reduced the logo
would simply dissappear.
And this happens even when you place the floated image in a div and
float that div (and not the inline image)?
What I have done is apply float: left on the
logo - this causes the logo to get pushed down (instead of
dissappearing) when the browser window is constrained.
Too many floats can make things dicey in any browser, especially
MSIE/Win. In my experience, at least.
I originally had the right image absolute positioned - but the right
column would collapse onto the right image when the browser window was
reduced horizontally. After you pointed it out in another thread I
decided it was about time to fix it.
I think that's the right decision.
because of the large top margin that the logo has (to push it down to
align its baseline with the software box) when the browser window is
reduced horizontally such that it gets displaced it gets displaced with
this large top margin and thus pushes the content down quite far.
That is a disadvantage. I've never used position: relative and am
unclear about its use. Would that help in any way?
The 2nd thing I don't like about the current solution is that this has
added to the complexity of the html in that there is more div wrapping
than was necessary before.

Another disadvantage. My second solution simplifies things a bit.
You may also be able to reduce things futher by rethinking the markup
a bit. For example, why have <span class="tm">(tm)</span> when you
could use &trade; ? You have div#wrap, div#wrapit, div, div#left,
div#header, etc. That's some div soup there! It looks to me like the
top box is a div, within which is h1, an image, possibly a div wrapper
for that image, and the p elements. That's it. Now, in Mozilla
source view, the indenting is not lined up, so I'm not clear on the
nesting level. But do try to simplify the markup wherever possible.

--
Brian
follow the directions in my address to email me

[Brian]

Nikolaos Giannopoulos wrote:

Brian wrote:

Nikolaos Giannopoulos wrote:
You may have already tried this -- apologies if you have; I am
trying to keep all the issues straight. I know there has been a couple
of threads re: this site.
My apologies for that.

Not at all. They are separate issues, iirc, but their is some overlap.
they are there to try to get around an IE 5/6 Win guillotine bug
Did you make up the name for that bug? It's a good one! :)
Good suggestion. However, I am trying to keep the tag line underneath
the logo
oops, forgot that part.
are you suggesting something like this:

<h1>
<img src="img/solmar.gif">
software + engineering + java
</h1>
Yes.
with an explicit width on the h1 - to keep the tag line underneath the logo.
Sure, or define the image as block, but that might just complicate things.

h1 {
width: 230px ; /* width of image plus a margin */
}
div#show {
width: 259 px ; /* width of image */
float: right ;
}

Tried this before and once again just now and the floated software box
makes the logo dissappear - aka the guillotine bug.

Gads. I dunno. MSIE 5.x does some weird things, it's true. I'm
afraid I might be at a loss here, but I'll think it over a bit more.

The other solution is to reverse things.

This one works better but still shows the guillotine bug as the software
box dissappears when the window is constrained horizontally even though
space is made for it below the logo.

Really annoying.
With the div soup in my last online update the problem is minimized - I
just stripped most of the divs out as per your suggestions above and
pretty much nothing works. What I will do now is slowly add wrappers
and see what miminal div soup makes this thing work in IE.

I wish I had a better solution. I got nothing. I'd have to copy your
code and play with it on my end to get anywhere, but no time right now
to do that.

--
Brian
follow the directions in my address to email me

[kchayka]

Nikolaos Giannopoulos wrote:

I have the following page:

http://solmar.ca/temp6/index.html

On IE5 and IE6 win the "solmar" logo dissappears when the window is made
smaller horizontally.

Any idea how to fix this problem?

remove
body * {position: relative}

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

[Nikolaos Giannopoulos]

Brian wrote:

they are there to try to get around an IE 5/6 Win guillotine bug

Did you make up the name for that bug? It's a good one! :)

No. Someone else did and I agree the name is quite appropriate.

In addition the problems linked to this bug vary from jumping links to
images getting cut off when hovering to the dissappearance of (link)
images that float.

Most people mention that this bug appears in IE 6 win but the variants I
have seen appear in both IE 5 and 6 win - then again its not surprising
that many attribute it to IE6 as many have had their browsers upgraded
and lost IE5 support in the process.

http://www.google.com/search?hl=en&l...=Google+Search

If you haven't had to deal with this bug then just consider yourself
lucky ;-)

--Nikolaos