Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

CSS tweak for IE7/IE8 WordPress

  • SOLVED

I have a website which in IE7 renders these pages incorrectly (width too narrow, on both form and regular page):

[[LINK href="http://blanko.no/fotomaraton/hva-er-et-fotomaraton/"]]http://blanko.no/fotomaraton/hva-er-et-fotomaraton/[[/LINK]]
[[LINK href="http://blanko.no/fotomaraton/pamelding-2011/"]]http://blanko.no/fotomaraton/pamelding-2011/[[/LINK]]


In IE8 the form on this page is also rendered incorrectly:

[[LINK href="http://blanko.no/fotomaraton/pamelding/"]]http://blanko.no/fotomaraton/pamelding/[[/LINK]]


Everything works fine in Firefox and Safari. Can anyone suggest the change in the CSS neccessary to fix this problem in Explorer?

2011-04-13 by teggen

Answers (4)

2011-04-13

Christianto answers:

Specify height and width would be useful for floating content on IE7, since IE up to 7 will use its content to determine width on floating element (box model bug), not to mention you use header tag for a description not div or p.

teggen comments:

Hi and thanks. Do you have the CSS code to add to to the stylesheet for this?

Christianto comments:

For narrow content on
http://blanko.no/fotomaraton/hva-er-et-fotomaraton/
http://blanko.no/fotomaraton/pamelding-2011/

.content .sliderContent h4{ width: 420px }


For form look Sébastien | French WordpressDesigner answer ;-)

Also I notice you use h3, h4, form, div inside h4 tag. Although this allowed in special case, IE might think different..

Hope this help

2011-04-13

Sébastien | French WordpressDesigner answers:

replace
.gform_wrapper .top_label .gfield_label {
clear: both;
display: inline-block;
font-weight: bold;
line-height: 1.3em;
margin: 10px 0 4px;
}
with
.gform_wrapper .top_label .gfield_label {
clear: both;
display: block;
font-weight: bold;
line-height: 1.3em;
margin: 10px 0 4px;
}

Sébastien | French WordpressDesigner comments:

No sorry that's not the problem

Add this code in your css :
#gform_wrapper_1{
width:288px;
height:193px;
}

Sébastien | French WordpressDesigner comments:

PS :My response is based on the response of Christianto

teggen comments:

Thanks, I will try this when I get back to my Windows computer later tonight.

But, does this not only fix the problem with the form? Or does it also fix the other pages as well?

2011-04-13

Vidyut Kale answers:

I can only see the background image. No content at all.

teggen comments:

Really, what browser version are you using?

2011-04-13

Duncan O'Neill answers:

Hi Teggen,

It seems you must be running IE8 in compatibility mode, because the page displays ok in my IE8, but goes haywire when I send the browser into compatibility mode.

Anyway, your problem seems to be the float:right; you have on .content h1 & .content h4 headings. If you take that out, the headings appear in IE as they do in FF. And it has no effect in FF other than to collapse slightly the margins between the headings.

best,

Duncan