CSS - Css Image Swap Problem In Ff.....

Hey everyone, I am wondering how Lufthansa http://www.lufthansa.com/ Put a mouseover table thingy on their page. On the top roll your mouse over "worldwide sites" and a little thing drops down. Does anyone have a script like that? Thanks for your help!

Hi -
I have the following classes defined in a a linked stylesheet...

.side{background-image: url(images/wds_side_panel.jpg);
background-position: bottom;
background-repeat: no-repeat;
padding-left:65px;
padding-top: 20px;
padding-right:24px;
padding-bottom:29px;
}

.side_over{background-image: url(images/wds_side_panel_over.jpg);
background-position: bottom;
background-repeat: no-repeat;
padding-left:65px;
padding-top: 20px;
padding-right:24px;
padding-bottom:29px;
}

and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly:

<td class="side"
onMouseDown="window.location='news.html';"
onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';"
onMouseOut="document.body.style.cursor='default'; this.className='side';" >
<a href="news.html">News</a></td>


The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear..

Is this the best way to achieve what I want here ?
Might I need to preload the image in the 2nd class?

an example page of the above is:
http://www.rc23.com/wds_beta/aboutwds.html

Any help would be greatly appreciated.

Thank you all .

Mike.

I've downloaded a web template he http://www.freewebsitetemplates.com/preview/dogstemplate/

I've been re-working it to fit what I need, but I've run into some problems with the CSS. I want to center my images that I place, but I can't seem to figure it out.

For whatever reason I'm not able to attach my html or css file. So I've uploaded a zip file with them to: http://www.tombraiders.net/katie/css.zip If any of you would be able to help I would be so appreciated! I'd also like to move the image down a line as right now it's right under the previous line of text.

Thank you!

Here is what I have as a test


my CSS page has

Code:

body {
	margin: 4px 0px;
	padding: 0px;
	background-color: #000000;
}

.header		{
		background-image: url(images/back.gif);
		background-repeat: repeat-x;
		height:197px
		width:100%;
		margin-top :0px;
		}

and my header page that I want to include in all of my pages looks like this for now

Code:

<div class="header">
      <img src="images/logos.gif" width="750" height="197">
</div>

I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct.

I even commented out the logos.gif just so I had a blank canvas and nothing.

Thanks for any help on this.

the page is http://www.mostardesigns.com/fmrehabv2/

as you can see in FF it shows up right but in IE the little menu splitters on the left menu are like 10px high instead of 2px for some reason, help!

thanks in advance.

my page is at http://pageshree.com/index.php .

In the left hand column of the site, u see two titles of "navigation" and "support". the image is 80px and show fine for navigation, but for support it stops and doesnt finish off the image on the right hand side.

CSS is:
Code:

.subheads {
	height:18px;
	width:80px;
	margin:0;
	padding: 0 1em;
	background:#FFF url(images/subhead.gif) no-repeat;
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	text-align:center;
}

HTML:
Code:

<span class="subheads">Navigation</span>

Any help?

Hello friends,

I have created this page

http://www.geocities.com/axe_42k1/index.html

with html and css its working fine with IE but in mozilla firefox, images in center are overlaping on right side images and no round border to themplease help me to solve this problem and i want to insert link to top left hand side image how can i do it with css?.

hi,

i'm trying to add an outer glow image to my site, starting about a 100px from the top. when i use padding on the element i'm adding the trim to, the entire site including the banner shifts down. so i tried using background position, which works until i add repeat-y, which causes it to repeat in the 100px where i don't want it. is there a way to make an image only repeat down?

Hi,
Code:

<a href="..." ><span class='openP'></span>Open this section</a>
	
<style type="text/css">
span.openP{
  background-image:url('images/plus.gif');
  background-repeat:no-repeat; 
  width:50px; 
  background-position:left center;}
</style>

Why does "Open this section" text appears over the image 'images/plus.gif'?
How do I make 'plus.gif' to be left or right to the text?

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL


This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

I put together a new web layout with divs and css at www.verbazon.net/index.php. I have a php include for that main content box text that shows up, and as you can see, it screws up the content box images separating them. If anyone can help me fix this I appreciate it. My Css file is located at www.verbazon.net/style.css

Hi Guys,

I hope you can help me, I have spent all day trying to figure this out. Basically I am trying to learn CSS and an explanation as to how this works (and what code to look for where) would be helpful.

The template page I am looking at to learn from is a web site CSS template included with dreamweaver. The code I am looking at is this:

<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
link</a>
</div>
<!--end globalLinks-->
<form id="search" action="">
<input name="searchFor" type="text" size="10">
<a href="">search</a>
</form>
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> | <a href="#">subglobal1 link</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="....

... and it goes on.

Also the CSS that I think is relavent is:
#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("glbnav_background.gif");
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


What I want to know is:
- behind the global nav links there is a long image in the background that is BEHIND the links. The links themselves appear over top and there is a CSS rollover image that appears above the background image.

I can't figure out how this background image got there. (I wish I could include a screen shot to point it out)

Can anyone see what Im talking about? The site is basically a replica of macromedia.com (and the top menu is what I am talking about)

Thanks for any help!
Thinklogos