/    Sign up×
Community /Pin to ProfileBookmark

Problem with display of webpage in Internet Explorer

Copy linkTweet thisAlerts:
Jul 01.2014

Hi Guys,
I was just trying to make a website while learning css and html. i wrote the following code but it shows perfectly in chrome, firefox but in internet explorer its not showing exactly like chrome not font not hove option Please help me i am new in this field.

Web display in IE : [url]http://s4.postimg.org/vh1neyihp/image.png[/url]

Web display in chrome and firefox: [url]http://s28.postimg.org/pm2a1vvxp/chrome.png[/url]

[CODE]<html>

<title>My Home Page</title>

<head>
<link href=’http://fonts.googleapis.com/css?family=Fjalla+One’ rel=’stylesheet’ type=’text/css’>
<link rel=”shortcut icon” href=”http://pbs.twimg.com/media/BDRs9CpCEAEGIXU.png”/>
<style>

body {
background-color:#fff;
font-family: ‘Fjalla One’, sans-serif;
color:#F5FBEF;
min-height:1500px;
}

.header {
width: 100%;
border-bottom: 2px solid #04B4AE;
height:50px;
background:silver;
position:absolute;
top:0px;
right:0px;
left:0px;
z-index:-1;
}

h1,h3,h4 {
text-align: center;
}

#wrap {
width:100%;
}

.menu {
width: 15%;
padding: 10px;
margin: 0px;
float:left;
background-color:#04B4AE;
border-bottom: 5px solid #0B615E;
border-top: 5px solid #0B615E;

}

.line{

height:1px;

background:white;

border-bottom:1px solid white;

}

.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
display:inline-block;
border-top: 10px solid #fff;
}

h2 {
display:inline-block;

}

a:link, a:visited {
display: block;
font-weight: bold;
color: #ffffff;
background-color: #04B4AE;
width: 95%;
text-align: center;
padding: 5px;
text-decoration: none;
}

a:hover, a:active {
background-color: #fff;
color:#04B4AE;
}

#mcon
{
min-height: 1000px;
margin: 0 0 0 250px;
padding: 20px;
background:#F2F2F2;
border: 2px solid #04B4AE;
color:#585858;
}

</style>

</head>

<body>

<div class=”header”>

<p>Welcome to Free Movies World</p>

</div>

<br><br><br><br><br>
<div id=”wrap”>

<div class=”menu “>

<h2>Generes</h2>&nbsp;&nbsp;&nbsp;<div class=”arrow-down”></div><div class=”line”></div>

<a href=”#”><h3>All</h3></a><div class=”line”></div>
<a href=”#”><h3>Action</h3></a><div class=”line”></div>
<a href=”#”><h3>Adventure</h3></a><div class=”line”></div>
<a href=”#”><h3>Animation</h3></a><div class=”line”></div>
<a href=”#”><h3>Comedy</h3></a><div class=”line”></div>
<a href=”#”><h3>Drama</h3></a><div class=”line”></div>
<a href=”#”><h3>Fantasy</h3></a><div class=”line”></div>
<a href=”#”><h3>Horror</h3></a><div class=”line”></div>
<a href=”#”><h3>Sci-Fi</h3></a><div class=”line”></div>
<a href=”#”><h3>Thriller</h3></a><div class=”line”></div>
<a href=”#”><h3>War</h3></a>

</div>
<div id=”mcon”>

<h4> My movies Section </h4>
</div>

</div>
</body>
</html>
[/CODE]

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Jul 01.2014 — [B]<div class="menu ">[/B] should probably be [B]<div class="menu">[/B]. Note the trailing space between [B]menu[/B] and the ending quote.

That stated, it works as-is for me in IE11. Looks exactly as it does in Chrome and FF. Which begs the question, "Which IE version are you running through Wine and Ubuntu?"

Beyond just working, your page has some, umm, issues. <title> tags outside the <head> tags, using <h>eading tags for how they render, not their semantic meaning, no <h1>, excessive use of <br> to space sections, &nbsp; to position elements, etc.

