Solved

DIV in Wrong Place in IE & Chrome, but fine in Firefox...?!

Posted on 2014-03-22
7
449 Views
Last Modified: 2014-03-22
Hello,

I have the following page which uses a div to display a user's favorites or 'recently viewed properties, however they display perfectly in Firefox but far from perfect in IE & Chrome - help appreciated!

Here's the page (please click on the 'Recently Viewed' button on the right hand side of your browser window to see the issue:

View the Page

THANKS in advance!
0
Comment
Question by:Nico2011
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 125 total points
ID: 39947266
Your page is not valid, it's surprising that it works at all.  I could not find your opening <body> which is supposed to the web browser where the display part of the page starts.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.villasdirect.com%2Fproperty-details.asp%3Fpropid%3D54812%26lat%3D43.469%26lng%3D-1.4437%26location%3DSAINT%2520PIERRE%2520D%2527%2527IRUBE%26pageno%3D%26UID%3D6787%23.Uy1Xa6LDXzC
0
 
LVL 35

Assisted Solution

by:Dan Craciun
Dan Craciun earned 375 total points
ID: 39947272
You made your first div (sidepanel) position-fixed, but not the second (properties).

Add position:fixed; to #properties and it will display OK in Chrome too.

HTH,
Dan

PS: Dave is right: your page is proof that browsers can perform miracles. The code is really patched up and I guess maintenance will be a nightmare.
0
 

Author Comment

by:Nico2011
ID: 39947306
Ok - I have created a completely blank page with only the DB access and the css file included (we are intending to completely re-write the property-detail page - some time!).  

This only loads up a selection of properties when the 'recently viewed' tab is clicked - if I can get this page working then I should be able to get the others working too.

This new URL is here

Thanks again.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 35

Assisted Solution

by:Dan Craciun
Dan Craciun earned 375 total points
ID: 39947358
<div id="properties" style="position: fixed;left: 156px;">
0
 

Author Comment

by:Nico2011
ID: 39947378
thanks - that has the div starting in the right place on the left, but not from the top (there is a big white space), and it no longer scrolls the properties on the horizontal axis...
0
 
LVL 35

Accepted Solution

by:
Dan Craciun earned 375 total points
ID: 39947382
There's is your big white space:
<table width="150" border="0" align="left" cellspacing="0" cellpadding="0">
<tbody><tr><td width="150" valign="top" height="132" align="left">&nbsp;</td></tr>
</tbody></table>

I would really re-code that whole page. Even when you get it working, using our help here, the next time you want to change something you'll waste even more time.
0
 

Author Closing Comment

by:Nico2011
ID: 39947425
thanks for your help - I am tidying this up as I go along - the original page was coded by someone else, but we're under time pressures to get this live.

It looks ok in IE now, but doesn't scroll left to right - I will open a new question for this.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question