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

Posted on 2014-03-22
Last Modified: 2014-03-22

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!
Question by:Nico2011
  • 3
  • 3
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.
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.


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.

Author Comment

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.
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

LVL 34

Assisted Solution

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

Author Comment

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...
LVL 34

Accepted Solution

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>

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.

Author Closing Comment

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.

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
To remove highlight from a "a href" 5 30
Change CSS to show Notification Bar 9 29
Easy responsive table out of existing table 28 55
push logos in footer up higher 5 21
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

810 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