With that in mind, I've taken the liberty of rewriting some of your code (HTML and CSS). There's more that could be done (not perfect by any stretch of the imagination), but this is a start for you to play with.

[code=html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>My Home Page</title>

<link href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type='text/css'>
<link rel="shortcut icon" href="http://pbs.twimg.com/media/BDRs9CpCEAEGIXU.png">
<style>

body {
background-color:#fff;
font-family: 'Fjalla One', sans-serif;
color:#F5FBEF;
min-height:1500px;
}

/* Major page section styles */
header {
width: 100%;
border-bottom: 2px solid #04B4AE;
height:45px;
background:silver;
position:absolute;
top:0px;
right:0px;
left:0px;
z-index:-1;
}

section {
margin-top:95px;
width:100%;
}

nav {
width: 15%;
padding: 10px;
margin: 0px;

float:left;
background-color:#04B4AE;
border-bottom: 5px solid #0B615E;
border-top: 5px solid #0B615E;
font-size:1.25em;
font-weight:bold;
}

article {
min-height: 1000px;
margin: 0 0 0 250px;
padding: 20px;
background:#F2F2F2;
border: 2px solid #04B4AE;
color:#585858;
}

/* Heading styles */
h1 {
font-size:1em;
font-weight:normal;
margin-left:3px;
}

nav>h2 {
display:inline-block;
font-size:1.25em;
font-weight:bold;
}

article>h2 {
text-align:center;
font-size:1.25em;
font-weight:bold;
}

h3,h4 {
text-align: center;
}

/* Link styles */
nav>a:link, nav>a:visited { /* Adding nav> separates the main navigation links from "regular" text links (see below) */
display: block;
font-weight: bold;
color: #ffffff;
background-color: #04B4AE;
text-align: center;
padding: 20px 5px 20px 5px;
text-decoration: none;
}

nav>a:hover, nav>a:active {
background-color: #fff;
color:#04B4AE;
}

a { /* Play with these styles to make regular text links look as you want */
text-decoration:none;
}

a:hover, a:active { /* Play with these styles to make regular text links look like you want */
color:#04B4AE;
text-decoration:underline;
}

/* Other classes */
.line {
height:1px;
background:white;
border-bottom:1px solid white;
}

.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
display:inline-block;
border-top: 10px solid #fff;
margin-left:10px;
}

</style>

</head>

<body>


<header>

<h1>Welcome to Free Movies World</h1>

</header>

<section>

<nav>

<h2>Generes</h2><div class="arrow-down"></div><div class="line"></div>

<a href="#">All</a><div class="line"></div>
<a href="#">Action</a><div class="line"></div>
<a href="#">Adventure</a><div class="line"></div>
<a href="#">Animation</a><div class="line"></div>
<a href="#">Comedy</a><div class="line"></div>
<a href="#">Drama</a><div class="line"></div>
<a href="#">Fantasy</a><div class="line"></div>
<a href="#">Horror</a><div class="line"></div>
<a href="#">Sci-Fi</a><div class="line"></div>
<a href="#">Thriller</a><div class="line"></div>
<a href="#">War</a>

</nav>

<article>

<h2>My movies Section</h2>
<p><a href="#">sample link</a></p>

</article>

</section>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@deathshadowJul 02.2014 — Well.. for starters what makes navigation a bunch of mini sub-sections with NO CONTENT? That's what numbered headings MEAN, so you're using them wrong. Again, h1 is the heading under which all content on the page is subsections, h2 is the start of a subsection of the h1. H3 is the start of a subsection of the H2 before it, so on and so forth. Since those AREN'T subsections of the page, and are instead links to categories and/or other pages, they shouldn't be numbered headings in the first place. You're basically saying "My Movies section" is a subsection of "war"!

... and no, numbered headings do not mean "bigger text".

Second, no matter what the HTML 5-tards might try to say, block level tags -- like H3, have no business inside a block level tag -- like A. Anchors are inline-level, don't put block level tags inside them! NOTE, I'm saying LEVEL, not CSS display state; two unrelated things that just happen to sometimes default the same.

