CODEWITHSUNDEEP
htmlcssinternet-explorer
JJJollyjim
JJJollyjim

Reputation: 6207

Text displaying on wrong line in IE

I have some code to display a logo at the bottom of my page:

It looks like this in Chrome

Unfortunately, in IE (9, compatibility mode on or off), it looks like this:

It looks like this in IE

The only part I'm really worried about is the text being in the wrong place.

Here's the code:

<img src="img/logo.png" id="kwiiusIMG" height="50"/><br /><br />
<p class="kText">A Kwiius.com service by Jamie McClymont</p>

CSS:

#kwiiusIMG {
  float: left;
  margin-left: 305px;
}

.kText {
  margin-left: 0px;
  text-align: center;
  color: #666666;
}

Sorry, I'm a bit of an idiot when it comes to this stuff. Any idea how I could get IE working right?

Upvotes: 0

Views: 115

Answers (3)

Jay
Jay

Reputation: 1404

You can make display block on your image as well and remove the float left:

#kwiiusIMG {
    /*float: left;*/
    margin-left: 305px;
    display: block;
}

.kText {
  margin-left: 0px;
  text-align: center;
  color: #666666;
}​​

Upvotes: 0

magzalez
magzalez

Reputation: 1406

Instead of adding more HTML markup, you can add this to the existing CSS for .kText

.KText {
clear: both;
}

This also avoids adding any inline CSS.

Edit: I should also have mentioned, as sparky672 points out below, this makes the break tags unnecessary. They should be removed.

Upvotes: 1

Philipp
Philipp

Reputation: 1445

You are not clearing the float. I used to do something like this (code is not tested):

<img src="img/logo.png" id="kwiiusIMG" height="50"/>
<br />
<div style="clear: both;"></div>
<br />
<p class="kText">A Kwiius.com service by Jamie McClymont</p>

I don't know the whole design, but I guess the float: left in #kwiiusIMG is not needed at all.

Upvotes: 1

Related Questions