IE8 positioning text and images incorrectly within DIVs

[rubikwizard]

Hi

I hope someone can help me. I am setting up a WordPress installation for work, modifying a theme that they have chosen. However there are display problems in IE8. You can view the site live here http://www.blogfoot.org/beckfoot/

So far the site works fine in FireFox3.5
[img]http://blogfoot.org/ff3.5.png[/img]

However in IE8 I get this
[img]http://blogfoot.org/IE8.png[/img]
Notice that the image in the top bar and the text in the second bar have been pushed down.

In IE8 compatibility mode I get
[img]http://blogfoot.org/IE8_compat.png[/img]
Notice the text is now working but the image is still pushed down.

The CSS being used is

Code:

/* ================================================================
TOP BAR
=================================================================== */

#topbar {
background: #404040 url(images/topfade.jpg) repeat-x;
width: 980px;
height: 70px;
color: #999999;
font-size: 10px;
margin: 0px;
padding: 0px;
overflow: hidden;
}

#topbar p {
font-size: 10px;
font-family: Verdana;
font-weight: bolder;
padding: 0px;
margin: 0px 0px 5px 0px;
}

.topbar_left {
background: transparent url(images/logo.jpg) no-repeat;
width: 700px;
height: 70px;
float: left;
margin: 0px 0px 0px 15px;
padding: 0px;
}

.topbar_right {
width: 240px;
float: right;
text-align: right;
margin: 0px;
padding: 22px 15px 0px 0px;
font-weight: bolder;
}

/* ================================================================
HEADER
=================================================================== */

#header {
background: #9C0001 url(images/masthead.jpg) no-repeat;
width: 980px;
height: 68px;
color: #FFFFFF;
font-size: 10px;
margin: 1px 0px 0px 0px;
padding: 0px;
overflow: hidden;
}

#header p {
color: #ffffff;
font-size: 28px;
font-family: Times;
text-decoration: none;
font-weight: bolder;
font-style: italic;
line-height: 8px;
text-align: left;
padding: 0px 0px 0px 15px
}

There are some CSS conditional statements being used

Quote:

<style type="text/css" media="screen"><!– @import url( http://www.blogfoot.org/beckfoot/wp-con … /style.css ); –></style>

<!–[if gte IE 7.]>

<link href="http://www.blogfoot.org/beckfoot/wp-content/themes/thebeeb/ie7.css&quot; rel="stylesheet" type="text/css" />

<![endif]–>

<!–[if lte IE 6]>

<link href="http://www.blogfoot.org/beckfoot/wp-content/themes/thebeeb/ie6.css&quot; rel="stylesheet" type="text/css" />

<![endif]–>

<!–[if lt IE 7.]>

<script defer type="text/javascript" src="http://www.blogfoot.org/beckfoot/wp-content/themes/thebeeb/scripts/pngfix.js"></script&gt;

<![endif]–>

The html/divs look like

Code:

Enjoy – Learn – Succeed

I have some basic css knowledge but this beats me. I have tried reading up and searching the internet and the only thing I can come up with is that it is probably something to do with margins and/or padding settings. I have not tried the site in IE7 as I don’t have that available at the moment.

Thankyou very much to anyone who has any ideas :)

[Rob MacKay]

after a quick glance, your picking up some margin in IE8 and not in FF on the .top_left navbar – that’s what’s causing it to come out. I have not looked through all your stylesheets though – sorry – bit short on time right now :(

[rubikwizard]

Thanks for your help. I guessed it might be something to do with margins but I can’t seem to figure out what.

I suppose if it can be fixed then I will need another conditional IF to a separate stle sheet just for IE8?

[Rob MacKay]

tbh – you shouldn’t have separate style sheets for browsers. If you code to web standards most issues are picked up, you should really only need sep sheets for IE6. You rarely need one for IE7/IE8.

If you are finding yourself having this issues it might be better to go back and look at how you are coding the site as you are probably not doing it as well as it should be done.

You do have 36 errors and 26 warnings on your HTML for example :)

[rubikwizard]

Yes I realised there were those errors and warnings as I passed it through a validator :cry:

I mainly work in ASP and PHP and rarely get involved with the CSS, however I was asked to set up a quick WordPress installation based on a template I was given. All was going fine until I had a look at it in IE8 and saw the margin problems in the top bars.

I have been trying to read up on margins and padding and IE8/FF problems but am really struggling. I have fiddled with the margin settings and get the elements to display correctly in IE8 (compat mode) but then they break in FF. I am going around in circles. Maybe it is time to purchase a good CSS book and have a good read.

In the meantime if anyone elso has a suggestion I would be very greatful :D

[Meander365]

Not that I’m a fan of this method, but you can always try applying the ie7 compatibility mode for ie8. Might be worth a try:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

[EpicEyes]

Maybe add some simple resets to your body?

body { margin: 0; padding: 0; }

[rubikwizard]

"Meander365" wrote:

Not that I’m a fan of this method, but you can always try applying the ie7 compatibility mode for ie8. Might be worth a try:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Thanks, but the picture is still shifted in compatability mode.

[rubikwizard]

"EpicEyes" wrote:

Maybe add some simple resets to your body?

body { margin: 0; padding: 0; }

Thanks for the suggestion but the body already had padding: 0; and when I put the margin to 0 the items were still in the wrong place as well as the whole page now being left aligned (instead of center). The margin is currently set to 0px auto 0px

[Je$ter]

IE8 is supposed :lol: to be more standards based…..so, just remove the special IE7 css file by removing the "gte" from the if statement. Works great on a copy I saved locally. ;)

Enjoy!
Je$ter

[rubikwizard]

"Je$ter" wrote:

IE8 is supposed :lol: to be more standards based…..so, just remove the special IE7 css file by removing the "gte" from the if statement. Works great on a copy I saved locally. ;)

Enjoy!
Je$ter

JeSter, you are a genious! That works great! I was about to give up.

It doesn’t like IE7 now :( but I am not too bothered about that.

Thanks again!

[Author]

Posts