The following examples and layouts use the 'overflow:hidden' feature to prevent text wrapping and to allow nice and neat listings whilst keeping them responsive. The examples all comprise of 2 columns. You can either choose to have trhe image on the right or left without issue.

Consider putting the clear both in the <h2> title rather thatn a seperate <div style="clear: both;">&nbsp;</div> - This makes it neater and one less line. Not having the <div> at the end also prevents the text getting cycled in <div>'s rather than <p>'s.

Single Paragraph Method

Minimum Code Required for overflow to work

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: right;" src="/images/pages/dog-sitting/arnside.jpg" alt="arnside" />
	<p style="overflow: hidden; min-width: 180px;">Your dog can stay with us at my home. They will be treated just like a member of our family with</p>
</div>

Single Paragaph - <br /> Clear Method

Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block  wrapping and splitting lines (responsive)

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" />
	<p style="overflow: hidden; min-width: 180px;">
		If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.<br style="clear: both;" />&nbsp;
	</p>
</div>

Single Paragaph - <div> Clear Method

Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block  wrapping and splitting lines (responsive)

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" />
	<p style="overflow: hidden; min-width: 180px;">
		If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.
	</p>
</div>
<div style="clear: both;">&nbsp;</div>

NB: <p style="overflow: hidden; min-width: 180px;"> can be replaced with <div style="overflow: hidden; min-width: 180px;">. This has the benefits of extra spacing that comes with <p> not being applied. However if you use <div>, text will also need to be encapsulated in a <p>. See the following methods.

More Complex DIV Methods

Single <div> Method

• This only allows for images or single items to be floated to the side
• In the 'text/content' <div> you can put anything you want

HTML

<div style="overflow: hidden;">

	<img alt="" src="/images/dog-picture.jpg" style="float:left; margin: 10px;"/>
	
	<div style="overflow: hidden; min-width: 180px;">
		<h2>This is a Title</h2>
		<p>This is a paragraph of Text</p>
		<ul class="list-number-digit digit-brown">
			<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
			<li>Just 10 minutes South East of Lincoln.</li>
			<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
			<li>We also have a long history of serving the community through a number of local and National Charities.</li>
			<li>If you have any questions please don't hesitate to call us.</li>
		</ul>
		<p>Another Paragraph of text (optional)</p>
	</div>

</div>

Double <div> Method

<li> and content with imageshow on the right, text area has mimimum width to prevent text wrapping (responsive)

• With this you can change the side on which the image floats
• It is also possible to put more in the floated <div> than an image, anything you want.
• In the 'text/content' <div> you can put anything you want
• this is the best method, the most flexible.

NB: in this example i set imageshow to 419px width   X   336px height, Theme Slider

HTML

<div style="overflow: hidden;">

	<div style="float: right; margin: 10px;">{imageshow sl=1 sc=1 /}</div>
	
	<div style="overflow: hidden; min-width: 180px;">
		<h2>This is a Title</h2>
		<p>This is a paragraph of Text</p>
		<ul class="list-number-digit digit-brown">
			<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
			<li>Just 10 minutes South East of Lincoln.</li>
			<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
			<li>We also have a long history of serving the community through a number of local and National Charities.</li>
			<li>If you have any questions please don't hesitate to call us.</li>
		</ul>
		<p>Another Paragraph of text (optional)</p>
	</div>

</div>

Unsorted Examples

Item/Article list (ie rooms) image on the left

Minimum width for the item to prevent title wrapping and splitting lines (responsive)

http://www.inchrye.co.uk/rooms

HTML

<p>Our Rooms at Inchrye Bed and Breakfast are all well maintained but retain a homely feel so you can enjoy your stay in Inverness like it was your own back garden. We have a wide variety of room sizes to suite all family sizes.</p>
<p><img alt="Suite Room with Double Bed and own Sitting Room" class="frame-2" src="/images/rooms/suite-room.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Suite Room with Double Bed and own Sitting Room" /></p>
<p style="float: left; min-width: 180px;"><strong>Suite Room with Double Bed and own Sitting Room</strong></p>
<div style="clear: both;">&nbsp;</div>

2 columns thing - easier version (responsive)

http://www.scomadi.co.uk

HTML - Easy Version

<p><img style="float: left;" src="/images/pages/home/white-scomadi.jpg" alt="white-scomadi" width="327" height="260" /></p>
<div style="float: left;">
	<p>Turismo Leggera</p>
	<p>
		The Turismo Leggera range represents the<br />culmination of 10 years of prototype development.<br />Utilising the experience of Scooter Innovation &amp; PM<br />Tuning Racing Products, Scomadi are aimed at<br />providing a new era in scootering for followers of<br />iconic Italian design.<br />With styling cues taken from the Grand Prix model<br />the goal was to create a "Modern Classic".<br />A machine that allows the true enthusiast to retain<br />classic styling without sacrificing reliability or<br />modern day functionality. The Turismo Leggera 250<br />was initially released as a carbon fibre,10 machine<br />limited edition hand built in the UK.<br />Demand for further machines evolved into another<br />30 handmade 300cc machines with the latest mass<br />production series of Scomadis presented today.<br />The Turismo Leggera range will present a dynamic<br />package for the discerning scooterist available<br />firstly as air cooled 50cc and 125cc engine options<br />with a flagship model 300cc due for mid 2014.<br />The Scomadi TL300 will be equipped with the Piaggio<br />“class leader”: QUASAR- 300, 4 valve, liquid cooled,<br />engine. One of the lightest, most compact, and<br />powerful 300cc motors on the market. Powered by<br />22HP at 7,500 rpm. The TL300 ensures top<br />performance in terms of speed and acceleration with<br />reliability.
	</p>
</div>

HTML - Image on alternating side, float left then float right

http://www.sidescansystems.com/brite-side-scan-system

