CSS - Ie/firefox Image Off

Hi there,

I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!!

The relevant part of the code is at follows:

Code:

<h2 class="title">
			<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
			<a href="<?php echo $this->item->readmore_link; ?>">
				<div><span class="image-title"></span>
				<?php 
				$titles = explode(" ",$this->item->title);
 
					for ($i=0; $i<count($titles)-1; $i++){
						echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
 
					}?> 
					<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
					<div style="clear:both;height:0px;"></div>
			<?php else : ?>
				<div><span class="image-title"></span>
				<?php
					$titles = explode(" ",$this->item->title);
					for ($i=0; $i<count($titles)-1; $i++){
						echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
 
					}?> 
					<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
					<div style="clear:both;"></div>
			<?php endif; ?>
		</h2>

In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now)

In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!!

You can take a look at this url:

Can anyone please help??

Thanks

hello. this has us stumped. here is the page:

http://www.praxishosting.com/dev/csstest/testindex.htm

it looks fine in IE, but in firefox, the div tag containing the background image does not appear to be expanding as the content grows. thus in firefox, you cannot see the background image in the bottom left hand cell (the only place it shows through).

any suggestions?

the style code for the background container is rather simple:

Code:

#container {
	width: 750px;
	background: url(../media/bkgrd.gif) repeat fixed center top;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
}

Basic, I know. I've probably just been staring at this thing too long. The building image to the right of the navbar displays correctly in Firefox, and has its top clipped off in IE 7 (not caring at this point about 6).

Hmm... I guess I can't post a link.

Crumbs. Well, not sure if its even possible to get help with this thing but maybe describing it with code will make the solution pop to my head.

I'm doing a quick rebuild of palladio-tours .com to sort of bring the code into this millennia. In my first run through using Firefox to check (mistake) I changed the navbar to a horizontal text CSS based <ul> underneath the Palladio Tours <img> with a <br>.

Now, in Firefox this works just fine, but in IE 7 (and 6, but again, not caring at this point), the yellow-ish building to the right of the nav list is clipped off exactly above the upper boundary of the list before it.

Let's see if I can post the relevant code. Html:

html4strict Code:
Original - html4strict Code <div id="header"> <div id="navwrap"> <img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br> <ul id="nav"> <li id="t-home"><a href="index.html">home</a></li> <li id="t-company"><a href="company.html">company</a></li> <li id="t-daily"><a href="daily.html">daily</a></li> <li id="t-weekly"><a href="weekly.html">weekly</a></li> <li id="t-brochure"><a href="brochure.html">brochure</a></li> <li id="t-faq"><a href="faq.html">faq</a></li> <li id="t-contact"><a href="mailto:palladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li> </ul> </div> </div>

  

 <div id="header">


 <div id="navwrap">


     <img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br>


     <ul id="nav">


     <li id="t-home"><a href="index.html">home</a></li>


     <li id="t-company"><a href="company.html">company</a></li>


     <li id="t-daily"><a href="daily.html">daily</a></li>


     <li id="t-weekly"><a href="weekly.html">weekly</a></li>


     <li id="t-brochure"><a href="brochure.html">brochure</a></li>


     <li id="t-faq"><a href="faq.html">faq</a></li>


     <li id="t-contact"><a href="mailto:palladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li>


     </ul>


 </div>


 </div> 

And the relevant CSS;

