There are problems with my client's web page. Please see if you can help!

HTML & CSS
1

I have given up trying to get this web page right for my client, so can someone please tell me how I can fix it? I am frustrated now. There are three displays problems with the web page, they are:

  1. There are gaps between the top navigation, and the main header, and the other gap is underneath the main header;
  2. The product range drop down menu appears underneath the photo; and
  3. There is a gap between where the left side navigation and the photo is, and the main text.

Web page

I hoping that CSS will be able to fix the above problems. All help will be appreciated. Thanks in advance.

2

Well those solutions fixed one problem (I don’t see the gaps anymore), vinpkl, but I still have two other problems, which were mentioned at the top of this thread.

3

ok try this for your menu problem


.mainMenu {
	background:url(images/topnavbg-main.gif) 0 8px no-repeat;
	padding:0px 16px;
	height:1%; /* holly hack, trip haslayout, wrap floats IE */
	[COLOR="Red"]z-index:9999; 
	position:relative;[/COLOR]
}

.mainMenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%; /* Width of Menu Items */
	[COLOR="Red"]z-index:9999; 
	position:relative;[/COLOR]
}

 <div style="height:122px;width:899px; [COLOR="Red"]z-index:1;[/COLOR]">
   	  <img src="Ozzy%20Cranes%20-%20Home_files/header.jpg" alt="Ozzy 
Cranes - Australia's Leading Crane Borer Manufacturer" width="899" 
height="122"></div>

vineet

4

Awesome, vinpkl, that has fixed the menu and photo display problem. Are you able to fix the third problem?

5

r u talking about the gap that is due to “horizontaldivider.gif”.

if yes then remove the image.

vineet

6

I can’t remove the image, because it is apart of the design, which my client has agreed on. Any other suggestions?

7

try this


.mainMenu {
	background:url(images/topnavbg-main.gif) 0 8px no-repeat;
	padding:[COLOR="Red"]0px [/COLOR]16px;
	height:1%; /* holly hack, trip haslayout, wrap floats IE */
}

and put your header.jpg image inside <div>


  <div style="height:122px; width:899px">
   	  <img src="Ozzy%20Cranes%20-%20Home_files/header.jpg" alt="Ozzy 
Cranes - Australia's Leading Crane Borer Manufacturer" width="899" 
height="122"></div>

try if the above code fixes your problem.

vineet