nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

CSS problem

Peter B

Could someone tell me whats wrong with this CSS?

.tabbb {
  background-image:url('images/background_compass.gif');
  background-repeat: no-repeat;
}

All the CSS works fine without this bit of code. When I add it, my page looks fine in firefox but some of my CSS disappears in IE.

Anyone know why?

Find more posts tagged with

Quick Links

Comments

leeroybrown

If I had to guess off hand I'd say that the CSS parser in whatever IE version you are testing on is tripping over the lack of whitespace in 'background-image:url'.

Gordon

It could be to do with a missing ' in code prior to/post that block. Can you post up all of the css?

Peter B

I changed "background-image:url('images/background_compass.gif');" to "background-image: url('images/background_compass.gif');".

Still no luck however. I have pasted all of the CSS below. BTW I am using IE7.

Thanks for the prompt reply!


/* Use this section to edit the background and main font colours and appearance. */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	/* background-color: #cf6606; */
}


.tabbb {
  background-image: url('images/background_compass.gif');
  background-repeat: no-repeat;
}


.heading {
	font-family      : Tahoma;
	font-size        : 11px;
	font-weight		 : bold;
	color			 : #605d5d;
	text-decoration  : none;
}

.left_panel_heading {
	font-family      : Tahoma;
	font-size        : 16px;
	font-weight		 : bold;
	color			 : #605d5d;
	text-decoration  : none;
}

.body {
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #000000;

}

.emphasize {
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #605d5d;
}

/* Use this section to edit the link colours and appearance. */

a:link {  
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #000000;
	font-weight		 : bold; 
	text-decoration	 : none
} 

a:visited {  
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #000000;
	text-decoration	 : none;
	font-weight		 : bold;
}

a:hover {  
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #605d5d;
	font-weight		 : bold; 
	text-decoration	 : none
}

a.mainlevel-nav:link, a.mainlevel-nav:visited {
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #FFFFFF;
	text-decoration	 : none
	font-weight		 : bold; 

}
a.mainlevel-nav:hover {
	font-family      : Tahoma;
	font-size        : 11px;
	color			 : #999999;
	text-decoration	 : none;
	font-weight		 : bold; 
	/*
	background-color:#FFFFFF;
  color:#FF9900;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
  text-indent:10px;
 */
}


/* Extras. */

hr {
    height			:1px;
    width			:90%;
	color			: #999999;
   }

forbairt

any chance to view the page ? either through pm or posting a link / link to a mockup of the page with the problem ?

l3rian

try this:

.tabbb {background: url('images/background_compass.gif') no-repeat; }

Hobbes

for this sort of stuff I recommend Firebug.

http://www.getfirebug.com/

Peter B

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title here</title>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="800" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabbb">
  <tr>
    <td width="6" height="100%" rowspan="6" background="leftborder_test.gif"></td>
    <td width="650" height="89"><img src="images/logo.jpg" /></td>
    <td width="6" height="100%"rowspan="6" background="rightborder_test.gif"></td>
  </tr>

  <tr>
    <td width="650" height="20" BGCOLOR="#808080">
    <table width="100%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td><div align="center"><a href="index.html" class="mainlevel-nav">Home</a></div></td>
        <td><div align="center"><a href="services.html" class="mainlevel-nav">Services</a></div></td>
        <td><div align="center"><a href="about.html" class="mainlevel-nav">About us</a></div></td>
        <td><div align="center"><a href="team.html" class="mainlevel-nav">The Team</a></div></td>
        <td><div align="center"><a href="careers.html" class="mainlevel-nav">Careers</a></div></td>
        <td><div align="center"><a href="downloads.html" class="mainlevel-nav">Downloads</a></div></td>
        <td><div align="center"><a href="news.html" class="mainlevel-nav">News</a></div></td>
        <td><div align="center"><a href="contact.html" class="mainlevel-nav">Contact</a></div></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    </table>
	  <table width="100%" border="0" cellspacing="0" cellpadding="25">
        <tr>
          <td width="30%" valign="top" BGCOLOR="#DEDEDE">
          <div class="emphasize">
            <p><div class="left_panel_heading">News Stories</div></p>
            <p><strong>2007</strong></p>
            <p><a href="news2006.html">2006</a></p>
            <p><a href="news2005.html">2005</a></p>
          </div>
          </td>
          <td width="70%" valign="top">
			     <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="5%"><img src="images/arrowP.gif" width="10" height="11"></td>
              <td width="95%"><div class="heading"><a href="index.html">Home</a> > News</div></td>
            </tr>
          </table>
          <br>
          <div class="body">
        <p>31/12/06</p>
    <br>

<br>
<hr></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

This is the code of the html page. Unfortunately I have no access to online space at the moment but since I am just using HTML I can test using windows.

I have attached the 2 border image files. They should be enough to get the borders to show correctly in Firefox the whole time, however in IE7 when you insert a background with the CSS I posted above the borders do not repeat down the page.

I tried to just comment out the "background-repeat: no-repeat;" line of my CSS and it does show correctly, however unfortunately I do not want it tiled as I only want the image to display once.

PixelTrawler

From one of my sites that applies a background to a div

background:url(../gifs/topbarbg.gif) repeat-x;

(note: not background-image)

This should work in IE6 and IE7 as well as all the other major browsers

forbairt

Peter B wrote: »

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title here</title>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="800" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabbb">
  <tr>
    <td width="6" height="100%" rowspan="6" background="leftborder_test.gif"></td>
    <td width="650" height="89"><img src="images/logo.jpg" /></td>
    <td width="6" height="100%"rowspan="6" background="rightborder_test.gif"></td>
  </tr>

  <tr>
    <td width="650" height="20" BGCOLOR="#808080">
    <table width="100%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td><div align="center"><a href="index.html" class="mainlevel-nav">Home</a></div></td>
        <td><div align="center"><a href="services.html" class="mainlevel-nav">Services</a></div></td>
        <td><div align="center"><a href="about.html" class="mainlevel-nav">About us</a></div></td>
        <td><div align="center"><a href="team.html" class="mainlevel-nav">The Team</a></div></td>
        <td><div align="center"><a href="careers.html" class="mainlevel-nav">Careers</a></div></td>
        <td><div align="center"><a href="downloads.html" class="mainlevel-nav">Downloads</a></div></td>
        <td><div align="center"><a href="news.html" class="mainlevel-nav">News</a></div></td>
        <td><div align="center"><a href="contact.html" class="mainlevel-nav">Contact</a></div></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    </table>
	  <table width="100%" border="0" cellspacing="0" cellpadding="25">
        <tr>
          <td width="30%" valign="top" BGCOLOR="#DEDEDE">
          <div class="emphasize">
            <p><div class="left_panel_heading">News Stories</div></p>
            <p><strong>2007</strong></p>
            <p><a href="news2006.html">2006</a></p>
            <p><a href="news2005.html">2005</a></p>
          </div>
          </td>
          <td width="70%" valign="top">
			     <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="5%"><img src="images/arrowP.gif" width="10" height="11"></td>
              <td width="95%"><div class="heading"><a href="index.html">Home</a> > News</div></td>
            </tr>
          </table>
          <br>
          <div class="body">
        <p>31/12/06</p>
    <br>

<br>
<hr></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

oh god ... where to begin ... sorry but it looks to me like what you're doing is wrong ...

  <tr>
    <td width="6" height="100%" rowspan="6" background="leftborder_test.gif"></td>
    <td width="650" height="89"><img src="images/logo.jpg" /></td>
    <td width="6" height="100%"rowspan="6" background="rightborder_test.gif"></td>
  </tr>

I'll assume here you want the border to be the full height of the table or just of this element ?

In your next lines of code ...


  <tr>
    <td width="650" height="20" BGCOLOR="#808080">

you seem to have done away completely with the other columns ??? or maybe I'm missing something ?

I believe you want the border to be the full height of your table ... not just of the header part .... in your next row however you've only got one column where 3 are expected so to speak.

if you were maybe to include

    <td width="6" height="100%" rowspan="6" background="leftborder_test.gif"></td>
 
... 
your other column here 
...
    <td width="6" height="100%"rowspan="6" background="rightborder_test.gif"></td>

would this solve your problem ??

BTW I'm not happy with the way tables and images for backgrounds are being used there but thats kinda a different matter