Solved

My pages do not display properly in Safari

Posted on 2009-05-20
5
1,070 Views
Last Modified: 2013-12-07
Why is it that my site pages at url www.onceupononline.com display fine in IE 6, 7 Firefox 2 & 3 but not Safari 2.0?

I am pretty new to CSS and xhtml and have been trying to build an estate agent website using php5 and xslt fragments, the fragments display fine on all browsers, however the 'pre search' pages e.g. www.onceupononline.com/index.php is all over the place in Safari....I am praying its only a css issue but could be that my xhtml is malformed. Any help from anyone would be awesome and most appreciated
<?php
error_reporting(0);
session_save_path("/home/users/web/b212/moo.mularam
/cgi-bin/tmp"); 
session_start(); 
 
//XMLXSL Transformation class
require_once('includes/MM_XSLTransform/MM_XSLTransform.class.php'); 
 
$WCI = $_GET["wci"];
 
if($WCI=="results")
{
	$link = "http://data.dezrez.com/search.asp?";
	foreach($_REQUEST as $item => $value)
	{
		$link = $link . $item . "=" . urlencode($value) . "&";
	}
 
	$xsltLink = "searchresults.xslt";
}
elseif($WCI=="xml")
{
	$WCE = $_GET["wce"];
	$link = "http://data.dezrez.com/search.asp?WCI=XML&WCE=0" . $WCE;
	$xsltLink = "fulldetails.xslt";
}
 
//echo($link);
 
$xmlDoc = new DomDocument();
$xmlDoc->load($link); 
 
 if(!$xmlDoc)
 {
	echo("Could not locate XML file");
}
 
//echo($xmlDoc->html_dump_mem());
$xsltDoc = new DomDocument();
$xsltDoc->load($xsltLink);
 
 if(!$xsltDoc)
 {
	echo("Could not locate XSLT");
}
 
$proc = new XsltProcessor();
$xsltDoc = $proc->importStylesheet($xsltDoc);
 
$transformedXML = $proc->transformToDoc($xmlDoc);
 
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ballards Estate Agents UK, Henley, Marlow, Twyford, Property for sale</title>
<style type="text/css">
<!--
@import url("css/layout2.css");
body {
	background-color: #000000;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="apDiv1"></div> 
<div id="apDiv4">
<ul id="nav">
<li id="home"></li>
<li><a href="index.php" target="_self">Home</a></li>
<li id="contact"></li>
<li><a href="contact.php" target="_self">Contact Us</a></li>
<li id="buying"></li>
<li><a href="buying.php" target="_self">Buying</a></li>
<li id="selling"></li>
<li>  <a href="selling.php" target="_self">Selling</a></li>
<li id="letting"></li>
<li>  <a href="lettings.php" target="_self">Letting</a></li>
<li id="commercial"></li>
<li> <a href="commercial.php" target="_self">Commercial</a></li>
<li id="register"></li>
<li>  <a href="register.php" target="_self">Register</a></li>
 
</ul>
</div>
<div id="apDiv6"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','752','height','385','title','index_mov','src','index_mov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','index_mov' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="752" height="385" title="index_mov">
    <param name="movie" value="index_mov.swf" />
    <param name="quality" value="high" />
    <object type="application/x-shockwave-flash" data="index_mov.swf" width="752" height="385">
               <param name="movie" value="index_mov.swf" />
    		<param name="quality" value="high" />
            	<param name="wmode" value="transparent" />
    </object>
  </object>
  </noscript>
</div>
 
<form action="search.php?wci=results" method="post" name="formSearch" id="formSearch">
  <div id="apDiv5">
Which office branch would you like to search?
<p>&nbsp;</p>
  <p>
    <input type="checkbox" name="branchlist" value="1378"/>
    Henley  </p>
  <p>
    <input type="checkbox" name="branchlist" value="1377"/>
    Marlow    </p>
  <p>
    <input type="checkbox" name="branchlist" value="1379"/>
    Twyford </p>
</div>
<table>
<tr>
<td>
<table width="23%" border="0" cellpadding="3" cellspacing="0">
 <tr>
<td>
<div class="c1">Type</div>
</td>
<td><select name="globalproptype" id="ptype">
<option value="" selected="selected">All</option>
<option value="0">Flats</option>
<option value="1">Houses</option>
<option value="2">Business</option>
<option value="3">Plot</option>
<option value="4">Apartment</option>
<option value="5">Town House</option>
<option value="6">Bungalow</option>
<option value="7">Chalet</option>
<option value="8">Cottage</option>
<option value="9">Semi Detached</option>
<option value="10">Detached</option>
<option value="11">Terraced</option>
</select></td>
</tr>
<tr>
<td>
<div>Min Price</div>
</td>
<td><select name="minprice" id="rtype">
              <option value="0">Any</option>
              <option value="80000">&pound;80,000</option>
              <option value="100000">&pound;100,000</option>
              <option value="150000">&pound;150,000</option>
              <option value="200000">&pound;200,000</option>
              <option value="250000">&pound;250,000</option>
              <option value="300000">&pound;300,000</option>
              <option value="350000">&pound;350,000</option>
              <option value="400000">&pound;400,000</option>
              <option value="450000">&pound;450,000</option>
              <option value="500000">&pound;500,000</option>
              <option value="600000">&pound;600,000</option>
              <option value="700000">&pound;700,000</option>
              <option value="800000">&pound;800,000</option>
              <option value="900000">&pound;900,000</option>
              <option value="1000000">&pound;1,000,000</option>              
            </select></td>
			</tr>
			<tr>
			<td>
			<div class="c1">Max Price</div>
			</td>
			<td><select name="maxprice" id="rtype">
              <option value="99999999">Any</option>
              <option value="80000">&pound;80,000</option>
              <option value="100000">&pound;100,000</option>
              <option value="150000">&pound;150,000</option>
              <option value="200000">&pound;200,000</option>
              <option value="250000">&pound;250,000</option>
              <option value="300000">&pound;300,000</option>
              <option value="350000">&pound;350,000</option>
              <option value="400000">&pound;400,000</option>
              <option value="450000">&pound;450,000</option>
              <option value="500000">&pound;500,000</option>
              <option value="600000">&pound;600,000</option>
              <option value="700000">&pound;700,000</option>
              <option value="800000">&pound;800,000</option>
              <option value="900000">&pound;900,000</option>
              <option value="1000000">&pound;1,000,000</option>
              <option value="1500000">&pound;1,500,000</option>    
              <option value="2000000">&pound;2,000,000</option>    
              <option value="2500000">&pound;2,500,000</option>    
              <option value="3000000">&pound;3,000,000</option>        
           </select></td>
</tr>
<tr>
<td>
<div class="c1"> Bedrooms</div>
</td>
<td><select name="bedrooms" id="rms">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></td>
</tr>
<tr>
<td> </td>
<td>
<div class="c2"><input name="Submit" type="submit" id="Submit" value="Search" /> <input type="hidden" name="gtype" value="2" /> <input type="hidden" name="eaid" value="816" /> <input type="hidden" name="xslt" value="-1" /> <input type="hidden" name="PAGE" value="1" /> <input type="hidden" name="showSTC" value="ON" /> <input type="hidden" name="perpage" value="10" /></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script language="javascript" src="http://www.dezrez.com/webservices/featured/featuredProperty.aspx?eaid=816&amp;number=3&amp;rentalperiod=0" type="text/javascript"></script>
<div class="property">
</div><div id="apDiv7"> 
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','190','height','245','src','scroll_mov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','scroll_mov' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="190" height="245">
    <param name="movie" value="scroll_mov.swf" />
    <param name="quality" value="high" />
    <object type="application/x-shockwave-flash" data="scroll_mov.swf" width="190" height="245">
               <param name="movie" value="scroll_mov.swf" />
    		<param name="quality" value="high" />
            	<param name="wmode" value="transparent" />
    </object>
  </object>
</noscript>
</div>
<div id="apDiv2">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1070','height','125','title','Ballards Estate Agents','src','footer1_mov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','footer1_mov' ); //end AC code
    </script>
    <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1070" height="125" title="Ballards Estate Agents">
      <param name="movie" value="footer1_mov.swf" />
      <param name="quality" value="high" />
      <object type="application/x-shockwave-flash" data="footer1_mov.swf" width="1070" height="125">
        <param name="movie" value="footer1_mov.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
      </object>
    </object>
    </noscript>
  </div>
 
 <?php
                        
            if($WCI=="results")
            {
                        echo('<form name="SearchForm" method="POST" id="SearchForm" action="search.php?wci=results">');
                                    {
                                                foreach($_REQUEST as $item => $value)
                                                {
                                                            echo("<input type='hidden' name='" . $item . "' value='" . urlencode($value) . "'/>");
                                                }
                                    }
                        echo('</form>');
            }
?>
<?php print $transformedXML->saveXML(); 
?>
<script type="text/javascript">
var imageHandler;
 imageHandler= new ImageHandler.SlideShow("mainimage");
 imageHandler.loadImages("thumbs");
 addMap(lat, long );
</script>
</body>
</html>
 
 
//  MY EXTERNAL STYLE SHEET //
 
@charset "utf-8";
/* CSS Document */
 
 
 
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
 
#nav 
{
margin:0; 
padding:0
}
#nav li {
display:inline; 
padding-right:14px;
padding-left:6px;
 
margin:0;
left:0px;
}
 
#apDiv4 {
	position:relative;
	width:1070px;
	height:15px;
	z-index:3;
	left: 155px;
	font-size: 11px;
	color:#333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	top:85px;
	display:inline-block;
	text-align:center;
 
 
}
 
 
 
 
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	
}
 
