|
CSS - Firefox Is Misaligning The Background To An <a> Tag
Hi All
I love Firefox, and have never had a reason to doubt it, but has anyone come across this before? I've got a page with a row of buttons which are <a> tags (or <divs> I tried that and it made no difference) inside which are transparent gifs the :hover states of which change the background colour. It all aligns perfectly in IE but Firefox, Safari and Netscape are all misaligning the background colour by about 2 pixels - dropping it down the page and forcing the enclosing div to expand. Here's the html Code: <div id="panelnav"> <a href="javascript:;" class="workbuttons"><img src="images/work-double.gif" alt="view more work" width="25" height="13"></a> <a href="javascript:;" class="workbuttons"><img src="images/work-single.gif" alt="view more work" width="25" height="13"></a> </div> And here's the CSS Code:
#panelnav{
height:31px;
text-align:right;
padding-right:8px;
padding-top:8px;
}
.workbuttons{
width:25px;
background: #DDE0E9;
height:13px;
margin-left:5px;
overflow:hidden;
}
a.workbuttons:link{
outline: none;
border: none;
padding:0px
}
a.workbuttons:hover{
background: #fff;
}
You'll note that some of that CSS is pretty redundant, but it just shows a few things I've tried that haven't worked : ) Anybody got any ideas? Thanks M Similar TutorialsPlease look at http://casadelsol.tmhdesign.com I have this css #main { width:994px; background: transparent url(../images/stripe_bg.gif) repeat-y 0 400px; } That stripe_bg.gif shows up fine in IE, but not in FF, can someone shed some light? Hi, I have to get background position of image from a css class in a javascript function. [CODE] abc.button { width: 47px; background-image: url(../bt/save.gif); background-position: 0 -123px; } [CODE] I am able to get it in IE using backgroundPositionX and backgroundPositionY [CODE} var x = document.getElementById('abc').currentStyle.backgroundPositionX; var y = document.getElementById('abc').currentStyle.backgroundPositionY; [CODE} But I am not able to get the background position in FireFox. Is there a way to get background position of image in Firefox. Thanks I have the following code, in the sidebar DIV in Firefox the background does not show up, it does in IE7. What have I done wrong? CSS code: Code:
#content {
margin-left: 25px;
background: #fff;
width: 990px;
padding: 15px 20px 20px 20px;
}
#blog {
padding: 0;
margin-right: 40px;
background: #fff;
width: 660px;
color: #545454;
float: left;
padding-top: 5px !important;
}
#sidebar {
width: 250px;
padding: 8px;
background: #ccc;
}
XHTML/HTML code: Code:
<div id="content">
<div id="blog">
blah blah blah
</div>
<div id="sidebar">
<h2>blah</h2>
blah blah blah
</div>
</div>
I've been looking it at for a while, and while it's probably something minor I'm just simple over looking, I can't figure it out. Everything works, is in the correct place, except the grey background (#ccc) isn't showing up on the sidebar. I am trying to assign a background to footer div, it appears fine with internet explorer, but it does not appear at all with firefox. http://www.refinethetaste.com/html/ Hello all, When viewing in IE my background is dark red like it's suppose to be. When viewing the same site in Firefox the background is white. Firefox is not seeing that portion of code within my CSS file. Can someone shine some light for me? Thanks in advance!! Please help I need Please send me a message for URL. For some odd reason Dev won't allow me to post a link to my site for you. Ok, so i worked a little on this site and i can't get it to work in IE, and its really starting to bug me. What am i doing wrong? http://markspixel.com/smoothtobacco/bio.htm Code:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Smooth Tobacco</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}
.style1 {
margin-right: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="images/background.jpg" alt="background" id="bg" />
<div id="content">
My content is here
</div>
Hello there. I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE Can anyone help? .navbar { width: 960px; line-height: 30px; background-color: silver; z-index:100; display: block; clear: both; } .navbar ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:100; } .navbar ul li { display: block; position: relative; float: left; width: 120px; font-weight: bolder; z-index:100; } .navbar li ul { display: none; line-height: 20px; z-index:100; } .navbar ul li a { display: block; text-decoration: none; color: #48fc30; padding: 4px 15px 4px 15px; background: #silver; margin-left: 1px; } .navbar ul li a signup { background: #black; } .navbar ul li a:hover { background: #grey; } .navbar li:hover ul { display: block; position: absolute; } .navbar li:hover li { float: none; font-size: 11px; } .navbar li:hover a { background: #red; } .navbar li:hover li a:hover { background: #blue; } I'm trying to get a repeating background image to show up in my Firefox browser but can't get it to work. Grateful if somebody can tell me what is wrong with this code? Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
#header {
background:#A31135 url(images/fill.gif) repeat-x fixed;
height:100px;
}
</style>
</head>
<body>
<div id="header">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
Many thanks. Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. I have two bits of code that work in IE, but not in Firefox, and I have no idea why! They both use the background-image property Here is the first: Code:
a.bio {
display: block;
width: 150px;
height: 26px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio.jpg);
background-repeat: no-repeat;
}
a.bio:hover {
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio_h.jpg);
}
Code: <a class="bio" href=""></a> And the second: Code:
td.window
{
width:670;
height:31px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\window_nav_repeat.jpg);
background-repeat:repeat-x;
padding:0px;
margin:0px;
border-spacing:0px;
border:0px;
}
Code: <td class="window"></td> Does ANYONE know why this is happening?? hello. this has us stumped. here is the page: http://www.praxishosting.com/dev/csstest/testindex.htm it looks fine in IE, but in firefox, the div tag containing the background image does not appear to be expanding as the content grows. thus in firefox, you cannot see the background image in the bottom left hand cell (the only place it shows through). any suggestions? the style code for the background container is rather simple: Code:
#container {
width: 750px;
background: url(../media/bkgrd.gif) repeat fixed center top;
margin-right: auto;
margin-left: auto;
height: 100%;
}
I am trying to create a very basic div and css template with 3 columns. I want 3 columns visible, and want to give a backgroundcolor to the container. When my columns gets higher (the left, middle or the right column), I want the div wich contains these 3 columns to get higher (and reveiling this by the background color). All goes well in Internet Explorer 6, and even 7... but Firefox seems to have problems with it. Can anybody help me out? The following code is used: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .container{ width:600px; background-color:#660066; height:auto; } .kolomlinks{ /*COLUMNLEFT*/ float:left; width:80px; background-color:#66FF33; padding:10px; } .kolommidden{ /*COLUMNMIDDLE*/ float:left; width:380px; border:dotted 10px; background-color:#FFFFCC; } .kolomrechts{ /*COLUMNRIGHT*/ float:left; width:80px; margin:10px; background-color:#FF0000; } </style> </head> <body> <center> <div class="container"> <div class="kolomlinks">Left</div> <div class="kolommidden">Middle<br /> <br /> The background color of the overall container doesn't get extended in firefox. </div> <div class="kolomrechts">Right</div> </div> </center> </body> </html> Im setting the background color of a division to #FFFFFF which in IE is perfectly white as you would expect. However in firefox it is coming out as a really faint green colour. Is this because of the way ive coded it or is this a problem with firefox? hello all, I am not very well experienced with CSS, so, please, bear with me. this question may sound stupid. I have a web page that is comprised of one main table. Except for the banner on top (1 column), the main row has two columns. These columns will comprise of: 1) left column: Menu 2) right column: page content. In the left column, the menu, I would like to have a background image sitting behind the menu. I have attempted to use CSS to put an image behind the menu: Code: .menu_back {background: url('Pics/Web/menu_background.jpg') no-repeat #ffffff;}
And my html looks like this: Code: <table width = "100%" class = "menu_back"> This does not work. After scouring the web without any real success , I humbly ask for ur help. I am designing for Firefox hoping it will work fine under IE. Thanking u in advance. Hi there, First time posting here so dont bite my head off! First up allow me to say, that i've done a search for previous posts and although i found topics similiar to what im asking none of the answers within helped me. Second, i've run my CSS and XHTML through the validation service over at w3c. - XHTML transitional - is valid on all pages apart from the main page this is due to me running cutenews on that page and the markup isnt valid. - CSS is valid. Okay to business, im hoping someone out there can help me, i've recently just updated my website with a new layout. It works perfectly in IE-6 but not in firefox, or any other browser for that matter (i used browsercam). I have issues with the background images not displaying as they should do. And not only that, my flash animation at the top of the page isnt displaying in FF either! Heres a link to my website And heres a link to the CSS file someone help please! Hey all, am working on this: http://www.trshady.com/beyondfootball/ And have a problem with the 'wrapper' div ( which holds all the divs on the page ). In Internet explorer the background and border show up fine, but for some reason the wrapper background only is a large in height as the top banner .. Check it in both browsers so you know what I mean. Have made the wrapper background pink so it stands out. Thanks My code is below. The problem is the images in leftFloat & rightFloat are transparent png's and the middle background image stretches into those divs are appear behind the transparent png's in Firefox only. This does not happen in IE. I've tried setting different background images, background image to none and nothing seems to work. Any ideas are appreciated. CSS #container { width: 100%; background: url('images/topM.gif') repeat; } #leftFloat { width: 30px; float: left; } #rightFloat { #width: 30px; float: right; } #middleStretch { height: 25px; min-height: 1% } --------------------------- XHTML <div id="container"> <div id="leftFloat"/>image goes here</div> <div id="rightFloat">image goes here</div> <div id="middleStretch">this div should stretch to fill the space between the left & right floats showing while repeating container background image</div> <!--end #container--></div> URL Hi all, I got stuck on my site using background fixed attributes.. Although everything works fine for me in ie , in firefox , when I scroll the content, the background and everything flickers ... Does anyone know how to fix this ? I have been bothering with that at least one wekend and cant figure out where the problem is...???? Thanx in advance After years of developing, I finally decided to ditch the tables and use CSS properly for formatting. Things are going well, but I've run into a few odd problems. One is this one - I've chomped the page right down to illustrate the problem. In IE, the page renders as I'd hope, a bg color showing right across the page, with the left & right cols within that. In Firefox, the bg color renders, but STOPS where the left & right cols display. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hmmm...</title>
<style type="text/css">
<!--
body {
background-color: #403E3E;
margin: 0px;
padding: 0px;
}
#pagebodywrapping {
background-color: #A3AAAF;
margin: 0px;
padding: 0px;
width: 100%;
}
#pagebody {
margin: 0px auto;
padding: 0px;
width: 750px;
}
#pagebody .leftcol {
margin: 0px 0px 0px 0px;
padding: 0px;
width: 499px;
border-right: 1px solid #fff;
background-color: #FFF;
float:left
}
#pagebody .rightcol {
margin: 0px 0px 0px 0px;
width: 250px;
background-color: #5D757E;
float:left;
}
-->
</style>
</head>
<body>
<div id="pagebodywrapping"><br>
<div id="pagebody"><br>
<div class="leftcol"><br></div>
<div class="rightcol"><br></div>
</div>
</div>
</body>
</html>
I'm sure it's something very simple, but for the life of me, I can't figure it out. I've searched around to no avail either. ANY help would be very much appreciated. Thanks in advance. |
|||||||