CSS and Cross Web-Browser

Discussion in 'Web Design and Development' started by Aranince, May 15, 2007.

  1. Aranince macrumors 65816

    Joined:
    Apr 18, 2007
    Location:
    California
    #1
    Argh....I hate making sites work in two browsers. I am trying to make buttons using CSS. It works perfectly in Firefox, but doesn't in IE. The links work fine in IE, but don't have the hover effect. Also, at the end of the Nav bar, the image will not align with the css buttons. The image is 125px wide and in FireFox the buttons have to be 123px wide to be aligned correctly. But in IE, 123px is too short.

    Should I just make the buttons an image and forget it?

    [​IMG]

    Code:
    div.navigation	   {
    			float: left;
    			width: 123px;
    			margin: 0px;
    			}	
    			
    span.navbutton	{
    			display: block;
    			background-color: #003399;
    			width: 100%;
    			border-top: 1px solid #FFF;
    			border: 1px solid #003399;
    			margin: 0px;
    			padding: 0px;
    			color: #FFF;
    			cursor: pointer;
    		        }
    
    			
    span.navbutton:hover {
    				background-color: #FFF;
    				width: 100%;
    				color: #003399;
    				border: 1px solid #003399;
    				cursor: pointer;
    				text-decoration: none;
    				}
    
    Code:
    <div class="navigation">
    	<a href="index.html"><span class="navbutton">Main</span></a>
    	<a href="aboutus.html"><span class="navbutton">About Us</span></a>
    	<a href="services.html"><span class="navbutton">Services</span></a>
    	<a href="partners.html"><span class="navbutton">Partners</span></a>
    	<a href="contact.html"><span class="navbutton">Contact Us</span></a>
    	<img src="graphics/navgradiant.png" alt="" />
    </div>
     
  2. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    It may be something to do with the way borders are handled.

    FF may say 123px + 1px border (left) + 1px border (right) = 125px

    Whereas IE may say 123px includes 1px border (left) and 1px border (right) = 123px

    Try removing this line from the .navbutton declaration:

    border: 1px solid #003399;

    (It is the same as your bg colour, so not really necessary)

    And change the width of navigation to 125px.


    By the way, your effort is not as neat as it could be. For example, there is no need for span tags around the links. What's wrong with:
    <a href="contact.html" class="navbutton">Contact Us</a>

    Then just reference:
    a.navbutton

    Moreover this is a waste of time:
    <img src="graphics/navgradiant.png" alt="" />

    <img> should be used for actual images/drawings, not presentational elements.

    Give the .navigation padding at the bottom equal to the height of the "navgradient.jpg" image, then use the "background:" attribute in the CSS file to position said image at the bottom of the div:

    padding-bottom: ??px;
    background: url(navgradient.jpg) no-repeat left bottom;

    That should achieve what I think you are trying to achieve with the superfluous markup.
     
  3. maximile macrumors member

    Joined:
    Oct 27, 2003
    Location:
    Herefordshire, UK
    #3
    In IE, only <a> elements can take the :hover selector. (Dunno if this is true in the latest version, but it certainly was until recently). So following elppa's advice should fix it.
     
  4. Aranince thread starter macrumors 65816

    Joined:
    Apr 18, 2007
    Location:
    California

Share This Page