IE 8 problem with CSS image rollover

The tabbed navigation on the top right of this page is created using CSS. It is working perfectly on my system: PC with Firefox 3, IE6 and IE7.    With IE8, the tab navigation does not work at all.
Any suggestions?
http://www.eagleornamentalironworks.com/test.htm
HTML:
<div id="nav">
    <div id="nav-contact"><a id="contact-tab" href="http://www.eagleornamentalironworks.com/contact.htm" title="Contact"><span>Contact</span></a></div>
    <div id="nav-gallery"><a id="gallery-tab" href="http://www.eagleornamentalironworks.com/gallery/gallery.htm" title="Gallery"><span>Gallery</span></a></div>
    <div id="nav-home"><a id="home-tab" href="http://www.eagleornamentalironworks.com/" title="Home"><span>Home</span></a></div>
</div>
CSS:
#home-tab
    display: block;
    width: 108px;
    height: 28px;
    background: url(images/EagleOrnamental_nav-home.jpg) no-repeat 0 0;
#home-tab:hover
background-position: 0 -28px;
#home-tab span
display: none;
#gallery-tab
    display: block;
    width: 109px;
    height: 28px;
    background: url(images/EagleOrnamental_nav-gallery.jpg) no-repeat 0 0;
#gallery-tab:hover
background-position: 0 -28px;
#gallery-tab span
display: none;
#contact-tab
    display: block;
    width: 109px;
    height: 28px;
    background: url(images/EagleOrnamental_nav-contact.jpg) no-repeat 0 0;
#contact-tab:hover
background-position: 0 -28px;
#contact-tab span
display: none;

Look here -
http://www.murraytestsite.com/eagle.html
Notice that I have removed the display:none from the CONTACT tab's code. Notice also that this is the only one of the three tabs where that rollover now works. I love the sprite rollovers, but I just think you have done them using the wrong approach. Go here and read how Thierry does it -
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

Similar Messages

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

Problem with css processing in Firefox8 on Win7.

Hi guys. I have a problem with css processing in Firefox8 on Win7. I need to make div which width and left css properties should be dynamically changed. Inside this div i have an swf object. When i change width and left css styles for my div, it jumps on the page, but other browsers render that well. What can you suggest to fix this problem? Thanks

A good place to ask advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25

Problem with Gif image

Having a problem with gif image not showing up. It will show up in netscape6.2, but not in IE 5.0. Both are using the java 1.4 plugin. They are basic buttons (zoom in, zoom out, etc) and they actions work, just the icons aren't showing. Any help would be great! Below is a snip of code:
JPanel toolBarsPanel = new JPanel();
javax.swing.JToolBar toolbar = new javax.swing.JToolBar();
JButton zoomin = new JButton(new ImageIcon("tut/zoomin.gif"));
JButton fullext = new JButton(new ImageIcon("tut/fullextent.gif"));
JButton identify = new JButton(new ImageIcon("tut/identify.gif"));
JButton btn = new JButton(new ImageIcon("tut/addtheme.gif"));
toolbar.add(zoomin);
toolbar.add(fullext);
toolbar.add(identify);
toolbar.add(btn);
add(toolbar, BorderLayout.NORTH);
Thanks again for any help!

