Solved

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

Posted on 2014-03-22
7
434 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 82

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now