Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS problem

Options
  • 07-12-2007 1:43pm
    #1
    Peter B
    Registered Users Posts: 1,086 ✭✭✭


    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?


Comments

  • Options
    #2
    leeroybrown
    Closed Accounts Posts: 7,563 ✭✭✭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'.


  • Options
    #3
    Gordon
    Registered Users Posts: 35,524 ✭✭✭✭Gordon


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


  • Options
    #4
    Peter B
    Registered Users Posts: 1,086 ✭✭✭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;
   }


  • Options
    #5
    forbairt
    Registered Users Posts: 3,594 ✭✭✭forbairt


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


  • Options
    #6
    l3rian
    Closed Accounts Posts: 867 ✭✭✭l3rian


    try this:


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


  • Advertisement
  • Options
    #7
    Hobbes
    Registered Users Posts: 21,264 ✭✭✭✭Hobbes


    for this sort of stuff I recommend Firebug.

    http://www.getfirebug.com/


  • Options
    #8
    Peter B
    Registered Users Posts: 1,086 ✭✭✭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.


  • Options
    #9
    PixelTrawler
    Registered Users Posts: 2,299 ✭✭✭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


  • Options
    #10
    forbairt
    Registered Users Posts: 3,594 ✭✭✭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>

    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.

    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


Advertisement