The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> IE line spaces are too wide
Mozgus
post Sep 19 2006, 01:08 PM
Post #1





Group: Members
Posts: 6
Joined: 19-September 06
Member No.: 166



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 02:16 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I think the page looks close to identical in IE and FF. Not sure about what you mean. huh.gif

You can control the margin of paragraphs with CSS. Same with list items. The image isn't positioned at the bottom in FF either. Just increase the text size in your browser to see it's not.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 02:20 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Mozgus @ Sep 19 2006, 08:08 PM) *

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.

http://www.westciv.com/style_master/house/..._oil/not_paper/ smile.gif

QUOTE

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

It isn't allowed in (X)HTML Strict. Use CSS instread.
http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mozgus
post Sep 19 2006, 02:51 PM
Post #4





Group: Members
Posts: 6
Joined: 19-September 06
Member No.: 166



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 19 2006, 03:01 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Mozgus @ Sep 19 2006, 08:08 PM) *

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.

QUOTE
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.

QUOTE
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?

QUOTE
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.

QUOTE
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.

QUOTE
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 03:02 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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? happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 03:59 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.

QUOTE
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mozgus
post Sep 19 2006, 04:00 PM
Post #8





Group: Members
Posts: 6
Joined: 19-September 06
Member No.: 166



QUOTE
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.

QUOTE
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.

QUOTE
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?

QUOTE
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. wacko.gif

This post has been edited by Mozgus: Sep 19 2006, 04:25 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 19 2006, 04:42 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Mozgus @ Sep 19 2006, 11:00 PM) *

QUOTE
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.

QUOTE
QUOTE

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).

QUOTE
QUOTE

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 19 2006, 04:50 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Mozgus @ Sep 19 2006, 11:00 PM) *

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


The image there is not aligned in the vertical middle, in fact the image is at the same height as the topmost text line. If you'd change font-size it would become more obvious.

QUOTE
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. wacko.gif


Not at all, but it takes time to learn.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mozgus
post Sep 19 2006, 04:58 PM
Post #11





Group: Members
Posts: 6
Joined: 19-September 06
Member No.: 166



QUOTE
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).

That didn't work either. Feel free to look at the code on the server. I really thought that made sense, but I guess not.


QUOTE
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


Why does this make Transitional sound so bad then?

http://htmldog.com/guides/htmladvanced/declarations/

That's why I chose to use Strict. It told me to. I don't use Netscape, and I don't want to "be detrimental to the efficiency and possibly accessibility" of my site.


QUOTE
The image there is not aligned in the vertical middle, in fact the image is at the same height as the topmost text line. If you'd change font-size it would become more obvious.

Uh huh, so why would I change font size? You're missing the entire point.

This post has been edited by Mozgus: Sep 19 2006, 05:00 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 19 2006, 05:36 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Mozgus @ Sep 19 2006, 11:58 PM) *

QUOTE
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).

That didn't work either. Feel free to look at the code on the server. I really thought that made sense, but I guess not.


You use

CODE
background-image: url(other/comp.jpg) no-repeat center right;


but in this case you should only use the "background" short-hand:

CODE
background: url(other/comp.jpg) no-repeat center right;


See http://www.w3.org/TR/CSS21/colors.html#propdef-background

QUOTE

Why does this make Transitional sound so bad then?

http://htmldog.com/guides/htmladvanced/declarations/


You don't have to use the old presentational elements and attributes just because you chose a Transitional Doctype. In fact you can write Strict HTML and still use a Transitional Doctype (but not the opposite). There's nothing wrong with Transitional in itself, it's just allows more things. And it has nothing to do with Netscape fetishes, like http://htmldog.com/guides/htmladvanced/declarations/ claims. The site mixes up old fashioned presentational markup with the Transitional Doctypes that permit (but doesn't require) it.

But I digress, regardless of what you use the image will look the same in your browser.

QUOTE

QUOTE
The image there is not aligned in the vertical middle, in fact the image is at the same height as the topmost text line. If you'd change font-size it would become more obvious.

Uh huh, so why would I change font size? You're missing the entire point.


The user can change font size, different browsers may use different fonts, render the same font in different sizes, etc.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 05:46 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE
You're missing the entire point.

Or could it be that you are? I don't think you are reading much of what we are saying or referring to either. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mozgus
post Sep 19 2006, 05:48 PM
Post #14





Group: Members
Posts: 6
Joined: 19-September 06
Member No.: 166



Got the image right. With the above line from Christian J, it worked. But also I unhooked it from the ul element. Instead I just wrapped the everything between those two dividers, in a div id "comp". Now the image is perfectly vertically centered. And now I have a good idea of how to make a class id to do a similar thing, once I finally get around to remaking these pages:

http://www.stevemv.com/newmv.html
http://www.stevemv.com/oldmv.html
http://www.stevemv.com/ov.html

Thanks for the help, though it could have come a lot quicker, with a lot less side-tracking and nonsense solutions.

This post has been edited by Mozgus: Sep 19 2006, 05:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 06:11 PM
Post #15


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Nonsense solutions? I gave you the complete working code above. AFAIK you haven't even tried it. While I'm sure Christian's solution works, I think the image is content so it shouldn't be a background, but that's up to you. I also told you about the paragraph margins in my first post. If you didn't understand you could have asked. There is no way for us to know how much or little knowledge of the topic a poster has. It would be ridiculous to spell everything out in detail in the first answer. You use XHTML and CSS, I assumed you knew what a margin is.

You've got two solutions and references to further reading, all in couple of hours from posting your original post, and you complain that it wasn't quick enough. huh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mozgus
post Sep 19 2006, 06:35 PM
Post #16





Group: Members
Posts: 6
Joined: 19-September 06
Member No.: 166



I said thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 10:34 AM