I'm designing a site for an iPhone application, which involves a navigation bar using this technique.

 

I don't want to write down all the code involved, but basically the problem I have is that for some reason, after creating the navigation bar, the background of the navigation bar div took on exactly the same colour as the breadcrumb trail div, and nothing I do changes that. Also, even though I specified

* {

margin: 0;

padding: 0;

}

at the very start of my CSS file, there is a slight gap between the header/breadcrumb div and the content.

 

the basic code of the navigation bar is in the link above, so I won't paste it here, but here is the relevant CSS:

 

#container {

width: 650px;

margin: 0 auto;

}

 

#content {

background-image: url(../img/backimg.jpg);

padding: 2em 2em 2em 2em;

}

 

#header {

background-color: #707070;

}

 

#navbar {

background-color: black;

}

 

#breadcrumbs {

padding-left: 2em;

background-color: white;

}

 

#navicon {

width: 480px;

margin: 0 auto;

}

 

and the start HTML:

 

 

<div id="container">

 

<div id="header">

<img src="img/logo.png" alt="ibetman.com" />

 

<div id="navbar">

<div id="navicon">

 

<ul class="navmenu">

<li class="home"><a href="#" title="Home"><span class="displace">Home</span></a></li>

<li class="apps"><a href="#" title="Applications"><span class="displace">Applications</span></a></li>

<li class="about"><a href="#" title="About Us"><span class="displace">About Us</span></a></li>

<li class="forum"><a href="#" title="Forums"><span class="displace">Forums</span></a></li>

<li class="faq"><a href="#" title="FAQ"><span class="displace">FAQ</span></a></li>

<li class="contact"><a href="#" title="Contact"><span class="displace">Contact Us</span></a></li>

</ul>

 

</div>

</div>

 

</div>

 

<div id="breadcrumbs">

<h2><a href="#">Applications:</a> MultiBet</h2>

</div>

First of all, there's one </div> tag missing, but that may be because you didn't show all the code.

 

It's difficult to test because I don't have an iPhone and I don't know your images. It looks OK on a PC in IE7 but as a test, add an inline style to the #nav div and see if that works, then you will know if the iPhone is ignoring part of the CSS:-

 

<div id="navbar" style="background-color: olive;">

 

I used a different color just for my test.

 

The space between the header/breadcrumb div and the content may be because your breadcrumb div has h2 tags inside. These have default top or bottom margins (different for different browsers) which can extend outside the div boundary creating a space. As a test, add a style

h2 { margin: 0; }

and see if the space disappears. P tags also have default margins, but not as big. There isn't any top or bottom padding in the breadcrumbs div which might absorb the default margins of the h2 (or p) tags.

Well, first I should have made myself clearer... I actually am not testing the site on the iPhone, at the moment it's just on a computer though I will work on handheld media later on. This website is for a company creating applications for the iPhone. Sorry about that.

 

Hm, well I've psuedo-fixed the problem. What I had to do was change the height of the navicon div to the correct height, and for some reason that meant it worked. Do background images not stretch out divs? I find it all rather confusing...

 

Also, the style for the h2 didn't work. I would have thought that the style of

* {

margin: 0;

padding: 0;

}

would have gotten rid of the h2 margins? I know it did that for the h3 and p tags.

 

Thanks so much for your help!