jQuery Forum

I spent a couple of hours looking over the jQuery mobile CSS and still cannot seem to identify the issue. Would a screen shot help?

I would use an Html Inspector such as one that is built into Chrome or Safari to see what styles are being applied to that given area. From there, you can manipulate the CSS in the tool to see what will work to override this margin. Then you would of course transfer such changes into your CSS

I have been using Firebug to examine the styles and I did adjust the height of ui-header in my CSS. It works to a degree but leaves a small line between the header and the rest of the content. I'll try adjusting the height in line as poonkave suggests. If it doesn't work I'll just have to adjust my layout strategy.

I have added CSS for the image within the div to this -

.ui-header img {
      width: 100%;
      max-width: 100%;
      height: auto;
}

The little black bar at the bottom of the header is added to the header somewhere because I am expecting the header to be no larger than the image it contains.

One other note/question: the color of the little bar is a heavy gray. I have tried overriding the color but have been unsuccessful at that as well. Does anyone know where I can override that?

Thanks poonkave, I'll give that a try when I get back to working on it this afternoon.

That's good question

Thanks for the answers but it seems that none of the recommendations were the solution. I am still looking but I think the layout would have to be changed drastically.