Getting rid of undesired layout element on webpage

What's this?

And how do I get rid of it? Act开发者_StackOverflow社区ual webpage here.

Remove min-width: 640px from your .singleinfo css class

The min-width for the singleinfo class is set to 640px while the backgroundimage is only 630px wide. You can set no-repeat on the background or change the min-width to 630px.

It's the background of div.singleinfo repeating. To get rid of it, add no-repeat to the background property, so it becomes:

background: #F7F7F7 url(images/macmet.jpg) bottom left no-repeat;

Apart from defaulting to a repeating background, you've also set the background colour inconsistent with the remainder of the page.

.singleinfo { background: #F4F4F4 url(images/macmet.jpg) bottom left no-repeat; }

Appears correctly in Chrome 11 on Windows.

Change your style.css to get this:

.singleinfo {
    background: url("images/macmet.jpg") no-repeat scroll left bottom #F4F4F4;
    font: 12px Georgia,Arial,century gothic,verdana,sans-serif;
    margin: 0;
    max-height: 20px;
    min-width: 640px;
    padding: 5px 0 15px;
}

This fix was tested and works OK on:

• Mozilla Firefox 4.0.1
• Internet Explorer 9.0.8112.16421
• Opera 11.10.2092
• Google Chrome 11.0.696.60

change the background property of your class .singleinfo to >

background: url("images/macmet.jpg") no-repeat scroll left bottom #F7F7F7