Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

My pages do not display properly in Safari

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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

971 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