I need to center div's element for mobile devices. This is my website: http://transporttest.cba.pl/
On mobile devices description div goes to the left.I try to use media queries but it didnt works. What I'm doing wrong? On PC everything is ok. This is fragment of my code:
HTML:
<div id="opis">
<h2>
<p style="line-height: 3cm; ">
♦ Od 1991 roku w branży. <br/>
♦ 9 zestawów (ciągnik+ naczepa firanka, colimulde). <br/>
♦ Uprawnienia ADR u każdego kierowcy.<br/>
♦ Warsztat obsługujący auta ciężarowe.<br/>
</p>
</div>
CSS:
#opis
{
font-size: 25px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #F2F3F7;
height: auto;
width:72%;
display:inline-block;
text-align:center;
}
#container
{
text-align: center;
width:100%;
}
#media all and (max-width: 768px) {
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
left:25%;
top:25%;
position:absolute;
width:50%;
text-align:center;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
#media all and (max-width:640px){
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
width:72%;
height:auto;
display:inline-block;
text-align:center;
margin: 0 auto;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
For media queries to work, you need to include:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Between the tags.
https://www.w3schools.com/css/css_rwd_viewport.asp
Firstly, use <meta name="viewport" content="width=device-width, initial scale= 1.0">
As it will automatically fit you webpage to the width of the Device.
Secondly, you should use margin-left=auto;
margin-right=auto;
This will make the contents if your webpage to the center of the screen of the device.
You can also use text-align="center"
if that works for you.
P.S. The <meta name=viewport> should be definitely used in webpages as it helps the designer to format the webpage automatically to the screen width.
I'm trying to use a media query to make a div responsive on a site (using IE11).
This is my CSS:
#media screen and (max-width: 400px) { // Tried with "only screen" also
.divStyle {
background-image:none;
background-color:red;
background-position:right;
color:#fff!important;
height:140px;
position:relative;
top:-6px;
}
}
.divStyle {
background-image:url('/images/image.jpg');
background-position:right;
color:#fff!important;
padding:20px;
height:190px;
position:relative;
top:-6px;
}
I've also added the metatag in the Head section.
<meta name="viewport" content="width=device-width, initial-scale=1" />
But it still doesn't respond when I'm resizing the window.
In your case the rule without the media query follows after the one with the media query. So it overwrites the rule.
Change their order to this.
.divStyle {
background-image:url('/images/image.jpg');
background-position:right;
color:#fff!important;
padding:20px;
height:190px;
position:relative;
top:-6px;
}
#media screen and (max-width: 400px) {
.divStyle {
background-image:none;
background-color:red;
background-position:right;
color:#fff!important;
height:140px;
position:relative;
top:-6px;
}
}
I am having the weirdest issue with media queries. In my desktop browser, they work fine when it is resized. When I test on my iPhone (5C), the media queries are completely ignored.
EDIT
If I change max-width to something absurd like 3000px, the styles get applied just fine..
The media queries are the last items in my stylesheet, fyi. Here is the media query specific block:
#media only screen and (max-width:930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext{
width:90%;
font-size: 1.8rem;
line-height:2.7rem;
padding-bottom:40px;
}
#quotebox{background-color:green;}
#quotebox h3{ width:65%; }
#quotebox div{ width:40%;}
#contact ul li{
font-size:1.6rem;
width:90%;
}
.socialbox img{ opacity:1; }
.socialbox a{ margin: 0 20px;}
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
visibility: hidden;
opacity:0;
}
.hint:after, [data-hint]:after {
content: "-";
width:0;
height:0;
}
}
Anyone got any ideas?
Try adding: max-device-width to your media query along with this following snippet to the head of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
So your media queries should look like:
#media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext {
width:90%;
font-size: 1.8rem;
line-height:2.7rem;
padding-bottom:40px;
}
}
I'm developing a mobile version of my website. I have this code, tested on Galaxy S3, there is no scroll and the site displays okay.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="css/mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="css/desktop.css" />
</head>
On the iPhone 4 however, I get this. The image is a bit too large, and the top bar does not extend to the phone's full width. I assume that this is because iPhone's width is 480px, but how can I target the device and its width, ideally without creating another CSS file for it?
The top bar is set here, as border-top:
body { background-color:#F5F5F5; width: 100%; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; line-height: 14px; }
This can go in your primary stylesheet:
/*Target iPhone's screen width*/
#media screen and (max-device-width: 480px){
/*Do not set fixed widths, use %*/
body{
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:5px;
}
/*Set widths to 100%*/
div{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}
/*Create vertical navigation menu*/
#nav,#nav li{
float:none!important;
clear:both!important;
margin:0 0 20px 0!important;
display:block;
padding:0;
text-align:left!important;
width:100%;
}
#nav{
border:1px solid #ccc;
padding:5px;
border-radius:5px;
}
#nav li{
margin:0!important;
}
#nav li a{
display:block;
}
}
I want a dynamic webpage that looks nearly identical to this one that is for sale:
So I bought and implemented the US state map but it's becoming too small on my webpage:
I want the map to be larger. How can it be done? The entire code is large so I've taken out the relevant part that displays the map and I've taken out all the SVG data from this code block
<html dir="ltr" lang="en-IN" class="js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="keywords" content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories parts, Trucks, Other vehicles, Home Garden, Clothing, For Kids (Toys Clothes), Jewelry Watches, Hobbies, Sports Bicycles, Movies, Books Magazines, Pets, Tickets, Art Collectibles, Music Instruments, Computers Accessories, TV, Audio, Video, Cameras, Cellphones gadgets, Video games consoles, Job offers, Resumes, Services, Classes, Professional,Office equipment, Other, ">
<meta name="description" content="Find jobs, cars, houses, mobile phones and properties for sale in your region conveniently. Find the best deal among {{count}} free ads online!">
<title>Free classifieds in India - HipHeap.com</title>
<!-- CSS INCLUDES: -->
<link href="/static/india_files/index_in.css?234" rel="stylesheet" type="text/css">
<!--[if lt IE 9.]>
<script type="text/javascript" src="http://content.hipheap.com/js/3e233f78542ce91af211f0d166/html5shiv.js"></script>
<![endif]-->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="prerender" href="/">
<link rel="prefetch" href="/">
<!-- JAVASCRIPTS: -->
</script><script type="text/javascript" src="/static/1_files/jquery-1.js"></script> <link href="/static/css/index_usa.css?978923487" rel="stylesheet" type="text/css">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="/static/1_files/common_us.css?9823476" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="/static/theCss.css" />
<script src="/static/jquery.min.js" type="text/javascript"></script>
<script src="/static/us2Config.js" type="text/javascript"></script>
<script src="/static/theJava.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
addEvent('map_1');
addEvent('map_2');
addEvent('map_3');
addEvent('map_4');
addEvent('map_5');
addEvent('map_6');
addEvent('map_7');
addEvent('map_8');
addEvent('map_9');
addEvent('map_10');
addEvent('map_11');
addEvent('map_12');
addEvent('map_13');
addEvent('map_14');
addEvent('map_15');
addEvent('map_16');
addEvent('map_17');
addEvent('map_18');
addEvent('map_19');
addEvent('map_20');
addEvent('map_21');
addEvent('map_22');
addEvent('map_23');
addEvent('map_24');
addEvent('map_25');
addEvent('map_26');
addEvent('map_27');
addEvent('map_28');
addEvent('map_29');
addEvent('map_30');
addEvent('map_31');
addEvent('map_32');
addEvent('map_33');
addEvent('map_34');
addEvent('map_35');
addEvent('map_36');
addEvent('map_37');
addEvent('map_38');
addEvent('map_39');
addEvent('map_40');
addEvent('map_41');
addEvent('map_42');
addEvent('map_43');
addEvent('map_44');
addEvent('map_45');
addEvent('map_46');
addEvent('map_47');
addEvent('map_48');
addEvent('map_49');
addEvent('map_50');
addEvent('map_51');
})
</script>
<style>
.unselectable {
-moz-user-select:none;
-webkit-user-select:none;
}
</style>
<style>
p.pos_fixed
{
position:fixed;
left:15px;
}
</style>
</head>
<!--[if IE 6 ]> <body name="body" class=" ie ie6 not-ie7 not-ie8 not-ie9 "> <![endif]-->
<!--[if IE 7 ]> <body name="body" class=" ie ie7 not-ie6 not-ie8 not-ie9 "> <![endif]-->
<!--[if IE 8 ]> <body name="body" class=" ie ie8 not-ie6 not-ie7 not-ie9 "> <![endif]-->
<!--[if IE 9 ]> <body name="body" class=" ie ie9 not-ie6 not-ie7 not-ie8 "> <![endif]-->
<!--[if !IE]>--><body name="body" class=" not-ie6 not-ie7 not-ie8 not-ie9 not-ie"><!--<![endif]-->
<div class="topbar">
<div class="topbar-inner nohistory">
<div class="topbar-left">
<a class="topbar-new" href="https://www.hipheap.com/account/create"><strong>New!</strong> All your ads and saved searches in one place, create an account today!</a>
</div>
<div class="topbar-right">
<a class="topbar-login last" href="https://www.hipheap.com/account/login" title="Login to your account" rel="nofollow">
<i class="sprite_common_topbar_log-in topbar-float_left"></i>
Log in
</a>
<a class="topbar-create first" href="https://www.hipheap.com/account/create" title="Create your account" rel="nofollow">
<i class="sprite_common_topbar_logged-in topbar-float_left"></i>
Create account
</a>
</div>
</div>
</div>
<div id="wrapper">
<!--[if lt IE 7]>
<div class="alert-outer alert-error">
×
<div class="alert-inner">
<span><strong>You are using an outdated version of Internet Explorer.</strong> For a faster, safer browsing experience, upgrade today!</span>
</div>
</div>
<![endif]-->
<header>
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">hipheap.com - The right choice for buying & selling in india</h1>
<div id="post">
Post your ad for free
</div>
</header>
<div class="main">
<div class="column_left">
<div class="box">
<h2>High quality classifieds near you</h2>
<ul><li>HipHeap is safe, easy, and free.</li>
<li>Buy and sell cars, check our real estate section, find jobs, and much more.</li>
<li>Check our <strong>{{count}} ads online</strong> and find what you are looking for in your region or in all India.</li></ul>
</div>
<div id="regions">
<div class="region_links_one">
<ul class="regions_one">
<li><a id="region_8" class="region" href="/q?query=regionID%3D4694186">Alabama</a></li>
<li><a id="region_9" class="region" href="/q?query=regionID%3D4699188">Alaska</a></li>
<li><a id="region_10" class="region" href="/q?query=regionID%3D4692186">California</a></li>
</ul>
<ul class="regions_two">
<li><a id="region_22" class="region" href="/q?query=regionID%3D4694184">Kentucky</a></li>
</ul>
</div>
<div class="region_links_two">
<h2>Union territories</h2>
<ul class="regions_one">
<li><a class="region" href="/q?query=regionID%3D4699183">Delhi</a></li><li><a class="region" href="/q?query=regionID%3D4700189">Lakshadweep</a></li><li><a class="region" href="/q?query=regionID%3D4704183">Daman & Diu</a></li><li><a class="region" href="/q?query=regionID%3D4691190">Dadra & Nagar Haveli</a></li>
</ul>
<ul class="regions_two">
<li><a class="region" href="/q?query=regionID%3D4704183">Chandigarh</a></li><li><a class="region" href="/q?query=regionID%3D4676189">Pondicherry</a></li><li><a class="region" href="/q?query=regionID%3D4703187">Andaman & Nicobar Islands</a></li>
</ul>
</div>
</div>
</div>
<div id="mapcontainer">
<!-- map code -->
<div id="map_base">
<span class="tip" id="tip"></span>
<div onselectstart="return false;" class="unselectable" >
<!-- the svg code starts here -->
</div>
</div>
<div id="likebtn">
<iframe class="fb_iframe" tabindex="-1" scrolling="no" frameborder="0" allowtransparency="true" src="./static/india_files/like.html"></iframe>
</div>
<div class="google_plus">
<!--[if gt IE 7]>
<div id="google_plus1btn"><g:plusone size="medium" href="https://www.hipheap.com"></g:plusone></div>
<script type="text/javascript">
window.___gcfg = {lang: ''};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<![endif]-->
<!--[if !IE]><!-->
<div id="google_plus1btn"><div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background-position: initial initial; background-repeat: initial initial;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_137051343457799865" name="I0_13703434517799865" src="./static/india_files/fastbutton.html" allowtransparency="true" data-gapiattached="true" title="+1"></iframe></div></div>
<script type="text/javascript">
window.___gcfg = {lang: ''};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--<![endif]-->
</div>
</div><footer class="nohistory columns">
<div class="widecolumn">
<p class="first">A good deal is just around the corner!</p>
<p>HipHeap is the right choice for safe buying and selling in India: a free classifieds website where you can buy and sell almost everything.</p>
<p>Post an ad for free or browse through our categories. You will find thousands of free classifieds for cars, houses, mobile phones and gadgets, computers, pets and dozens of items and services in your state or union territory.</p>
<p class="last"><strong>HipHeap does not charge any fee and does not require registration.</strong> Every ad is checked so we can give you the highest quality possible for the ads on our site. That’s why HipHeap is the most convenient, easiest to use and most complete free ads site in India.</p>
</div>
<aside>
<nav class="navbar ">
<a class="first" href="/customer_service.htm">
<i class="sprite_common_customer_service"></i>
<span>Customer Service</span>
</a><!--
<a href="/security/index.htm">
<i class="sprite_common_security"></i>
<span>Shop safely</span>
</a>
<a href="/rules.htm">
<i class="sprite_common_rules"></i>
<span>Rules</span>
</a>
<a href="/about.htm">
<i class="sprite_common_about_footer_in"></i>
<span>About HipHeap.com</span>
</a>
<a href="/copyright.htm">
<i>©</i>
<span>Kool Ventures</span>
</a>-->
<a href="https://www.facebook.com/hipheap" target="_blank">
<i class="sprite_common_facebook"></i>
<span>Follow us on Facebook</span>
</a>
</nav>
</aside>
<div id="world_sites">
<p>
Travelling abroad? Visit our classifieds sites in other countries. See:<br>
Montao,
</p>
</div>
</footer>
<div id="scripts">
<!-- NO SCRIPTS -->
</div>
</div><!-- / #wrapper -->
</body></html>
I'm a newbie with SVG and the code is large and I acquired it so I'm not very familiar with what's implemented in the page, it's just supposed to be a selection of states on an HTML 5 map, so we got this SVG map that suits of requirements except that it's rendering too small. Can you give me a hint where I should change to make the efault rendering of the map larger? Is it the CSS or the HTML? The CSS that I acquired from the map's manuifacturer is:
/* reset */
form {display:block; margin:0; padding:0;} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements structure element */dl, dt, dd, ul, ol, li, /* list elements list element */pre, /* text formatting elements text format element */fieldset, lengend, button, input, textarea, /* form elements */th, td { /* table elements */ margin: 0; padding: 0;} table th,table td {padding:1px} /* */body,button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, sans-serif;*/ font: 12px/1 arial,verdana,tahoma,sans-serif; /* */}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }h2 { font-size: 16px; }h3 { font-size: 14px; }h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* */code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* */small { font-size: 12px; } /* *//* */ul, ol { list-style: none; }/* */a { text-decoration: none; color:#049;}a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* ：1.ie6 abbr; 2.，ie6 */ border-bottom: 1px dotted; cursor: help;}q:before, q:after { content: ''; }/* */legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img *//* ：optgroup */button, input, select, textarea { font-size: 100%; /* */}/* */table { border-collapse: collapse; border-spacing: 0;}/* hr */hr { border: none; height: 1px;} .clear{ clear:both;}
a:hover{text-decoration: none;}
#wrapper
{
max-width:1920px;
margin:0 auto;
padding:0px 0;
background-color:#f8edcd;
min-width:220px;
}
#media screen and (max-width: 240px)
{
svg
{
height:150px;
width:98%;
margin:0px;
}
#msg_box
{
position: relative;
width:98%;
margin:0px;
}
#msg_title
{
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
height:150px;
padding:2%;
}
}
#media screen and (max-width: 320px) and (min-width: 241px)
{
svg
{
height:204px;
width:98%;
margin:0px;
}
#msg_box
{
position: relative;
width:98%;
margin:0px;
}
#msg_title
{
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
height:170px;
padding:2%;
}
}
#media screen and (max-width: 400px) and (min-width: 321px)
{
svg
{
height:256px;
width:98%;
margin:0px;
}
#msg_box
{
position: relative;
width:98%;
margin:0px;
}
#msg_title
{
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
height:168px;
padding:2%;
}
}
#media screen and (max-width: 480px) and (min-width: 401px)
{
svg
{
height:310px;
width:98%;
margin:0px;
}
#msg_box
{
position: relative;
width:98%;
margin:0px;
}
#msg_title
{
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
height:190px;
padding:2%;
}
}
#media screen and (max-width: 568px) and (min-width: 481px)
{
svg
{
height:370px;
width:98%;
margin:0px;
}
#msg_box
{
position: relative;
width:98%;
margin:0px;
}
#msg_title
{
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
height:190px;
padding:2%;
}
}
#media screen and (max-width: 685px) and (min-width: 569px)
{
svg
{
height: 280px;
float:left;
width:64%;
}
#msg_box
{
float:left;
position: relative;
width:36%;
}
#msg_title
{
width:80%;
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
width:90%;
height:210px;
padding:2%;
}
}
#media screen and (max-width: 768px) and (min-width: 686px)
{
svg
{
height: 320px;
float:left;
width:64%;
}
#msg_box
{
float:left;
position: relative;
width:36%;
}
#msg_title
{
width:80%;
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
width:90%;
height:240px;
padding:2%;
}
}
#media screen and (max-width: 1024px) and (min-width: 769px)
{
svg
{
height: 424px;
float:left;
width:64%;
}
#msg_box
{
float:left;
position: relative;
width:36%;
}
#msg_title
{
width:80%;
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
width:90%;
height:318px;
padding:2%;
}
}
#media screen and (max-width: 1280px) and (min-width: 1025px)
{
svg
{
height: 530px;
float:left;
width:64%;
}
#msg_box
{
float:left;
position: relative;
width:36%;
}
#msg_title
{
width:80%;
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
width:90%;
height:400px;
padding:2%;
}
}
#media screen and (max-width: 1600px) and (min-width: 1281px)
{
svg
{
height: 674px;
float:left;
width:64%;
}
#msg_box
{
float:left;
position: relative;
width:36%;
}
#msg_title
{
width:80%;
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
width:90%;
height:506px;
padding:2%;
}
}
#media screen and (min-width: 1601px)
{
svg
{
height: 842px;
float:left;
width:64%;
}
#msg_box
{
float:left;
position: relative;
width:36%;
}
#msg_title
{
width:80%;
margin:0 auto;
min-height:25px;
}
#msg_data
{
margin:15px auto 5px;
width:90%;
height:632px;
padding:2%;
}
}
.tip{
display:none;
padding:5px;
border:1px solid #EBECED;
color:#edeef0;
font-weight: bold
;z-index:1000;
float:left;
position:absolute;
/*gradient color*/
background:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#656565'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#656565')"; /* IE8 */
background: -moz-linear-gradient(top, #494949,#656565); /* Firefox */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#494949), to(#656565));
word-break:keep-all;
white-space:nowrap;
}
#msg_title {
border:1px solid #999;
font-weight:bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
box-shadow:1px 2px 4px #999;
-moz-box-shadow:1px 2px 4px #999;
-webkit-box-shadow:1px 2px 4px #999;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:21px;
text-align: center;
padding:10px;
line-height: 25px;
color:#333;
/*gradient color*/
background:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd')"; /* IE8 */
background: -moz-linear-gradient(top, #ffffff,#dddddd); /* Firefox */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd));
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#msg_data{
line-height: 26px;
background:#e5e5e5;
border:1px solid #999;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;
box-shadow:1px 2px 8px #999;
-moz-box-shadow:1px 2px 8px #999;
-webkit-box-shadow:1px 2px 8px #999;
overflow: auto;
word-wrap:break-word;
font-size:18px;
text-align: left;
color:#333;
/*gradient color*/
background:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd')"; /* IE8 */
background: -moz-linear-gradient(top, #ffffff,#dddddd); /* Firefox */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd));
body {background-color:#b0c4de;}
}
n Internet Explorer, the map is large is my page is nearly correct except that the map is not to the left, it is below the state listings:
Update
Fiddle with selfcontained example of problem, I believe what is happening is that my CSS is shadowing itself.
Update 2
I've managed to take it from scratch and resize the map but I don't fuly understand why doubling the last two parameters of the viewBoxattribute actually makes the map smaller. What I'm getting now is starting to look acceptable:
In general, you want to set the viewBox="…" attribute for your SVG to bound your content, and then scale the SVG element as you wish.
Demos
http://jsfiddle.net/Jq3gy/5/
http://jsfiddle.net/Jq3gy/2/
Note that I have a copyright-free optimized US SVG map available: http://phrogz.net/SVG/USMap.svg
Your CSS is setting the height to 674px (on my screen at least) and width to 64% of it's parent container (#mapcontainer). This turns out to be a tall and narrow shape. The browser is scaling the map to fit in that narrow container, which is what is making it look tiny (on Chrome at least).
Try the following:
Work out why #mapcontainer is not using all the available space.
Ensure #mapcontainer has a similar aspect ratio to the SVG viewBox (540:360).
Don't try to change the width and height of the SVG, just leave it at 100% and let it fill its container.
It's possible you might have more luck embedding the SVG using an <object> element. Rather than using inline SVG. If all else fails, try that.