Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

IE seemingly ignoring CSS

Featured Replies

I restored a backup of a website today and since then Internet Explorer ignores the stylesheet. Strangely if I click refresh, the page displays how it should be. Is there a general error for this or something wrong with my code? I'm not sure which bit of code is the most helpful to include here so please ask and I'll update the thread with it.

Hi Allan...

 

Works fine for me mate.

 

Works for me, I would probably change the <head></head> section to this though.

 

<head>
<meta name="keywords" content="bristol alcohol delivery night">
<title>Alco-Owl : Bristol's late night alcohol delivery service</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4803251-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>

 

and close your </body> and </html> at the bottom of your code.

 

Pat

Hi Mike,

 

Is that also true when you click the navigation tabs?

 

Sorry,

 

I can see what you mean now. Yes it does move to the left and get smaller when you click on the links in ie7.

 

Try changing the bits Pat mentioned. That will probably fix it.

  • Author

I've now moved the </head> tag to after the javascript. Also closed the body and html at the bottom. I'm still however getting this odd jutter to the left after clearing my cache.

I have validated your page for you, back up your existing page and try the code below.

 

<!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 name="Keywords" content="bristol alcohol delivery night" />
<title>Alco-Owl : Bristol's late night alcohol delivery service</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4803251-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>

<div class="page">
<div class="pageHeader">
	<img src="../images/alco-owl.png" width="356" height="100" longdesc="Bristol's late night alcohol delivery service" alt="Alco-Owl" /><img src="../images/owlleft.gif" width="114" height="150" alt="Alco-Owl Logo" /><br />
	</div>
	<script type="text/javascript">
function tdmouseover(el) {
el.style.backgroundImage = "url('/images/rollover.jpg')";
}
function tdmouseout(el) {
el.style.backgroundImage = "url('/images/background.png')";
}

function tdmouseovercurrent(el) {
el.style.backgroundImage = "url('/images/rollover.jpg')";
}
function tdmouseoutcurrent(el) {
el.style.backgroundImage = "url('/images/active.jpg')";
}
</script>

<div id="linkbar">
<center>
<table id="linkbarOuter" cellpadding="0" cellspacing="0">

	<tr>
	<td><img src="../images/corner.png" width="17" height="29" alt="corner" /></td>
	<td>
		</td><td id="linkbarCellCurrent" class="linkbarCellLeft"  onmouseover="tdmouseovercurrent(this)" onmouseout="tdmouseoutcurrent(this)"><a href="index.php">    Home     </a></td>			<td class="linkbarCellMiddle"  onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">
<a href="pricelist.php">    Price List     </a></td>

		<td class="linkbarCellMiddle"  onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">
<a href="faq.php">    FAQ     </a></td>
		<td class="linkbarCellRight"  onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">
<a href="tc.php">    T&C     </a></td>

	<td></td>
	<td><img src="../images/cornerright.png" width="17" height="29" alt="corner" /></td>
	</tr>
</table>
</center>
</div>

<br />




<table style="width: 100%" cellspacing="0" cellpadding="0">
<tr>
	<td style="height: 21px; width: 26px; background-image: url('images/tl.gif')" valign="bottom">
	</td>
	<td style="height: 13px; background-image: url('images/tblbg.gif')"> </td>
	<td style="height: 13px; background-image: url('images/tblbg.gif')" colspan="2"> </td>
	<td style="height: 21px; width: 26px; background-image: url('images/tr.gif')" valign="bottom"> 
	</td>
</tr>

<tr>
	<td style="background-image: url('images/l.gif')"> </td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: small; " colspan="3">
	<center><table style="width: 50%">
		<tr>
			<td><img src="images/Phone.png" width="75" height="75" alt="phone" /></td>
			<td align="left" colspan="3"><img src="images/callus.png" width="340" height="35" alt="callus" /></td>
		</tr>
		<tr>

			<td style="width: 10%"> 
			</td>
			<td align="left">
			<img src="images/delivery.png" width="74" height="75" alt="delivery" /></td>
			<td align="left" colspan="2">
			<img src="images/deliverytext.png" width="414" height="35" alt="delivery" /></td>
		</tr>
		<tr>
			<td style="width: 10%"> 

			</td>
			<td align="left"> </td>
			<td align="left">
			<img src="images/pint.png" width="73" height="75" alt="pint" /></td>
			<td align="left"><img src="images/enjoy.png" width="278" height="35" alt="enjoy" /></td>
		</tr>
	</table></center>
	</td>
	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>