css Code:
Original - css Code body { margin: 0px 0px 0px 0px; padding: 0px; border: 0px; background: #ffffff url(images/header-bg.gif) no-repeat top left; font-family: "times", serif; color: #000000; font-size: small; text-align: left; } * html body { font-size: x-small; /* for IE */ f\ont-size: small; /* for IE 6+ */ } #header { text-align: left; } #nav { float: left; list-style: none; margin: 0px 0px 0px 0px; } #nav li { float: left; font-family: "times", serif; font-size: 120%; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #nav a { float: left; display: block; text-decoration: none; color: #000000; border: 1px solid #000000; border-left: none; margin: 0px; padding: 0px 4px 0px 4px; } #t-home a { padding: 0px 4px 0px 12px; } #t-faq a { border-right: none; padding: 0px 12px 0px 4px; } #t-contact a { border: none; padding: 0px 0px 0px 0px; } #t-contact a img { border: none; margin: -37px 0px 0px 0px; padding: 0px 0px 0px 0px; background: none; } #nav a:hover { background: #FFCE63; } #nav t-contact a:hover { background: #ffffff; } #navwrap { margin: 0px 0px 0px 0px; padding: 65px 0px 0px 90px; } #logo { margin: 0px 0px 6px 50px; }

  

 body {


     margin: 0px 0px 0px 0px;


     padding: 0px;


     border: 0px;


     background: #ffffff url(images/header-bg.gif) no-repeat top left;


     font-family: "times", serif;


     color: #000000;


     font-size: small;


     text-align: left;


     }


     


 * html body {


     font-size: x-small; /* for IE */


     f\ont-size: small; /* for IE 6+ */


     }


  


 #header {


     text-align: left;


 }


  


 #nav {


     float: left;


     list-style: none;


     margin: 0px 0px 0px 0px;


 }


  


 #nav li {


     float: left;


     font-family: "times", serif;


     font-size: 120%;


     font-weight: normal;


     margin: 0px 0px 0px 0px;


     padding: 0px 0px 0px 0px;


 }


  


 #nav a {


     float: left;


     display: block;


     text-decoration: none;


     color: #000000;


     border: 1px solid #000000;


     border-left: none;


     margin: 0px;


     padding: 0px 4px 0px 4px;


 }


  


 #t-home a {


     padding: 0px 4px 0px 12px;


 }


  


 #t-faq a {


     border-right: none;


     padding: 0px 12px 0px 4px;


 }


  


 #t-contact a {


     border: none;


     padding: 0px 0px 0px 0px;


 }


  


 #t-contact a img {


     border: none;


     margin: -37px 0px 0px 0px;


     padding: 0px 0px 0px 0px;


     background: none;


 }


  


 #nav a:hover {


     background: #FFCE63;


 }


  


 #nav t-contact a:hover {


     background: #ffffff;


 }


  


 #navwrap {


     margin: 0px 0px 0px 0px;


     padding: 65px 0px 0px 90px;


 }


  


 #logo {


     margin: 0px 0px 6px 50px;


 } 

I wish I could post a link to the live example. It's a file called "shell.html" in the "css-test" folder at the above site. My brain obviously has gas, any help with this fart will be appreciated!

Hi there, First time posting here so dont bite my head off!

First up allow me to say, that i've done a search for previous posts and although i found topics similiar to what im asking none of the answers within helped me.

Second, i've run my CSS and XHTML through the validation service over at w3c.

- XHTML transitional - is valid on all pages apart from the main page this is due to me running cutenews on that page and the markup isnt valid.

- CSS is valid.

Okay to business, im hoping someone out there can help me, i've recently just updated my website with a new layout. It works perfectly in IE-6 but not in firefox, or any other browser for that matter (i used browsercam). I have issues with the background images not displaying as they should do. And not only that, my flash animation at the top of the page isnt displaying in FF either!

Heres a link to my website
And heres a link to the CSS file

someone help please!

hello all,

I am not very well experienced with CSS, so, please, bear with me. this question may sound stupid.

I have a web page that is comprised of one main table. Except for the banner on top (1 column), the main row has two columns. These columns will comprise of: 1) left column: Menu 2) right column: page content. In the left column, the menu, I would like to have a background image sitting behind the menu.

I have attempted to use CSS to put an image behind the menu:

Code:

.menu_back      {background: url('Pics/Web/menu_background.jpg') no-repeat #ffffff;}

And my html looks like this:

Code:

<table width = "100%"  class = "menu_back">

This does not work. After scouring the web without any real success , I humbly ask for ur help. I am designing for Firefox hoping it will work fine under IE. Thanking u in advance.

I have two bits of code that work in IE, but not in Firefox, and I have no idea why! They both use the background-image property

Here is the first:

Code:

a.bio {
     display: block;
     width: 150px;
     height: 26px;
     background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio.jpg);
     background-repeat: no-repeat;
     }
	 
a.bio:hover {
     background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio_h.jpg);
     } 

Code:

<a class="bio" href=""></a>

And the second:

