CSS buttons working in Firefox, not IE though?

tradmusic.com

Hi.

Trying to create a roll-over button effect using CSS and it's working great
in Firefox:
http://www.nathonjones.com/sitc/salmon.shtml

However, it looks totally different in IE. The first button is a different
size to the others, and all of the others seem to have a margin at the top,
so the colour fill, on hover, doesn't fill the correct area! Can anyone see
anything obvious that I'm missing as I've tried combinations of things
without success so far.

Here's my CSS for the buttons:

#leftnav {
float: left;
font-size: 0.9em;
width: 140px;
background-color: #FFFFFF;
border-width: 0 1px 0 0;
border-style: dashed;
border-color: #AABBDC;
}

#leftnav a {
height: auto;
display: block;
text-decoration: none;
border-width: 0 0 1px 0;
border-style: dashed;
border-color: #AABBDC;
font-weight: bold;
padding-left: 8px;
padding-top: 8px;
padding-bottom: 6px;
color: #7F9D7F;
}

#leftnav a:hover {
background-color: #7F9D7F;
color: #FFFFFF;
}

My navigation links are in a Server Side Include (nav.txt) and I wondered if
that might be causing problems?
The nav.txt file is simply:

<div id="leftnav">
<a href="index.sht ml" style="margin-bottom:0;">Home Page</a></br>
<a href="salmon.sh tml" style="margin-bottom:0;">Salm on</a></br>
....etc
</div>

Hope someone can help. Thanks.
nath.

Feb 11 '06 #1

Subscribe Reply

4229

bissatch

I had a problem with IE showing these margins too. Try also setting the
width of - #leftnav a - I would recommend setting the width in pixels
though and not percentage because you get funny results in Firefox when
you do, for example, 100%. So, in your case I will be width: 132px;
(140 - 8px for left padding). You will need to remove the <br /> from
the end of each link.

I would futher recommend placing your links in a <ul> list and setting
padding, margin and list-style to 0px and none respectively. You can
then use CSS to set the padding, borders, backgrounds etc as Im sure
your aware. This way, more basic browsers that cannot layout page
elements in the same way that desktop browsers can will still be able
to display your links in a structured manner

Hope this helps.

Burnsy

Feb 11 '06 #2

dsmasters

IE only recognizes hovers over <a> tages only. See the below link to
get a light weight Javascript to fix the IE bug.

http://www.htmldog.com/articles/suckerfish/dropdowns/

Dan

Feb 16 '06 #3

Similar topics

1693

Script for depressible buttons?

by: Brett | last post by:

Is there a script for depressible buttons that work in Mozilla and IE? This works nice but only in IE: http://www.dynamicdrive.com/dynamicindex5/depressbutton.htm. Thanks, Brett

Javascript

2997

Mysterious disappearance of buttons in form view

by: j.mandala | last post by:

This had got to be something obvious that I am too blind to see! Funny problem: one of my users has my application linked to a SQL Server Backend. Front end it Access XP (SP3). The first form opened is full of (about 25) buttons with a few fields on the form footer that are filtered simply. It is called 'Switchboard' though it is not a standard MS Access Switchboard. This person did the following: Lengthened 2 strings from a table not...

Microsoft Access / VBA

1776

Buttons Not Working

by: Jairo Nieto | last post by:

Hi, I've had this extremely weird problem for a week or so, and havent been able to solve it. My solution works fine on the production server. Once I deploy it, all buttons stop posting back (they still validate though). Other page controls do postback. On some clients, the application buttons do post back once, and from there on, the buttons stop working forever. I have a couple of theories, but correcting them has no effect at all....

ASP.NET

1925

IE6 not aplying style to DOM created buttons...??? (FireFox working fine)

by: neousr | last post by:

var row = document.createElement('TR'); row.setAttribute('class',tipoclase); ..... var cell = document.createElement('TD'); var theButton = document.createElement('input'); theButton.setAttribute('type','button'); theButton.setAttribute('value',description); theButton.setAttribute('class',ButtonClass); cell.appendChild(theButton); row.appendChild(cell);

Javascript

3196

Rollover buttons with IE (including framesets) bug

by: AJBopp | last post by:

I'm wrestling with CSS variations between Firefox and IE. I'm trying to create rollover buttons in a menu frame. It is working perfectly in Firefox but in IE only the first button is properly highlighted and linked. The second button, has only a partial "hit area" at the top of the image, although if you click the link, you can see the link border is properly place around the image. The rest of the buttons have no rolloever state or link...

HTML / CSS

2804

-> Image submit buttons OK in Firefox, not in IExplorer. Why? <-

by: Steve JORDI | last post by:

Just a question using images as submit buttons and PHP4.4.4. It seems that my code correctly works in FireFox but not in IExplorer. For example, I have a FORM with 2 buttons called "search" and "save". In a second file, the one mentioned in the "action" parameter, I test which button has been clicked in order to decide which action to take. IExplorer doesn't get anything, FireFox correctly works.

PHP

2275

Script.aculo.us effect not working in Firefox?

by: Toby Inkster | last post by:

Does anyone have any idea why this effect using script.aculo.us is working in Opera, but not Firefox? http://examples.tobyinkster.co.uk/Balloons2/Balloon%20tooltip.html (I've not had the courage to even try it in IE yet!) Any ideas for a fix? Thanks

Javascript

6676

multiple image submit buttons in one form

by: =?Utf-8?B?YzY3NjIyOA==?= | last post by:

Hi all I have the following code: I am trying to use the value of the image button to evaluate what plan the user has chosen, i.e. it request("submit1")="Basic", then the user chose basic plan ... But when I click one of the image button, the thing is different from what I thought. it seems that it has field name like submit1.x=24&submit1.y=10, looks like the form submit swith the image button position values instead of the value

ASP / Active Server Pages

2278

Form and radio buttons; can't send them correctly

by: Twayne | last post by:

Hi, Newbie to PHP here, no C or other relevant background, so pretty niave w/r to the nuances etc. but I think this is pretty basic. XP Pro, SP2+, PHP 4.4.7, XAMPP Local Apache Server 6.something I think and running as a service, Using NoteTab Pro as an IDE (works well). If you need more, just ask. In one functioning form:

PHP

10311

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10146

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10080

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8967

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6733

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5378

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4043

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3639

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2874

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General