IE problems

HTML & CSS
1

At an earlier conversation http://www.sitepoint.com/forums/showthread.php?t=657816&goto=newpost someone helped me have a body of text that would always be centered with the browser page. I’ve tested it out at http://martynchamberlin.com. Everything works like it should, except that in Internet Explorer the http://martynchamberlin.com/blog page is all messed up. This first screenshot shows how it should look (and how it does look in all other browsers) and the second shows what IE is doing. The text is way huge and the body is not centered. Is there some sort of hack or something that can fix this? What’s going on? I’m really out of my league. Any help is appreciated.

2

Hi, that’s because of this

<div id="bodycontent">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

There is a <div> there above the d octype thus IE is in quirks mode.

Place that div in the proper place in the HTML (or if it’s there by mistake remove it)

3

Thanks! I should have caught that, but the intricacies of php messed me up. I’m good to go now. I could kick myself

4

Hi, Matt.:wave: You seem fairly new to web design & Sitepoint. I took a look over your site in IE (Including other browsers as well). IE5.5, IE6, IE7, Opera, Chrome, FF.

All the pages seem fairly decent except the aboutpage.php & your contact.php page.

Your picture in your about page isn’t floating the text. And your contact form needs some serious realignment.

I just wanted to give you a headsup. :slight_smile:

5

I’m not sure I understand what you mean. The picture isn’t floating the text? In what browser and version? It’s floated left… Do you have a screenshot?

What does the form look like? I know it’s not the greatest in IE 6, though I’m not sure of an immediate solution.

Thanks for your critigue.

6

7

The text isn’t floating because you dont have width’s set on your floats.

8

IE 6… ugh. Even YouTube quit supporting it.

Would the width be the width of the picture plus padding?

9

It will take me a couple of minutes. But I’ll recode the entire layout for you. It will be cross browser compatiable as well.

10

Dude! thanks. You’re a good man :wink:

11

Huh? That makes no sense. If he had the paragraph floated then I could understand that behavior you posted.

If he leaves the paragraph unfloated then all will be good.

I didn’t look at the code so if that’s not it something else is at play :slight_smile:

12

He did!

13

He did what?

14

Wait, Idk im confused ryan lol. Dont confuse me. All I know is that the image and the text isn’t floating.

I have 2 options 1 just fix the float or 2 just redo the whole page.

15

Dur, Ryan. I just realized he put a width on the p thats why. =]

16

Ok, Matt for this to work in IE6 this is what you have to do.

Change this -

p {
font-size: small;
color: #3e3e3f;
font-weight: normal;
margin-top: 0px;
margin-bottom: 30px;
float:left;

}


#me img  {
float: left;
padding-right: 10px;
}

You didnt close the p element <p></p>

<p>Now this interview below is about a year old, but it's worth looking at. Patrick Southern did a good job making me look like I'm able to communicate. Thanks Patrick!</p>

After you change these styles it should work.

17

That would be the case of “something else is at play” ;).

This would be a float drop.

18

dude now it looks great in IE 6 but horrible in modern browsers. Look at what happened!
Oh, and I already had

#me img {
float: left;
padding-right: 10px;
}

19

Wrap your text within the float and then float it. The video is on top of the text because the text needs a div.

20

Wrap my text within what float? What do you mean by wrap?