Enjoy unlimited access to all forum features for FREE! Optional upgrade available for extra perks.
Domain summit 2024

Not sure what is wrong with the CSS

Status
Not open for further replies.

DataSN.com

Level 4
Legacy Exclusive Member
Joined
Oct 5, 2010
Messages
116
Reaction score
7
In IE8, all the buttons are fine except the "Contact Us" button which has an extra background image slug attached to the right. It's all right in other browsers but not IE8.

Appears to me that the right background image isn't properly positioned to the right, leaving out the middle image there. Tried to modify the width and even the text shorter but neither worked.

Code:
<ul>
            <li><a href="/" title="Scraping Web home"><span>Home</span></a></li>
            <li><a href="/databases.html" title="All databases on sale"><span>Buy Databases</span></a></li>
            <li class="current"><a href="/quote.html" title="Contact us regarding your data needs"><span>Contact Us</span></a></li>
            <li><a href="/scripts.html" title="Custom build a website or web application from a content database"><span>Custom Build</span></a></li>
            <li><a href="/specials.html" title="Special discounts on our database products by using coupons!"><span>Coupons</span></a></li>
            <!-- <li><a href="/press/" class="specials" title="Blog publishing latest data products and coupons"><span>Data Blog</span></a></li> -->
            <li><a href="/press/" title="Blog publishing latest data products and coupons"><span>Data Blog</span></a></li>
</ul>

Code:
#header li {
    float:left;
    margin:0 0 0 6px;
}
#header li a:hover {
    color:#000;
}
#header li a {
    font:bold 1.3em Trebuchet MS;
    color:#888;
}
#header li, #header li a, #header li a span {
    display:block;
    height:34px;
    cursor:pointer;
}
#header li {
    background:url(../images/tab_mid.gif) repeat-x 0 0;
}
#header li a {
    padding:0 0 0 1em;
    background:url(../images/tab_left.gif) no-repeat 0 0;
    width:9em;
}
#header li a.specials {
    color:#000;
}
#header li a span {
    padding:0 1em 0 0;
    background:url(../images/tab_right.gif) no-repeat 100% 0;
    width:8em;
    text-align:center;
    line-height:2.6;
}
#header li.current {
    background:url(../images/selected_tab_mid.gif) repeat-x 0 0;
}
#header li.current a {
    color:#fff;
    background:url(../images/selected_tab_left.gif) no-repeat 0 0;
}
#header li.current a:hover {
    color:#fff;
}
#header li.current a span {
    background:url(../images/selected_tab_right.gif) no-repeat 100% 0;
}


This is bizarre considering the styles for all the buttons are absolutely identical.

Anybody got any insights?
 
Domain summit 2024

twenty-three

Level 2
Legacy Platinum Member
Joined
Aug 16, 2008
Messages
37
Reaction score
0
In the file global.css remove the attribute 'width:9em' for the selector '#header li a' and it should be gone.

23
 
Status
Not open for further replies.

The Rule #1

Do not insult any other member. Be polite and do business. Thank you!

Sedo - it.com Premiums

IT.com

Premium Members

AucDom
UKBackorder
Be a Squirrel
MariaBuy

New Threads

Our Mods' Businesses

Free QR Code Generator by MerchArts
UrlPick.com

*the exceptional businesses of our esteemed moderators

Top Bottom