a:link {
	color: #990099;
	text-decoration:none;
}
 
a:visited { 
text-decoration: none;
color:#666666;
}
a:active { text-decoration: none } 
 
a:hover {
	color: #996633;
	text-decoration: none;
	}
#apDiv5 {
	position:relative;
	width:174px;
	height:115px;
	z-index:5;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	left: 228px;
	font-size:11px; 
	color:#333333;
	bottom:247px;
	background-color:#FAF9E4;
	text-align: center;
	padding-left:12px;
	padding-right:12px;
	padding-top:12px;
	
}
#formSearch table {
	
	position: relative;
	left: 115px;
	width:198px;
	height: 130px;
	z-index: 2;
	bottom: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#333333;
	
}
td
	{
	color:#333333;
	font-size:11px;
	padding:3px;
	display:inline;
	
	}
	input
	{
	color:#333333;
	font-size:11px;
	background-color: #FFFFFF;
	width:auto;
	
	background-color: #FAFCE9;
	
	}	
	select
	{
	color:#333333;
	font-size:11px;
	background-color:#FFFFFF;
	border:solid 1px #bdbd90;
	width:100px;
	display:inline;
	padding-top:10px;
	}
	
#apDiv1 {
	position:absolute;
	width:1422px;
	height:810px;
	z-index:2;
	background-image: url(../images/bg_temp.gif);
	background-position:center top;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;	
 
}
 
 
#apDiv7 {
	position:relative;
	width:190px;
	height:auto;
	z-index:4;
	right:550px;
	bottom:130px;
}
.property {
	position: relative;
	z-index:5;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#333333;
	margin-left: 10px;
	text-decoration:none;
	left: 425px;
	background-color:#bdbd90;
	bottom:135px;
}
.latest-address {
	padding-left: 10px;
	padding-top:2px;
	margin-top:4px;
	font-weight:bold;
	background-color:#FFFFFF;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	border-bottom:1px solid #bdbd90;
}
 