<p>
	The system consists of 4 Ultrasonic sensors mounted down the left side fo the vehicle and a warning display mounted in the cab. When the left hand indicator is on the unit will sense the presence of a cyclist, pedestrian or vehicle and give its posistion and range up to 1.5 mtrs. At the same time, a spoken voice warning is played saying &quot;This vehicle is turning left&quot; to warn anyone on the nearside.
</p>
<p>&nbsp;</p>
<p style="text-align: right;"><img alt="Side Scan Kit" class="frame-2" src="/images/side-scan-kit.jpg" style="float: right;" title="Side Scan Kit" /></p>
<p style="margin-left: 80px;"><strong>Features</strong></p>
<ul class="tick" style="margin-left: 80px;">
	<li>4 x Ultrasonic Sensor with 1.5 mtr range</li>
	<li>In cab warning unit which displays range and position</li>
	<li>98db Voice Sounder - &quot;This vehicle is turning left&quot;</li>
	<li>IP68 Waterproof rated</li>
	<li>12v-24v operation</li>
	<li>Can be fitted to almost any vehicle</li>
	<li>Low speed sensing - shuts off at higher speeds</li>
</ul>
<div style="clear: both;">&nbsp;</div>

<p>&nbsp;</p>
<p><img alt="Choice of Sensors" class="frame-2" src="/images/choice-of-sensors.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Choice of Sensors" /></p>
<p>
	<strong>Choice of sensors - Underslung or Flush Mount</strong><br />
	(Depending on application)
</p>
<div style="clear: both;">&nbsp;</div>

Overflow Notes

These are some notes that i used when creating these code samples.

• for the overflow with image trick to work. the image must not be in the same container as the text, ie the <p>, this must be seperate otherwise you are just enabling overflowing for both of them putting you back to square 1.
• the image and paragraph need to be grouped together in their own container. ie a <div>
• the div needs the overflowing enabled because the div will expand with the text not wrapping
• the <p> containing the text will need overflowing enabled because it too will expand due to the text not wrapping.
• also to stop full on text squashing you should use min-width: 180px;
• correction, only the containing <p>/<div> will need the overflow. but they still need to be grouped together so the browser knows  what to overflow
  
  
• correction, the overflow: hidden on the primary containing div (ie hold the img and the <p>), its purpose is to allow the whole conatiner to resize. if you just have the text overflow command the text does not wrapp around the image but dissaperas off the side of the browser
• min-width: is the best width for showing text on an iPhone. i worked this out by experimenting
  
  
• overflow seems to of been the key - see css - How to make an inline-block element fill the remainder of the line? - Stack Overflow (the example  code - http://jsfiddle.net/qx32C/36/)
• The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
• both overflows are inportant, the widths etc can be changed

Vertical Lists:

Vertical list with alternative bullet

You can use any image for a list bullet as shown below but they must be small enought to fit otherwise the text will become out of alignment with the icon. If you want to use larger images you need to use a different method.

• Single room with bed and breakfast £30 per person
• Double Room with bed and breakfast £35 per person
• (All Prices shown above are per night)
• (All rooms are en Suite)

HTML

<ul style="margin-left: 40px; list-style-image: url('/images/kb/2014/498/lists-with-large-custom-icons-that-are-vertically-aligned/tick.png');">
	<li>Single room with bed and breakfast &pound;30 per person</li>
	<li>Double Room with bed and breakfast &pound;35 per person</li>
	<li>(All Prices shown above are per night)</li>
	<li>(All rooms are en Suite)</li>
</ul>

Vertical list with Icons

• Disable bullet points and then use backgrounds and padding on the <li> to get same effect, however this is then not using bullet images and could possible cause cropping.
• Use position: relative and then move the text with a top: -10px etc.. This works and still uses bullet points

position: relative method

This method sets a separate icon for each <li> item although you can set a global icon in the <ul>. When you do this the text in the <li> is moved out of horizontal alignment with the icon so it looks messey. To fix this I have surrounded the 'text'/'the whole on the <li> contents' and then I have used a position: relative and top: -10px statement to move the text back into the center of the icons. You now have a nice looking list with large custom icons. The position: relative in the <ul> is important for this to work. You can also put all of the styling into a CSS file if you want.

• Wi-Fi
• Tea and Coffee
• TV
• Fresh Towels
• Our stay includes a traditional English breakfast.
• We also have a variation of cereals and fruits available.

HTML

<ul style="margin-left: 40px; position: relative;">
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/wi_fi_32.png');"><span style="position: relative; top: -10px;">Wi-Fi</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/coffee_maker_32.png');"><span style="position: relative; top: -10px;">Tea and Coffee</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/television_32.png');"><span style="position: relative; top: -10px;">TV</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/towel_32.png');"><span style="position: relative; top: -10px;">Fresh Towels</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/bulls-eye-eggs-with-toast-and-bacon_32.png');"><span style="position: relative; top: -10px;">Our stay includes a traditional English breakfast.</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/corn_flakes_32.png');"><span style="position: relative; top: -10px;">We also have a variation of cereals and fruits available.</span></li>
</ul>

Horizontal Lists:

Joomlashine Version

grid layout works by splitting the width up by % but on 'mobile' devices, grids fallback to 1 vertical column. Thi sis not ideal in all situations but is an option.

HTML

<div class="grid-layout">
	<div>Text in column 1</div>
	<div>Text in column 2</div>
</div>

Centered Horizontal Ordered or UnOrdered List with no bullet points

This is method is really useful for making horizontal menus. You can make all of the items appear on the same line if you make the <ul> wider. I have not tried playing with min-width and max-width but they should work.

• Electrician in Kent
• Electrician in Canterbury
• Electrician in Dover
• Electrician in Ashford

HTML

<ul>
    <li>Electrician in Kent</li>
    <li>Electrician in Canterbury</li>
    <li>Electrician in Dover</li>
    <li>Electrician in Ashford</li>
</ul>

CSS

ul {
	list-style: none;
	margin: 0 auto;
	width: 400px;
	padding: 0;
}

li {
	float: left;
}

DIV Inline List (Joomla Footer Keyword List )

• Solar Thermal Panels in Lincolnshire
• Ground Heat Source Pumps in Lincolnshire
• Wind Turbine Installations in Lincolnshire
• Renewable Energy Services in Lincolnshire
• Solar Photovoltaic Panels in Lincolnshire
• All Ways Green Ltd

HTML

<ul style="list-style: none;">
	<li style="display: inline;">Solar Thermal Panels in Lincolnshire</li>
	<li style="display: inline;">Ground Heat Source Pumps in Lincolnshire</li>
	<li style="display: inline;">Wind Turbine Installations in Lincolnshire</li>
	<li style="display: inline;">Renewable Energy Services in Lincolnshire</li>
	<li style="display: inline;">Solar Photovoltaic Panels in Lincolnshire</li>
	<li style="display: inline;">All Ways Green Ltd</li>
</ul>

or

• this make a nice horizontal list with no styling.
• not sure what the outside does and not 100% tested

• Electrician in Kent
• Electrician in Canterbury
• Electrician in Dover
• Electrician in Ashford

CSS

.centered-list li {
	float: left;
	list-style: none outside none;
	padding: 5px;
}

HTML

<ul class="centered-list">
	<li>Electrician in Kent</li>
	<li>Electrician in Canterbury</li>
	<li>Electrician in Dover</li>
	<li>Electrician in Ashford</li>
</ul>
<div style="clear: both;">&nbsp;</div>

you can also use the line below instead of inline CSS

<li style="float: left; list-style: none outside none; padding: 5px;"></li>

DIV Horizontal List

This is a basic horizontal list using <div>

HTML

<div style="text-align: center; valign: top; background-color: white;">

	<div style="width: 150px; display: inline-block;">
		<a title="City and Guilds NPTC" href="http://www.nptc.org.uk/" target="_blank">
			<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" alt="City and Guilds NPTC" />
		</a>
	</div>	
	
	<div style="width: 150px; display: inline-block;">
		<a title="International Society of Arboriculture" href="http://www.isa-arbor.com/" target="_blank">
			<img src="/images/modules/498/medium-icons/international-society-of-arboriculture.jpg" alt="International Society of Arboriculture" />
		</a>
	</div>
	
	<div style="width: 150px; display: inline-block;">
		<a title="Constuction Line" href="http://www.constructionline.co.uk/" target="_blank">
			<img src="/images/modules/498/medium-icons/constuction-line.png" alt="Constuction Line" />
		</a>
	</div>
	
	<div style="width: 150px; display: inline-block;">
		<a title="Acclaim Accreditation" href="http://www.constructionline.co.uk/static/acclaim/" target="_blank">
			<img src="/images/modules/498/medium-icons/acclaim-accreditation.png" alt="Acclaim Accreditation" />
		</a>
	</div>
	
</div>

Horizontal List - position:relative method

CSS

<style type="text/css">
	.qw-list {	
		overflow: hidden;
	}
	.qw-list ul {
		list-style: none;
		position: relative;
		float: left;
		display: block;
		left: 50%;
	}
	.qw-list ul li {
		position: relative;
		float: left;
		display: block;
		right: 50%;
	}
</style>

HTML

<div class="qw-list">
	<ul>
		<li>Electrician in Kent</li>
		<li>Electrician in Canterbury</li>
		<li>Electrician in Dover</li>
		<li>Electrician in Ashford</li>
	</ul>
</div>

 Horizontal List / Menu (Simple)

• Electrician in Kent
• Electrician in Canterbury
• Electrician in Dover
• Electrician in Ashford

CSS

<style type="text/css">
	ul.qw-divmenu {
		width: 75%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
	ul.qw-divmenu li {
		display: inline-block;
	}
</style>

HTML

<ul class="qw-divmenu">
	<li>Electrician in Kent</li>
	<li>Electrician in Canterbury</li>
	<li>Electrician in Dover</li>
	<li>Electrician in Ashford</li>
</ul>

Ordered and Un-Ordered List Method <li>

I came across this method at WebFusion where they took a clever method for making list with images by using ordered and unoredered lists and replacing the bullet point wiht an image.

So this method will requires some html code and some CSS code. The CSS code could be inline if you needed.

• Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
• Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

CSS

ul.icon_list {
	list-style: none;
}

.icon_list li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
}

.medium .customised {
	/*background-position: 0px -4695px;*/
}

.medium .flexible {
	/*background-position: 0px -4895px;*/
}

