This may be a duplicate of a question somewhere, but I am unable to come up with the keywords to produce it.
I am using the Google Maps API V3 and following the simple tutorial provided at https://developers.google.com/maps/documentation/javascript/tutorial. Everything is fine except in IE9, which is rendering in IE9 Standards mode. The problem is that when the map is loaded on an incredibly bare-bones ASP.NET forms page, the resulting HTML has the div container for the map, twice! This is causing layout issues because as described in the tutorial:
Note that the map will always take its size from that of its containing element, so you must always set a size on that explicitly.
So, the div containing my map must be either set to some amount of pixels or 100%, the same value as its DOM parent. This is fine in FireFox and Chrome, where the HTML source ends up roughly:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="no-layout"><form name="aspnetForm" method="post" action="TestPopup.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw... />
</div>
<div class="map" />
</form></body>
</html>
But in IE9, we end up with:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="no-layout"><form name="aspnetForm" method="post" action="TestPopup.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw..." />
</div>
<div class="map" />
</form>
<div class="map" />
</body>
</html>
This page is a (working) simplification of the problem but this is an actual issue in pages because the map class has width and height set. The second div with this class has the same style, pushing content down.
Related
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
Suppose I have two html files footer.html and main.html. The footer contains a reference to the top of a page as follows:
<!-- footer.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<footer>
<small>To top</small>
</footer>
</body>
</html>
The main.html file embeds the footer by using the <object> tag (see note 1) as shown below. There can be several files similar to main.html. Because of this <a href="page#header"> may not be used.
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<div id="content"> Long content ... </div>
<object id="footer" type="text/html" data="footer.html"></object>
</body>
</html>
Question: Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
Note 1: The <object> tag can be used to embed another html, although without a relation:
You can also use the <object> tag to embed another webpage into your HTML document.
from http://www.w3schools.com/tags/tag_object.asp
The same can be done using <iframe> or <embed> instead of <object>, but the issue remains.
Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
No, it isn't.
If you use a relative URL, then it will be relative to the document that the link appears in (i.e. the footer).
If you use an absolute URL, then you have to specify which document you want to link to the top of (and since multiple documents will embed the footer, you can't do that).
You've ruled out generating the URL programatically with JavaScript.
Thanks to all for the comments and answers. Indeed, this approach seems not to work due to a missing relation between html files. In other words, footer.html cannot refer to the inside of main.html. Instead, I modified the structure, so that the main includes the footer directly and the content is embedded by using an <iframe> as follows:
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<iframe id="content" name="contentframe" src="content.html"></iframe>
<footer id="footer">
<small>To top</small>
</footer>
</body>
</html>
This solves the issue and works without JS, PHP or the like independently of the page loaded into the <iframe>. That is, it simply jumps to top keeping the contents of the loaded page. Eventually, there is one main and multiple long content pages which are loaded into this main. Tested with FF and IE.
Following is code i used this is from template when i run this file i see error
bootstrap.css.map:1 GET http://localhost:8000/css/bootstrap.css.map 404 (Not Found)
but there is no link i made and error shows link is on first line can someone help me where the link is
how do i remove that link can someone help me with this
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Animus A Blogging Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
</head>
<body>
<div class="contact-top">
<div class="container">
<h2>Log in</h2>
<div class="contact">
<p></p>
<div class="contact-down">
<div class="contact-right">
<div class="col-md-6 contact-info">
<form>
<input type="text" name="your name" placeholder="USER NAME" class="input">
<input type="password" name="your email" placeholder="PASSWORD" class="input">
<div class="clearfix"> </div>
<input type="submit"value="SEND" />
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's coming from your bootstrap.css file. You can remove the reference by editing that file and removing the following line from your code:
/*# sourceMappingURL=bootstrap.css.map */
Source Mapping files should only be used by the Developer Tools.
With Bootstrap you can disable the source map if you like or just ignore the 404 for any .css.map when using the Dev Tools.
If you want to use the Dev Tools for Debugging or want to have more 'completeness' to your code add the .css.map file available from Bootstrap along side the .css file.
Reference: https://developer.chrome.com/devtools/docs/css-preprocessors
Other similar questions: what are the .map files used for in Bootstrap 3.1?
Either you can remove
`/*# sourceMappingURL=bootstrap.css.map */
as mentioned by #xengravity or you can download bootstrap.css.map file of your bootstrap version and add it in your directory.
I have an .aspx page that includes an <img> tag. When the page is displayed, the image's size box is correct, so I assume it knows where to find the image; however, no image appears (the "red X box" appears in IE).
Here's the page source (well, the significant parts of it, anyway):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Main Page</title>
</head>
<body>
<div id="HeaderImage">
<!-- "Why is this in a table?"
So the header text can be centered vertically with the logo -->
<table>
<tr>
<td>
<img src="/content/images/Header Image.png" alt="Header Image" />
</td>
<td>
<h2>Main Page</h2>
</td>
</tr>
</table>
</div>
<hr />
<p />
</body>
</html>
Note that if I change the URL of the image source, the image box is only big enough to hold the alt text, so I am assuming that it is able to find the image and get its size. Why wouldn't the image itself display?
Remove the space and see if that works, otherwise verify your path is correct via right clicking on the image or using a browser tool (F12 Tools for Internet Explorer, Firebug for Firefox or Chrome Developer Tools).
Er...did I forget to mention that this was in a login page being displayed by forms authentication?
The problem was caused by not having an explicit tag within a location tag pointing to the folder with the images in it in my web.config file.
(By the way...spaces in the filename had nothing to do with it.)
Here is my test (stripped down to minimum)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.file-form-active-inputs { margin-left : 2px; }
</style>
<title></title>
</head>
<body>
<form>
<input type="file" name="_206_0_100070" size="60" id="HASH(0x331b400)" class="form-active-inputs">
<button class="file-form-active-inputs">
Button with same height as 'browse' button to the left
</button>
</form>
</body>
</html>
Is there any way to match button height
to a IE7-8 input type="file" "browse" button height?
Assuming that you just want to make sure that the buttons match, one possible hackish way to do this is instead of trying to match the height of your clear button to the File Upload button, you style the File Upload button to match that of the clear button. The following Trick shows you how to do this using CSS or Javascript.
If you decide to follow this approach I would recommend that you do it with Javascript, because it allows you to have clean markup for all other browsers, but add in the additional elements only for IE.
Hopefully someone has some simple CSS to do what you are originally asking for rather than having to follow this technique, since it involves more work.
Good Luck