.latest-price {
	padding-left: 10px;
	background-color:#FFFFFF;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	background-color:#FFFFFF;
	border-bottom:1px solid #bdbd90;
}
 
.latest-contact {
	padding-left: 10px;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	background-color:#FFFFFF;
	border-bottom:1px solid #bdbd90;
	
 
	
}
.latest-link {
	padding-left: 10px;
	padding-top:2px;
	padding-bottom:2px;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	background-color:#FFFFFF;
	margin-bottom:1px;
	
}
.latest-img {
	border:3px solid #bdbd90;
}
 
 
 
 
body {
	background-color: #000000;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	top:0px;
	
}
#apDiv2 {
	position:absolute;
	width:1070px;
	height:125px;
	z-index:1;
	bottom:0px;
	left:181px;
	background-color:#333333;
	margin-top:10px;
	}
	#apDiv6 {
	position:relative;
	width:752px;
	height:378px;
	z-index:3;
	left: 446px;
	top: 105px;
}

Open in new window

0
Comment
Question by:mulegoat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 500 total points
ID: 24434043
There's a bunch of problems here and it's primarily related to CSS. You've got some work to do because it doesn't look good in any browser on a Mac.

Instead of using all that relative positioning and locations you need to create a container <div id="container"> and enclose most of your site, if not all, within this container. The container will be set with a width that you want and the margins will be set with "auto" on the left and right so it will center your page in the browser. Then, you'll need to go back and adjust the css for all of your other elements, probably removing all of the positioning, in order to keep everything static and looking the same in all browsers.

It helps to take a look at a site built with CSS to perfection and follow the links in the source to their CSS to get a clear idea of how it should be setup.

Try this site if you want to do that: http://www.markboulton.co.uk/
0
 

Author Comment

by:mulegoat
ID: 24440800
thank you so much for the advice, it took me a while but i have re-positioned all elements inside the container div and tried to get all dimensions correct with positions set to 'static'.

I am still having a couple of issues which hopefully you will be able to shed some light on:

1. The #formsearch table hugs the left of the container in safari, no matter what values to the margins.

2. The class "property" (the 4 properties across just above the footer) also hug the left of the container, these are part of a javascript include and so playing with margins effects all of them and what i'd really like to do is line them more centrally under the 'FEATURED PROPERTY'

3. What is the best method for positioning the navigation links?  Is there a way i can define each one individually so that i can set each one its own margins to line it all up correctly?

I have renamed the page at www.onceupononline.com/test.php and my css is below:

many thanks for all your help
@charset "utf-8";
/* CSS Document */
 
 
 
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	background-image: url(../images/bg_temp.gif);
	background-repeat:no-repeat;
	background-position:center top; 
	
}
ol, ul {
	list-style: none;
}
 
