IE problems

**Marty Chambers** · Jan 29, 2010 17:20

At an earlier conversation http://www.sitepoint.com/forums/show...6&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.

right.jpg

Attachment 53666

**RyanReese** · Jan 29, 2010 17:40

Hi, that's because of this

Code:

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

**Marty Chambers** · Jan 29, 2010 17:54

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

**Blake Tallos** · Jan 29, 2010 19:46

Hi, Matt.

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.

**Marty Chambers** · Jan 29, 2010 19:55

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.

**Blake Tallos** · Jan 29, 2010 20:05

**Blake Tallos** · Jan 29, 2010 20:06

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

**Marty Chambers** · Jan 29, 2010 20:28

IE 6... ugh. Even YouTube quit supporting it.

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

**Blake Tallos** · Jan 29, 2010 20:33

Originally Posted by Marty Chambers

IE 6... ugh. Even YouTube quit supporting it.

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

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.

**Marty Chambers** · Jan 29, 2010 21:18

Dude! thanks. You're a good man

**RyanReese** · Jan 29, 2010 23:08

Originally Posted by BlakeAnthony

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

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

**Blake Tallos** · Jan 29, 2010 23:10

Originally Posted by RyanReese

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

He did!

**Marty Chambers** · Jan 29, 2010 23:12

He did what?

**Blake Tallos** · Jan 29, 2010 23: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.

**Blake Tallos** · Jan 29, 2010 23:20

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

**Blake Tallos** · Jan 29, 2010 23:25

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

Change this -

Code CSS:

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

Code CSS:

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

You didnt close the p element

Code HTML4Strict:

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

**RyanReese** · Jan 29, 2010 23:27

Originally Posted by BlakeAnthony

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

That would be the case of "something else is at play"

.

This would be a float drop.

**Marty Chambers** · Jan 29, 2010 23:33

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;
}

**Blake Tallos** · Jan 29, 2010 23:38

Originally Posted by Marty Chambers

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;
}

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

**Marty Chambers** · Jan 29, 2010 23:40

Originally Posted by BlakeAnthony

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

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

**RyanReese** · Jan 30, 2010 09:03

Hi, to get the about.php page fixedjust remove the width you set on the

Code:

p{width:auto;}

**Marty Chambers** · Jan 30, 2010 09:43

Originally Posted by RyanReese

Hi, to get the about.php page fixedjust remove the width you set on the

Code:

p{width:auto;}

All that changes is how far the extends to the right...

**RyanReese** · Jan 30, 2010 16:16

Huh? I remove that witdh and the text slides up on the image.

What exactly is wrong now (once the width is removed)?

**Marty Chambers** · Jan 30, 2010 16:36

Say are you really only 18?

Ok I deleted the width, said

p {
padding-right: 30px;
}

which really serves the same purpose as the

p {
width: 740px;
}

and now things look great in all browsers and versions. *I think*
But I'm not floating my p. I'm not sure why BlakeAnthony said to do that.

**RyanReese** · Jan 30, 2010 16:39

Nah I just say I am because it's funny lol

. Yes I really am 18. I turn 19 in October

.

As long as you don't have a width and a float on the the text will slide up

.

Everything working?

User Tag List

Thread: IE problems

Thread Tools

Display

IE problems

Bookmarks

Bookmarks

Posting Permissions