html - image firefox chrome missmatch -

-

i'm first time poster, long time enthusiast.

so i'm working on personal website, , haven't got experience in html/css, i've come across strange mismatch between firefox , chrome. , wondering if wise people of internet direct me (probably obvious) error is.

the problem im experiencing firefox cut of last 2 letters of image. ive colored different parts more visible. i'll post code want see that. if guys point me towards solution obliged.

firefox: http://i.imgur.com/afbyws7.png chrome: http://i.imgur.com/xumaiwk.png

/* reset  ------------------------------------------------------------ */  * { margin: 0; padding: 0; }  html { overflow-y: scroll;}  body { background:#ffffff; font-size: 13px; color: #666666; font-family: arial, helvetica, sans-serif;}  ol, ul { list-style: none; margin: 0;}  ul li { margin: 0; padding: 0;}  h1 { margin-bottom: 10px; color: #111111;}  a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}  p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}  img { display: block; margin-bottom: 10px;}  aside { font-style: italic; font-size: 0.9em;}  article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {       display: block;  }    /* structure */  #wrapper {  	width: 96%;	  	max-width: 920px;  	margin: auto;  	padding: 2%;  }     /* banner */  #banner {  	float: left;  	margin-bottom: 15px;  	width: 100%;  	background-color:red;  }    	#banner img {  		max-width: 450px;  		width: 100%;  		display: block;  		margin-left: auto;  		margin-right: auto;  		background-color:blue;  	}    #occp {  	float: left;  	margin-bottom: 15px;  	width: 100%;  	background-color:green;  }    	#occp img {  	max-width: 800px;  		width: 100%;  		display: block;  		margin-left: auto;  		margin-right: auto;  		background-color:yellow;  	}
<!doctype html>  <html lang="en">  	<head>  		<meta charset="utf-8"/>  		<title> demo | responsive web</title>  		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />  		<link href="test.css" type="text/css" rel="stylesheet">  		<!--[if lt ie 9]>  		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>  		<![endif]-->  		<script type='text/javascript' src='scripts/respond.min.js'></script>  	</head>  	<body>  		<div id="wrapper">  			<header>  				<div id="banner">  					<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="banner" />  				</div>  				<div id="occp">  					<img src="https://dl.dropboxusercontent.com/u/15472320/occp.svg" alt="electrical engineering student" />  				</div>  			</header>  		</div>  	</body>  </html>

given js fiddle svg file in comments section able set width 100% , graphic same size in chrome , firefox, have not tested opera, ie, edge, or safari.

<svg     ...    width="100%"     ...> </svg>

js fiddle fork of svg

http://jsfiddle.net/7nn94k13/1/

code snippet svg placed inside original code

/* reset  ------------------------------------------------------------ */  * { margin: 0; padding: 0; }  html { overflow-y: scroll;}  body { background:#ffffff; font-size: 13px; color: #666666; font-family: arial, helvetica, sans-serif;}  ol, ul { list-style: none; margin: 0;}  ul li { margin: 0; padding: 0;}  h1 { margin-bottom: 10px; color: #111111;}  a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}  p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}  img { display: block; margin-bottom: 10px;}  aside { font-style: italic; font-size: 0.9em;}  article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {       display: block;  }    /* structure */  #wrapper {  	width: 96%;	  	max-width: 920px;  	margin: auto;  	padding: 2%;  }     /* banner */  #banner {  	float: left;  	margin-bottom: 15px;  	width: 100%;  	background-color:red;  }    	#banner img {  		max-width: 450px;  		width: 100%;  		display: block;  		margin-left: auto;  		margin-right: auto;  		background-color:blue;  	}    #occp {  	float: left;  	margin-bottom: 15px;  	width: 100%;  	background-color:green;  }    	#occp img {  	max-width: 800px;  		width: 100%;  		display: block;  		margin-left: auto;  		margin-right: auto;  		background-color:yellow;  	}
<?xml version="1.0" encoding="utf-8" standalone="no"?>  <!-- created inkscape (http://www.inkscape.org/) -->    <!doctype html>  <html lang="en">  	<head>  		<meta charset="utf-8"/>  		<title> demo | responsive web</title>  		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />  		<link href="test.css" type="text/css" rel="stylesheet">  		<!--[if lt ie 9]>  		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>  		<![endif]-->  		<script type='text/javascript' src='scripts/respond.min.js'></script>  	</head>  	<body>  		<div id="wrapper">  			<header>  				<div id="banner">  					<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="banner" />  				</div>  				<div id="occp">  <svg     xmlns:dc="http://purl.org/dc/elements/1.1/"     xmlns:cc="http://creativecommons.org/ns#"     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"     xmlns:svg="http://www.w3.org/2000/svg"     xmlns="http://www.w3.org/2000/svg"     xmlns:sodipodi="http://sodipodi.sourceforge.net/dtd/sodipodi-0.dtd"     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"     width="100%"     height="22.796349"     id="svg3086"     version="1.1"     inkscape:version="0.48.4 r9939"     sodipodi:docname="new document 6">    <defs       id="defs3088" />    <sodipodi:namedview       id="base"       pagecolor="#ffffff"       bordercolor="#666666"       borderopacity="1.0"       inkscape:pageopacity="0.0"       inkscape:pageshadow="2"       inkscape:zoom="0.35"       inkscape:cx="222.35964"       inkscape:cy="-265.74468"       inkscape:document-units="px"       inkscape:current-layer="layer1"       showgrid="false"       fit-margin-top="0"       fit-margin-left="0"       fit-margin-right="0"       fit-margin-bottom="0"       inkscape:window-width="463"       inkscape:window-height="423"       inkscape:window-x="100"       inkscape:window-y="100"       inkscape:window-maximized="0" />    <metadata       id="metadata3091">      <rdf:rdf>        <cc:work           rdf:about="">          <dc:format>image/svg+xml</dc:format>          <dc:type             rdf:resource="http://purl.org/dc/dcmitype/stillimage" />          <dc:title></dc:title>        </cc:work>      </rdf:rdf>    </metadata>    <g       inkscape:label="layer 1"       inkscape:groupmode="layer"       id="layer1"       transform="translate(-152.64036,-243.82116)">      <text         xml:space="preserve"         style="font-size:31.58077812px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:110.00000238%;letter-spacing:-4.82484102px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:franklin gothic book;-inkscape-font-specification:franklin gothic book"         x="150.44296"         y="261.72156"         id="text4820-4"         sodipodi:linespacing="110%"><tspan           sodipodi:role="line"           id="tspan4822-0"           x="150.44296"           y="261.72156"           style="font-size:26.31731796px;letter-spacing:-0.87724388px">electrical engineering student</tspan></text>    </g>  </svg>  				</div>  			</header>  		</div>  	</body>  </html>


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more