Solved

My pages do not display properly in Safari

Posted on 2009-05-20
5
1,067 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

734 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