Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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;
    }
    The code is here if you need to check it. Would appreciate ANY input, thanks guys n gals!

    HTML of homepage
    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'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 & sound, crafted to your expectations. We recognise that in this day and age it'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?</h2>
    					<ul>
    						<li>We'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;
    }
    
    #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:1em;
    }
    
    #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;
    }
    Attached Thumbnails Attached Thumbnails Different font sizes between browsers.-tablet.jpg   Different font sizes between browsers.-firefox.jpg  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    First of all you should set a general page-wide font. The font in at least the body copy is totally different in both images so no wonder it has a different size.

  • #3
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Yeah, as VIP said, if you have two conflicting property values, things can get screwed up. If something in CSS is acting strangely, always check syntax and then for conflictions.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't think I'm completely getting what your saying. Are you saying that the text in the page has two properties in the css file and its conflicting? Sorry, for some reason im just not on the same wavelength. Thank you guys!

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If that is what you are saying... lets forget about the font issues at the moment and look at the basic, most confusing thing for me to understand, the fact the page is center on firefox and IE, but then on the android browser it starts at 25% in. Sort of center of the first quarter. if you get what i mean

  • #6
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 guys!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •