How to prevent this from happening?

[tdob]

In the following picture I have 2 issues. The first is, depending on the resolution my header picture and the header text overlaps. With a higher resolution (which I use) it looks fine. I cant find a way to not get them to overlap other than reducing the image size a lot making it look just as weird on higher resolutions. The css tag is header for this, and the css for the text is the #header h1 and h4 tags.

Also, how can I make my menu go all the way over to the right? For some reason there is a small gap between where the menu ends on the right. The css for this menu is there with comments in the file, it is a drop down menu I got off the net.

Any and all help is greatly appreciated.



css sheet at: http://usil.x10hosting.com/styleexmp.css

[downtroden]

instead of making the logo a background, why not put it in the html? Float it left and then the text wouldn't overlap.

[tdob]

Ahh.. way to think outside the box.. stupid me.

How about the menu issue?

[downtroden]

I don't understand this

/*p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.*/

with what I can see from your setup I would have the html set up like this:

<div id="p7menubar">
  <ul>
    <li><a href="">link</a>
      <ul>
        <li><a href="">sublink</a></li>
      </ul>
    </li>
  </ul>
</div>

And when I setup my css rules I would target like so

div#p7menubar {
    height: thisMany px;
    /* width scales */
    background: #this hex color;
}
 
div#p7menubar ul {
/* this is your root ul list */
    margin: 0px;
    padding: 0px;
    list-style: none;
}
 
div#p7menubar ul li ul {
/* this is a submenu ul list */
}

And this is going from what I can see from the attached image. Do you have padding on the current ul or is there a container div with padding?

[tdob]

This is the html code that generates the menu..

<div id="menuwrapper">
	<ul id="p7menubar">
	<li><a href="?link=main.php"><b>Main</b></a></li>
	<li><a class="trigger" href="#"><b>Employee Menu</b></a>
	<ul>
	<li><a href="?link=book.php">Submit New Request</a></li>
	<li><a href="?link=editrequest.php">Delete A Pending Request</a></li>
	<li><a href="?link=viewrequests.php">View Request History</a></li>
	</ul>
	</li>
	<?php if(isset($_SESSION['directreports'])) { ?>
	<li><a class="trigger" href="#"><b>Manager Menu</b></a>
	<ul>
	<li><a href="?link=managerrespond.php">Respond To Pending Requests</a></li>
	<li><a href="?link=employeehistory.php">View Employee Request History</a></li>
	</ul>
	</li>
	<?php } ?>
	<?php if($hrflag > 0) { ?>
	<li><a class="trigger" href="#"><b>HR Menu</b></a>
	<ul>
	<li><a href="?link=edithours.php">Input Employee Hours</a></li>
	<li><a href="?link=viewemployeehours.php">Download Reports</a></li>
	</ul>
	</li>
	<?php } ?>
            	<li><a href="?link=logout.php"><b>Logout</b></a></li>
	</ul>
	<br class="clearit">
	</div>

[downtroden]

okay, so try putting width: 100% on the div#menuwrapper rule and if that doesn't work, then see if the containing div has a padding on it.

[tdob]

The width seemed to have no effect.. there are no other divs between the menu one?

Hmm, guess I will have to live with it, im sure i will keep looking though, the help is appreciated!.

[downtroden]

Do you have a page that I can look at?

I don't understand why this isn't working.

[tdob]

Is just posting the code of the page fine, or do you need to be able to navigate to it? Its not on the public internet, I could maybe attatch a zip folder with the page and menu images/logos, would that be fine?