|
CSS - Firefox Problem, Background Image Shifting When I My Div's
Hi,
has anyone ever had a problem with firefox only (not IE). that when you shift your background image, the divs on top shift with it? I dont want them to shift down but they do when I look at it in firefox its shifted, in IE its not. I am sorry this is my first posting. if anybody can help me, thanks alot. Here is my code: 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>
<style type="text/css">
#outer {
width: 820px;
height:800px;
margin: auto;
background: url(images/background2.png);
background-repeat: no repeat;
background-position: center; }
</style>
<title>test</title>
</head>
<body>
<div id="outer">
<div style="backgroundimage:url(images/header2.png); background-repeat: no repeat; background-position: center; width:819px;
height:120px;
margin-top:20px;">
</div>
<div style="background-image:url(images/header2.png); background-repeat: no repeat;
background-position: center;
margin-top:20px;
width:819px;
height:120px; ">
</div>
</div>
</div>
</body>
</html>
Similar TutorialsIn firefox with a maximised window my main background gets shunted right by 2px. If I de-maximise the window it puts the image centre. It always works in IE. Any ideas? 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. 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! I am trying to set background of my divs with: background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat; It works fine with IE but at Firefox there is only a white background. You can check this out at: http://www.pearl.ru/isdunyasi Hey everyone, I'm redesigning a site and I'm running into some problems in firefox with the placement of the header-background image. The problem is that firefox places the image about 15 pixels below the intended area. When I add a border of 1 pixel to the header div firefox places the image correctly. I don't have this problem when viewing the site in IE. I've coded the following XHTML and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ParaCentrumEeldeHoogeveen</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Language" content="nl" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
</body>
</html>
And the css file: Code: html {
padding: 0px;
margin: 0px;
}
body {
background: #3a60db url('../gfx/background.jpg') repeat-x;
font-family: arial, "lucida console", sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
margin: 0px;
margin-top: 0px;
padding: 0px;
}
#container {
border: 0px solid #ff0000;
width: 760px;
margin: 0px auto;
padding: 0px;
text-align: left;
}
#header {
background: url('../gfx/header.jpg') no-repeat;
height: 238px;
width: 760px;
padding: 0px;
margin: 0px;
}
Screenshot of the problem Does anybody know what the problem is? Thanks in advance. Grtz. Arjen Hello, I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left. Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works. Background: I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes. An example of the current test is he (URL address blocked: See forum rules) *not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete. It is here - classtime . org / test6 . htm and the navigation image is he (URL address blocked: See forum rules) *classtime . org / navigate . png I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox. As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem. Thank you very much for taking a look. My jumbled code is as follows: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">
a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}
.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}
.top a:hover {
background-position: 0px -601px;
}
#left {
left: -40px;
width: 150px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: 0px -120px;
position: relative;
}
#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}
#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}
#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}
#right {
width: 154px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: -640px -120px;
position: relative;
}
#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}
#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}
#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}
</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
<div class="top">
<a href="(URL address blocked: See forum rules)"></a>
</div>
</td>
</tr>
<tr>
<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
<ul id="left">
<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
</ul>
</td>
<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
aaa</td>
<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
<p align=right> <ul id="right">
<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? So I have a completely weird problem that I can't explain at all and was hoping to see if someone else has any clue. In Firefox every page displays as it should unless the scroll bar is activated (ie. the content goes beyond the height of the available window). As soon as the scroll bar is activated the two divs at the top shift roughly two pixels to the right. I know it's not the bottom shifting to the left. Now the weird part. The CSS that manages placement of anything at all does not change between any of the pages, the only thing that changes between pages is a background image of a div, a div that isn't moving, and the images are all the same size. In addition I have tested this in Opera, IE 6.0, IE 7.0, Netscape Navigator, Safari, and Firefox, and the problem only occurs in Firefox, that's 3.0 specifically. Anyone have any ideas? The page looks fine in firefox, but in any other browser, the header bar -- the gallerybox div -- shifts up by 4px. Any idea why this might be happening? Thanks in advance The page HTML: Code: <!DOCTYPE html>
<html>
<head>
<title>Home :: Secure Technologies International</title>
<meta name="description" content="Secure Technologies International (STI) is a leading Canadian IT and Information Security solutions company, representing industry leading hardware, software and network security manufacturers; addressing a wide array of requirements." />
<meta name="keywords" content="secure,technologies,international,inc,home,training,firewall,mcafee,professional,services" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/themes/SecureTech/main.css" />
<link rel="stylesheet" href="css/themes/SecureTech/menu.css" />
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<script src="include/jquery.js" type="text/javascript"></script>
<script src="include/s3Slider.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- IE HACK FOR SLIDESHOW CENTERING -->
<!--[if IE]>
<style type="text/css">
#image img
{
left: 50%;
margin-left: -250px;
}
</style>
<![endif]-->
<script type="text/javascript" src="include/prototype.js"></script>
<script type="text/javascript" src="include/functions.js"></script>
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
} ) ( jQuery );
</script>
</head>
<body onload="SetOrigin()">
<div class="contactbox">
Reach us by phone toll free at 1-866-417-3579<br/>
Or by email at sales@securetechnologies.ca
</div>
<div class="container">
<ul class="menu">
<div class="search">
<form method="get" action="searchres.php">
<input type="hidden" name="referpage" value="home" />
<input name="hsearch" value="" onclick="OnSearchClick();" onblur="OnSearchUnclick();" style="margin-top:2px; position: relative; top: -9px; width: 230px;" />
<input type="image" src="images/search-icon.png" height="28px" />
</form>
</div>
<li><a href="?page=home" class="active"><span>Home</span></a></li>
<li><a href="?page=news" ><span>News</span></a></li>
<li><a href="?page=partners" ><span>Partners</span></a></li>
<li><a href="?page=support" ><span>Support</span></a></li>
<li><a href="?page=services" ><span>Professional Services</span></a></li>
<li><a href="?page=training" ><span>Training</span></a></li>
<li><a href="?page=contact" ><span>Contact Us</span></a></li>
<li><a href="?page=about" ><span>About Us</span></a></li>
</ul>
<div class="ContentMenu">
<a href="http://www.mcafee.com/us/mcafee-labs/threat-intelligence.aspx">McAfee Threat Intelligence</a> | <a href="http://www.trustedsource.org/en/threats/malware_top">Top Malware Today</a> <br/><br/>
<div class="ContentMenuSUB">
<b>Next Training Week Starts:</b> 18th of July, 2011<br/>
<b>Next Upcoming Event:</b> McAfee and STI Firewall User Group - 13th of July, 2011<br/>
</div>
</div><div class="gallerybox">Home</div>
<div class="content">
<div class="heading"></div>
<div class="newsimg" style="background: url(images/thumbnails/th_Dominican-Republic-Flag.png);"></div>
<div class="newsitem">
<b>Kevin De Snayer returns from heroic venture to the Dominican Republic</b> posted on the 2011-06-14 at 15:43:20<br/>
Source: <i><a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">www.youtube.com</a></i><br/>
<div class="eventdesc"></div>
</div><br/>
<div class="newsimg" style="background: url(images/thumbnails/apple_logo.thumbnail.jpg);"></div>
<div class="newsitem">
<b>Top 10 iPhone Passcodes Revealed</b> posted on the 2011-06-14 at 17:30:35<br/>
Source: <i><a href="http://www.itnews.com/smartphones/33511/top-10-iphone-passcodes-revealed">www.itnews.com</a></i><br/>
<div class="eventdesc"><p>
There are 10,000 possible passcodes for an iPhone, yet 15 percent of users have one of the 10 most popular codes, according to app developer <a href="http://amitay.us/index.php">Daniel Amitay</a>, whose <a href="http://amitay.us/projects/big%20brother.php">Big Brother Camera Security app</a> records anonymous passcode data from users.</p>
</div>
</div><br/>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="images/home/1.png" />
<span>"A next-generation firewall that restores control and protection to your network"<br/> -McAfee Inc.</span>
</li>
<li class="s3sliderImage">
<img src="images/home/2.png" />
<span>STI Training: Certified McAfee Instructors available for Advanced administration and Support training.</span>
</li>
<li class="s3sliderImage">
<img src="images/home/3.png" />
<span>STI MASP Program: Certified McAfee Support Specialists waiting to help you 24/7.</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</div>
</div>
<div class="footer">
<a href="?page=privacy">Our Privacy Policy</a> | Copyright 2011, Secure Technologies International Inc. <div class="footicons"><a href="http://twitter.com/SecTechOttawa"><img src="images/twitter.png" style="border:none;" alt="twitter" /></a> <a href="news.rss.php"><img src="images/rss.png" style="border:none;" alt="rss" /></a></div>
</div>
</body>
</html>
The page CSS: Code: html, body
{
min-height: 100%;
background: #000000 url(../../../images/grad.jpg) top left repeat-x;
font-family: 'Arimo', arial, serif;
}
a:link
{
color:#3399FF;
text-decoration:none;
}
a:visited
{
color:#3399FF;
text-decoration:none;
}
a:hover
{
color:#0066FF;
text-decoration:none;
}
a:active
{
color:#99CCFF;
text-decoration:none;
}
.container
{
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: auto;
margin-right: auto;
width: 964px;
min-height: 100%;
background: #FFF;
/*-moz-box-shadow: -0px -0px 50px #000;
-webkit-box-shadow: -0px -0px 50px #000;
box-shadow: -0px -0px 50px #000;*/
margin-bottom: 26px;
}
.spamcube
{
height: 25px;
background: url(../../../images/spam_red.jpg);
color: white;
font-size: 15px;
}
.spamcubevalid
{
height: 25px;
background: url(../../../images/spam_green.jpg);
color: white;
font-size: 15px;
}
.productswidget
{
width: 100%;
min-height: 30px;
margin-left: auto;
margin-right: auto;
}
.logomenu
{
display:block;
vertical-align:middle;
background: #DDD;
margin-top: -5px;
margin-left: -5px;
margin-right: -5px;
border-bottom: 1px black solid;
height: 50px;
}
.logomenu li
{
padding:0;
margin:0;
margin-right: 5px;
margin-left: 5px;
list-style:none;
display:inline;
vertical-align:middle;
}
.logomenu li a.active
{
padding-top: 10px;
position:relative;
top: 10px;
}
.productcontainer
{
width: 900px;
margin: 25px;
}
.productcontainer .bart
{
margin: 0px;
width: 900px;
}
.productcontainer .bar
{
margin: 0px;
width: 900px;
margin-left: 15px;
}
.productcontainer .bar a .more
{
color: #BBB;
text-align: center;
}
.productcontainer table
{
width: 900px;
margin: 0px;
border: none;
}
.trainingform
{
width: 700px;
margin-left: auto;
margin-right: auto;
background: #DDD;
min-height: 100px;
margin-top: 30px;
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
}
.trainingform input
{
width: 500px;
margin-right: 20px;
}
.trainingform .submitb
{
width: 100px;
margin-left: 600px;
}
.trainingform textarea
{
width: 500px;
height: 100px;
margin-right: 20px;
}
.ttop
{
position: relative;
top: -87px;
display: inline;
}
.error
{
color: #FF0000;
}
.ContentMenu
{
margin-top: 5px;
text-align: center;
margin-bottom: 15px;
margin-left: 5px;
position: relative;
top: 45px;
}
.ContentMenuSUB
{
height: 35px;
margin-top: 5px;
text-align: left;
}
a
{
text-decoration: none;
}
.heading
{
font-size: 25px;
color: #000066;
}
.content
{
min-height: 250px;
margin: 5px;
}
.search
{
position: relative;
top: 1px;
float: right;
}
.footer
{
margin-left: auto;
margin-right: auto;
width: 966px;
background: #000;
color: #FFF;
margin-top: -26px;
height: 27px;
text-align: right;
}
.footicons
{
margin-top: -17px;
margin-left: 5px;
text-align: left;
}
.headerLogo
{
width: 964px;
padding: 7px;
margin-left: auto;
margin-right: auto;
}
.gallerybox
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -100px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.gallerybox
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -100px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.gallerybox_nosub
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -60px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.gallerybox_static
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -15px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.contactbox
{
margin-left: auto;
margin-right: auto;
width: 966px;
text-align: right;
background: url(../../../images/logomain.png) top left no-repeat;
height: 80px;
margin-top: 5px;
font-size: 18px;
}
.gmaps
{
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
.closadiv
{
width: 100%;
overflow: hidden;
height: 35px;
}
.partnername
{
font-size: 22px;
position: relative;
top: 5px;
}
.newsitem
{
width: 828px;
position: relative;
left: 132px;
}
.newsimg
{
background: #CCCCCC;
width: 128px;
height: 128px;
position: relative;
top: 132px;
margin-top: -132px;
font-size: 18px;
color: #999999;
}
#s3slider {
width: 964px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
left: -5px;
overflow: hidden; /* important */
background: white;
}
#s3sliderContent {
width: 964px; /* important to be same as image width */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
left: -40px;
top: -16px;
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 15px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 964px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
.eventdesc
{
min-height: 128px;
width: 100%;
}
.mintype
{
font-size: 13px;
}
The Menu CSS: Code: /*
Generated via www.cssmenubuilder.com
Copyright (c) 2008-2010 www.cssmenubuilder.com
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/
.menu
{
margin:0 auto;
padding:0;
height:30px;
width:1000px;
display:block;
background:url("../../../images/topMenuImages.png");
border: 1px solid black;
position:relative;
left: -18px;
}
.menu li
{
padding:0;
margin:0;
list-style:none;
display:inline;
}
.menu li a
{
float:left;
padding-left:15px;
display:block;
color:rgb(255,255,255);
text-decoration:none;
font:12px Verdana, Arial, Helvetica, sans-serif;
cursor:pointer;
background:url("../../../images/topMenuImages.png") 0px -30px no-repeat;
outline:none;
}
.menu li a span
{
line-height:30px;
float:left;
display:block;
padding-right:15px;
background:url("../../../images/topMenuImages.png") 100% -30px no-repeat;
}
.menu li a:hover
{
background-position:0px -60px;
color:rgb(255,255,255);
}
.menu li a:hover span
{
background-position:100% -60px;
}
.menu li a.active, .menu li a.active:hover
{
line-height:30px;
font:12px Verdana, Arial, Helvetica, sans-serif;
background:url("../../../images/topMenuImages.png") 0px -90px no-repeat;
color:rgb(255,255,255);
}
.menu li a.active span, .menu li a.active:hover span
{
background:url("../images/topMenuImages.png") 100% -90px no-repeat;
}
Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots I have also included my HTML and CSS below. Thanks for your help! Code: /* Submenu */
.submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; }
.submenu a:active,.submenu a:focus{text-decoration:underline;}
.submenu ul{float:left;z-index:19; }
.submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;}
.submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;}
.submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;}
.submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;}
.submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;}
.submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;}
.submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;}
.submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;}
.submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;}
.grid_maindiv
{
position: relative;
border: 1px solid #cbc7b8;
overflow: hidden;
width: 105%;
font-family: verdana,arial;
}
.grid_table
{
background-color: white;
width: 100%;
font-size: 10pt;
}
.grid_table_header
{
background-image: url('../media/header.png');
height: 27px;
color: white;
font-weight: bold;
font-size: 14pt;
}
.grid_table_resize_row
{
background-image: url('../media/resize.gif');
width: 2px;
margin: 0px;
}
.grid_table_header_row
{
background-color: #EBEADB;
font-weight: bold;
cursor:pointer;
padding-left: 5px;
padding-bottom: 0px;
position: relative;
height: 18px;
overflow: hidden;
font-size: 10px;
cursor:pointer;
border-bottom:2px solid #cbc7b8;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
margin-bottom: 0px;
background-image: url('../media/column.png');
}
.grid_table_header_row_hover
{
font-weight: bold;
cursor:pointer;
padding-left: 5px;
padding-bottom: 0px;
position: relative;
height: 18px;
overflow: hidden;
font-size: 10px;
cursor:pointer;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
margin-bottom: 0px;
border-bottom:2px solid #f9b119;
background-color: #FAF9F4;
background-image: url('../media/column_on.png');
}
.grid_column_resize
{
cursor: e-resize;
width: 2px;
background-color: #cbc7b8;
border-bottom:2px solid #cbc7b8;
padding-bottom: 0px;
margin-bottom: 0px;
}
.grid_table_row_uneven
{
background-color: #EBEADB;
}
.grid_footer
{
background-color: #f9f9f9;
height: 20px;
color: #616161;
}
.grid_table_cell
{
padding-left: 2px;
position: relative;
border-bottom: 1px solid lightgray;
height: 28px;
overflow: hidden;
margin: 0px;
font-size: 10px;
}
Code: <body onmouseup="SetMouseDown(false);" topmargin="2">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0"
CELLPADDING="0">
<TR>
<TD WIDTH="50%">
<FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A> <B>
<A CLASS="topnav">text</A></B> <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A> <A
HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD>
<TD WIDTH="50%">
<P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT
SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> |
<A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD>
</TR>
</TABLE>
<HR SIZE=1 COLOR="#000000" WIDTH="100%">
<a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a>
<br>
<div class="submenu">
<ul>
<li><a href="view.php">Show All</a>
</li>
<li><a href="view.php?trash=1">View Trash</a>
</li>
<li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a>
</li>
<li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a>
</li>
<li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li> <form action="view.php" method="post">
<li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a>
</li> </form>
</ul>
</div>
<div class='grid_maindiv' id="grid" width=100%>
GRID
</div>
Hello, I have been having quite a bit of trouble using the Galleria js/jQuery plugin for my image gallery because of a lack of IE support. I have tried posting on their support pages numerous times with no response. The site can be found at http:jonathansakkos[dot]com/index-test.html. The main problem is that in IE (I have tested 7 & 8) the main image shifts to the right so that it is partly off screen. I have tried fiddling with the CSS file that comes with galleria, but cannot seem to fix this bug. That CSS file can be found he Code: .galleria-container{position:relative;overflow:hidden;background:#000;}
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.galleria-stage{ position:absolute; top:10px; bottom:70px; left:10px; right:10px; overflow:hidden; margin: 0 auto 0 auto; }
.galleria-thumbnails-container{height:60px;bottom:0;position:absolute;left:10px;right:10px;z-index:2;}
.galleria-carousel
.galleria-thumbnails-list{margin-left:10px;margin-right:10px;} .galleria-thumbnails
.galleria-image{ height:60px; width:60px; background:#000; margin:0 5px 5px 0; border:1px solid #000; ; float:left; cursor:pointer; }
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2;}
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(classic-loader.gif) no-repeat 2px 2px;}
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;}
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;}
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;}
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb;}
.galleria-info-title+.galleria-info-description{margin-top:7px;} .galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;}
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;}
.galleria-info-link:hover, .galleria-info-close:hover{opacity:.5;} .galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0;}
.galleria-image-nav-left, .galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;}
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover{opacity:.5;} .galleria-thumb-nav-left,
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 5px;position:absolute;left:0;top:0;height:40px;width:23px;z-index:3;opacity:.8;}
.galleria-thumb-nav-right{background-position:-578px 5px;border-right:none;right:0;left:auto;}
.galleria-thumbnails-container .disabled,
.galleria-thumbnails-container .disabled:hover{opacity:.2;cursor:default;}
.galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover{opacity:1;background-color:#111;} .galleria-carousel
.galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right{display:block;} .galleria-thumb-nav-left,
.galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right{background-image:url(classic-map.png);background-repeat:no-repeat;}
I realize that this code is tough to read and if there is a better way to post it please let me know and I will do that. Any help would be greatly appreciated! Thanks, Jonathan 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 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, 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. 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. I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas? It's pretty hideous - it's a test, but here's the url: http://www.mahec.net/default3.aspx Here's the code: Code: <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
position:relative;
width:90%;
padding:25px 25px 25px 25px;
z-index:1;
background-color:#ffffff;
color:#000000;
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>
<p>paragraph text</p>
</div>
</form>
</body>
</html>
Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox. css code for the body tag is: body { background-color: #0d005e; background-image: url('images/bgmain.jpg'); background-repeat: repeat-x; } Any thoughts? |
|||||||