CMS Made Simple Forums

I'm a relative new user with CMSMS but a already love the way it works.

For a friend I'm making a website. He asked me to add a picture under the menu.

I managed to figure out how to do. The result looks fine under Firefox (> 1.5) but looks ugly under Internet Explorer (6.x). Using this last browser, adding an image under the menu causes a fault in te header: it stretches. Which kind of code do I have to use to add a proper picture under thw menu.

I used this forum to find out what I did wrong but a couldn't find an answer.

You can see the differences at http://www.scheenen.nl/homeopathie (Okay, in Dutch...)

That template is flexible, variable size, and the image is a fixed width, in the header if you want to use it without having it repeat or have it not be too narrow to fit the header you need to make the page the same width as the header image, it's not the images under the menu...

After emptying my caches I see that the problem is with the banner and indeed not caused by the picture in de menu.

In Firefox it seems to look okay but in IE it's a bit messy.

How do I change the template to a fixed width?

You will need to remove the IE flexible width call in the template, BTW you have 2 tags in the template...

Then in the CSS, should be general layout sheet change the stuff in blue...




/*****************
basic layout
*****************/
body {
  background-color: #ccc;
  color: #333;
  margin:1em;    /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
  border: 1px solid black;
  margin: 0 auto;      /* this centers wrapper */
  max-width: 80em;  /* IE wont understand these, so we will use javascript magick */
  min-width: 60em;          """remove this and replace with the call below"""
  width: 950px;
  background-color: #E8F5EB;;
  color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
  height: 154px;    /* adjust according your image size */
  width: 80em;    delete this
  background: #87CFAA;         
}

div#header h1 a {
/* you can set your own image here */
  background: #87CFAA url(images/cms/logo_homeopathie_roermond.jpg) no-repeat 0 0px;
  display: block;
  height: 154px;            /* adjust according your image size */
  width: -60em;    delete this
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Mark,

Thanks for your support! It's working now

Your Welcome, Glad I could help...