I would suggest you read this reference in it's entirety:

http://htmlhelp.com/reference/html40/

Paying particular attention to the "contents" and "contained in" sections of each tag. Let's use A as an example:

http://htmlhelp.com/reference/html40/special/a.html

Contents - Inline elements except A

Contained in - Block-level elements, inline elements except A and BUTTON

Learn those, or at least be aware of them and look them up on a reference like that one as needed.

Really your markup doesn't make any sense. You have a obvious heading under which everything on the page is a subsection, so why is it a DIV+P instead of a H1? Those aren't subsections, why are they H2 and H3? That last one isn't a subsection of the navigation, why is it a H4? You seem to be using line-breaks to do padding or margin's job...

You also seem to be setting a whole bunch of things in the CSS that shouldn't be needed and/or actually do anything, like the min-height on body, width:100% on a block level tag (they do that already), and so forth...

First step, let's get your markup up to snuff:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
<i>&gt;</i>&lt;head&gt;

&lt;meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/&gt;

&lt;meta
http-equiv="Content-Language"
content="en"
/&gt;

&lt;meta
name="viewport"
content="width=device-width; height=device-height; initial-scale=1.0"
/&gt;

&lt;link
type="text/css"
rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Fjalla+One"
media="screen,projection,tv"
/&gt;

&lt;link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/&gt;

&lt;title&gt;
Free Movies World
&lt;/title&gt;

&lt;/head&gt;&lt;body&gt;

&lt;h1&gt;Welcome to Free Movies World&lt;/h1&gt;

&lt;div id="columnWrapper"&gt;

<i> </i>&lt;div id="extras"&gt;
<i> </i> &lt;h2&gt;Genres &lt;span class="utfSymbol"&gt;&amp;#x25BC;&lt;/span&gt;&lt;/h2&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Adventure&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Animation&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Comedy&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Drama&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Fantasy&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Horror&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Sci-Fi&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;Thriller&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="#"&gt;War&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i>&lt;!-- #extras --&gt;&lt;/div&gt;

<i> </i>&lt;div id="content"&gt;
<i> </i> &lt;h2&gt;My Movies Section&lt;/h2&gt;
<i> </i> &lt;p&gt;Assume you'd have some content here.&lt;/p&gt;
<i> </i>&lt;!-- #content --&gt;&lt;/div&gt;

&lt;!-- #columnWrapper --&gt;&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;

Logical heading orders, headings on what SHOULD be headings, list for the list of choices. The span.utfSymbol is there as not all utf symbols are supported by all fonts, so we want to target that manually. I'd use a UTF-8 character instead of the border trick.

I ALWAYS write my HTML separate from the CSS file, even in testing. 1) it's what your finished product should be anyways, 2) I find it easier to have two editor windows open side-by-side than it is to keep scrolling up and down between markup and style.

Getting close to the post size limit... to be continued.
Copy linkTweet thisAlerts:
@deathshadowJul 02.2014 — The CSS I'd use is pretty simple:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,
table,tr,td,th,p,img {
margin:0;
padding:0;
}

img,fieldset {
border:none;
}

hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}

@media (max-width:600px) {
* {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}

body {
font:normal 85%/150% "fjalla one",sans-serif;
color:#F5FBEF;
background:#FFF;
}

h1 {
font:bold 125%/150% "fjalla one",sans-serif;
padding:0.5em;
margin-bottom:4.5em; /* 3 lines */
color:#086;
background:#CCC;
border-bottom:2px solid #0BA;
}

h2 {
font:bold 150%/120% "fjalla one",sans-serif;
padding-bottom:0.33em;
}

#columnWrapper {
margin:0 1em;
overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats legacy IE */
}

#extras {
width:10em;
float:left;
display:inline; /* prevent legacy IE margin doubling */
margin-right:1em;
background:#0BA;
border:solid #065;
border-width:5px 0;
}

#extras h2 {
padding:0.66em 0.33em;
}

