layout problem in IE5

[jdl]

Hello,

Had this problem before when placing frame around pics in browser IE5 only. Each pic is identical in dimension and the corresponding div reflects that but even adding vertical-align: bottom; the frame creates a gap at bottom.

Also , in IE5 my pic3 with a negative margin-top is not in alignment but is in other browsers.

here is the url (http://www.yabbit.net/listing.htm)

help appreciated.

Thanks in advance

[darkstyle]

sorry i dont have ie5

[simplistik]

Hmmm.... why use ie5?

[jdl]

So you don't see that problem on your browser?

[Ankou]

Your page also isn't centered in IE5.

IE can be picky and quirky (as we all know). First thing I always say ... make sure the code you're working with is valid. It's not always going to solve every problem you have, but it's the right place to start.

Just taking a small section of your code:


<div id="pic5"><img src="back.jpg" alt="propertypic">
</div>

<br/>

Your image tag and line break tag should both end " />".
Also with IE being picky it's always good to check how the browser will act if there's space after the image. See how your closing div tag is on the next line? Skip having that there and put the closing div right after the image tag. Some editors will do some funky stuff with a line break depending on how the file is being saved.

Put it like so:

<div id="pic5"><img src="back.jpg" alt="propertypic" /></div>
<br />

Note: The above code is not just for that one line, but for all the div-image-div lines you have problems with.


Oh and if you're wondering how to center the site in IE5 ...


body{
background-color:#FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0 auto; /* HERE */
padding: 0;
text-align: center; /* HERE */
background-image: url(grey.gif);
background-repeat: repeat-x;
}

Changed areas are marked with /* HERE */ in the code above.

margin: 0 auto; -- if I remember right is needed for IE5 Mac. You could leave it as margin: 0; and just fix the text-align: center; which would center the site in IE5 (for Windows). But hey, why not go that extra mile and make it work in a browser that's no longer supported?! :) Sorta kidding with that. I just can't remember if the margin: 0 auto; is needed for other browsers or not off the top of my head....

[itsalljazzy]

I took a look at your source code and it seems you have a zillion breaks before your disclaimer and the bottom of your site......You should have like 2 at the most at the end to give a little bit of space....but deleting those should take a huge part of that gap away... just a thought.... =)

[jdl]

Thanks alot for the replies.
I've changed the page layout now.
The other layout was no good.

[jdl]

ANKOU,


I've got it almost how I want it cross browser except for a problem with the
many <br/> just before the footer creating a huge gap in IE but necessary in Safari otherwise the footer bar strangely bleeds up and behind the main content.

I'll look into the quirks you were talking about before and see if that fixes it.

You seem to know about these oddities so I thought I better ask you in
particular.

Thanks again

[Ankou]

Skip using the line breaks just to add space, try using margins in your CSS. Or if worse comes to worse toss an empty div where you need the space and set it to have a specific height.

(The empty div method should not be your first course of action, but I'll mention as the "quick, but not proper" solution)

[jdl]

Thanks ,

I tried using a margin but that would throw out the page in IE and not safari
so equated to the same thing. I'm sure an empty div would do the same thing again.

[CriTiCeRz]

Nobody should use IE5...

[Ankou]

Thanks ,

I tried using a margin but that would throw out the page in IE and not safari
so equated to the same thing. I'm sure an empty div would do the same thing again.

Is the page you're working with and seeing the issues on the same one that the link in your post is to?

The reason I ask is because if it is... you need to watch your code. I want to say "make sure it's valid" but this time I'm just going to say, make sure it's well formed. Browsers are forgiving at times so even if the site doesn't validiate it may be well formed and the browser will display it ok. However when your missing closing tags, or using tags in improper places, you making more work on yourself.

Example:

<div id="text">
<h2><a href="example1.htm">return SUBURB</a>

<h1> Example Listing</h1></div>

There's no closing h2 tag.

Another example:

<ul>
<li><img src="front.jpg" class="floatleft" /><span>image description</span></li>
<p>
Stunning Poxlietner contemporary design. Enjoy the all year living comfort.<br/><br/>

No ending UL tag, which really places the paragrapah tag inside the list... no good. And watch those line break... need a space before the /.

BTW - I'm not saying all this to pick on you or give you a hard time or anything like that. And really I'm not even sure that's the same code that you may be working on.

But the reason I want to point out this kind of thing is that if you work with "bad code" and you attempt to fix things with CSS or adding more HTML to the mix you're just making more headaches for yourself. Why? Well if you change things with CSS and it looks right on your browser, it may not look right on another browser. Or if you fix the "bad HTML code" later, you may find that some of your CSS is off (margins/padding/etc).