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

Posted on 2014-03-22
Medium Priority
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
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
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 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 35

Assisted Solution

by:Dan Craciun
Dan Craciun earned 1500 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.

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 35

Assisted Solution

by:Dan Craciun
Dan Craciun earned 1500 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 35

Accepted Solution

Dan Craciun earned 1500 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 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…
Suggested Courses
Course of the Month10 days, 18 hours left to enroll

770 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