ASP/HTML/CSS - Design View Different from Browser Preview - asp.net

I'm getting a difference in my design view and what the actual preview displays. I'm pretty sure my code is correctly reflecting what appears in the design view, but incorrectly in the browser preview. Any suggestions on how I can fix this and why this is happening? The black content area should be below the header and buttons.
Master Page Design View: http://imageshack.us/photo/my-images/30/designview.jpg/
Browser Preview: http://imageshack.us/photo/my-images/638/browserpreviewz.jpg/
IE and Chrome both display the same behavior.
Here is the code of the master page: (because of '<' I'm having getting asp code in here...how do I enter it in as code sample?)

Personally, I find i can never trust the web preview in visual Studio, so while this is not really an answer to your specific question I recommend you always use an actual browser for preview. :)

Your CSS might be cached. When you are looking at the web preview, It is worth a try to reload the page and the CSS by clicking ctrl-F5 (not just F5). This worked for me a few times when I felt that my CSS changes are not being rendered in the web preview.

Related

Stylesheet delayed on firefox

My asp.net MVC application use bundling to render stylesheet in my _Layout Page. Once my application deployed, I use Firefox and navigate to my login page and got this weird behavior I can't explain.
When I clear firefox cache to force reload stylesheet from server, I first see my page without any style applied. Then once the stylesheet is loaded, style are applied wich cause some unwanted 'flickering'. On chrome an IE, nothing is displayed before stylesheets are loaded, so no flickering here. I also have a really similar web app on my server for which, when I browse it with firefox, the 'flickering' problem doesn't occur. So I guess it must be something, maybe the order of code blocks in my page, that causes this behavior, not only the browser.
Is there a place where whe can look into your code? It's kinda hard to give an answer by just this question and information. The problem can be caused by alot of possibilities.
Did you try viewing the application on another computer? Sometimes that can be handy to determine if the issue is local (or is a general issue).
If there is a link to share, that would be great.

Blank screen between page changes on different browsers in ASP.NET

My ASP.NET project seems to run the best in Firefox.
Mainly while someone is navigating around the site, Firefox has no blank pages of white screen while the page is changing, and it looks like it's not reloading the top nav bar of the page or the footer/wrap around the partials that go in the middle.
Chrome and Internet Explorer (obviously) not so much. They seem to reload the entire page every time there is navigation performed.
Is there something I can change about my project configuration that would cause this kind of behaviour? I suppose it isn't too important but it would be nice if it looked as good on Chrome as it does on Firefox.
If anyone wanted to see code from a specific place/config in my ASP.NET project I can post it.

Web page behaves strangely

Have a look at the following site http://www.soe.gr.
The whole page has been built with CSS Page Builder Magic 2 (projectseven.com).
Every button is a link to a different .html page.
However, I do not know why every button press creates a flash effect in the page, the background changes instantly color and generally it gives an impression of abnormal operation. I have not met any site with such behavior except some pages inside projectseven site.
Do you have any idea why that happens? Is it something wrong with Page Builder Magic approach?
I am new to Web Development world and I want to know if there is any problem with these guys.
Thank you very much
I checked it out, it doesn't behave abnormally at all for all those effects you have there, I checked out the size of one of the images it is about 250kb, then imagine the other images which I assume are of the same size, and they are all going to be loaded when the page loads, you definitely should expect some effect

Crystal report is making the menu for master page disappear

For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.

Visual Studio weirdness

I have no one else to count unless this fantastic community, I know this is a non-programmer question but I can't figure it out why this is happening.
To a client I developed, using 960.GS a layout with a simple login user page / choose product / register products using .NET (ASP.NET 3.5) and all was ok, they agreed and I started ...
I then imported the HTML files I did and started to replace input with asp:TextBox's and the button into an asp:Button, really simple/basic stuff, but soon I click "View in Browser" I got my code all scrambled!
even if I see a XHTML 1.1 Strict Validated code, and CSS 2.1 Validate code
to try to get what's wrong, I put the ASPX file aside and open only the HTML page.
results are very different:
Opening directly in Firefox, with no web server:
alt text http://www.balexandre.com/temp/2009-11-22_1116.png
if I run the same page (exactly the same code) [HTML page, no ASP.NET page] through Cassini (Visual Studio Web Server) it shows .. ohh well...
alt text http://www.balexandre.com/temp/2009-11-22_1117.png
as well if I run that html page from IIS 7.5
alt text http://www.balexandre.com/temp/2009-11-22_1129.png
all 3 files above are the same page, being run through 2 different servers Cassini, IIS and the normal HTML render from Firefox.
using Firebug, all css loads well
screen cast: http://bit.ly/7ZBkuh (20 sec)
Does anyone have any idea for this behavior?
All help will be greatly appreciated, Thank you.
This looks like a css overflow problem. Are there any differences between the resultant markup/css from the browser (not the source file in the url bar) - eg, by comparing the "View page source" result? I suspect there will be. And i suspect that it's css related not markup.
It might help to run a diffing tool against your original HTML file and the output produced by your ASPX page. It will definitely be expected to see some differences, but it might still help you highlight what's going wrong.
This is only a guess, but perhaps the CSS styles that you are seeing in the ASP.NET-hosted pages are defined in the page, and the CSS styles that you are not seeing are defined in a separate CSS file?
If that is indeed the case, then the problem could be due to the way you have configured ASP.NET authentication in web.config. It may be serving up the HTML file but blocking the CSS file.

Resources