Solved

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

Posted on 2014-03-22
7
444 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
  • 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 34

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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 34

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 34

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

808 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