Hello,

I thought I had got this site working perfectly until advised otherwise today.

For some reason there is a big fat white space above the content in IE (see screenshots) where all is well in safari and firefox.

The site is using 3.6.4 and WP 3.1

I only have IE on VMware on my mac, so not sure how to drill down into it... (is there an equivalent of Firebug for IE ??)

ATO settings attached.

Any help - even a point in the right direction will be much appreciated


Firefox


Safari


internet explorer

With a real quick look it appears the image and text under is is not in a sidebar. Is there a reason for that? Also it shows incorrectly in FF, IE, and Chrome for me an a Windows 7 machine.

It is a simple ATA theme site with one left hand sidebar

The image and secondary nav graphics on the left are in the sidebar and contained within WP widgets.

The 'main text' and floated image are the main body content produced from WP 'pages'


The FF and safari screen shots show what it should look like (and does on my mac)

The IE screen shot shows the main body text forced below the wrapper -


It seems a pretty basic set up and one I have used before - hence my confusion at why this is happening.

You are causing your own grief. You have widget titles and then in the CSS set them to invisible, then need a negative top margin to cover the space where the title was. IE handles this different that the other browsers (IE does everything different)

so here is what I would do.
1) go to your CSS inserts and remove the

.widget-title h3 {visibility:hidden;}

2) go to the first test widget 'Main House' and remove the title
3) still in the first text widget, remove the

style="margin:-54px 0px 12px 4px"

from it
4) in the second text widget 'Starfish' remove the title

Thanks JD

I thought I was being smart by hiding the widget titles

(The idea was it would help me keep track of text-widget contents within the WP widget area - guess I will have to think of something else)

Any way

I have removed the CSS visibility:hidden from ATO settings and also the widget titles and negative margins within the <img> tags within individual text widgets and all appears to be displaying properly now in IE and FF windows XP.

However...

I do need to tweak the position of the top sidebar images to display nicely within my sidebar and to achive this have left in:

style="margin:-11px 0px 12px 4px"

within the <img> tag in the text widget which displays on the Welcome page.

This doesn't seem to do any harm (wrt IE)


So... in the interests of learning and sharing ...

1. What is it, that IE was struggling with here? - The CSS 'visibility' or the (negative) 'margin'

2. If the margin - shoudl I perhaps be using

style="padding:-11px 0px 12px 4px"

instead ?

remember I still need to align my images within the sidebar



Regards

It would seem that to hide the titles you could use

.widget-title h3 {display:none;}

I wouldn't put the styling in the <img...> I would put it in the CSS Inserts

aslo when playing with spacing, I like to add a border that I can see so I know where teh space needs to be adjusted. If you add

.widget {border: solid 1px red !important;}

you will se a red box around the widgets and you will notice
- the image has lots of space above and below it inside the widget
- there is space between the two widgets

Learn how to use FireBug in FireFox so you can examine the elements, see the CSS and adjust it on the fly. Then you will know what CSS Inserts you need to change things.

Thanks Guys,

{display:none;} of course... will try that as a general alternative to {visibility:hidden;}

Red borders top tip too - I had been using sickly background colours