Just one html answer can help prevent premature balding
April 1, 2011 2:12 PM Subscribe
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.
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.
Best answer: 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
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
Response by poster: Consider yourselves both kissed fully on the lips.
posted by Terminal Verbosity at 2:41 PM on April 1, 2011
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]
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
posted by ook at 2:47 PM on April 1, 2011
This thread is closed to new comments.
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 [1 favorite]