Solved

My pages do not display properly in Safari

Posted on 2009-05-20
5
1,060 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
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
renazonse 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:renazonse
renazonse 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Popup window in I.E. 8 38
Flexbox in CSS3 2 26
web browser 3 23
Adding a hidden div to each row in a table 6 25
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

757 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now