#extras ul {
list-style:none;
margin:0 0.5em;
}

#extras li {
display:inline; /* basically removing them from flow, preventing IE staircase bug */
}

#extras li a {
display:block;
padding:1em;
text-align:center;
text-decoration:none;
color:#FFF;
border-top:2px solid #FFF;
-webkit-transition:background 0.3s, color 0.3s;
-moz-transition:background 0.3s, color 0.3s;
transition:background 0.3s, color 0.3s;
}

#extras li a:active,
#extras li a:focus,
#extras li a:hover {
color:#0BA;
background:#FFF;
}

#content {
overflow:hidden; /* prevent float de-indent */
zoom:1; /* trip haslayout, prevent float de-indent legacy IE */
padding:1em;
color:#555;
background:#F2F2F2;
border:2px solid #0BA;
}

.utfSymbol {
font-family:arial,'andale mono',freesans,lastresort,sans-serif;
}

I always start out with a reset. There are smaller ones, but those can cause issues with form elements. There are larger ones, but they tend to bloat out the page changing values that don't need to be reset. This one is 'just right'.

Oh, and beware that for some jacktarded reason Google webfonts are NOT supported in anything less than IE9 now, for no fathomable reason since webfonts implemented according to the specification works all the way back to IE 5.0, since they just copied how M$ did it. Generally I try to avoid webfonts for being bandwidth hogs, but if I were to use them, I'd host them myself instead of relying on Google for it. Their fonts while easy to add, just "expels air on the proverbial equine of short stature" in terms of implementation.

I've tossed up a live copy on my server here:

http://www.cutcodedown.com/for_others/ncrixz/template.html

So you can see it in action. As with all my examples the directory:

http://www.cutcodedown.com/for_others/ncrixz/

is wide open for easy access to the bits and pieces.

I tried to comment it enough you should be able to grasp the how/what/why of it.

Moving forward with this, I'd suggest implementing a max-width container DIV around the entire layout, or at least set a max-width on #columnWrapper so that really long lines of text in the content don't get hard to read. That's called "semi-fluid'" design and is one of the three things ALL layouts written in this day and age should be.

The other two being elastic -- which this is since I declared widths and paddings in EM's... and Responsive, which you're not quite at the point of thinking about yet. I usually set my responsive layout breakpoints based on the content or a reasonable facsimile of future content, and that's something you're decidedly lacking right now.

There's a reason I usually start with a flat plaintext of the page's content as if markup never even existed before I even START thinking about adding tags, and usually add all my semantic tags (headings, lists, paragraphs) before I even THINK about applying layout with CSS, and don't usually add my DIV until I start styling, and then only when needed.

In any case, hope this helps.
Copy linkTweet thisAlerts:
@ncrixzauthorJul 02.2014 — WOW *.* You guys are just amazing. I am new to css thats why my coding sucks. But Thank you guys for supporting a newbie i will be very very grateful to you guys. And i will try to re-code it perfectly according to what you have taught me.
Copy linkTweet thisAlerts:
@ncrixzauthorJul 02.2014 — :Kevin2

Sir, all the points you taught i understood but i have one question in section why you gave width 100%?
Copy linkTweet thisAlerts:
@Kevin2Jul 02.2014 — Because it was part of your original code and I blindly copy/pasted it. ? I took your original #wrap CSS and renamed it. As deathshadow points out, not needed on block-level elements.
Copy linkTweet thisAlerts:
@ncrixzauthorJul 05.2014 — :deathshadow

