tejasamrute

@font-face {  font-family: 'AEBL';  src: url('fonts/AEBL.eot');   src: url('fonts/AEBL.eot?#iefix') format('embedded-opentype'),        url('fonts/AEBL.woff') format('woff'),        url('fonts/AEBL.ttf')  format('truetype'), }div {font-family: 'AEBL';}

you need 3 types of font extension to make it work on all browsers (TTF, EOT, WOFF).....u only have ttf

btw...i am not able to find AEBL font....are you sure it is not Abel font

http://www.cssplay.co.uk/menu/imap.html

http://www.tankedup-imaging.com/css_dev/rollover.html

Try these

well....we need to see your code before telling where are you going wrong

and do you also have your desired font in eot,woff,ttf extension?

http://www.sitepoint.com/highlight-image-map-area-hotspots-jquery/

check the source code of the map which suits you

<form>      <input type="text" placeholder="Search..." required>      <input type="button" value="Search"></form>

This a basic search bar.....inorder to enable searching you first have to decide which programming launguage you will use (PHP / .Net etc).

Assuming that you site doesn't look good in mobile and large monitors.......it is because of the resolution they use

Best way to solve it by making the site responsive which will fit all types of resolution

http://www.w3schools.com/bootstrap/default.asp

table td {	text-align:right;}table td.left {	text-align:left;}<table cellpadding="0" cellspacing="0" border="0">	<tr>    	<td class="left">This is the text on the left  </td>        <td>123.00</td>        <td>45.00</td>        <td>123.99</td>    </tr>        <tr>    	<td class="left">Another line</td>        <td>1.50</td>        <td>100.00 </td>        <td>0.90</td>    </tr>    </table>

There is a way

p{    direction:rtl;    text-align:justify;}<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>

http://www.w3schools.com/cssref/pr_text_direction.asp

this is the most perfect solution

<div class="row">        <div class="col-xs-12 col-md-4">             <div class="alert alert-info">A</div>    	</div>               <div class="col-xs-12 col-md-4 col-md-push-4">              <div class="alert alert-danger">C</div>       </div>           <div class="col-xs-12 col-md-4 col-md-pull-4">              <div class="alert alert-warning">B</div>       </div></div>

well...yeah...duplicate content is ofcouse bad......but if the content is not much or if there is an image......the solution can be worth

Adobe Dreamweaver.....you can make a website with clicks....dont evn hv to write the code*

* Conditions Apply

This is a nice manipulated design....In this banner there are 3 layers above each other

1) Flat gray colour background which covers the whole screen...which u can see on upper side of the banner

2) House image which is rectangular and also covers whole screen

3) Gray shape which can be seen on lower side of the banner (change in colour with step 1)

Jquery is applied to only Step 2

It is not that difficult unless you don't know what z-index is

Make sure you attach your custom css file after bootstrap css or else you will have to use !important after every style

@haris.....u can make a duplicate of C ( after B ) and place it after A.....and hide it for desktop version.....when the view port reaches mobile version.....make C ( after A ) visible .....and hide C ( after B )

<div class="row"><div class="col-md-8 col-sm-12">A</div><div class="col-md-8 col-sm-8 hidden-md hidden-lg visible-sm visible-xs">C</div><div class="col-md-4 col-sm-12">B</div><div class="col-md-12 hidden-xs hidden-sm visible-lg visible-md">C</div></div>

.subBubble a{    display:block;    width:100%;    height:100%;    padding-top:20px; /*As Desired*/    }

 span.paren span:hover {        background: lightgray;    }

with this code...it will only highlight (and inner part)

is this what are you looking for????

you need to add another <td> after the left container

<table style='border: 0; width: 100%; table-layout: fixed' id='blogTable' class='wsite-not-footer'>     <tr>         <td valign='top'>             <div id='879090667725960140-blog' class='blog-body' style='float: left;'>              Left Content are here             </div>         </td>        <td valign='top'>             <div>              New Side Bar   /* This is the New Sidebar which you want to add */             </div>         </td>        <td valign='top'>             <td class='blog-sidebar' valign='top'>               <div id='879090667725960140-sidebar' class='column-blog'><div class='blog-sidebar-separator'>              Extreme Right Sidebar             </div>         </td>     </tr></table>

you will have to adjust widths of extreme left and extreme right container....in order to fit another sidebar

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */}

you will need eot,woff,woff2 with ttf to show the desired font in all browsers....you can easily convert ttf to other formats with http://www.everythingfonts.com

i managed to solve the issue.....well it was stupid....somehow my respond.js was corrupt even though i downloaded from GitHub..'strange'

you will have to use

position:fixed;

for the element you want to keep always at the top

I have noticed that if i choose browser mode 8 with document mode 8...it shows perfectly.....but it has to be done manually......is there any way to force this....e.g if a visitor has come from ie8.....his browser mode and document mode would be forced to ie8

I am using IE9.

i have attached images of my view in document mode 7 & 8

Are you checking in browser mode or document mode?...in developer tools

<!DOCTYPE HTML><html lang="en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <script src="bootstrap.min.js"></script>     <!--[if lt IE 9]>      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>      <script src="respond.min.js"></script>    <![endif]-->    <title>Untitled Document</title><style type="text/css">.container-fluid {	background-color:pink;}</style></head><body><div class="container-fluid">  <h1>Hello World!</h1>      <div class="row">        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>        <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>      </div></div></body></html>