I used to do a lot of work in this sort of thing. After a while we were able to convince our bosses to use generated HTML (JSPs, etc.), so the problem moved to porting JavaScript to different platforms! (Platforms in this context means the different browser/OS combinations, etc.).
The only two things I can recommend are:
- complete control over you code. You will have to fix it! (Tried you apps on a Mac yet?)
- assume a minimal install. Don't assume users are going to have any fancy tools installed on their PC, unless you are developing an Intranet app, where you know the spec of the machines that are going to be using it.
As regarding getting IE to use a relative address, I don't think you are going to have any luck their, I'm afraid! (Although I am curious. It has been some time, but I though it did use relative addresses. Are you absolutely sure about this, did you check this out with System.outs and that?
HTH,
Manuel Amago.

For the last 2 days whenever I try to upload photos from my iPhoto page to facebook I get an error message: Bad Image There was a problem with the image file. I haven't knowingly changed any settings on iPhoto or facebook. Can anyone help, please ?

I need help with uploading photos from iPhoto to facebook. I could do it till 2 days ago. Now any new photo I try to upload gives me an error message:
Bad Image
There was a problem with the image file.
Please help.

Can you drag it to the Desktop?

I have a problem with vertical images burned on a cd

I have a problem with vertical images burned on a cd either from a Mac or a stand alone burner. What happens is the images come from the card and are put on the cd. Also note the the camera has been set for the computer to automatically show images vertically when shot that way. The images look good on my Mac, but are horizontal on windows computers. Both XP and Vista. What can be done?
John

Hi, thank you for the response... not sure looks that the battery its ok, I'm not sure.
Charge Information:
Charge remaining (mAh):    4356
Fully charged:    Yes
Charging:    No
Full charge capacity (mAh):    4356
Health Information:
Cycle count:    813
Condition:    Normal
Battery Installed:    Yes
Amperage (mA):    0
Voltage (mV):    12571

I have problems with uploading images to my printing company have the images have been manipulated through CS6 i have saved images as jpeg but the printer company tell me they are not j peg, they will not upload images save from a camera are fine

I have problems with uploading images to my internet printing company when the images have been manipulated through CS6 and i have saved images as jpeg the printer company tell me they are not j peg,
but images saved from my phone or camera images that have not been manipulated upload fine, What am i doing wrong?

Save/Export them as JPG. Photoshop defaults to PSD, so make sure you select JPG and not just rename the file to .jpg.
There are two ways to save them as JPG: Regular Save as option or Save for Web & Devices
Take your pick.

Problem with displaying image

Hello!
Sorry, I'm a beginner in APEX and have some problems with displaying images in my application. I have read the same topic but unfortunately didnt find the solution.
So.. I have the interactive report
table test (
NAME NOT NULL VARCHAR2(4000)
ID NUMBER
BLOB_CONTENT BLOB
MIME_TYPE VARCHAR2(4000))
I need to display the column blob_content.
Thnks a lot.

1009316 wrote:
Hello! Welcome to the forum: please read the FAQ and forum sticky threads (if you haven't done so already), and update your forum profile with a real handle instead of "1009316".
When you have a problem you'll get a faster, more effective response by including as much relevant information as possible upfront. This should include:
<li>Full APEX version
<li>Full DB/version/edition/host OS
<li>Web server architecture (EPG, OHS or APEX listener/host OS)
<li>Browser(s) and version(s) used
<li>Theme
<li>Template(s)
<li>Region/item type(s) (making particular distinction as to whether a "report" is a standard report, an interactive report, or in fact an "updateable report" (i.e. a tabular form)
With APEX we're also fortunate to have a great resource in apex.oracle.com where we can reproduce and share problems. Reproducing things there is the best way to troubleshoot most issues, especially those relating to layout and visual formatting. If you expect a detailed answer then it's appropriate for you to take on a significant part of the effort by getting as far as possible with an example of the problem on apex.oracle.com before asking for assistance with specific issues, which we can then see at first hand.
Sorry, I'm a beginner in APEX and have some problems with displaying images in my application. I have read the same topic but unfortunately didnt find the solution.
So.. I have the interactive report
table test (
NAME NOT NULL VARCHAR2(4000)
ID NUMBER
BLOB_CONTENT BLOB
MIME_TYPE VARCHAR2(4000))
I need to display the column blob_content.This is described in the documentation: About BLOB Support in Forms and Reports and Display Image. There's an OBE tutorial that followed the introduction of declarative BLOB support in 3.1 as well.

Problem with scramb image MULTI DISTORTION COLOR

PROBLEM WITH IMAGE, SOMETIMES ITS DISTORTIONATED, AND SLOW

Are you writing of problems with the image displayed on your screen? Anyway that you can post a screenshot (to make a whole screenshot, hold down the Shift, Command and 3 keys at the same time). Upload your screenshot using the camera icon in the composition bar above.
It would also help to know which model MacBook Pro you have - 15" late 2011, for example.
Clinton

Problem with Atf, Image distortion

I got a problem with image Distortion
Here my atf in atf viewer: [IMG]http://i.imgur.com/d75aU.png[/IMG]
Heres my atf in FLashPlayer using 11.4.402.287: [IMG]http://i.imgur.com/H2vEV.png[/IMG]
notice the red pixel in the green part of the texture.
Im using png2atf with no parameters.

Are you writing of problems with the image displayed on your screen? Anyway that you can post a screenshot (to make a whole screenshot, hold down the Shift, Command and 3 keys at the same time). Upload your screenshot using the camera icon in the composition bar above.
It would also help to know which model MacBook Pro you have - 15" late 2011, for example.
Clinton

I am facing a Problem with reading images from database

Hi everybody..
any help will be most appreciated, I am facing problem with reading images from database. I am pasting my code...
string connect = "datasource = localhost; port = 3306; username = root; password = ;";
MySqlConnection conn = new MySqlConnection(connect); // creating connecting string
MySqlCommand sda = new MySqlCommand(@"select * from management.add_products ", conn); //creating query
MySqlDataReader reader;
try
conn.Open(); // Opening Connection
reader = sda.ExecuteReader(); // Executing my Query..
while (reader.Read())
byte[] imgg = (byte[])(reader["Picture"]);
if (imgg == null)
pc1.Image = null;
else
MemoryStream mstream = new MemoryStream(imgg);
pc1.Image = System.Drawing.Image.FromStream(mstream);
It says Parameter not Valid... i am reading all the images from database

I agree with Viorel. You are getting the error because the format of the data is incorrect probably because the data was modify. It may not be the reading of the database the is incorrect, but the application that wrote the data into the database. You need
to compare the imgg array data with the data before it was written to the database to see if the data matches. I usually start by comparing the number of bytes which is easier to check then compare the actual to isolate which function is changing the
byte count.
An image is binary data. The standard VS methods for reading and writing data (usually stream classes) default to ASCII encoding which will corrupt binary data. The solution usually is to use UTF8 encoding instead of the default ascii encoding.
Ascii encoding with stream often aligns the data and adds extra null bytes to the end of the data which can produce these type errors.
jdweng

Problem with displaying images exported to PS

This is slightly different than the post about TIFF files not displaying properly.
In Aperture 1.2, when I exported an image to PS and did extensive work on it, and then saved back to Aperture, it would appear in Aperture just as it looked in PS when I saved it.
However, in 1.5, that does not happen. After I save the image, and then go back to Aperture, all of the changes I made in PS don't appear! However, if I again open the image in PS a second time, it will change to the PS version even before the image gets to PS (I can see it change right when I click "open with external editor").
Is this a difference with how 1.2 and 1.5 handle the files? I'm guessing it has something to do with image previews, because I chose not to have Aperture generate previews when I installed 1.5 due to the slow-down issues I saw reported here.
I'm starting to wonder what the point of upgrading to 1.5 was for me... if I can't take advantage of previews (accessing my Aperture library from other apps like Keynote, etc) and if the PS files I work on don't display properly, I'd rather go back to 1.2. This is a major problem in my workflow, since I often spend a lot of time working on images in PS, and I need to be able to see them that way when I return to Aperture.
I'm hoping there's some setting somewhere I can use to fix this. Is there?

David,
I really appreciate your offer to help. However, I have the problem with all images in my library in all projects, so I'm not sure how useful it would be for you to work with a single image I upload to a server.
I'm having the same problem on my MacBook too, though for some unknown reason there are certain projects on my MacBook that the process works fine with. I cannot tell any difference between those projects (that work) and those that don't.
What's even more strange... if I quit Aperture, and re-open it, and then go through the process (open a file in PS2, save, return to Aperture) - it works fine! But ONLY ONE TIME. If I try the same process again, on that same image, or any other image in my library, it will not work. It only works the FIRST TIME I do it after opening Aperture. I tested this several times and got the same result.
I am completely stumped here. I've tried generating previews for a project and turning all of the preview options on, but that doesn't solve the problem either.
Anyone out there have a clue what might be happening? This is more than a minor inconvenience... if my image management system can't display the image as it should appear, it's unusable.
Chris

Problems with importing images into Lightroom cc

Problems with importing images into Lightroom cc
I have installed lightroom cc and having trouble imortera images from my Canon 1DX.
Lightroom starting the capture, but then nothing happens more, if I turn off the camera, I get error message photo 100-200 could not be loaded.
Now I have left lightroom 5 and where the input port works fine.
What happened to the upgrade from Lightroom 5 to lightroom cc?
The camera has the latest software.

I've now tested in various ways.
First, I have images on both memory cards in the camera.
Test1) Selects Not all of the photos in the camera at the input port bearings, it seems to work fine.
Test 2) selects all cards in the camera and then get the following, Lightroom starts inportera short but stops and nothing happens (Fig.1).
I turn the camera off after a while and get the next meddelnade (picture 1)
Which can be translated:
"The following files were not imported because they could not read (351)
Property 1-100
etc. "
Picture 1.
Picture 2

Why do i have a problem with accessing images in adobe muse

why do i have a problem with accessing images in adobe muse ??????!!!!!
i need heeeeeelp ASAP
pleeeeease

I am on the begining stages with constructing the web so i do not have yet URL. The problem is i can not insert any image any way. Whether by fill a browser or by place image, i have the same issue. All the images with all image's format unable to be selected and it is turned off
I really need help plz
Is there any info i can supply that would help you figiring out the problem ??

I am getting problem with eps image coordite while rotating in AI Script

I am getting problem with eps image coordite while rotating in AI Script

"Problem"? Uh, *what* problem?
"AI Script"? There is no such thing.
I'm willing to interpret "cordite" as "coordinate" but you must provide more (a LOT more) information before anyone can volunteer to help you. You are not posting to an automated system that retrieves stock answers from a database. You are asking Real People to help you. (And this is a user-to-user forum, so it's all voluntary as well.)

IE 8 problem with CSS image rollover

Similar Messages

Maybe you are looking for