divs showing in debug but disappear when running on server

Posted on 2011-10-21
Last Modified: 2012-05-12

What is going on here. I have the below arrangment of divs which display fine when debugging. But as soon as I run on the server, left div (which has some content a few links) disappears entirely and divheader shows only it's content (just one label) and it's backcolour disappears.

I've tried removing floats from the header and content divs and adding a clear both inbetween the divs... but nothing seems to work.

This is in IE7 for both debug and displaying from sever.

Thanks, Aiden
#divleftcol {display:inline; float:left; width:12%; height:600px; background-color:black; border-right:1px solid;}
#divheader {display:inline; float:left; width:88%; height:50px; border-bottom:1px solid black; background-color:#FF9933;}
#divcontent {display:inline; float:left; width:60%; height:450px; padding-left:40%; }

Open in new window

Question by:AidenA
    LVL 19

    Expert Comment

    As HTML is rendered on client computer, then only thing I see that can vary from development to production environments in this case is the content of the divs.

    Did your divs have different content on both machines (production an development)?

    If it's so try to see both with same content to check if differences still applies.

    Author Comment

    Hi thanks,

    No, content is the same. Displays totally differently in firefox also to what it does in development...
    LVL 19

    Expert Comment

    The difference in Firefox is understandable.

    But the difference between servers accessing from same client computer and with the same web browser to the same content is something that totally shocks me 0_o¿

    Author Comment

    I am at a total loss right here. Spent the last few hours on this and just haven't got a clue why it renders fine in development and is totally messed up in production.

    the weird thing also is I have another website on the same server where i use divs all over the place and I never had this problem. Also can't see what the difference is between those sites...

    maybe I will take some of the html from that site and put it into this one and see what happens. I am laying out the page differently also though trying to put a leftcol div first and then float a header beside it.

    is there anyone else who might be able to shed some light?
    LVL 17

    Accepted Solution

    Hi, it is hard to tell without actually seeing your html and your full css, but a lot of times these things can happen due to different css file on one location compared to the other.

    For example you put an inline stylesheet in your html file and it works on development which has a different (older or newer) style.css included in it. Then you move your file to the server and all of a sudden your page looks different because of different inherited styles.

    I have had trouble trying to define widths in percents that equal 100% like you have there because different browsers have different values for padding/margins so unless you explicitly set the padding and margins for a lot of elements they will not look the same across browsers, and will cause your carefully percented widths to be larger or smaller than you intended.

    I would try placing margin:0 and padding:0 on each of your div elements and see if that fixes anything.

    Again it is hard to help without seeing more, but that is my first guess. Check and make sure all stylesheets are the same in both environments.

    Author Comment

    yeah, i changed the name of the style sheet and then it worked (stupid f *&£&£&&££*£*"*"&"&^"&"&£*)

    sorry, just had to get that out.

    Obviously what's happened is I've recently added expires headers to static content for 7 days. So my browser must have cached the old stylesheet.
    LVL 17

    Expert Comment

    Yes, caching can be annoying. Glad that is all it was.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    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

    Suggested Solutions

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    761 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

    8 Experts available now in Live!

    Get 1:1 Help Now