#container {
width:1070px;
margin-left:auto;
margin-right:auto;
position:static;
 
}
 
#nav 
{
margin:0; 
padding:0;
}
#nav li {
display:inline; 
padding-right:10px;
padding-left:8px;
margin-left:4px;
left:0px;
width:auto;
 
}
 
#apDiv4 {
	
	width:1050px;
	height:35px;
	z-index:3;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	bottom:30px;
	display:inline;
	text-align:center;
	position:static;
	margin-left:190px;
	margin-right:30px;
	margin-bottom:20px;
	
	
	
	
 
 
}
 
 
 
 
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	
}
 
a:link {
	color: #990099;
	text-decoration:none;
}
 
a:visited { 
text-decoration: none;
color:#666666;
}
a:active { text-decoration: none } 
 
a:hover {
	color: #996633;
	text-decoration: none;
	}
#apDiv5 {
	position:static;
	width:170px;
	height:165px;
	z-index:5;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px; 
	color:#333333;
	text-align: center;
	padding-left:14px;
	padding-right:14px;
	padding-top:72px;
	margin-left:50px;
	
}
#formSearch table {
	
	position: static;
	width:160px;
	height: 140px;
	z-index: 2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#333333;
	display:inline;
	margin-bottom:20px;
	margin-left:30px;
	
}
td
	{
	color:#333333;
	font-size:11px;
	padding:3px;
	display:inline;
	
	}
	input
	{
	color:#333333;
	font-size:11px;
	background-color: #FFFFFF;
	width:auto;
	
	background-color: #FAFCE9;
	
	}	
	select
	{
	color:#333333;
	font-size:11px;
	background-color:#FFFFFF;
	border:solid 1px #bdbd90;
	width:100px;
	display:inline;
	padding-top:10px;
	}
	
#apDiv1 {
	position:static;
	width:1070px;
	height:85px;
	z-index:2;
	background-position:center top;
 
	
}
 
 
 
.property {
	position: static;
	z-index:5;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#333333;
	text-decoration:none;
	border-color:#bdbd90;
	bottom:140px;
	margin-bottom:20px;
	left:20px;
 
	
	
	
	
 
}
.latest-address {
	padding-left: 10px;
	padding-top:2px;
	margin-top:4px;
	font-weight:bold;
	background-color:#FFFFFF;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	border-bottom:1px solid #bdbd90;
}
 
.latest-price {
	padding-left: 10px;
	background-color:#FFFFFF;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	background-color:#FFFFFF;
	border-bottom:1px solid #bdbd90;
}
 
.latest-contact {
	padding-left: 10px;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	background-color:#FFFFFF;
	border-bottom:1px solid #bdbd90;
	
 
	
}
.latest-link {
	padding-left: 10px;
	padding-top:2px;
	padding-bottom:2px;
	border-left:3px solid #bdbd90;
	border-right:3px solid #bdbd90;
	background-color:#FFFFFF;
	margin-bottom:1px;
	
}
.latest-img {
	border:3px solid #bdbd90;
 
}
 
 
 
 
body {
	
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	top:0px;
	
}
#apDiv2 {
	position:static;
	width:1070px;
	height:125px;
	z-index:1;
	bottom:0px;
	background-position:center bottom;
	
 
	}
	#apDiv6 {
	position:static;
	width:800px;
	height:395px;
	z-index:3;
	right:100px;
	margin-top:20px;
	float:right;
	
 
}

Open in new window

0
 
LVL 30

Assisted Solution

by:Britt Thompson
Britt Thompson earned 500 total points
ID: 24442843
Ok...I'll do it one part at a time.

1. The table within the property search section should be inside <div id="apDiv5">. Also, this table  is a table within a table, I'd remove the inner table and get rid of the outer table.

2. Enlcose this:

 <?xml version="1.0"?>
<script type="text/javascript">
var imageHandler;
 imageHandler= new ImageHandler.SlideShow("mainimage");
 imageHandler.loadImages("thumbs");
 addMap(lat, long );
</script>

In the  <div class="property"> above it

3. You'll find it much easier to assign background images using css to your menus by breaking them apart with the left side, middle and right side. Where the middle image will just be a sliver of the mid section that's repeat-x so it adjusts to the width of the text. If you don't want to go through that you'll have to piddle around with the placement of the menus to get them to look right in all browsers.
0
 

Author Comment

by:mulegoat
ID: 24449681
thank you again for all your help, my pages now display much better in safari, you just brought weeks of turmoil to an end! One thing i still cannot get is the alignment of the bottom div (#ap 2)...also, how should i go about working without tables? these seem to create more problems than they're worth in terms of styling and positioning of data?

Thanks again
0
 

Author Closing Comment

by:mulegoat
ID: 31583597
awesome service, thank you for all your help
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question