SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem displaying link - looks different in IE8 and Firefox

    Hi all,

    Looking for some help with CSS differences between firefox and IE 8.

    I have a series of text links and some CSS code to make them look like buttons, put an image behind them and do some hover effects. The problem is, I set the outer dimensions to match the graphics then use padding to get the text in the right position - this is where I am having problems. When I get it matched up in FF it looks off in IE8 and vice versa.

    Here is the CSS code:
    Code:
    .leftbtn { 
    	display: inline-block; 
    	width: 121px; 
    	height: 24px; 
    	margin: 0px; 
    	padding-left: 10px;
    	padding-top: 4px; background-image: url(images/leftnav_btn.gif);
    	padding-bottom: 0px;	
    	color: #FFF;
    	font-size: 12px; 
    	font-weight: bold; 
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	text-shadow: #000 0 1px 1px;
    }
    and here is the HTML code:
    Code:
    <div id="bets">      
                <a href="#" id="load_single" class="leftbtn"/>single</a><br/>
                <a href="#" id="load_double" class="leftbtn"/>double</a><br/>
                <a href="#" id="load_treble" class="leftbtn"/>treble</a><br/>
                <a href="#" id="load_fourfold" class="leftbtn"/>fourfold</a><br/>
                <a href="#" id="load_fivefold" class="leftbtn"/>fivefold</a><br/>
                <a href="#" id="load_trixie" class="leftbtn"/>trixie</a><br/>
                <a href="#" id="load_yankee" class="leftbtn"/>yankee</a><br/>
                <a href="#" id="load_superyankee" class="leftbtn"/>super yankee</a><br/>
                <a href="#" id="load_patent" class="leftbtn"/>patent</a><br/>
                <a href="#" id="load_lucky15" class="leftbtn"/>lucky 15</a><br/>
                <a href="#" id="load_lucky31" class="leftbtn"/>lucky 31</a><br/>
    </div>
    This has me stumped so any help is appreciated.

    Cheers.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd need to see the whole page because I can't see where your images are.

    Looking at the code though it seems to be exactly the same in Firefox and IE8 as far as I can see (apart from the text shadow which isn't supported in IE8).

    Unless of course you have no doctype and then IE8 will be in quirks mode and render more like ie5.

    Supply all your html and css or even better still a link.

    That list of links you have there would be better in a list and not using bare anchors and breaks which is non semantic and bad for accessibility.

    The class on every link is a waste as you can target all from the parent.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    ul#bets {
        margin:0;
        padding:0;
        list-style:none;
    }
    #bets li a {
        display: block;
        width: 121px;
        height: 24px;
        margin:0;
        padding:4px 0 0 10px;
        background: url(images/leftnav_btn.gif) no-repeat 0 0;
        color: #FFF;
        font-size: 12px;
        font-weight: bold;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        text-decoration: none;
        text-shadow: #000 0 1px 1px;
    }
    </style>
    </head>
    <body>
    <ul id="bets">
        <li><a href="#" id="load_single">single</a></li>
        <li><a href="#" id="load_double">double</a></li>
        <li><a href="#" id="load_treble">treble</a></li>
        <li><a href="#" id="load_fourfold">fourfold</a></li>
        <li><a href="#" id="load_fivefold">fivefold</a></li>
        <li><a href="#" id="load_trixie">trixie</a></li>
        <li><a href="#" id="load_yankee">yankee</a></li>
        <li><a href="#" id="load_superyankee">super yankee</a></li>
        <li><a href="#" id="load_patent">patent</a></li>
        <li><a href="#" id="load_lucky15">lucky 15</a></li>
        <li><a href="#" id="load_lucky31">lucky 31</a></li>
    </ul>
    </body>
    </html>
    That's about as much as I can see from here

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a million, it was the missing doctype. Never encountered that problem before.

    You are right about the <li> based version, I'll use tht instead.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by betcalculate.com View Post
    Thanks a million, it was the missing doctype. Never encountered that problem before.
    Without a doctype IE goes into quirks mode and uses the broken box model where padding and borders are contained within the dimensions of the element rather than being added to it.

    You can read more below:
    http://reference.sitepoint.com/css/ie5boxmodel
    http://www.sitepoint.com/forums/show...5&postcount=25


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •