Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

My pages do not display properly in Safari

Posted on 2009-05-20
5
Medium Priority
?
1,072 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 2000 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

664 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