So I'm using Dreamweaver and the bolded words appear on the DW editor but when I open the webpage in Chrome, I don't see the words bolded. Oh and the funny thing is that Safari and Firefox seem to display the bolded words while Chrome cannot. Which leads me to believe this is a Chrome-only issue. What's going on with my Chrome browser?
Here's a snippet of code that uses bold text:
<strong><br>
<h4>Membership</h4>
</strong>
<p dir="ltr"><strong>Eligibility:</strong> All users must be <strong>18</strong> years of age or older and be eligible to legally work in the U.S.</p>
<p dir="ltr"><strong>Account:</strong> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
<p dir="ltr"><strong>Profile:</strong> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
<strong> <br>
This is what sets up the HTML styling:
<head>
<!-- This needs to be on every HTML page -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>ProConnect</title>
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/legal.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta http-equiv="refresh" content="" >
<link type="text/css" rel="stylesheet" href="css/legal.css"/>
</head>
The CSS:
.container{
margin-right: auto;
margin-left: auto;
}
p{
text-align: justify;
}
Whenever you import custom fonts, be sure to include all weights and styles that you will need. Normal font weight is usually 400, and bold is usually 700. The style sheet below would include pretty much everything you would need for the Roboto font.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
you can use this simple method to bold words
use <b> tag to bold words
just adding <strong> tag your word wont be bold you have too add this css rule to it font-weight: bold; only then it will work
<b>bold word</b> normal text
<b><br>
<h4>Membership</h4>
</b>
<p dir="ltr"><b>Eligibility:</b> All users must be <b>18</b> years of age or older and be eligible to legally work in the U.S.</p>
<p dir="ltr"><b>Account:</b> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
<p dir="ltr"><b>Profile:</b> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
<b> <br>
i use this method to bold in my website
You want to add <b></b> tag to your HTML file instead of strong or you can do it by CSS also like this:
strong {
font-weight: strong;
}
You can also keep your texts in normal way and just add some colours to look or more attractive or eye-catching:
strong {
color: red;
}
Remember one thing I used CSS including strong tag because you have kept that word which you want to decorate in <strong></strong> tag.
Related
Friends, I am working on making a website in which there is an Index.html page, I have defined the title of that page to be for example "Some title here" and a favicon, both of them are getting displayed on localhost but not on server.
I am using Asp.net MVC but the page is basic html i.e. not razor view or anything. The code of tag of that page is
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Some title here</title>
<link rel="shortcut icon" href="../gfiwebsite/img/favicon.png">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Added
I found that when I hit the temp url of the server that I am using, I am able to see the favicon and title but when I map it to my domain which I have purchased from godaddy, the favicon and title just goes away, any idea why?
Any thoughts?
You can use an url helper to generate the link to the favicon. Assuming that you have placed the file inside img/favicon.png:
<link rel="shortcut icon" href="#Url.Content("~/img/favicon.png")">
The ~ indicates the root of your website.
In asp.net, elements aren't the same as in regular .html files.
Do you have the following syntax at the top of your page?
<%# Page Language="C#" Title="Default Title" %>
If you do, you should try to remove the title attribute and see if it works now. If you don't, try doing it ;) (Been a while since I've worked in classic asp myself)
Do you have <head runat="server">? Because <head> doesn't work.
ASP.NET does not use the same flat html as a regular .html file.
If you really want to work without razor and such, this might be an interesting read:
http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/specifying-the-title-meta-tags-and-other-html-headers-in-the-master-page-cs
edit: You said it works on a temporary domain but not on Godaddy? Are you 100% sure that Godaddy doesn't have any strange caching enabled?
I have run into this issue a great many times... Webhosts introducing certain types of caching that nearly always interfere with these things.
Also, open your console, and go to "network". Make sure you leave it open and make sure "disable caching" is checked. Now, refresh the website.
I have an asp.net web form with a head section like this:
<head runat="server">
<title>Web application</title>
<link rel="Stylesheet" href="resources/material.min.css" />
<link rel="Stylesheet" href="resources/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="resources/favicon.ico" />
<script type="text/javascript" src="resources/material.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=10"/>
</head>
The application won't work in Internet Explorer compatibility mode, which unfortunately our firm enables in IE by default. Normally I fix this by adding the meta tag above, but for some reason this isn't working on this page. If I move the meta tag to the top of the <head> section, before the style sheets, it does work. So my question is this: is there a reason the order matters? I'm baffled.
Yes, order matters. The browser procedurally processes HTML. If the meta tag is first, Internet Explorer knows to use Compatibility Mode almost as soon as it starts parsing the document. Otherwise, it's already started parsing and processed everything else - your CSS, JavaScript, not in Compatibility Mode.
I was practicing this website
http://www.lingulo.com/tutorial-content/html5/
While comparing this website with my non-responsive website I was frightened which part of the following header code turns the website mentioned above a responsive one?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Page Title</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js\/vendor\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
<script src="js/vendor/jquery.slides.min.js"></script>
<script src="js/script.js"></script>
Yes and No and it depends. Lets say for example the <picture> tag of HTML5 is a responsive one but you can't say the same for the other tags.
Basically the responsiveness is all about fitting your content inside every possible layout of the output device without impacting the design. This is achieved by having the width,height in %'s, Media queries and CSS along with JavaScript etc.
For ease of development I would recommend you to start with Bootstrap, which is a light responsive framework used to build responsive websites and easy to use.
It's all about the stylesheet.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
Is the applicable line.
HTML5 is a structural markup language - it is simply a set of stylable containers around content. In terms of responsiveness, HTML5 has almost no benefit over HTML4 (there are many other good reasons to use HTML5 though).
The "responsive" part of a website is achieved in how those containers are organised and then styled.
This is usually done in the CSS by using media selectors to specify styles for specific display widths (so, smaller phones or even non-maximised windows have different styles compared to wider screen monitors). Javascript is then used to provide a bit more of an enhancement for behaviour that CSS cannot achieve alone.
So, you want to take a look at the stylesheet located at css/style.css
and a good introduction: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
You can make your website responsive by combining HTML5 and CSS3. Alone, I don't think so. you can refer to below link:
https://msdn.microsoft.com/en-us/magazine/hh653584.aspx
So I've downloaded a font from Fontsquirrel which has all the letters used in Estonian language. It works fine in the browser when I use all the common letters, but as soon as I use the letter "ž", it's not displaying the correct font.
This is how my HTML looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>8 Delfiini | Massaažiga argipäevast kõrgemale</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> <!--page wrapper-->
<section id="avaleht">
<h1>Massaažiga argipäevast kõrgemale</h1>
</section>
...
And the CSS:
h1 {
font-family: 'alluraregular';
font-size: 6em;
text-align: center;
}
I changed the "lang=en" to "lang=et", but it didn't work.
This is the result:
Is there a way to make this work properly? Thank you!
The FontSquirrel webfont generator by default uses “Basic subsetting” for “Western languages”, which effectively means ISO Latin 1, designed for languages of Western and Northern Europe, lacking e.g. ž, z with caron. To overcome this, select “Expert” in the user interface, then either “No subsetting” or “Custom subsetting” with suitable options (either “Latin Extended-A” or “Estonian” should handle the issue). Since the font is small, “No subsetting” is the best option.
I'm using bootstrap 3 and have to support ie7. Ideally I would like to use font for icons. They work great in all other browsers except ie7 :(
The icons appear fine using ie on the font awesome website - I have had a look at what's different and I cant see anything out of th ordinary. I've followed the instructions and added the css in order etc...
I'm not using less. Here is a link to my test site https://googledrive.com/host/0B8UWGEiox1HOZnV6ZTA3bzNvMTA/testsite.html
The test site show font awesome using ie tester however that isnt 100% accurate. I am using true ie7 to test on and the font is simply squares.
Please can anybody see what's going on here as I'm at an end with it!
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" media="screen">
<!--[if lt IE 8]>
<link href="css/main-ie7.css" rel="stylesheet">
<![endif]-->
<link rel="stylesheet" href="css/font-awesome.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
Font Awesome version 4.0.1 does not support IE7, see the bottom of their getting started page: http://fortawesome.github.io/Font-Awesome/get-started/
Version 3.2.1 has support, see their IE7 section at the bottom of their 3.2.1 getting page
http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/
There is an app called Icomoon that can create custom icon fonts, and can include icons from Font Awesome. Their old version of the application generates a Javascript file for IE7 that will allow the icon fonts to be used, the old version of the app is here http://icomoon.io/app-old/
Perhaps the charset is assumed wrongly. Try including <meta charset="utf-8"> in the <head>.
If your icons are not intented to change at runtime, you can use the following CSS to add support for IE6 and IE7 for whatever icons you need :
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
If your icons are intended to change at runtime, you could do something like this instead :
.icon-glass {
*top: expression(0, this.innerHTML = '');
}
Unfortunately, this second approach is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.