Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

IE 8 issue displaying image in-line with text [RESOLVED]

Go to End

3 Posts   3673 Views


Community Member, 4 Posts

7 September 2009 at 6:47am

Edited: 09/09/2009 3:28pm

I have been struggling to get one page done for nearly a week and am now completely frustrated. I've attached an image of the display problem I am having at the moment since you can't actually SEE the page in the menu system of the site.


For some reason even though I have clicked the "Save and Publish" button numerous times for whatever reason the page is missing from the menu. I even tried using the batch publish function and yes I have appended the ?flush=1 to the URL .. all to no avail.

The page was showing in the menu before but it's suddenly disappeared.

I can however see it if I go through the CMS admin UI and click "Published site" but if I simply open a browser and go to it is not in the menu list. There should be a page called "What do we do" in between "what makes us different and How do we do what we do" (it's not my site and the content. menu names, etc are all what the client wants :/ )


Attached you can see a screen snap of a sub-page off of "What do we do" called Integrated Training Pyramid. This page contains an image map. Every level of the pyramid is a link to the information below. I had coded it to be have rollovers instead to show the information but for some reason that would not work when I copied the css and html into the page so I gave up and went with a straight forward, simple image map that links to named sections on the same page.

The linking all works in both browsers but in IE8 the image is way down the page. I've managed to get the image to view at the top of the page but the text is then showing off to the left and not positioned correctly. If I use absolute positing and z-indexing I can get it to display where it is supposed to below the image but then the background of the container stops and you end up with the red body background.

Since you can't actually see this page because of the first issue I have included a couple of images.

This is the html code:


I have tried using " style="width: 550px; position: relative; top: 10px;" " in the image div but that just makes everything shift down again.

*tearing hair out and sobbing*

It all looks fine in Firefox which is soooo frustrating.

NOTE: modified subject to read image as it doesn't seem to matter if it is an image map or not -- see my other post regarding html editor removing ID from tags here

Alex was right about IE doing odd things with padding. Even though my CSS has *{padding:0;} included the issue was IE's padding treatment. Even though there was plenty of room making the image smaller was the only way to resolve it.

Attached Files
Alex S

Community Member, 30 Posts

8 September 2009 at 4:12am


For issue 1, try having a look at the 'access' tab on the back-end of the CMS for the page(s) you're not able to see. If the "who can view this page..." bit set to 'logged in users' that would cause the behaviour you describe. I guess it's worth checking the parent page as well, if the child one is inheriting.

Not sure about issue 2, it looks a lot like the entertaining way IE deals with margins and the like, although this shouldn't happen in IE8 as it'll go directly to standards mode if the doctype asks it to. I guess checking your doctype would be the first step but I know the one that is used with SilverStripe out-of-the-box is correct so it shouldn't be that. Otherwise it may be time for some IE specific style sheets, some useful commentary on these here: Or reducing the width of one of the divs?

All the best,



Community Member, 4 Posts

8 September 2009 at 5:35am

Edited: 08/09/2009 5:56am

Thanks for the advice Alex. I'm a complete newb using SilverStripe so haven't yet figured everything out.

There was a weird prefix to the page which showed up in the editor as "your link" - havent a clue what that was about or where it came from.

I ended up creating a new page for the parent page and transferrig the pyramid page over. That solved issue 1.

Issue 2 is still on-going.

I'm customizing a theme from the SilverStripe site so it's pretty well an out of the box solution .

I set the image's class to "center" and at least everything is flowing properly but the descriptive text is about 600 pixels below the image on the page. Based on your comments I even tried adding "style="margin: 0px; padding: 0px;" to the div tag but there was no change *sigh* The image is in the right place though so I'm considering it progress \o/

I'm going to attempt the CSS hover solution again to see if I can get that working. Maybe third times the charm ;)

I'm convinced it is the browser's interpretation of the image map co-ords block or something ridiculous like that.