CSS problem displaying link - looks different in IE8 and Firefox

HTML & CSS
1

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:


.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:


<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

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.


<!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 :slight_smile:

3

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

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::slight_smile: