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

[Christian J]

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

I think it does already. You can never expect identical rendering between different browsers.

In IE, there is a much thicker space between every line of text,

The line-height appears to be the same in IE6 and Firefox. Or do you mean the margin/padding on the P elements? These are not defined in http://stevemv.mightorindustries.net/web.css so maybe the browsers' default values create a difference.

as well as the dividers.

Again it's probably the unspecified P margin/padding. But I don't see the point in using <div class="divider"></div> between paragraphs in the first place, why not apply the CSS border on the P elements instead?

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.

When an element is floated, other elements will flow around it beginning at the top. Furthermore the exact height of the list depends on the font-size, making vertical positioning unreliable. You might use the image as a background to the list, at least as long as the list is higher than the image.

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.

CSS is useful, XHTML is not. My advice is to stick to HTML4/strict.

Because when I just gave the IMG the align="right" attribute before, it positioned fine, but apparently thats an illegal attribute now :-\

Can't see how the ALIGN atribute would make any difference. FWIW you can still use it with a transitional Doctype/HTML version.

[Mozgus]

The line-height appears to be the same in IE6 and Firefox. Or do you mean the margin/padding on the P elements? These are not defined in http://stevemv.mightorindustries.net/web.css so maybe the browsers' default values create a difference.

Bingo. That worked.

Again it's probably the unspecified P margin/padding. But I don't see the point in using <div class="divider"></div> between paragraphs in the first place, why not apply the CSS border on the P elements instead?

Eh, ya lost me. I'm learning this stuff as best I can, and I sometimes have to get creative to find the results I want. I wanted a 2 pixel wide, scalable divider, and this works. I do not want a border inbetween every paragraph on my site. That would be insane.

When an element is floated, other elements will flow around it beginning at the top. Furthermore the exact height of the list depends on the font-size, making vertical positioning unreliable. You might use the image as a background to the list, at least as long as the list is higher than the image.

Ugh, ya lost me again. Can you just paste the code you are refering to?

CSS is useful, XHTML is not. My advice is to stick to HTML4/strict. Can't see how the ALIGN atribute would make any difference. FWIW you can still use it with a transitional Doctype/HTML version.

I really have no idea what you said. All I know is I have been following the guides here:

http://htmldog.com/

Pandy, I was able to follow you until you linked off to other sites. I cant understand what they are talking about. The code you gave me kinda works, but in IE the image doesn't even show. Now this is just silly. We're typing novels here, when in regular HTML, all I had to do was type align="right" and the image was PERFECT. Look at it in my old layout. The image was fine:

http://www.stevemv.com/about.html

But CSS requires you to type up the meaning of life, just to do the same? This is a terrible system. I'm going to have a 50KB CSS file, just to get my 30+ thumbnails properly positioned, in my other pages. Great.

This post has been edited by Mozgus: Sep 19 2006, 04:25 PM

[Christian J]

Again it's probably the unspecified P margin/padding. But I don't see the point in using <div class="divider"></div> between paragraphs in the first place, why not apply the CSS border on the P elements instead?

Eh, ya lost me. I'm learning this stuff as best I can, and I sometimes have to get creative to find the results I want. I wanted a 2 pixel wide, scalable divider, and this works. I do not want a border inbetween every paragraph on my site. That would be insane.

You could give a class name to P elements where you want say top borders. Or you could give borders to all P elements inside a particular parent element.

You might use the image as a background to the list, at least as long as the list is higher than the image.

Ugh, ya lost me again. Can you just paste the code you are refering to?

Something like

CODE

ul {
padding-right: 400px;
background-image: url(other/comp.jpg) no-repeat center right;
}

(you probably want to give the UL a class name).

CSS is useful, XHTML is not. My advice is to stick to HTML4/strict. Can't see how the ALIGN atribute would make any difference. FWIW you can still use it with a transitional Doctype/HTML version.

I really have no idea what you said.

Before CSS came into use, various "presentational" HTML elements and attributes were used to decorate web pages. Such HTML elements and attributes can still be used, but are deprecated in favor of CSS. Both HTML4.01 and XHTML1.0 offer a "transitional" or "loose" version that allow the deprecated things, and a "strict" version that doesn't. If you don't know which one to use I recommend HTML4.01/transitional. Which (X)HTML version you use is declared with the Doctype: http://htmlhelp.com/faq/html/basics.html#doctype