IE line spaces are too wide Options

[Mozgus]

I'm hoping there is a way to make it so the following page will display roughly the same in both Firefox and IE:

http://stevemv.mightorindustries.net/history.html

In IE, there is a much thicker space between every line of text, as well as the dividers. This is also making it impossible to position the lone image near the bottom, to the right of the unordered list. If I use the exact padding, I can get the image vertically centered in Firefox, but it only makes it worse in IE.

I'm very new to XHTML and CSS. These little things are really frustrating me and making me wonder why I am even learning this. Because when I just gave the IMG the align="right" attribute before, it positioned fine, but apparently thats an illegal attribute now :-\

This post has been edited by Mozgus: Sep 19 2006, 01:09 PM

[Mozgus]

If you actually looked at my code, by hitting CTRL+U, you would have saved yourself from typing any of that.

I said that I CAN position the image properly in Firefox, by using padding-top: whatever px;. I did not say that I DID. The problem is, when I do, it only makes the image even more off center in IE.

I DID use CSS to float it to the right. Why would you even tell me to do it when I obviously did. Look at the code.

[pandy]

I did look at the code but put more attentions to what you said. I didn't track every selector in your CSS. Since, as I said, I don't understand what you mean I can't offer a solution for the image problem (that I don't see).

Meanwhile, did controlling the margins work out for you?

[pandy]

Since I don't want you to be upset, I took a closer look. You float a DIV containing the image, not the image itself. But float isn't the way to go here anyway.

I said that I CAN position the image properly in Firefox, by using padding-top: whatever px;. I did not say that I DID.

No, you can't do it like that. That would rely on text size, window width and so on, things you can't control.

As it is now, the image is in a DIV of its own. That DIV doesn't relate to the height of the UL in any way. To make it do that is the only way to do what you want without counting pixels on the screen.

Change this:

CODE

        <div class="floatright"><img src="other/comp.jpg" width="400" height="300" alt="My current system." /></div>
        <p><strong>The Computer:</strong> I'm just listing the basic specs here.</p>
        <ul>
            <li>Samsung 740B LCD Monitor</li>
            <li>Antec Super Lanboy case</li>
            <li>Antec TruePower 2.0 550w</li>
            <li>Asus A8N5X Socket 939</li>
            <li>Athlon 64 3700+</li>
            <li>Arctic Cooling Freezer 64 Pro</li>
            <li>eVGA Geforce 7600GT</li>
            <li>Zalman VF700 VGA Cooler</li>
            <li>Creative SoundBlaster Audigy 2 ZS</li>
            <li>1.5GB of Corsair DDR400 running in Dual Channel</li>
            <li>Two Western Digital 80GB 7200RPM S-ATA HDDs</li>
            <li>One Maxtor 60GB 7200RPM IDE HDD</li>
            <li>One Maxtor 80GB 7200RPM IDE External Backup Drive</li>
            <li>NEC Black IDE DVD±RW ND-3520AW</li>
            <li>NEC Black Floppy Drive FD1231H-302</li>
            <li>Logitech MX510 Red Optical Mouse</li>
            <li>Vintage Marantz Stereo Reciever</li>
            <li>Two Optimus 200watt Tower Speakers</li>
        </ul>

to this.

CODE

        <div class="floatright"><img src="other/comp.jpg" width="400" height="300" alt="My current system." />
        <p><strong>The Computer:</strong> I'm just listing the basic specs here.</p>
        <ul>
            <li>Samsung 740B LCD Monitor</li>
            <li>Antec Super Lanboy case</li>
            <li>Antec TruePower 2.0 550w</li>
            <li>Asus A8N5X Socket 939</li>
            <li>Athlon 64 3700+</li>
            <li>Arctic Cooling Freezer 64 Pro</li>
            <li>eVGA Geforce 7600GT</li>
            <li>Zalman VF700 VGA Cooler</li>
            <li>Creative SoundBlaster Audigy 2 ZS</li>
            <li>1.5GB of Corsair DDR400 running in Dual Channel</li>
            <li>Two Western Digital 80GB 7200RPM S-ATA HDDs</li>
            <li>One Maxtor 60GB 7200RPM IDE HDD</li>
            <li>One Maxtor 80GB 7200RPM IDE External Backup Drive</li>
            <li>NEC Black IDE DVD±RW ND-3520AW</li>
            <li>NEC Black Floppy Drive FD1231H-302</li>
            <li>Logitech MX510 Red Optical Mouse</li>
            <li>Vintage Marantz Stereo Reciever</li>
            <li>Two Optimus 200watt Tower Speakers</li>
        </ul>
       </div>

Then to the CSS. Remove the float from .floatright. At the same time notice why it isn't a good idea to give selectors names depending on the style you choose, because .floatright floats no more.

CODE

.floatright   {
/* Give it a border so you can see what you are doing */
border: 2px solid red;
/* pos rel so it can act as a containing block for the absolute positioning that is to come */
position: relative }

.floatright img  {
/* position the image 'outside' the bottom right corner */
position: absolute;
top: 100%; left: 100%;
/* Move it back inside by its own width and height plus a little extra so it doesn't look odd */
margin-left: -405px; margin-top: -305px }

.floatright ul   {
/* Padd the UL so the text goes free from the AP image (+ a little extra so it doesn't look jammed.). */
padding-right: 410px }

To make IE bahave you need to make .floatright "have layout".
http://msdn.microsoft.com/library/default....s/haslayout.asp
Use conditional comments or your favorite IE hack to serve the below to IE.
http://msdn.microsoft.com/library/default....comment_ovw.asp
http://centricle.com/ref/css/filters/
http://css-discuss.incutio.com/?page=CssHack

CODE

/* .floatright { height: 1% } */

Works in IE6, O9 and FF. May or may not need hacking for other/older browsers.