Forum Moderators: open

Message Too Old, No Replies

Screwed up spacing in IE

         

jandrews

8:31 pm on Nov 5, 2006 (gmt 0)

10+ Year Member



Yet again, Internet Explorer is causing problems for me. (Why is it that IE always causes the most problems for web designers?) I have placed 2 text links inside a sidebar.

Here's what I've got...

<br/><br/><strong><a href="http://domain.com/yadayada" target="_blank">Achieve Your Ideal ASDFJK</a></strong>

<br/><br/><strong><a href="http://domain.com/folder" target="_blank">How to ASDFJK LMNOP</a></strong>

Firefox displays everything correctly. IE, however, shows one extra line spacing between the 2 text links. If I shorten the first text link to read "Achieve Your Ideal" instead of "Achieve Your Ideal ASDFJK" then IE displays the Sidebar exactly the same as Firefox. The extra line break disappears when the text is shortened.

It wouldn't be a problem if IE would simply put the last word "ASDFJK" on the next line. Instead, it adds an extra line break and screws up the sidebar spacing. I have been told that IE adds extra padding to containers, so I'm guessing this is the root of my problem. (I can send you the URL, if necessary.)

How do I correct this?

g1smd

9:11 pm on Nov 5, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Rather than trying to space things out with line breaks, put each link inside paragraph tags.

Use CSS to specify the margin sizes on those paragraphs. Use the same class name on both.

jandrews

1:03 am on Nov 6, 2006 (gmt 0)

10+ Year Member



Thanks. Simply replacing the <br/> tags with <p> tags caused IE to display correct spacing!

Fortunately, I didn't have to use CSS to specify margin sizes.

Yay!

g1smd

1:27 am on Nov 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I really hope that you didn't simply put <p><p> in your code. I am hoping I misunderstood what you meant there. I really would hope that you put a <p> before each link, and a </p> after each link.

.

Now go through your HTML code and make sure that every piece of content is boxed up inside a block-level HTML element of some sort: those are headings, paragraphs, lists, tables and forms.

Don't have any "loose" code on the page. Make sure that it is all marked up in blocks, each block with an opening and a closing tag.