HTML Forum

**dave9713** · 04-15-2008, 09:54 AM

Hi All

I have one page which I want to work properly in IE and Safari yet I am not sure on how to do this for myself.

The URL is http://www.portfolio-properties.net/...r/contact.html

The only thing which seems to be the problem is the menu bar, it is meant to slightly overlap the navigation however on IE it goes wierd and moves towards the right.

I need this the same as it appears on Firefox.

Can anyone advise anything?

Thanks a lot,

Dave

**170 Designs** · 04-15-2008, 10:04 AM

I believe the width of "bar.gif" is too long. Try making it shorter.

Matt

**dave9713** · 04-15-2008, 10:12 AM

Hi Matt ... Thanks for the prompt reply!

I have just tried that, I have left the width constrictions in the updated link (below)

http://www.portfolio-properties.net/...r/contact.html

I tried setting it smaller (700px) and larger (790px) than my set page constrictions however it doesn't seem to make any difference.

Could there be another solution?

Thanks,

Dave

**170 Designs** · 04-15-2008, 10:21 AM

Try this setting the width inside the image tag to 100%. So, <img src="bar.gif" alt="menu bar" width="100%"/>

It could also just be with your <div align="center" style=" position:absolute; top:133px;"> tag, but try that first.

Matt

**joder** · 04-15-2008, 10:27 AM

It would be hard to sort it out since you have a lot of issues including
A misplaced html in your DOCTYPE
A </style> that has no <style> before it
A <style> section between your closing </head> and <body>
Your mixing absolutes and floats.

On .style5 use padding instead of  

**HLwebhosting** · 04-15-2008, 10:43 AM

Hmmm, thats odd.

**dave9713** · 04-15-2008, 10:51 AM

Thanks for all the replies... never expected them this quick!

I have uploaded the updated version after taking Matt's advice but it still seems to have made no difference (made it a bit thicker)

Joder thanks for the input... this is my first time ever trying to design a site directly inputting HTML rather than using a layout editor. There were a few thing's i didn't in your comments. Were is the misplaced html in my doctype? And please can you define how to input padding?

I think I have made the other changes you suggested but as I said I am no expert and am just editing to the best of my ability!

Appreciate all the pointers!

Thanks,

Dave

**170 Designs** · 04-15-2008, 11:14 AM

Well, this should work, since I just tested it

. I'm not sure that this is the cleanest fix but here:

<div style="margin-left: 250px; width:640px; background-image: url('bar.gif'); height: 3px;"></div>

Matt

**dave9713** · 04-15-2008, 11:23 AM

Thanks Matt, I wish it did but it doesn't seem to

I have uploaded the effects of that, on IE it now appears around 30 pixels below the navigation (I need it overlapping the bottom of the images)

On firefox the bar seems to have resolved right at the top of the browser.

Any other ideas to what I can try?

Once again the help is really appreciated

Dave

**170 Designs** · 04-15-2008, 11:49 AM

Dave,
I just took a more careful look at your code and as joder stated above, there are parts of it that are quite messed up. This could be leading to the problem for sure. You have head and body tags for example. I fixed some of it up for you. The code is below:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portfolio Properties | Presenting Amwaj Resort</title>