Sir, First of all i must thank you for helping me and the triangle thing it was amazing to know which i never knew before. Secondly, i have some questions related with the html and css ?

  • 1. for what do we use the viewport and media="screen,projection,tv" (in link)?
    [CODE]<meta
    name="viewport"
    content="width=device-width; height=device-height; initial-scale=1.0"
    />[/CODE]


    • 2.@media (max-width:600px) what is this media ?

  • 3. And with every font tag in css you used two percentage. e.g (font:bold 125%/150% "fjalla one",sans-serif; ) what it is used for and is it mandatory to use like this ?


    • 4.In #columnWrapper you used zoom and overflow hidden. Didn't understood that too ?

  • 5. Why did we used so many fonts in utf symbol ?
    [CODE]utfSymbol {
    font-family:arial,'andale mono',freesans,lastresort,sans-serif;
    }[/CODE]


    • Other i understood nicely and perfectly. taught with excellent references and short and exact codes.

    Regards,

    You Student

    ncrixz
    Copy linkTweet thisAlerts:
    @deathshadowJul 05.2014 — Good questions!

    1. for what do we use the viewport[/quote]
    That viewport META tells mobile browser not to lie about their width and height, or to use a different default 'scaling' -- it is NO guarantee it will work as some devices will STILL lie about their display size (reporting half or even a third their actual physical resolution -- see Apple's "retina" displays or the various LG Nexus units -- like the new 3 with the 2560x1440 display that's 5" diagonal?!?)

    It makes it a little easier to design for mobile -- basically it's telling mobile browsers we know what we're doing, so try not to second guess us so much.

    media="screen,projection,tv" (in link)?[/quote]
    the MEDIA attribute says what that LINK is to be applied to. The majority of normal user-agents (browsers) will use screen for displaying... on screen. Some kiosks and browsers in 'full screen' operation will use projection instead of screen, or if projection is not stated apply their own style over your own, so it's good to include that one. Some devices report as 'tv' in the same manner.. they either ignore screen, mix screen with tv, or if tv not stated override your style.

    It's just generally safest to declare those three together.

    It also means your screen layout won't (or at least shouldn't) be sent to PRINT... or AURAL... or TELETYPE...

    http://htmlhelp.com/reference/html40/values.html#mediadesc

    List all the types. It's also why the 'style' attribute really shouldn't be used in your markup; it's sent to "all" and it might not make sense on "all".

    Omitting a MEDIA target on a CSS <link> the same as saying "all" -- which basically means sending CSS to targets where it may not apply, be useful, or even desired.

    2.@media (max-width:600px) what is this media ?[/quote]
    Any screen smaller than 600px we can 'kind-of' assume is a scaling mobile browser -- such browsers apply another text-resizing we may or may not want, hence the overrides to text-size-adjust inside it. I use the media query on this so as to avoid sending those to desktop browsers, as on OSuX Safari setting -webkit-text-size-adjust breaks the ability to zoom in the browser -- a laugh as Safari on iOS zooms just fine with it set... but that's crApple for you.

    And with every font tag in css you used two percentage. e.g (font:bold 125%/150% "fjalla one",sans-serif; ) what it is used for and is it mandatory to use like this ?[/quote]
    The second number is the line-height. I have a rule -- you change the font-size, you change the line-height. By the time you say "font-size:125; line-height:150%;" it's damned near as long as the full condensed font property as shown, so I just go ahead and say the whole thing so I can clearly see when the font is changed everything at once.

    Line-heights don't inherit 'properly' -- they're unpredictable cross-browser, resulting in a lot of sites that TRY to use dynamic (%/em) fonts having overlapping lines as the line-height failed to grow with the font.

    A classic example of this would be:
    &lt;div id="linkHeights"&gt;
    &lt;div class="test1"&gt;
    Test
    &lt;/div&gt;
    &lt;div class="test2"&gt;
    Test
    &lt;/div&gt;
    &lt;/div&gt;

    With this CSS:
    #linkHeights {
    font-size:20px;
    line-height:200%;
    }

    #linkHeights div {
    font-size:14px;
    background:#CCC;
    }

    #linkHeights .test2 {
    line-height:200%;
    background:#EEE;
    }

    div.test1 will be taller than div.test2 -- when both should be line-height:200%;

    There is a LIE propagated by halfwits at places like SitePoint where if you omit a metric:

    line-height:2;

    It will inherit properly and remove all those issues, but it's a bunch of bull since it does NOT work in IE8, it does NOT work in IE10 (a laugh since it works in 9 and 11), it does NOT work in FF if you change the browser default font-size, it does NOT work in "REAL" Opera (as opposed to the pathetic crippleware that is ChrOpera)... But of course you show them screencaps of it broken and instructions on how to break it, they stick their heads in the sand crying "Wah wah wah, it's not so" like a bunch of five year olds.

    Sorry, pet peeve. This was the last straw that removed the last bit of respect I had for the ONE [i]surviving[/i] staff member on a certian forums.

    4.In #columnWrapper you used zoom and overflow hidden. Didn't understood that too?[/quote]
    overflow:hidden and overflow:auto trips a behavior where floats will be contained. You use this and you don't need any "clearfix" or clearing DIV or any of that nonsense.

    The problem is, IE prior to version 8 either doesn't do that (IE6/lower) or randomly ignores it for christmas knows what reason (IE7). There is a internal condition in IE called "haslayout". It was originally made to speed up rendering on elements that didn't need it's dimensions or positioning recalculated all the time -- elements where "haslayout" is false don't report their position or size properly to CSS and in some cases JS. There are certain values in CSS that can set 'haslayout' to true -- a fixed width or height, a percentage width or height... and zoom.

    A lot of people used to ***** about using zoom as a haslayout trigger as it is considered 'invalid CSS" and was a proprietary IE value... but in this age of non-CSS3 masquerading as such with vendor prefixes that arguement holds water like a steel sieve.

    MOST layout issues in IE8 and earlier compared to other browsers can be fixed by simply using a haslayout trigger, so if you care about anyone on anything older than IE9, it's good to know when to use it. The laugh is most of the people who poo-poo haslayout either have disastrously broken layouts on anythign less than IE10, or worse waste several K on hacks and endless IE conditional nonsense in the markup all to avoid simply saying "zoom:1;" once or twice in their CSS. :/

    Haslayout fixes width, height and absolute positioning of a containers child elements, and also trips a float wrapping behavior just like overflow:hidden does on modern browsers.

    Zoom itself can also fix some layout bugs in IE (IE7 is notorious for this) that other haslayout triggers do not work with -- the 'staircase bug' on floated LI for example; you can either remove the LI from flow by setting them to display:inline and not floating them, but that's not compatible with dropdown menus in anything prior to IE8, or you can just put zoom on it.

    5. Why did we used so many fonts in utf symbol ?[/quote]
    Not all fonts have complete, or even partial support for the enhanced unicode characters. In the case of this one finding a font for non-Windows users is something of a craps shoot -- case in point helvetica would display that pesky unrecognized character symbol, and that's the most commonly declared sans-serif font people use for targeting OSX.

    So we need a drop-through list that covers as many 'reasonable' bases as possible.

    Arial - windows, MAYBE other OS if the M$ font pack is installed

    Andale Mono -- Some mac's, some linux, even some windows.

    Freesans -- Some linsux distros

    Lastresort -- Modern OSX (10.4 / newer) [i]Tear my life into pieces...[/i]

    Remember, even if you're using webfonts, you should have a font-stack to drop through on. That's why even if designing to plain sans-serif, you use something like: arial,hevletica,sans-serif;

    ...and of course EVERY font stack should have the parent family last, hence sans-serif. We can only hope if it drops through to here the character is supported.

    There's a reference I use a lot to try and reduce the graphics on pages by leveraging characters on FileFormat.info... If you dig into the geometric shapes code-block:

    http://www.fileformat.info/info/unicode/block/geometric_shapes/utf8test.htm

    If you click on one of the characters, on it's page you'll find a link to "fonts that support xxx" -- which goes to a page like this one:

    http://www.fileformat.info/info/unicode/char/25bc/fontsupport.htm

    You then have to figure out which ones have that character available. Interestingly "real" Opera (Presto based) and FF will try to fall back and implement it with an internal fallback if possible when a extended unicode character is not found in the declared font -- sadly we have to state the massive stack mostly for khtml/webkit/blink based browsers (same thing really) and IE -- which aren't smart enough to do that. ?

    Hope that clears things up -- any more questions fire away.
    Copy linkTweet thisAlerts:
    @ncrixzauthorJul 08.2014 — :deathshadow

    i have add more things to my web check it and i am sure this time i will get less errors. please check it on my server

    home page :http://192.187.118.227/

    then click on transformers watch now and check sample page on which people will watch movies. Beside that shall i use title tag with every movie so people can easily search for the movie Am i right ?
    Copy linkTweet thisAlerts:
    @deathshadowJul 08.2014 — You should indeed have a unique TITLE tag inside HEAD for each page. Not just for search, but for usability.

    The TITLE tag exists to be shown on the window, tab, and the link on the SERP (search engine results page) -- if you have multiple tabs of the same website open, them all having the same TITLE makes it hard to know which is which.

    It's why I usually have some php like this:

    &lt;title&gt;
    ', (isset($pageTitle) ? $pageTitle . ' - ' : ''), $siteTitle, '
    &lt;/title&gt;

    Using hypens the same way the browser does... So for example in your case that would output something like:

    Transformers 2014 - Free Movie World

    Though your current one is ok, it would be nicer if the title of the movie was closer to the start since with many tabs open in crappy browsers that put tabs at the top, you can end up with just "watch" showing.

    Inside your page there's an issue with your content -- you've got multiple H1 and a SPAN doing P's job. Unless you are using HTML 5 and the pointlessly redundant "SECTION" or "ARTICLE" tags, you really should only have ONE H1 on the page, as everything on the page is a subsection of that. As such the movie title you have further in the page should be a h2 as it's a sibling of the menu, not it's parent. Also I don't think you need that span around the image. There isn't a whole lot you can do to a span that you can't do to a IMG directly.

    &lt;div id="movdata"&gt;
    &lt;h2&gt;Transformers 2014 watch online Free&lt;/h2&gt;
    &lt;img
    src="images/movimages/transformers.jpg"
    alt="Klematis"
    width="214" height="317"
    class="leadingPlate"
    /&gt;
    &lt;p&gt;
    Transformers: Age of Extinction is a 2014 science fiction action film based on the Transformers franchise. It is the fourth installment of the live-action Transformers film series and stars Mark Wahlberg in the lead role. A sequel to Transformers: Dark of the Moon, the film takes place four years after the invasion of Chicago. Like its predecessors, the film is directed by Michael Bay and executive produced by Steven Spielberg. The screenplay is written by Ehren Kruger, who has served as screenwriter since Transformers: Revenge of the Fallen. The film features an entirely new cast of human characters and is the first in the series to feature the Dinobots. Returning Transformers include Optimus Prime, Bumblebee, Ratchet, Leadfoot, and Brains. The film was released on June 27, 2014, in IMAX and 3D.
    &lt;/p&gt;
    &lt;!-- #movdata --&gt;&lt;/div&gt;

    I'd also suggest using a non iframe youtube embed, since iFrames don't exist in STRICT.

    &lt;!--[if IE ]&gt;
    &lt;object
    type="application/x-shockwave-flash"
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
    width="450" height="225"
    &gt;
    &lt;![endif]--&gt;
    &lt;!--[if !IE]&gt;--&gt;
    &lt;object
    type="application/x-shockwave-flash"
    codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
    width="450" height="225"
    data="https//www.youtube.com/v/r8HPIH5JCak?version=3"
    &gt;
    &lt;!--&lt;![endif]--&gt;
    &lt;param name="movie" value="https//www.youtube.com/v/r8HPIH5JCak?version=3" /&gt;
    &lt;param name="quality" value="high" /&gt;
    &lt;p&gt;
    &lt;a href="http://get.adobe.com/flashplayer/"&gt;
    Adobe Flash Player
    &lt;/a&gt; is required to view this content.
    &lt;/p&gt;
    &lt;/object&gt;

    It's a little hefty, but it's valid code and more likely to work across different browsers and OS than the IFRAME or EMBED versions.

    Hope this helps.
    ×

    Success!

    Help @ncrixz spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...