</tr>
<tr>
	<td style="background-image: url('images/l.gif')"> </td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: small; font-size:80%; vertical-align: top; text-align: justify;" colspan="2">
	<p>Welcome to Alco-Owl, Bristol's late night alcohol delivery service.
	<br />
	<br />
	Ever been at a house party and ran out of alcohol? Perhaps one more 
	drink to end the night but you realise you haven't got any? We are a 
	fully licensed supplier of alcohol catering for members of the public 
	who require an alcoholic beverage when all the shops are shut.<br />

	</p>
	<p>We hold a variety of beers, wines, spirits and more.<br />
	<br />
	As we are based in the heart of Bristol's student district we are very 
	happy to offer a whopping 10% student discount on all purchases. </p>
	</td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; font-size:80%; background-position: 0px 0px; font-size: small; vertical-align: top; text-align: center;">
	<img src="images/opening.png" width="216" height="35" alt="opening" /><br />

	Every night, 8Pm-2.30am<br />
	<br />
	<h2>Call us on</h2>
	<h2>07510255092</h2>
	</td>
	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>
</tr>

<tr>
	<td style="background-image: url('images/l.gif')"> </td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: small; width: 60%; vertical-align: top;"> 
	</td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: x-small;" colspan="2"> 
	</td>
	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>
</tr>
<tr>

	<td style="background-image: url('images/l.gif')"> </td>
	<td style="background-image: url('images/alco.jpg'); height: 135px;" colspan="3"> 
	</td>
	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>
</tr>
<tr>
	<td style="background-image: url('images/bl.gif'); height: 21px; width: 26px;"> 
	</td>
	<td style="background-image: url('images/btbg.gif')"> </td>

	<td style="background-image: url('images/btbg.gif')" colspan="2"> </td>
	<td style="background-image: url('images/br.gif')"> </td>
</tr>
</table>

<div class="footer">
your friends @ Alco-Owl remind you to drink responsibly
<br />
© 2008 Alco-Owl
<br />
Site and Hosting by <a href="http://www.ashosted.co.uk" style="color: #FFFFFF">AS:Hosted</a>

</div></div></body></html>

 

That might cure it

 

Pat

ps dont know where the smiley came from

  • Author

Thanks Pat, unfortunately still the same. If the coding is correct is this more likely to be a server problem?

Thanks Pat, unfortunately still the same. If the coding is correct is this more likely to be a server problem?

 

Unfortuanately I cant view in ie7 at the moment, so I cant see the problem.

 

Pat

  • Author
Unfortuanately I cant view in ie7 at the moment, so I cant see the problem.

 

Pat

 

ieuj9.th.png

  • Author

Thanks for all your replies. I've managed to rectify the problem using;

 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

The code on your live site is not validating, try this

 

<!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" />
<meta name="Keywords" content="bristol alcohol delivery night" />
<title>Alco-Owl : Bristol's late night alcohol delivery service</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4803251-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>

<div class="page">
<div class="pageHeader">
	<img src="../images/alco-owl.png" width="356" height="100" longdesc="Bristol's late night alcohol delivery service" alt="Alco-Owl" /><img src="../images/owlleft.gif" width="114" height="150" alt="Alco-Owl Logo" /><br />
	</div>
	<script type="text/javascript">
function tdmouseover(el) {
el.style.backgroundImage = "url('/images/rollover.jpg')";
}
function tdmouseout(el) {
el.style.backgroundImage = "url('/images/background.png')";
}

function tdmouseovercurrent(el) {
el.style.backgroundImage = "url('/images/rollover.jpg')";
}
function tdmouseoutcurrent(el) {
el.style.backgroundImage = "url('/images/active.jpg')";
}
</script>

<div id="linkbar">
<center>
<table id="linkbarOuter" cellpadding="0" cellspacing="0">

	<tr>
	<td><img src="../images/corner.png" width="17" height="29" alt="corner" /></td>
	<td>
		</td><td id="linkbarCellCurrent" class="linkbarCellLeft"  onmouseover="tdmouseovercurrent(this)" onmouseout="tdmouseoutcurrent(this)"><a href="index.php">    Home     </a></td>			<td class="linkbarCellMiddle"  onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">