Code:

td.window
{
width:670;
height:31px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\window_nav_repeat.jpg);
background-repeat:repeat-x;
padding:0px;
margin:0px;
border-spacing:0px;
border:0px;
}

Code:

<td class="window"></td>

Does ANYONE know why this is happening??

I'm trying to get a repeating background image to show up in my Firefox browser but can't get it to work. Grateful if somebody can tell me what is wrong with this code?

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="all">
		#header {
			background:#A31135 url(images/fill.gif) repeat-x fixed;
			height:100px;
			}
	</style>
</head>

<body>

	<div id="header">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	</div>

</body>
</html>

Many thanks.

I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox.

css code for the body tag is:

body { background-color: #0d005e;
background-image: url('images/bgmain.jpg');
background-repeat: repeat-x; }

Any thoughts?

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

Hey everyone,

I'm redesigning a site and I'm running into some problems in firefox with the placement of the header-background image. The problem is that firefox places the image about 15 pixels below the intended area. When I add a border of 1 pixel to the header div firefox places the image correctly.

I don't have this problem when viewing the site in IE.

I've coded the following XHTML and css:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>ParaCentrumEeldeHoogeveen</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta http-equiv="expires" content="0" />
   <meta http-equiv="Content-Language" content="nl" />      
   <link rel="stylesheet" href="css/layout.css" type="text/css" />   
</head>

<body>
   
  <div id="container">
   
      <div id="header">
        
      </div>
      
            				
   </div>
   
</body>

</html>

And the css file:

Code:

html { 
  padding: 0px;
  margin: 0px;
}

body {
  background: #3a60db url('../gfx/background.jpg') repeat-x;
  font-family: arial, "lucida console", sans-serif;
  font-size: 12px;
  color: #000000;  
  text-align: center;
  margin: 0px;
  margin-top: 0px;
  padding: 0px;
}

#container {
  border: 0px solid #ff0000;
  width: 760px;
  margin: 0px auto;
  padding: 0px;
  text-align: left;
}

#header {
  background: url('../gfx/header.jpg') no-repeat;
  height: 238px;
  width: 760px;
  padding: 0px;
  margin: 0px;
}

Screenshot of the problem

Does anybody know what the problem is?

Thanks in advance.

Grtz. Arjen

Sounds simple... but I can't find an answer.

I've a simple table row with a css background image.

In the row I've my text links and two images that are links.

While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top..

Any advice?

The page can be seen at addcolour (co uk extension)

CSS in a folder css the file name is addcolour

Many thanks

d

I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF.

Can someone please give me a clue what is wrong.

I have searched all the CSS books and the internet but I cannot find an answer.

Thanks in advance.

The URL is http://www.childrens-stories.me.uk/

Hi,

has anyone ever had a problem with firefox only (not IE). that when you shift your background image, the divs on top shift with it? I dont want them to shift down but they do when I look at it in firefox its shifted, in IE its not.

I am sorry this is my first posting. if anybody can help me, thanks alot.

Here is my code:

Code:

<!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> 
<style type="text/css">  

#outer { 	
width: 820px; 	
height:800px; 	
margin: auto; 	
background: url(images/background2.png); 	
background-repeat: no repeat; 	
background-position: center; 	 }                                                
</style>   
<title>test</title> 
</head>  
<body>  

<div id="outer">  			                         
 <div style="backgroundimage:url(images/header2.png); 				 				background-repeat: no repeat; 				background-position: center; 				width:819px; 				
height:120px;                 
margin-top:20px;">              
</div>       

<div style="background-image:url(images/header2.png); 		background-repeat: no repeat; 		
background-position: center; 		
margin-top:20px; 		
width:819px; 		
height:120px; 		">                 
 </div>
 </div>
</div>  
</body> 
</html>
 

I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas?

It's pretty hideous - it's a test, but here's the url:
http://www.mahec.net/default3.aspx

Here's the code:
Code:

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
    position:relative;
    width:90%;
    padding:25px 25px 25px 25px; 
    z-index:1;
    background-color:#ffffff;
    color:#000000;
    opacity:0.6;
    filter: alpha(opacity=60);
    }
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>

<p>paragraph text</p>

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

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.