I've got an issue with a website rendering differently on different machines with the same setup...
I've tested the site on 6 different machines all running IE8 (8.0.7600) on win7 and get 2 variants of how IE wants to display the site. Some machines put about a 10px margin at the top of the page lowering the whole layout and others don't add this.
All the machines are same spec, same OS, same IE version, all running in same combination of IE8 browser mode and IE8 standards mode.
Has anyone else come across this problem before? - Seems incredibly stupid to display differently on the same setup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">
<head id="ctl00_Head1">
<title>
Sign in / Register
</title>
<meta property="fb:page_id" content="199610020055520" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=0.55" />
<link rel="shortcut icon" href="http:///Images/my/fav-icon.ico" />
<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="JavaScript/Prototype1.6.0.3.js"></script>
<script type="text/javascript">
var submitCount = 0;
</script>
<script type="text/javascript" src="JavaScript/Utils.js"></script>
<script type="text/javascript" src="/Service/Utils/MasterUtils.ashx?proxy&v=2"></script>
<style type="text/css" media="screen">
#import url("css/reset-v1.css");
#import url("css/my/960-framework.css");
#import url("css/my/base-v5.css");
#import url("css/my/question-v1.css");
#import url("css/my/personalMentor-v1.css");
#import url("JavaScript/My/css/custom-theme/jquery-ui-1.8.5.custom.css");
</style>
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/my/ie9.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/my/ie8.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/my/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/my/ie6-and-down.css" />
<![endif]-->
<style type="text/css">
<!--
#import url("/Service/Utils/dynamic-css.ashx");
-->
</style><script language="javascript" type="text/javascript">/* <![CDATA[ */ function PageLoad() { } Event.observe(window, 'load', PageLoad, false); /* ]]> */</script></head>
<body>
<noscript><p style="border:1px solid #FF0000; color:#FF0000; margin:1em; padding:0.5em; text-align:center;">NOTE: Many features on this website require Javascript and cookies. You can enable both via your browser's preference settings.</p></noscript>
<form name="aspnetForm" method="post" action="Login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_MainContent_btnLogin')" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATEFIELDCOUNT" id="__VIEWSTATEFIELDCOUNT" value="2" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA4NTA2OTA2Nw9kFgJmD2QWAgIDDxYCHghvbnN1Ym1pdAUUcmV0dXJuIHN1Ym1pdEZvcm0oKTsWAgIBD2QWBgICDxYCHgRUZXh0BXo8dWwgY2xhc3M9InRhYk5hdiI+PGxpPjxhICBjbGFzcz0ibmF2SXRlbUluYWN0aXZlIiBocmVmPSIvQ29tbXVuaXR5L05ld3NMYXRlc3QuYXNweCIgPjxzcGFuPkNvbW11bml0eTwvc3Bhbj48L2E+PC9saT48L3VsPmQCAw8WAh8BBYcBPGRpdiBjbGFzcz0ibmF2Ij48dWwgY2xhc3M9InRhYk5hdiI+PGxpPjxhICBjbGFzcz0ibmF2SXRlbUFjdGl2ZSIgaHJlZj0iL0xvZ2luLmFzcHgiIHRpdGxlPSIiID48c3Bhbj5TaWduIEluPC9zcGFuPjwvYT48L2xpPjwvdWw+PC9kaXY+ZAIGD2QWDAIDD2QWAmYPZBYCZg8WAh8BBcECPGRpdj48ZGl2IGNsYXNzPSJncmV5QmxvY2siPg0KPGgyIHN0eWxlPSJtYXJnaW4tdG9wOiAwcHg7Ij5TaWduIGluL1JlZ2lzdGVyIG5vdyB0byBlbnRlcjwvaDI+DQo8cCBzdHlsZT0ibWFyZ2luOiAwcHg7Ij5JbiBvcmRlciB0byBoYXZlIHlvdXIgZW50cnkgaW5jbHVkZWQgaW4gdGhpcyBtb250aHMgcXVpeiBwbGVhc2Ugc2lnbiBpbiBub3cuICBJZiB5b3UgZG9uJ3QgYWxyZWFkeSBoYXZlIGFuIGFjY291bnQsIHRoZW4geW91IGNhbiA8YSBocmVmPSIvTG9naW4uYXNweD9SZWdpc3Rlcj1UcnVlIj5jcmVhdGUgb25lIG5vdzwvYT4uPC9wPg0KPC9kaXY+PC9kaXY+ZAIHDw8WAh4PVmFsaWRhdGlvbkdyb3VwBQdteUxvZ2luZGQCCQ8PFgIfAgUHbXlMb2dpbmRkAg0PDxYEHghDc3NDbGFz" />
<input type="hidden" name="__VIEWSTATE1" id="__VIEWSTATE1" value="cwUIdGV4dEJveDEeBF8hU0ICAmRkAhUPDxYCHwFlZGQCGw8PFgIfAgUHbXlMb2dpbmRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYFBRhjdGwwMCRMb2dpblN0YXR1czEkY3RsMDEFGGN0bDAwJExvZ2luU3RhdHVzMSRjdGwwMwUiY3RsMDAkTWFpbkNvbnRlbnQkcmJFeGlzdGluZ01lbWJlcgUdY3RsMDAkTWFpbkNvbnRlbnQkcmJOZXdNZW1iZXIFHWN0bDAwJE1haW5Db250ZW50JHJiTmV3TWVtYmVykV9abJNHuNgL441+VmD4iPEq9Bg=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=zU9aq3bbkSvgw3OYU-u5XFkq0l4LoCwHFr9S5FOsIgQVsWYiTTdCYCijlA302CHGLHx0sg2&t=634210400612724343" type="text/javascript"></script>
<script src="/WebResource.axd?d=Zk81Z4C8G8DXldNoGNf8Z_2GBJ9XiOXkOI4Ay2XZRVzPq7F3j9b2z81RMiPp3nNPN7nzoTMK-pD_jEIu2e2oyFf9pS41&t=634210400612724343" type="text/javascript"></script>
<script src="/WebResource.axd?d=0sLRI7n71fW27LNCWM9O6iqOy8v2tNXXti8hupDC0T78K82IErLD8Soi4XyPIWiwFfmJpw2&t=634210400612724343" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;return submitForm();
return true;
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLI7Y+4DgLh8vmTCAL+4L5OAr7C0K8NAu3vp7YPAtqmqyECwfzBkwoC78603ggCzaPcqwwCkZyKvQ8C09GzpwF2P6jZYvvVKVJpSY9a6RmiD4Hm5Q==" />
</div>
<!--// LOADING TAB SURROUNDING DIV SET TO DISPLAY NONE AS NOT RETURNING LOGIC BREAKS THINGS //-->
<div style="display:none">
<div id="loading" class="loadingTab" style="display: none;">Loading...</div>
</div>
<div class="container_12">
<!--// LOGO //-->
<div class="logo grid_8">
<a href="/Dashboard/Default.aspx">IMAGE<a>
</div>
<!--// SIGN IN/OUT & MY PREFS TABS //-->
<div class="topRightControls">
<div class="grid_2"> </div>
<a id="ctl00_LoginStatus1" class="grid_2 signInOutTab" href="javascript:__doPostBack('ctl00$LoginStatus1$ctl02','')">Sign In</a>
</div>
<!--// PRIMARY NAV BAR //-->
<div class="primaryNav grid_12">
<ul class="tabNav"><li><a class="navItemInactive" href="/Community/NewsLatest.aspx" ><span>Community</span></a></li></ul>
</div>
<!--// SECONDARY NAV BAR //-->
<div class="secondaryNav grid_12">
<div class="nav"><ul class="tabNav"><li><a class="navItemActive" href="/Login.aspx" title="" ><span>Sign In</span></a></li></ul></div>
<IMAGE style="float: right; margin-top: 6px;" />
</div>
<div class="clear"></div>
<!--// OLD SIDEBAR NAV //
<div class="sideMenuNavigation">
</div>-->
<!--// MAIN CONTENT //-->
body {margin-top: 0;}
in an IE8 conditional style sheet fixed it - simple but bloody confusing as to why it would render differently within the same browser - thanks for the help folks
Related
So I have the css link here:
<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />
Now, in this current state the styling doesn't show up at all. I've looked into what others have said and tried:
take off rel="stylesheet"
change to "text/html"
check the paths
put it in public folder regards to express
add <base href="/">
etc..
still I'm having issues.
If I have text/css, I get mime errors.
my file path below:
app.js:
var express = require("express");
var app = express();
var request = require("request");
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));
app.get("/", function(req, res) {
res.render("search");
// res.render("location");
header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
*
<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />
*
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
href="https://fonts.googleapis.com/css?family=Josefin+Sans:600|Open+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<script
src="https://kit.fontawesome.com/3870ba704e.js"
crossorigin="anonymous"
></script>
<title>tv guide</title>
</head>
<body>
search:
<%- include('partials/header') %>
<section class="container-fluid content">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="fas fa-tape">filmraid</i>
</a>
</nav>
<h1>Search for a Movie</h1>
<form action="results" method="GET">
<input type="text" placeholder="search term" name="search" />
<!-- <br />
<input type="radio" id="usMovies" name="location" /> US
<input type="radio" id="ukMovies" name="location" /> UK -->
<br />
<input type="submit" />
</form>
</section>
<%- include('partials/footer') %>
I'm wondering if I'm missing something else here.
Thanks for taking a look.
Solved this problem by:
creating a new public folder since
http://localhost:3000/assets/lib/css/styles.css
was unreachable.
I am just porting some code over from backbone.marionette into react.js and I notice the browser doesn't seem to be able to pick up the formatting for buttons, though it always used to when working with backbone.marionette.
Relevant HTML/Javascript code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
Why isn't bootstrap auto-styling the buttons? Bootstrap is definitely being loaded, and the debugger in Firefox throws no errors.
To set class attribute you should use className instead of class,
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>
Example
I am making a login form for student and teacher. The code for login form is
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TeacherLogin.aspx.cs" Inherits="E_T_Manager.TeacherLogin" %>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title>Login Page</title>
<meta name="description" content="Bootstrap Metro Dashboard">
<meta name="author" content="Dennis Ji">
<meta name="keyword" content="Metro, Metro UI, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<!-- end: Meta -->
<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->
<!-- start: CSS -->
<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<!-- end: CSS -->
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 9]>
<link id="ie9style" href="css/ie9.css" rel="stylesheet">
<![endif]-->
<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->
<style type="text/css">
body { background: url(img/bg-login.jpg) !important; }
</style>
</head>
<body>
<div class="container-fluid-full">
<div class="row-fluid">
<div class="row-fluid">
<div class="login-box">
<form class="form-horizontal" id="frm" runat="server">
<div class="icons">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName" ErrorMessage="Username is required." ForeColor="#CC0000">Username is required.*</asp:RequiredFieldValidator><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Pwd" ErrorMessage="Password is required." ForeColor="#CC0000">Password is required.*</asp:RequiredFieldValidator>
</div>
<h2>Login to your account</h2>
<fieldset>
<div class="input-prepend" title="Username">
<span class="add-on"><i class="halflings-icon user"></i></span>
<asp:TextBox class="input-large span10" ID="UserName" runat="server" placeholder="Type UserName"></asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password">
<span class="add-on"><i class="halflings-icon lock"></i></span>
<asp:TextBox class="input-large span10" ID="Pwd" runat="server" placeholder="Type Password"></asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Role">
<span class="add-on"><i class="halflings-icon lock"></i></span>
<asp:DropDownList ID="Roles" runat="server" class="input-large span10">
<asp:ListItem>Select Role</asp:ListItem>
<asp:ListItem>Teacher</asp:ListItem>
<asp:ListItem>Student</asp:ListItem>
</asp:DropDownList>
</div>
<div class="clearfix"></div>
<div class="button-login">
<asp:Button class="btn btn-primar" ID="T_S_login" runat="server" Text="Login" OnClick="T_S_login_Click" />
</div>
<div class="clearfix"></div>
</form>
<hr>
<h3>Forgot Password?</h3>
<p>
No problem, click here to get a new password.
</p>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div><!--/fluid-row-->
<!-- start: JavaScript-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery.dataTables.min.js'></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.chosen.min.js"></script>
<script src="js/jquery.uniform.min.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.noty.js"></script>
<script src="js/jquery.elfinder.min.js"></script>
<script src="js/jquery.raty.min.js"></script>
<script src="js/jquery.iphone.toggle.js"></script>
<script src="js/jquery.uploadify-3.1.min.js"></script>
<script src="js/jquery.gritter.min.js"></script>
<script src="js/jquery.imagesloaded.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.knob.modified.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/retina.js"></script>
<script src="js/custom.js"></script>
<!-- end: JavaScript-->
</body>
</html>
And the code behind is
using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Security;
namespace E_T_Manager
{
public partial class TeacherLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void T_S_login_Click(object sender, EventArgs e)
{
try
{
string connc = #"Data Source=KHAWAR-PC.\SQLEXPRESS;Initial Catalog=ETManager;Integrated Security=True";
SqlConnection con = new SqlConnection(connc);
con.Open();
string query = "SELECT * FROM Users WHERE UserName ='"+UserName.Text+"' and Password='"+Pwd.Text+"' and Roles='"+Roles.SelectedValue+"'";
SqlDataAdapter da = new SqlDataAdapter(query,con);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
Session["New"] = UserName.Text;
Response.Redirect("Teacher.aspx");
}
else
{
Response.Write("<script>alert('Invalid UserName or Password or Role Type')</script>");
}
}
catch (Exception)
{
throw;
}
}
}
}
My problem is that I have implemented it for the login to teacher so far but I was failed to do so for student area. Can anybody tell me how to make user login either as a teacher or a student with sessions.
I have a cakePHP admin with theme on it.
When I navigate and then press the browser back button in Chrome, the page breaks and looks like that:
and the first few lines of HTML are as follows:
<header>
<section class="container_12">
<div class="upper clearfix">
There is no HTML defined, no header closing tag, no css defined...
When I hit refresh, the page loads normally:
And the HTML includes the <!doctype html>, the header, all the meta tags and so on.
What is the problem?
<!doctype html>
<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>johns | Admin</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/backend/css/style.css" /> <link rel="stylesheet" type="text/css" href="/backend/css/colors/color4/color.css" /> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/backend/css/grid.css" /> <link rel="stylesheet" type="text/css" href="/backend/css/fixed.css" />
<link rel="stylesheet" type="text/css" href="/backend/css/print.css" media="print" />
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="/backend/js/libs/selectivizr-min.js"></script> <![endif]-->
<script type="text/javascript" src="/backend/js/libs/modernizr-2.0.6.min.js"></script>
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.ui.spinner.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.collapsible.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.cookie.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.tipsy.js"></script> <script type="text/javascript" src="/backend/js/plugins/autoresize.jquery.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.autotab-1.1b.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.uniform.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/ui.multiselect.js"></script> <script type="text/javascript" src="/backend/js/plugins/fullcalendar/fullcalendar.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.jBreadCrumb.1.1.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.dataTables.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/backend/js/plugins/excanvas.js"></script> </script><![endif]-->
<script type="text/javascript" src="/backend/js/plugins/jquery.flot.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.flot.pie.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jflot.scripts.js"></script>
<script type="text/javascript" src="/backend/js/plugins/validation/languages/jquery.validationEngine-en.js"></script> <script type="text/javascript" src="/backend/js/plugins/validation/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/backend/blueimp/tmpl.min.js"></script> <script type="text/javascript" src="/backend/blueimp/load-image.min.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.iframe-transport.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.fileupload.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.fileupload-ui.js"></script> <script type="text/javascript" src="/backend/blueimp/application.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.xdr-transport.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.wysiwyg.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.table.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.image.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.link.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.cssWrap.js"></script>
<script type="text/javascript" src="/backend/js/plugins/hoverIntent.js"></script> <script type="text/javascript" src="/backend/js/plugins/superfish.js"></script> <script type="text/javascript" src="/backend/js/plugins.js"></script> <script type="text/javascript" src="/backend/js/script.js"></script> <script type="text/javascript" src="/backend/js/mylibs/helper.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="/backend/js/libs/imgsizer.js"></script> <![endif]-->
<script type="text/javascript" src="js/init.js"></script>
<script>
MBP.scaleFix();
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</head>
<body class="clearfix">
<header class="mobile">
<section class="container_12">
<div class="upper clearfix">
<img src="/backend/img/johns_logo.png" title="Dashboard" alt="" /> <div class="clear"> </div>
<div class="r usermenu">
<ul class="sf_menu clearfix">
<li>
<div class="sf-with-ul" style="width:160px;">
kjhgfd
Log out
<nav class="mainnav l">
<ul id="mainnav" class="sf_menu clearfix">
<li><img src="/backend/img/icons/helloadmin/dashboard.png" alt="Sessions" /><span>Sessions</span> <ul>
<li class="last">Add</li>
<li class="last">View</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
</header>
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
});
</script>
<div id="main" class="container_12 clearfix" role="main">
<div class="box twothirds">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/page_copy.png" title="Schools" alt="" />Sessions</h3><a class="move"></a></div>
<section>
<table class="display" id="tabled">
<thead>
<tr>
<th>Name</th>
<th>Starts</th>
<th>Track</th>
<th class="tview" style="padding-left:10px;">View</th>
<th class="tedit">Edit</th>
<th class="tdelete">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Something</strong> </td>
<td style="padding-left:10px;">8:00 am </td>
<td style="padding-left:10px;">MC </td>
<td style="padding-left:15px;"><img src="/backend/authake/img/icons/information.png" title="View" alt="" /></td>
<td><img src="/backend/authake/img/icons/pencil.png" title="Edit" alt="" /></td>
<td><img src="/backend/authake/img/icons/cross.png" title="Delete" alt="" /></td>
</tr>
</tbody>
</table>
<div class="clear"> </div>
</section>
</div>
<div class="box onethird menu">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/setting_tools.png" title="Actions" alt="" />Actions</h3><a class="move"></a></div>
<ul class="clearfix">
<li class="last"><img src="/backend/img/icons/add.png" title="Add" alt="" />Add</li>
</ul>
</div>
<div class="box onethird">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/alarm_bell.png" title="Notifications" alt="" />Notifications</h3><a class="move"></a></div>
<section class="clearfix">
<div class="login_notification_container"></div>
<div class="clear"> </div>
</section>
</div>
</div>
<footer role="contentinfo" class="clearfix">
<section class="container_12">
<div class="lower clearfix">
top
</div>
<div class="smallest">
<div class="l">
<span class="footer_copyright">© Copyright 2012 johns</span>
</div>
<div class="r">
<span class="footer_copyright">© Copyright 2012 johns</span>
</div>
</div>
</section>
</footer>
</body>
Any AJAX happening here? Sounds like something is "capturing" the back button in relation to an AJAX call and then somehow messing it up. What happens if you go back twice?
Maybe you're having a problem at your own browser. Can you link us to the website so someone can say if it's working or not? (Probably), it's a problem with your browser's settings. Posting a link would quite help anyway.
I'm going slightly insane here. I've been trying to figure out what is the problem for the past 24 hours, but I simply can't figure out what is wrong.
I have an article submission framework. First the user inputs some article text fields, then he uploads 2 pictures, then he crops them. The problem occurs when I try to crop the images - the submit button simply doesn't work. I click it and nothing happens.
However this only happens in IE.
In FF and Chrome it works flawlessly.
This is the aspx code of the CropImages view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Admin/Site.Admin.Master" Inherits="System.Web.Mvc.ViewPage<dr_teman_MVC.Models.ImagesUploadModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image1.originalImageAddress)%>" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image2.originalImageAddress)%>" alt="cropImage2" id="crop_target2" "/>
</div>
<% using (Html.BeginForm("ArticleCreated", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "<%= Html.Encode((Model.newArticle.ArticleID).ToString()) %>"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
<%} %>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="htmlHead" runat="server">
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server"></asp:Content>
do you need the code of any other part? (the relevant models? the controller?)
The aspx page is displayed, with the pictures. The cropping mechanism works - I can select the crop region in both images. But in IE, when I click on submit, nothing happens. I added a breakpoint to the relevant controller (Admin/ArticleCreated), but it doesn't even get there (the code does reach the controller which calls this aspx view, and passes all the information as expected).
So, does anyone know why IE is causing me such problems?
Any suggestion would be welcome, I am really stumped here...
Thank you,
Tom
This is the HTML source as shown in IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Dr. Joseph Teman - Discover The Beautiful You
</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Framework CSS -->
<link id="ctl00_Link1" rel="stylesheet" href="../Content/blueprint/screen.css" type="text/css" media="screen, projection" /><link id="ctl00_Link2" rel="stylesheet" href="../Content/blueprint/print.css" type="text/css" media="print" />
<!-- Site Specific CSS -->
<link id="ctl00_Link3" href="../Content/theme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 6]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie6.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie7.css" type="text/css" media="screen, projection" /><![endif]-->
<!-- Import buttons plugin -->
<link id="ctl00_Link4" rel="stylesheet" href="../Content/blueprint/plugins/buttons/screen.css" type="text/css" media="screen, projection" />
<!-- Import link-icons plugin -->
<link id="ctl00_Link5" rel="stylesheet" href="../Content/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection" />
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery.imgareaselect-0.9.2/css/imgareaselect-animated.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</head>
<body id="ctl00_Body2">
<div class="contentbg">
<div class="headerbg">
<div class="container mainwrap">
<div class="header">
<div class="copyright">
<p>Copyright information here</p>
</div><!--/copyright-->
<div class="sitename">
<h1>Dr. Joseph Teman</h1>
<h3>Discover The Beautiful You</h3>
</div>
<ul class="nav">
<li class="about">ראשי</li>
<li class="about">הוסף מאמר חדש</li>
<li class="about">ערוך מאמר קיים</li>
</ul><!--/nav-->
</div><!--/header-->
<div>
</div>
<div>
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="/images/articleImages/146/1.jpg" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="/images/articleImages/146/2.jpg" alt="cropImage2" id="crop_target2" "/>
</div>
<form action="/Admin/ArticleCreated" enctype="multipart/form-data" method="post">
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "146"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
</form>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</div>
<!--footer-->
<div class="footer">
<ul class="nav">
<li>ראשי</li>
<li>אודות</li>
<li>התחבר</li>
<li class="last">מאמרים</li>
</ul>
<p align="left">Copyright © Dr. Joseph Teman 2010</p>
</div><!--/footer-->
</div><!--/container mainwrap-->
</div><!--/headerbg-->
</div><!--/contentbg-->
</body>
</html>