.icon_list.medium li {
	padding-left: 60px;
	background-color: transparent;
	background-image: url("images/modules/498/small-icons/television_32.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	/*background-position: 0px 5px;*/
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
}

This CSS code utilises image sprites but can easily be adapted to use normal images

HTML

<ul class="icon_list medium green">
	<li class="customised">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</li>
	<li class="flexible">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</li>
</ul>

Using Icons as bullet points

• Address: 198 Example street, Suite 7s new York, NY 10013

• Phone: 112 345 6798

• Email: example@email.com

CSS

.fu-list li {
	clear: both;
	margin: 15px 0 0;	
	padding-bottom: 0;
	list-style-type: none;
	list-style-position: outside;
}

.fu-list .fu-icon-wrapper {
	width: 20px;
	height: auto;
	line-height: 24px;	
	margin: 1px 10px 0 0;	
	z-index: 9;
	text-align: center; /* evens all the icons up */
	float: left;
}

.fu-list .fu-icon-wrapper i[class*="fa"] {
	font-size: 18px;
	display: block !important;
	color: #000;
}

.fu-list .fu-content {
	overflow: hidden; /* this prevents the text flowing under the icon */
}

.fu-list .fu-content p {
	padding: 0;
	margin: 0;
}

HTML

<ul class="fu-list">			
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i></div>			
		<div class="fu-content"><p>Address: 198 Example street, Suite 7s new York, NY 10013</p></div>			
	</li>				
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-mobile"></i></div>			
		<div class="fu-content"><p>Phone: 112 345 6798</p></div>			
	</li>				
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-envelope"></i></div>			
		<div class="fu-content"><p>Email:&nbsp;<a href="mailto:example@email.com">example@email.com</a></p></div>			
	</li>				
</ul>

<div style="clear: both;">&nbsp;</div>

Notes

• This requires that you have FontAwesome installed
• This also employs a different method for making a list

Product List with Manual Icons

This is a really nice solution to having icons in a list.

CSS

.product-list {
	font-family: wf_segoe-ui_normal, 'Segoe UI', Segoe, 'Segoe WP', Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
}

.product-list ul {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.product-list li {
	margin: 0;
	padding: 0;
	line-height: 1.25;
	display: block;
	margin: 0 0 0.75em;
	font-size: 1em;	
}

.product-list li.heading {
	font-size: 1em;
	font-weight: normal;
	margin-bottom: 0.65em;
}

.product-list .product-link {
}

.product-list li a {
	color: #1A1A1A;
	font-size: 0.9em;    
	font-size: 1em;
	cursor: pointer;
	text-decoration: none;
	height: 10px;
	vertical-align: top;
}

.product-list li img {
	display: inline-block;
	height: 26px;
	width: 26px;
	margin-bottom: -0.45em;
	margin-right: 10px;
	max-width: 100%;
	border: none;
}

.product-list li img.product-left {
   float: left;
}

@screen and (min-width: 540px;) {
	.product-list ul:first-child {
		margin-top: 0em;
	}
}

HTML

<div class="product-list">
	<ul>
		<li class="heading">Product List Title</li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 1<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 2<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 3<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 4<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 5<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
	</ul>
</div>

Just like PHP (ie php.ini), phpMyAdmin also has its own execution time limit. Why? I dont know.

You are most likely to see an error like the one below:

Fatal error: Maximum execution time of 60 seconds exceeded in C:\xampp\phpmyadmin\libraries\dbi\mysql.dbi.lib.php on line 140

To increase the phpMyAmin execution time, you need to edit the file

Add this line to xampp\phpmyadmin\config.inc.php

$cfg['ExecTimeLimit']=6000;

You might also want to change the settings below in the normal php.ini file if you still are getting timeout errors.

And Change xampp\php\php.ini to

post_max_size =750M 
upload_max_filesize =750M   
max_execution_time =5000
max_input_time =5000
memory_limit =1000M

And change xampp\mysql\bin\my.ini

max_allowed_packet =200M

• I always believed that css when parsed was processed from the top down with no exceptions. Although it does read from top to bottom and process in that direction there is a prior level to that.
• It appears that the css is parsed in element levels first. it scans each element level and then goes down the page for each level ie. each deeper level has the ability to overide its parent. see examples below:

Example 1

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact fieldset p {padding-left: 60px;} /* correct drop down placement */

Even thought the padding-left is after, the first line take presidence because it is further down the element chain. so line 1 will apply.

Example 2

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact #center_column fieldset p {padding-left: 60px;} /* correct drop down placement */

In this example line 2 will be applied because the are at the same element level, but then line 2 is after line 1 so is applied as you normally expect css to work.

Full Syntax

{nicepaypal:button type|amount|item name|item number|shipping|shipping2|tax|item quantity|weight|option1|option2}

Real World Examples

{nicepaypal:cart|79.99|Custom Teeth Whitening Trays|||||field;Enter Quantity;1;3||}

<p>{nicepaypal:cart|79.99|Custom Teeth Whitening Trays|||||field;<strong>Enter Quantity</strong>;1;}</p>

Fingerprinting

To prevent version of Joomla being identified. A way to check if you're running a Joomla site and what version by what files and directories are present. Also will prevent Blind Elephant working. One of the easiest ways for an attacker to decide if your site is a potential Joomla! target is to perform a rudimentary visual fingerprinting.

Template Issues, Deny these links via htaccess

• http://www.joomla.org/?tp=1 (Reveals Template Positions/Triggers the modules debugging mode)
• http://extensions.joomla.org/?template= (This will change your site's template a template name after the =)
• http://www.joomla.org/?tmpl=offline (Triggers the display of a system sub-template)

Delete These

* You should also remove (if not needed) the default joomla images. Presence of Certain default files and folders can ID the Joomla Version. Delete the following:

Directories:

• ../images/stories/food
• ../images/stories/fruit

Files:

• articles.jpg, clock.jpg, ext_com.png, ext_lang.png, ext_mod.png, ext_plugin.png, joomla-dev_cycle.png,

• key.jpg, pastarchives.jpg, powered_by.png, taking_notes.jpg, web_links.jpg
• * deny access to xml and language.ini files (via htaccess in ## This also blocks fingerprinting attacks browsing for XML and INI file (or <Files ~ "\.xml$">))

Other Fingerprinting

• Disable PHP easter eggs (Visual Fingerprinting)(via htaccess)

 Other Security

• disable anonymous ftp in your cPanel
• your site should have only a handful of entry points, namely the index.php and index2.php files inside your site's root and the administrator and xmlrpc subdirectories.
  (via htaccess / Joomla Backend Protection Section, this restricts Joomlas administrator, components, modules and plugins folders)
• SQLi protection / prevent SQLi Attacks (via htaccess)
• SQLi protection / prevent SQLi Attacks (via joomla extensions), JHackgurad from siteground, possibly sh404SEF
• remove or replace - x-powered-by header, usually says something like PHP version X-Powered-By: PHP/5.3.2 , use clean Response plugin, possibly use htaccess
• remove meta tag generator joomla, sh404SEF does this, if not available use ByeBye Generator
• Turn off and uninstall what you don't use. There's a security benefit to this practice also since unused code can still be the source of a vulnerability that gets you cracked.
• disallow images in robots.txt
• it is suggested super admin user should be in the 1-61 range when you change it
• remove the X-Powered-By header, edit the php.ini, find expose_php=Off and change to expose_php=on
• joomla when using gzip apparently adds a X-Powered-By Header, remove with plugin
• remove joomla id in responses when gzip is used (clean response)
• turn php errors off in php.ini
• make sure jos_ or jos151_ prefix are not used (see note below for instructions to change)
• Upload and configure custom .htaccess file
• use strong passwords (ie cPanel)
• htaccess password for all non joomla directories (via htaccess)
• stop hotlink (cpanel or htaccess)
• remove unused XML-RPC Server (if not needed)
• admin to SSL (only if cert is installed)
• enable SSL
• Remove (if not needed) the standard images from the images folder. The stories/fruit and stories/food are another way to check if you're running a Joomla site
• Turn Joomla Error Reporting off, Global Configuration page (see notes)
• Turn PHP Error Reporting off (if not needed)
• Remove the XML-RPC server if you don't need it.
• remove joomla generator (might be done sh404sef)
• add reCaptcha boxes where needed ie user registration
• Restrict Access to the Administrator Section
• hidden URL for administrator access via jsecure
• username and password for admin directory via htaccess
• Consider proper ACL for backend when there are multiple administrators etc.. dont have everyone as Super Admins
• restrict access to the installer - when using mulitple admins
• make sure host has suPHP running and that all file permission are directories have 0755 permissions and all regular files 0644 permissions

• Error Reporting to None

  Prevents any minor glitch to reveal sensitive server configuration information to a potential hacker). If this doesn't work, disabling PHP's error output to the browser in the php.ini. Leaving Error Reporting set to anything else except NONE will slow down your website and give hackers a security hole that they can use to peer into your server settings and PHP environment. Turn it off (NONE) unless you are debugging at the moment. Only use Error Reporting while testing or debugging. Otherwise keep it turned off.

• robots.txt is a security nightmare.

  - create deny lists for certain folders. better than identifying them in robots.txt
  - Think twice about what you put in your robots.txt, since this is a common source for attackers to find interesting URLs
  - ideally - make everything dissallowed and then add exceptions. this will not show what folders are there

• if suhosin patch is installed this can cause unxplained issues where stuff will not run. it cannot be disabled by users but can be put in simulation mode (same thing)

  find extension="suhosin.so" and add the following line below to give
  extension="suhosin.so"
  suhosin.simulation="On"

This useful article shows you what parts of a URL you can build with .htaccess server environmental variables.

URL Anatomy

Below I have named the various parts of a URL and given the corresponding global PHP variable. This is not an exahstive list as you can get usrrname passwords from a URL

https://user123:password1@video.quantumwarp.com:8080/subfolder/subfolder2/index.php?turnip=51&alien=54#myniceheading
1       2      3          4     5              6    7                              8                  9             10

## PHP Variables ##
$_SERVER['SERVER_PROTOCOL'] 1-2   (:// is not included)
$_SERVER['HTTPS'];                (This is a Boolean)
$_SERVER['PHP_AUTH_USER']   2-3
$_SERVER['PHP_AUTH_PW']     3-4   (: and @ are not included)
$_SERVER['SCRIPT_NAME'];    4-8
$_SERVER['PHP_SELF'];       4-8
$_SERVER['HTTP_HOST'];      4-6
$_SERVER['SERVER_NAME'];    4-6
$_SERVER['SERVER_PORT'];    6-7   (: is not included)
$_SERVER['REQUEST_URI'];    7-10  (fragment might not be included)
$_SERVER['QUERY_STRING'];   8-9   (? is not included)

## Part Names ##
Protocol                    1-2
Username                    2-3
Password                    3-4
Sub Domain                  4-5
Domain                      5-6
Port                        6-7
Path                        7-8
Query                       8-9
Fragment                    9-10   (some might refer to this as an Anchor)

Links

• URL Layout
  • Anatomy of a URL | doepud.co.uk (Wayback Machine) - very useful article on this subject.
  • What are the parts of a URL?  |  Articles  |  web.dev - What's the difference between a host, site and origin? What is an eTLD+1? This article explains.
  • URL - Wikipedia - A uniform resource locator (URL).
  • URI fragment - Wikipedia - The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document.
• PHP
  • PHP $_SERVER | W3Schools
    • $_SERVER is a PHP super global variable which holds information about headers, paths, and script locations.
    • This has an online demo where you can see the output of these variables.
  • $_SERVER - PHP Manual - Server and execution environment information
  • parse_url - PHP Manual
    • Parse a URL and return its components
    • This will get the fragment from the URL.
  • How to get the current full url (url + fragments) of the webpage in PHP? - Stack Overflow
    • You will not be able to get the fragment portion of the URI back as it is used on the client only. If you need this you will manually have to send them to a server with some JavaScript.

To change the database prefix to prevent SQL Injection Attack (if not done during install)

Backup your database and site first.

Method 1 - PHPMyAdmin (inbuilt)

Newer version of PHPMyAdmin have a table prefix changer inbuilt and is now the prefered method.

• Open up your Joomla database in PHPMyAdmin
• Check All tables. If you can see them all exand the number of tables you can see on the page.
• At the bottom, With Selected: , choose Replace table prefix
• It will now ask you for the From prefix which is your current one jos_ , you should fill this in the box. You can also usually see the database prefix in the column on the left. The To prefix should be a random 5 characters using upper case, lower case and numbers (ie TrFgH_).
• Click submit
• Done

Method 2 - Old Text File method

Taken from here

• Make a note of you database prefix either from joomla itself or the configuration.php file. For this example we will assume jos_
• Go to PHPMyAdmin and export your database as a SQL file
• Open database SQL file in a text editor (Notepad++).
  • Search and replace (Ctrl+h in Notepad++)  jos_ with your new database prefix, it should be a random 5 characters using upper case, lower case and numbers (ie TrFgH_).
  • Save the file
• Go in phpMyAdmin
  • select your Joomla database and empty it of tables and data (i.e. Truncate)
  • import the new SQL database file from above in to your Joomla database
• Via ftp edit your configuration.php to refelct the new table prefix. No other details will need to be changed.
• Done

This table quickly converts times into seconds for the use in htaccess rules.

#-------------------------------------------
# TIME CHEAT SHEET 2
#-------------------------------------------
# 300 5 MIN
# 600 10 MIN
# 900 15 MIN
# 1800 30 MIN
# 2700 45 MIN
#
# 3600 1 HR
# 7200 2 HR
# 10800 3 HR
# 14400 4 HR
# 18000 5 HR
# 36000 10 HR
# 39600 11 HR
# 43200 12 HR
# 46800 13 HR
# 50400 14 HR
# 54000 15 HR
# 86400 24 HR
#
# 86400 1 DAY
# 172800 2 DAY
# 259200 3 DAY
# 345600 4 DAY
# 432000 5 DAY
# 518400 6 DAY
# 604800 7 DAY
#
# 604800 1 WEEK
# 1209600 2 WEEK
# 1814400 3 WEEK
# 2419200 4 WEEK
#
# 2419200 1 MONTH
# 4838400 2 MONTH
# 7257600 3 MONTH
# 9676800 4 MONTH
# 12096000 5 MONTH
# 14515200 6 MONTH
# 16934400 7 MONTH
# 19353600 8 MONTH
# 21772800 9 MONTH
# 24192000 10 MONTH
# 26611200 11 MONTH
# 29030400 12 MONTH

Increased performance for all websites

• gzip compress files, use either htaccess (quicker) or php (compatable) nb delate is modern gzip
  compressing some file types will cause the file to be larger ie PNG as it is already compress
• optimize images using Smush IT, makes a big diffference. removes useless data and decreases file size
• gzip output from dynamic sites, using php headers
• minify html by removing white spaces
• aggregate and minify CSS files, gzip output
• aggregate and minify JAVA files, gzip output (not inline as they might be placed there for a reason)
• move Javascript(s) to the bottom of the page, usually just above </body>
• use CSS sprites instead of multiple images, a CSS sprite is where all the images are made in to one and called different
• optimize database via phpmyadmin when nessasary, recommended once a week, select all the joomla tables in the joomla database and then select optimize.
• keep images to a minimum
• dont gzip items more than once in a chain
• have a suitable htaccess, to large and it could slow things down
• disable Etags, unless you actually need them they are a waste of time especially in shared server environments
• make sure google analytics is latest version for speed, use asynchronous version
• make sure all you have the latest version of JAVA and scripts

• google prefers expires and set to 1 month

• look at apache redirect and double slash section and make run quicker ie expressions ?*+

  (.*) is really hungry

• joomla recommends output buffering is disabled. this most likely creates a performance increase.

caching will increase a users experience but not increase raw speed for intial visits such as google

• set far future expires headers for files, this will tell the browser until the file expires it does not need to re-download, PHP or htaccess. htaccess is quicker
• set far future expires headers for dynamic content, this has to be done by PHP
• recommend lenght for far future is 7 days minimum, this allows you to change in a short time if you need. when set unless the clients browser is purged or runs out of room this header will be obeyed

performance items applied to a joomla setup

see - http://www.joomlaperformance.com/articles/performance/so_you_want_to_speed_up_joomla_3_14.html

• joomla global cache on, 60 mins, set in global config, i am currently trying JOT Caching instead
  (this a joomla content cache to hold created content)
• page cache on, 60 mins (this a joomla content cache to hold created content)
• all modules should have caching turned on, use global settings (easier to manage later) (this a joomla content cache to hold created content)
• content gzip on, set in global config
• use JFinalizer or JCH Optimizer (currently prefered) for compressing, minimizing and aggregating js and css
• optimize image files with Smush IT, using firebug and YSlow,
• turn on compression of files via htaccess that are not dynamic
• optimize database via phpmyadmin (see notes in above section)
• setup plugin order, can be important, each layer passes process content to the next plugin in the list
• Process all images with Smush IT,
• make sure google analytics is latest version for speed, use asynchronous version
• gzip joomla content see above worth 0.2 - 0.4 on a commercial template and little content, uses PHP
• disable legacy plugin, worth 50ms on code generation with cache on
• optimize database - via phpmyadmin, select all the joomla tables in the joomla database and then select optimize. do this on a regular basis

• - joomla and jot cache do not store headers

Notes

when stuff doesnt work try this

• JCH optimize can break ajax and javascript stuff
• disabled mootools in template settings (doesnt disable joomlas own mootools, must be standard now)
• excluded mootools.js in jch optimizer and shit works. wonder why it worked before, when you swapp pages ssearch box goes gay, and sh404sef 404 errors happen
• dont minify html when using code snippets

caching

• joomla Far Future Expires Headers plugin, this adds the correct expires headers to
  dynamic content (not etags currently), default settings with 1 hour interval, possible 1 week when happy
• configure Far Future Expires in htaccess for files, all media files usually. 1 week when happy, longer is better but has issues

NB:

• google only downloads the html part not images etc..#
• large ip block list is worth about 2 seconds
• large ip list can add 1 - 1.5s per page load
• cache + jcoptimiser worth at least 2 secs
• install cache cleaner, not performance related but when you have made the changes this is iunvaluable to save time
• seems best. yoo phoneix with compress and gzip on. no compression on in htaccess. no gzip on in JCH optimiser, cache header plugin on.
• trying to gzip png files increases load time. optimise images instead
• dont gzip content more than once and ir could cause excessive use

To Do - investigate

• yoo login, search css.php needs adding and aggregating
• htaccess slimming down maybe
• yoo search .JS needs aggregating
• somehow make images sprites
• is sh404sef the quickest
• xmap cache ? set to 15 mins for now
• if i turn on main cache yoosearch css goes mental, disbled module cache no will turn on jch minimise css and js
• if i turn main cache on, the 2 x yoo modules search and login ccc.php references dissapear
• mess with the global cache option and the 2 x yoo modules (currently yoo search cache turned off yoologin cached 15 mins)
• add to tickets for jch optimize option of a htaccess compression similiar to jfinalizer. htaccess is quicker. no compression/gzip compatible compression/htaccess compression which also uses real files which is better.
• install the google toolbar with page rank i think deliver page speed information
• turn on global cache set to 60 mins miniumm
• far future headers should be set to 1 week minimum from what i read. will test

These are the headers that are set for the aggregated file:

• Content-type: text/css or text/javascript
• Expires: set in admin
• Last-Modified: set based on the time file was created in cache
• Cache-Control: Public This enables proxy caching
• Vary: Accept-Encoding This allows both gzipped and normal version of the file to be cached
• Content-Encoding: gzip if that option is selected

Performance Page (other notes)

• benchmark site before optimising (YSlow, WebWait.com, JoomlaPerformance.com, WebsiteOptimization.com)

Cache

• read caching tutorial (on wiki)
• enable and configure joomla cache (possibly jot cache) - http://www.theartofjoomla.com/joomla-caching-explained.html
  (turned on, either from Global Configuration or enable the "System Cache" Plugin from Plugin Manager. Sometimes enabling Cache does not go well with cyrillics or special characters used)
• Turn on page and module caching.
• set HTTP Cache Headers for joomla dynamic content, use "set max-age= , public , must-revalidate" (check the actual function of this as confilcting reslts)(possibly use private on shop sites)
• configure server/file cache via htaccess - http://www.mnot.net/cache_docs/

HTML Output

• CSS, combine, minify and gzip
• Java Script, combine, minify and gzip
• move/defer all Java Script to bottom of the page
• Minify HTML
• Combine background images in to a css sprite
• Make sure there aren't any Javascript issues like duplicate scripts, or clashing javascript frameworks. can cause slow performance
• Enable joomla gzip for HTML output (Site->Global Configuration->Sever->Enable GZip Compression) to test http://www.gidnetwork.com/tools/gzip-test.php

Other

• configure plugin order
• optimize image files using smusit (reduces size)
• remove unused extensions. possibly better to uninstall extension
• Check for leftover database tables of old components or plugins and drop those tables.
• Optimize and repair the database tables. Use PhpMyAdmin for this. Or 'Admin Tools from Akeeba, Databse Optimise Plugin
• Remove/solve 'Not Founds' or '404' errors they have bad effect on speed. The server/ browser is left thinking about how to deal with this missing item
• use optimised template
• Turn off Joomla error reporting off.
• htaccess performance options:
  Enable HTTP Cache Headers
  Enable gzip options
  Disable ETags (for better performance on clustered servers), unless you need them turn them off

• dont gzip jpg and png because it makes them bigger ? (check this)

Which Parameters are Important?

1. HTTP requests
2. Total size
3. Number of HTML / CSS images
4. Number of CSS / JS (scripts) files.
5. Size of CSS / JS / HTML images.
6. Check for duplicate JS files.
7. Check for NOT FOUND items.

PHP Compression

compressing a websites output makes the delivery of the content to the browser quicker.

Caching

• The fact is that proxy and browser caches will be used whether you like it or not. If you don’t configure your site to be cached correctly, it will be cached using whatever defaults the cache’s administrator decides upon.
• Validators are very important; if one isn’t present, and there isn’t any freshness information (Expires or Cache-Control) available, caches will not store a representation at all.
• HTTP 1.1 introduced a new class of headers, Cache-Control response headers, to give Web publishers more control over their content, and to address the limitations of Expires.
• ETags are made out of three components: the INode, MTime, and Size.
• Removing ETags & Adding Far Future Expires headers is better. ETags require server responses
• Expires Header - Set a particular time and date when the content will expire, header HTTP date is Greenwich Mean Time (GMT), not local time
  - reponse to this is last accessed or lasst modified
  - ie server rule 2 weks from last modified, 2 weeks from last acssessed, date this sets the expires header

• Basically most images, css, javascript, and other files can be optimized for faster download by telling your site visitors to cache them for a certain period of time. The default behaviour is to check the last-modified and/or the Etag headers of the file EVERY time it is requested.

• So a user goes to /home/index.html, and the browser caches all the images and files. Then the user leaves the site and comes back later, and the browser has to send If-Modified-Since conditional GET requests for every cached item, basically to see if the file has been changed and if they should update their cache.

• Dynamic content cannot be cached via htaccess, ie joomla unless you add the headers to the output via php

• When files are then cached by your site visitors they do not send the If-Modified-Since until the set cache time has completed.

• Once an item is cached it will remain cached until it expires or gets revalidated

• The Expires and cache-control headers can’t be circumvented; unless the cache (either browser or proxy) runs out of room and has to delete the representations

• the cached copy will be used until then which means less http requests

• Expires/max-age are superior as they mean there's no need for a request. However, ETag/Last-Modified is still better than nothing.

• less http requests

• ETag and Last-Modified headers are on by default

• BE WARNED. Do not set to long a expire time

• YSlow has a minimum far future date - to be added here soon i think it is 1 week google is 1 month and wants expires

The Relevant Cache-Control Headers are:

Cache-Control : max-age = [delta-seconds]
Modifies the expiration mechanism, overriding the Expires header. Max-age implies Cache-Control : public.

Cache-Control : public
Indicates that the object may be stored in a cache. This is the default.

Cache-Control : private
Cache-Control : private = [field-name]
Indicates that the object (or specified field) must not be stored in a shared cache and is intended for a single user. It may be stored in a private cache (ie browser cache).

Cache-Control : no-cache
Cache-Control : no-cache = [field-name]
Indicates that the object (or specified field) may be cached, but may not be served to a client unless revalidated with the origin server.

Cache-Control : no-store
Indicates that the item must not be stored in nonvolatile storage, and should be removed as soon as possible from volatile storage.

Cache-Control : no-transform
Proxies may convert data from one storage system to another. This directive indicates that (most of) the response must not be transformed. (The RFC allows for transformation of some fields, even with this header present.)

Cache-Control : must-revalidate
Cache-Control : proxy-revalidate
Forces the proxy to revalidate the page even if the client will accept a stale response. Read the RFC before using these headers, there are restrictions on their use.

Caveats

• HTTP/1.0 has minimal cache control and only understands the Pragma: no-cache header. Caches using HTTP/1.0 will ignore the Expires and Cache-Control headers.
• None of the Cache-Control directives ensure privacy or security of data. The directives "private" and "no-store" assist in privacy and security, but they are not intended to substitute for authentication and encryption.

Notes

• "max-age" value indicates the time difference (in seconds) after which the content will be expired and reloaded from the server

• "public" keyword presence indicates that any system along the route may cache the response

• "must-revalidate" indicates caching systems to obey other header information you may provide at a later time about the cache. This should help preventing stale caching (that is, caching that delivers content that is outdated).

• by eliminating the Last-Modified and ETags headers, you are eliminating validation requests, leading to a decreased response time. This should work fine in most cases when dealing with static, rarely updated content.

  Example 1

  http://tutorialpedia.org/tutorials/Apache+enable+file+caching+with+htaccess.html

  Example 2

  http://linuxdevcenter.com/pub/a/linux/2002/02/28/cachefriendly.html?page=2

• The reason I remove and disable the ETag is because supposedly some browsers will ignore your Expires header when it’s present:

• The reason I remove the Last-Modified header is for the same reason:

• The reason I set the Cache-Control header to ‘public’ is so the browser will cache media over HTTPS (see tip #3):

• The reason I set the Cache-Control header to ‘no-transform’ is to prevent proxies from modifying my content.

• Vary: Accept-Encoding response header. This instructs the proxies to cache two versions of the resource: one compressed, and one uncompressed.

Headers

Example

Header unset Server
Header unset Last-Modified
Header unset Date
Header unset Accept-Ranges
Header unset Content-Length
Header unset Keep-Alive
Header unset Connection
Header unset Content-Type
Header unset Cache-Control
Header unset Expires
Header unset Pragma:

When I uncomment my changes, then I get the full header:

HTTP/1.x 200 OK
Date: Wed, 17 Sep 2008 19:37:42 GMT
Server: Apache
Last-Modified: Wed, 17 Sep 2008 15:30:07 GMT
Accept-Ranges: bytes
Content-Length: 58
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html

Last-Modified Header

• The Last-Modified header allows validation based on the component's timestamp

• Removing this reduces HTTP requests and disables this type of cache header

• The most common validator is the time that the document last changed, as communicated in

• Last-Modified header. When a cache has an representation stored that includes a Last-Modified header,

• it can use it to ask the server if the representation has changed since the last time it was seen, with an If-Modified-Since request.

• if this header is present the browser checks back to the server that is has not been changed and then it uses the cached version

Last-Modified and Cache Control (No Expires set, i think)

• Server sends Last-Modified header with datetime value that means the time when content was changed last time.
  
  Cache-Control: must-revalidate
  Last-Modified: 15 Sep 2008 17:43:00 GMT
  
  
• The first header Cache-Control: must-revalidate means that browser must send validation request every time even if there is already cache entry exists for this object. (because no Expires set)
• Browser receives the content and stores it in the cache along with the last modified value. Next time browser will send additional header:
  
  If-Modified-Since: 15 Sep 2008 17:43:00 GMT
  
  
• This header means that browser has cache entry that was last changed 17:43.
• Then server will compare the time with last modified time of actual content and if it was changed the server will send the whole updated object along with new Last-Modified value.
• If there were no changes since the previous request then there will be short empty-body answer:
  
  HTTP/1.x 304 Not Modified
  
  
• And browser will use the cached content.
• What if server doesn’t send Cache-Control: must-revalidate? Then modern browsers look at profile setting or decide on their own whether to send conditional request. So we better to send Cache-Control to make sure that browser sends conditional request.
• If we still want Last-Modified header (On its own) for static files and the user presses Refresh button, then the browser will send conditional request and the server will respond
  
  “304 Not Modified”.
  
  
• If you disable both Last-Modified and ETag browser will have to download the whole content again when user presses Refresh.

Etags

• The problem with ETags is that they typically are constructed using attributes that make them unique to
• a specific server hosting a site (maybe a specific inode). ETags won't match when a browser gets the original component from one
• server and later tries to validate that component on a different server, a situation that is all too common
• on Web sites that use a cluster of servers to handle requests. ie SHARED HOSTS (or load balanced servers where they do not sync etag data)
• If you're not taking advantage of the flexible validation model that ETags provide, it's better to just remove the ETag altogether
• Remove Etag headers for better performance on clustered servers, and if using joomla because of dynamic content
• Removing the ETag reduces the size of the HTTP headers in both the response and subsequent requests
• By removing the ETag header, you disable caches and browsers from being able to validate files, so they are forced to rely on your Cache-Control and Expires header.