Just one html answer can help prevent premature balding

April 1, 2011 2:12 PM

Please help me insert line breaks in a Wordpress site that will appear the same in IE and Firefox.

So I'm trying to fix the code on www [dot] chicagocodes [dot] com/seminars/building-green-chicago-2011/

You'll see (in Firefox) some headshots, followed by a modest line break, and then "Building Green Chicago Topics." In IE, there is a massive gulf of white between the images and the text. I've tried a combination of < br > and < p >tags; currently, there is one < p > with a 300 pixel padding on the bottom. The problem is, I can't get the html right on both browsers. The above text either nestles up to the right of the last headshot or drops down way too far.

Can you suggest some html that will make the images and text play nice across browsers? If you tell me do something in the CSS, I'm going to gladly file away your suggestion for a later date. I am mildly comfortable with html; I'm no where near savvy enough to start messing with the website's soul.

posted by Terminal Verbosity to computers & internet (5 answers total)

Get rid of your extra paragraph tags with the extra padding, and add style="clear:both;" on your Building Green Chicago Topics paragraph.

If you want more padding above that paragraph, include it in that paragraph's style attribute (e.g. margin-top: 20px) rather than by trying to use extra <br> tags to fake it.
posted by ook at 2:26 PM on April 1, 2011

First, remove the <p> tag with the padding-bottom: 300px;

Second, immediately after all your floated div elements (the headshots) add a <br style="clear: both;">
posted by axismundi at 2:29 PM on April 1, 2011

Consider yourselves both kissed fully on the lips.
posted by Terminal Verbosity at 2:41 PM on April 1, 2011

Mwah!

While we're here -- this isn't related to your problem, and it's kind of nitpicky, but you really shouldn't be using the strict XHTML doctype for files that are not XHTML.

And... less nitpicky: you're already using CSS -- so you may as well learn how to use it properly instead of throwing everything into inline style attributes. Instead of putting 'style="font-size: 150%; color: rgb(101, 130, 66); text-align: center;"' on all those paragraphs, use , and add this to your css:

p.header {font-size: 150%; color: rgb(101, 130, 66); text-align: center}

(Or better still, use h2 or h3 tags and style those to look how you want, instead of styling a paragraph to look like a header. Semantic blah blah blah.)

You can put your own css in a separate file and link to it in the page alongside the link to the existing style.css, if you're worried about breaking things in the site core. CSS is actually a lot easier than HTML, all things considered, so don't be too scared of it.
posted by ook at 2:46 PM on April 1, 2011 [1 favorite]

...on all those paragraphs, use <p class="header">, and add this....
posted by ook at 2:47 PM on April 1, 2011