#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Dudley West Midlands
    Posts
    6
    Rep Power
    0

    Different font sizes between browsers.


    Hi guys, i've developed a website, checking it as im going through and some final checks in Firefox and IE. I came to view it on my galaxy tab (1280x800 screen) and the font seems to be different sizes, throwing the Nav off is the main problem. If you look at the images you will notice its throwing the two black nav borders out of place, as well as making the page move to the left (off center). I have the nav borders placed with relative positioning.

    I have tried it with the following reset styling but it seems to do nothing to it.

    Code:
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {     margin: 0;     padding: 0;     border: 0;     font-size: 100%;     font: inherit;     vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0; }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>DJS Interior Services</title>     <link href="style.css" rel="stylesheet" type="text/css" /> 	<!--[if IE]> 	<link rel="stylesheet" type="text/css" href="iestyle.css" /> 	<![endif]--> </head> <body> 	<div id="navbordertop"> 		<img src="images/navborder.png" alt="Navigation Border" class="navborder"/> 	</div> 	<div id="navborderbottom"> 		<img src="images/navborderbottom.png" alt="Navigation Border" class="navborderbottom"/> 	</div> 	<div id="wrap"> 		<div id="main"> 			<div id="header"> 				<div id="logo"> 					<h1>DJS Interior Services</h1> 					<small>One of the best refurbishment companies in West Midlands.</small> 				</div> 				<div id="nav"> 					<ul> 						<li><a href="#" class="active">About</a></li> 						<li><a href="services.html">Services</a></li> 						<li><a href="portfolio.html">Portfolio</a></li> 						<li><a href="testimonials.html">Testimonials</a></li> 						<li><a href="quote.html">Request A Quote</a></li> 						<li class="contactmargin"><a href="contact.html">Contact Us</a></li> 					</ul> 				</div> 			</div> 			<div id="featured"> 			<p>At DJS we are proud to say that we put rules and regulations first and the customer&#39;s preference second, nothing else matter to us. This way you know you are getting peace of mind of a fantastic construction/decorative masterpiece being safe &#38; sound, crafted to your expectations. We recognise that in this day and age it&#39;s the happiness of our customers that result in our name being passed around family and friends with huge reputation that keeps our business going strong, hence why we stride to extreme lengths to create and retain that customer satisfaction that keeps us alive.</p> 			</div> 			<div id="content"> 				<div id="col1" class="index"> 					<h2>Why Choose Us&#63;</h2> 					<ul> 						<li>We&#39;re a business built entirely on reputation.</li> 						<li>Been trading for over 10 years.</li> 						<li>32 years experienced and qualified tradesman.</li> 						<li>Wide range of services available upon request.</li> 						<li>Clean and tidy workmanship.</li> 						<li>All work guaranteed.</li> 						<li>Friendly Tradesman.</li> 						<li>Free Quotes.</li> 					</ul> 				</div> 				<div id="col2"> 					<img src="images/indeximage.jpg" alt="Tiled Kitchen" class="col2" /> 				</div> 			</div> 		</div> 	</div> 	<div id="footer"> 		<ul> 			<li>Tel: 01384 865756</li> 			<li>Mob: 07877500865</li> 			<li>E-Mail: <a href="mailto:info@djsinteriorservices.co.uk">info@djsinteriorservices.co.uk</a></li> 		</ul> 		<div id="bottomnav"> 			<span><a href="#" class="active">About</a> / <a href="services.html">Services</a> / <a href="portfolio.html">Portfolio</a> / <a href="testimonials.html">Testimonials</a> / <a href="quote.html">Request A Quote</a> / <a href="contact.html">Contact Us</a></span> 		</div> 	</div> </body> </html>
    CSS
    Code:
    /* Background Styles */   *{ 	margin:0; 	padding:0; }  img{ 	border:0; }  html{ 	overflow-y:scroll; }  :link,:visited{ 	text-decoration:none }  body{ 	background-image:url(images/bg.jpg); 	background-repeat:repeat; 	color:white; 	font-family:"Times New Roman", Times, serif; 	font-size:12pt; }  #content .singlecol h3{ 	padding:10px 0 15px; }  h3{ 	margin-top: 10px; }  /* Main Styling */  #main{ 	width:600px; 	margin:0 auto; }  #header{ 	padding-top:26px; 	padding-bottom:16px; }  #logo{ 	background-image:url(images/logo.png); 	background-repeat:no-repeat; 	height:78px; 	width:221px; 	padding-bottom:16px; }  #logo h1, #logo small{ 	display:block; 	text-indent:-9999px; }  #nav{ 	background-color:#3a3a3a; 	border: 1px solid black; 	height:50px; 	width:100%; 	text-align:center; }  #nav ul{ 	 }  #nav li{ 	display:inline; 	margin-right:20px; 	line-height:48px; }  #nav li.contactmargin{ 	margin-right:0; }  #nav li a{ 	text-decoration:none; 	color:white; 	font-family:"Times New Roman", Times, sans-serif; 	font-size:12pt; }  #nav li a.active, #nav li a:hover{ 	color:#ffff00; }  #navbordertop{ 	position: absolute;  	left: 50%;  	top: 102px; }  #navborderbottom{ 	position: absolute;  	left: 50%;  	top: 161px; }  img.navborder{ 	position:relative; 	left:-50%; 	overflow:hidden; }  img.navborderbottom{ 	position:relative; 	left:-50%; }  #featured{ 	background-color:#3a3a3a; 	border: 1px solid black; 	width:100%; 	text-align:center; 	margin-bottom:20px; }  #featured p{ 	margin:10px; }  #content #col1{ 	float:left; 	background-color:#3a3a3a; 	border: 1px solid black; 	text-align:center; 	margin-right:20px; 	width:353px; 	margin-bottom:20px; }  #content #col1 h2{ 	margin-top:10px; 	color:#0000ff; }  #content #col1.index{ 	height:298px; }  #content #col1 ul{ 	margin-top:5px; 	list-style-position:inside; }  #content #col1 li{ 	margin-top:5px; }  #content #portfoliowrapper{ 	background-color:#3a3a3a; 	border: 1px solid black; 	padding-bottom:40px; 	margin-bottom:20px; }  #content #portfoliowrapper img{ 	margin-left:40px; 	margin-top:40px; 	padding:0; 	border:0; }  #col2 img{ 	float:left; 	margin-bottom:20px; }  .singlecol{ 	background-color:#3a3a3a; 	border: 1px solid black; 	text-align:center; 	width:100%; 	padding-bottom:10px; 	margin-bottom:20px; 	list-style-type:none; }  .singlecol li{ 	list-style-type:none; }  #featured .testimonial{ 	font-size:large; }  #featured span{ 	color:#ffff00; }  #featured .rightalign{ 	text-align:right; }  #featured form{ 	margin-bottom:10px; }  form input{ 	margin-bottom:10px; }  #formwrapper{ 	text-align:right; 	margin-right:130px; }  #contactcol1{ 	width:48%; 	float:left; 	padding-bottom:10px; 	background-color:#3a3a3a; 	border: 1px solid black; 	text-align:center; 	margin-bottom:20px; }  #contactcol1 #formwrapper{ 	text-align:center; 	margin-right:0; 	margin-top:10px; }  #contactcol2{ 	width:48%; 	float:right; 	padding-bottom:10px; 	background-color:#3a3a3a; 	border: 1px solid black; 	text-align:center; 	margin-bottom:20px; }  #contactcol2 p{ 	margin-top:10px; 	font-size:small; }  #contactcol2 span{ 	font-size:medium; }  #contactcol2 a{ 	color:white; }  /* Footer Styling */  html, body{ 	height:100%; }  #wrap{ 	min-height:100%; 	width:100%; }  #main{ 	padding-bottom:102px; }												/* must be same height as the footer */  #footer{ 	position:relative; 	margin:0 auto; 	margin-top:-102px;							/* negative value of footer height */ 	height:100px; 	width:600px; 	clear:both; 	background-color:#3a3a3a; 	border:1px solid black; }  #footer ul{ 	list-style-type:none; 	padding:10px 10px 0 10px; }  #footer a{ 	color:white; }  #bottomnav{ 	text-align:right; 	padding-right:10px; }  #footer span{ 	font-size:small; 	margin-top:0; }  #bottomnav a.active, #bottomnav a:hover{ 	color:#ffff00; }  /*Opera Fix*/ body:before { 	content:""; 	height:100%; 	float:left; 	width:0; 	margin-top:-32767px; }
    I'de appreciate ANY help you have. The more help you give me the more knowledge i can gain to help others, this is why its called a community!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    I can't test this as I don't have a Galaxy tab but I notice your font-size attribute is specified in points (12pt). As point size is meant to an absolute (One point is 1/72 of an inch), you might want to try using px instead (font-size:12px) so that it maintains relative size compared to the controls.

    Just a thought....
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Dudley West Midlands
    Posts
    6
    Rep Power
    0
    I just changed this to pt, was on em. Just trying them both, since i read that pt and em are the only ones that are properly cross browser compatible, well more than px anyway. But ill try it now and let you know in a second what the outcome is. Thanks
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Dudley West Midlands
    Posts
    6
    Rep Power
    0
    Just changed it from PT to PX, and its changed on both browsers but still not the same size on both.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Oh well, like I said, it was a thought but I've noticed that even using px doesn't give consistent size across browsers.

    Good luck!

    PS It would make it a lot easier to see what you're trying to do if you had line breaks in your code and CSS.

    e.g.
    Code:
    <div id="navbordertop">
    	<img src="images/navborder.png" alt="Navigation Border" class="navborder"/>
    </div>
    <div id="navborderbottom">
    	<img src="images/navborderbottom.png" alt="Navigation Border" class="navborderbottom"/>
    </div>
    <div id="wrap">
    	<div id="main">
    		<div id="header">
    etc.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Dudley West Midlands
    Posts
    6
    Rep Power
    0
    Appreciate your help Galadai!
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Dudley West Midlands
    Posts
    6
    Rep Power
    0
    I do have line breaks, for some reason when i copied and pasted into here it has removed them, sorry :s
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Dudley West Midlands
    Posts
    6
    Rep Power
    0
    If anyone has come to sort out a problem like this, i have solved it.

    Basically i have changed my nav borders to relative positioning, then centered them with the usual
    Code:
    (margin:0 auto;)
    and then the images themselves for the nav border changed to relative positioning.

    As for the font, i have changed a few 'sans-serif' mistakes to 'serif' and then changed the font sizes to em's.

    Thank you for your help Galadai!

IMN logo majestic logo threadwatch logo seochat tools logo