<a href="pricelist.php">    Price List     </a></td>

		<td class="linkbarCellMiddle"  onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">
<a href="faq.php">    FAQ     </a></td>
		<td class="linkbarCellRight"  onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)">
<a href="tc.php">    T&C     </a></td>

	<td></td>
	<td><img src="../images/cornerright.png" width="17" height="29" alt="corner" /></td>
	</tr>
</table>
</center>
</div>
<br />




<table style="width: 100%" cellspacing="0" cellpadding="0">

<tr>
	<td style="height: 21px; width: 26px; background-image: url('images/tl.gif')" valign="bottom">
	</td>
	<td style="height: 13px; background-image: url('images/tblbg.gif')"> </td>
	<td style="height: 13px; background-image: url('images/tblbg.gif')" colspan="2"> </td>
	<td style="height: 21px; width: 26px; background-image: url('images/tr.gif')" valign="bottom"> 
	</td>
</tr>

<tr>
	<td style="background-image: url('images/l.gif')"> </td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: small; " colspan="3">
	<center><table style="width: 50%">
		<tr>
			<td><img src="images/Phone.png" width="75" height="75" alt="phone" /></td>
			<td align="left" colspan="3"><img src="images/callus.png" width="340" height="35" alt="callus" /></td>
		</tr>
		<tr>

			<td style="width: 10%"> 
			</td>
			<td align="left">
			<img src="images/delivery.png" width="74" height="75" alt="delivery" /></td>
			<td align="left" colspan="2">
			<img src="images/deliverytext.png" width="414" height="35" alt="delivery" /></td>
		</tr>
		<tr>

			<td style="width: 10%"> 

			</td>
			<td align="left"> </td>
			<td align="left">
			<img src="images/pint.png" width="73" height="75" alt="pint" /></td>
			<td align="left"><img src="images/enjoy.png" width="278" height="35" alt="enjoy" /></td>
		</tr>
	</table></center>

	</td>
	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>

</tr>
<tr>
	<td style="background-image: url('images/l.gif')"> </td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: small; font-size:80%; vertical-align: top; text-align: justify;" colspan="2">
	<p>Welcome to Alco-Owl, Bristol's late night alcohol delivery service.
	<br />
	<br />

	Ever been at a house party and ran out of alcohol? Perhaps one more
	drink to end the night but you realise you haven't got any? We are a
	fully licensed supplier of alcohol catering for members of the public
	who require an alcoholic beverage when all the shops are shut.<br />

	</p>
	<p>We hold a variety of beers, wines, spirits and more.<br />
	<br />
	As we are based in the heart of Bristol's student district we are very 
	happy to offer a whopping 10% student discount on all purchases. </p>
	</td>

	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; font-size:80%; background-position: 0px 0px; font-size: small; vertical-align: top; text-align: center;">
	<img src="images/opening.png" width="216" height="35" alt="opening" /><br />
	Every Night, 9pm - 2.30am<br />
	<br />
	<h2>Call us on</h2>
	<h2>07510255092</h2>
	</td>

	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>
</tr>

<tr>
	<td style="background-image: url('images/l.gif')"> </td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: small; width: 60%; vertical-align: top;"> 
	</td>
	<td style="border-style: solid; border-color: #FFFFFF; background-image: url('images/white.gif'); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px; font-size: x-small;" colspan="2"> 
	</td>

	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>
</tr>
<tr>

	<td style="background-image: url('images/l.gif')"> </td>
	<td style="background-image: url('images/alco.jpg'); height: 135px;" colspan="3"> 
	</td>
	<td style="background-image: url('images/r.gif'); width: 24px;"> </td>
</tr>

<tr>
	<td style="background-image: url('images/bl.gif'); height: 21px; width: 26px;"> 
	</td>
	<td style="background-image: url('images/btbg.gif')"> </td>

	<td style="background-image: url('images/btbg.gif')" colspan="2"> </td>
	<td style="background-image: url('images/br.gif')"> </td>
</tr>
</table>
<div class="footer">

your friends @ Alco-Owl remind you to drink responsibly
<br />
© 2008 Alco-Owl
<br />
Site and Hosting by <a href="http://www.ashosted.co.uk" style="color: #FFFFFF">AS:Hosted</a>

</div></div></body></html>

 

 

Can you put this as it is, ther were some strange characters appearing in your code.

 

Pat

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.