<script src="http://jotform.com/js/form.js?v2.0.572" type="text/javascript"></script>
<style type="text/css">
<!--
body {
	background-color: #235095;
}
a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:hover {
	text-decoration: underline;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.style6 {font-size: 12px}
-->
#wrapper{width:777px; margin:0 auto;}
#logo {width: 250px; float:left; margin-top: 10px;}
#menu {width: 450px; float:right; margin-top: 85px;}
#text {width: 700px; float:centre; margin-left: 35px;}

html, body{height:100%; margin:0;}
.tbmain{ 
 /* Changes on the form */
 background: #235095 !important; 
}
.left{
  /* Changes on the form */
  color: white !important; 
  font-family: Verdana !important;
  font-size: 12px !important;
}
.head{
  color:#333333;
  font-size:20px;;
  text-decoration:underline;
  font-family:"Verdana";
}
td.left {
  font-family:"Verdana";
  font-size:12px;
  color:black;
}
.pagebreak{
  font-family:"Verdana";
  font-size:12px;
  color:black;
}
.tbmain{
  height:100%;
  background:white;
}
span.required{
  font-size: 13px !important;
  color: red !important;
}

</style>

</head>

<body>

<div id="wrapper">




<div id="logo"><a href="http://www.portfolio-properties.net"><img src="newlogo.png" alt="portoflio properties" hspace="20" vspace="5" border="0" /></a></div>

<div id="menu">
  <a href="http://www.portfolio-properties.net"><img src="home.jpg" alt="home" border="0"/></a><a href="http://www.portfolio-properties.net/location.html"><img src="location.jpg" alt="location" width="72" height="35" border="0" /></a><a href="http://www.portfolio-properties.net/activities.html"><img src="activities.jpg" alt="activities" border="0" /></a><a href="http://www.portfolio-properties.net/amenities.html"><img src="amenities.jpg" alt="amenities" width="72" height="35" border="0"/></a><a href="http://www.portfolio-properties.net/plans.html"><img src="plans.jpg" alt="plans" border="0" /></a><a href="http://www.portfolio-properties.net/contact.html"><img src="contact.jpg" alt="contact" border="0" /></a> </div>
  
<div style="position: absolute; left: 350px; margin-top: 118px; width:640px; background-image: url('bar.gif'); height: 3px;"></div>


<p></p>
<div id="text" style="clear:both; padding-top: 10px;"><p class="style5">For immediate prices and availability or to discuss your individual requirements or any aspect of the Amwaj Development in more detail please call our Dubai office no +971 55 9165715</p>

<p class="style5">Or if in the UK our sole UK representative: &nbsp;Jerry Thompson &nbsp;-&nbsp; 07947778728</p>

<p class="style5">You can also feel free to contact us on the following email addresses or using the contact form below.</p>

<p></p>

<p class="style5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:rob@portfolio-properties.net" class="style6">rob@portfolio-properties.net</a></p>
<p class="style5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:ian@portfolio-properties.net" class="style6">ian@portfolio-properties.net</a></p>
</div>



<table width="100%" align="center" cellpadding="2" cellspacing="0" class="tbmain">
<tr><td class="topleft" width="140" height="10">&nbsp;</td>

<td width="611" class="topmid">&nbsp;</td>
<td class="topright" width="12" height="10">&nbsp;</td>
  </tr>
<tr>
<td class="midleft" width="140">&nbsp;&nbsp;&nbsp;</td>
<td class="midmid" valign="top">
<form  action="http://jotform.com/submit.php"  method="post" name="q_form_80475724837">
<input type="hidden" name="formID" value="80475724837" />
<div id="main">
  <input type="hidden" id="spc" name="spc" value="spc" />
  <script type="text/javascript">
   document.getElementById('spc').value = '3c0249c10c203e7d413063c068843142';
  </script>
<table width="520" cellpadding="5" cellspacing="0">
 <tr >

  <td width="150" class="left" >
   <label >Name <span class="required">*</span></label>  </td>
  <td class="right" >
   <input type="text" size="20" name="q0_Name" class="text" value="" id="q0"  onblur="validate(this,'Required')"  maxlength="100" maxsize="100" />  </td>
 </tr>
 <tr >
  <td width="150" class="left" >

   <label >E-mail <span class="required">*</span></label>  </td>
  <td class="right" >
   <input type="text" size="20" name="q2_E-mail" class="text" value="" id="q2"  onblur="validate(this,'Required')"  maxlength="100" maxsize="100" />  </td>
 </tr>
 <tr >
  <td width="150" class="left" >
   <label >Subject</label>  </td>

  <td class="right" >
   <input type="text" size="20" name="q9_Subject" class="text" value="" id="q9"  maxlength="100" maxsize="100" />  </td>
 </tr>
 <tr >
  <td width="150" class="left" valign="top"  >
   <label>Message <span class="required">*</span></label>  </td>
  <td class="right" >

   <textarea cols="30" rows="8" name="q8_Message" class="text" id="q8"  onblur="validate(this,'Required')" ></textarea>  </td>
 </tr>
 <tr >
  <td width="150" class="left" >&nbsp;  </td>
  <td class="right">
  <input type="submit" class="btn" value="Submit" /> </td>
 </tr>

</table>
</div>
</form></td>
<td class="midright" width="12">&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
 <td class="bottomleft" width="140" height="10">&nbsp;</td>
 <td class="bottommid">&nbsp;</td>
 <td class="bottomright" width="12" height="10">&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
validate("q_form_80475724837");
</script>
</body>
</html>

Matt

**dave9713** · 04-15-2008, 12:05 PM

Thanks a lot Matt this has been bugging me for so long!!

Green talkupation has been added

Is there a way to centralize the absoloute div? At present the design only shows in the correct position when the browser is in full screen.

Thanks a bunch again!

**170 Designs** · 04-15-2008, 12:13 PM

Hi Dave,
Well if you ask most people, absolute positioning is not the way to go for reasons that you just mentioned. For me, it was the only way to do what you wanted to do but I have a feeling there are many people on this forum, who are much better than me at CSS, that could fix this problem further. Cleaning up some of your code was just a first step

If nobody responds by later today, I'll try to take another look.

Matt

**dave9713** · 04-15-2008, 12:19 PM

Ok thanks a lot for the help dude.

Dave

**blktallos** · 01:16 PM

ahhhh i was Impressed with the site in the beggining but then i took at the Site in more of a detailed Matter and Then i saw the tables and
But very Good looking website besides the html

HTML Code:

alll the styling inside the html
 
<style type="text/css">
<!--
body {
 background-color: #235095;
}
a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #FFFFFF;
}
a:hover {
 text-decoration: underline;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:active {
 text-decoration: none;
}
.style5 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #FFFFFF;
}
.style6 {font-size: 12px}
-->
</style>
 
Tables tables tables 
 
 
 
 
<p class="style5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:rob@portfolio-properties.net" class="style6">rob@portfolio-properties.net</a></p>
<p class="style5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:ian@portfolio-properties.net" class="style6">ian@portfolio-properties.net</a></p>
</div>
 
alot of whatever that is.. i think u mighta made this site up in Deamweaver? or Frontpage?
 
 
and 2 of my browsers Firefox and Opera are tearing this site Up://

**dave9713** · 04-15-2008, 02:09 PM

Hehe yes i admit i recently bought dreamweaver and I am just trying to figure it out as it is a lot more complicated than what I am used to

Yes i am am aware of the styling (there is plans to move this to an external stylesheet but i just put it there at first for ease as i am getting used to dreamweaver!

Does anyone have any reccomendations about the bar which I am trying to centralize? I finally have it in the right position on the screen but it appears like that only in full screen...

Thanks all,

Dave

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!