Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


divs showing in debug but disappear when running on server

Posted on 2011-10-21
Medium Priority
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
  • 3
  • 2
  • 2
LVL 19

Expert Comment

ID: 37005894
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

ID: 37006055
Hi thanks,

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

Expert Comment

ID: 37006547
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¿
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 37006632
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

jrm213jrm213 earned 2000 total points
ID: 37006689
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

ID: 37006800
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

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

581 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