|
CSS - Div Shifting Div??
hello!
i'm freakin here with this problem so if anyone could solve... i have 2 divs, first one is floated left and it contains picture 100px wide, (width:100px, padding-left:20px) other one has margine of 140px - so they are inline. here's the problem, FF does it exactly as i wan't but IE seems to push left div ri shift right one for few pixels to the right (it's hard for me to explain so i'll include 2 jpegs) please if anyone has idea.... tomek Similar TutorialsHi Site: http://louis-dev.co.za.www35.cpt2.host-h.net/ This is a mambo site. I have a strange bug in Firefox. On some pages the top menu shifts . But the funny thing is when I refresh that page it goes back to normal and when I refresh it again it shifts. Anybody have a clue what is causing it? Louis Hi, New to CSS and all. Trying to work on a web site. I used a Wordpress theme and modified it to my liking. I am having a small issue that I would really appreciate help on. marinhome.inwire .net/lessons The page uses tabs. When you click from one tab to another, the tab content is shifting down. Can somebody please let me know what the problem is? Thanks, Gaurav I am working on a website combining css/tables. The #links cell expands taller than its content in ie. This causes all content in the cells below to shift down. It renders fine in all other browsers that I have tried. The site validates fine on w3. Here is a link with some screenshots of my problem. screenshots Sorry its in sluggish tripod. It was the easiest way for me to post it online quickly. Please Help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<title>Stick Boy Bread Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="text/drop_down.js"></script>
<link href="sbbc.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
background-color: #EEE074;
padding: 0px;
margin-top: 0px;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 0%;
background-image: url(images/gradient.gif);
}
#mainTable {
width: 740px;
height: auto;
border: thin solid #000000;
line-height: 1.5em;
margin: 25px 0 25px 35px;
background-image: url(images/gradient.gif);
background-repeat: repeat-x;
padding-left: 0%;
}
.rt {
border-left: medium double #000000;
vertical-align: top;
font-size: 100%;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
background-image: url(images/gradient4.gif);
}
.rt1 { border-left: medium double #000000;
vertical-align: top;
font-size: 100%;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
background-image: url(images/gradient4.gif);
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="mainTable">
<tr class="top">
<td height="90" class="topheader" colspan="3"><a href="index_final.htm"><img src="images/StickBoy_OvalLogo.gif" alt="Stick Boy Bread Company Bakery Boone" width="225" height="90" border="0"></a></td>
</tr>
<tr>
<td width="120" id="links"><ul id="nav">
<li><a href="text/history.htm">History</a></li>
<li><a href="text/products.htm">Products</a>
<ul>
<li><a href="text/breads.htm">Artisan Breads</a></li>
<li><a href="text/pastries.htm">Breakfast Pastries & Sweet Breads</a></li>
<li><a href="text/soups.htm">Foccacia, Soups & Take-Out Catering</a></li>
<li><a href="text/coffee.htm">Drip Coffee, Espresso Bar & Smoothies</a></li>
<li><a href="text/desserts.htm">Desserts & Cakes</a></li>
<li><a href="text/wedding.htm">Wedding Cakes</a></li>
</ul></li>
<li><a href="text/letter.htm">Letter from Carson</a></li>
<li><a href="text/contact.htm">Contact</a></li>
</ul></td>
<td width="380" rowspan="2" class="rt"><h2>Welcome to Stick Boy<br>
Bread Company!</h2>
<p><strong> If you are looking for a "real" bakery, you are in the right place. Welcome to Stick Boy Bread Company!</strong></p>
<script language="JavaScript" type="text/javascript">
<!--
/*
Random Image
*/
function random_imglink(){
var myimages=new Array()
myimages[1]="images/breadfront.jpg"
myimages[2]="images/french.jpg"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img alt="natural breads" class="icenter" src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
<p>text here</p>
<p> </p>
<p>text here</p>
</td>
<td width="220" rowspan="2" class="rt"><img src="images/sticknews3.gif" alt="Stick Boy Bakery News" width="257" height="151">
<p>text here <a href="text/news.htm">more</a></p>
<img src="images/ovenonlyandcover_edit.gif" alt="Stone Deck Oven" width="220" height="261" class="icenter">
<br />
<p>Download our latest newsletter <a href="text/news_winter06.pdf">here</a>.</p>
<p> </p>
</td>
</tr>
<tr>
<td rowspan="2" align="center" class="lft"><img src="images/soupoday.gif" alt="Soup of the Day" width="140" height="188" align="top" class="clear"><br>
<!-- the text below is edited from the external file called soup.js -->
<script language="JavaScript" type="text/javascript" src="text/soup.js">
</script>
<hr>
<a href="text/news_winter06.pdf"><img src="images/news_winter06.gif" alt="Download Newsletter" border="0" class="clear"></a>
</td>
</tr>
<tr>
<td colspan="2" class="btm"> <br />
<img src="images/keylime.jpg" alt="Key Lime Pie" width="252" height="154" class="fllftclear">
<p class="fresh"><strong>Key Lime Pie</strong></p>
<p>text here</p>
</td>
</tr>
</table>
</body>
</html>
Here is the css that seems relevant to my problem. Code:
.lft {
background-image: none;
padding: 0;
margin: 0;
background-color: #FFFFCC;
border-left-width: thin;
border-left-style: none;
border-left-color: #000000;
vertical-align: top;
clear: left;
}
#links {
background-image: none;
padding: 0;
margin: 0;
width: 140px;
display: block;
float: left;
vertical-align: top;
clear: both;
}
#links ul
{
margin: 0;
padding: 0;
list-style:none;
width: 100%;
}
#links ul li
{
margin: 0px;
padding: 0px;
float: left;
width: 100%;
position: relative;
}
#links li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
#links ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
background:#003366;
padding: 10px;
border-bottom: 1px solid #ccc;
border-right: none;
border-left: none;
font-size: 12px;
font-weight: bold;
height: 100%
}
#links ul li a:hover {
display: block;
text-decoration: none;
color: #FFFFFF;
background:#cc6633;
padding: 10px;
border-bottom: 1px solid #ccc;
border-right: none;
border-left: none;
text-align: left;
font-size: 12px;
font-weight: bold;
}
/* Fix IE. Hide from IE Mac \*/
* html #links ul li { float: left; height: 1%; }
* html #links ul li a { height: 1%; }
/* End */
#links li:hover ul, #links li.over ul
{
display: block;
text-align: left; }
HR {
height:0;
width:100%;
margin: 0;
text-align: center;
vertical-align: top;
padding: 0;
border-top: 0 none;
border-right: 0 none;
border-bottom: medium double #000000;
border-left: 0 none;
}
.rt {
border-left: medium double #000000;
vertical-align: top;
font-size: 100%;
padding: 0;
margin: 0;
background-color: #FFCC66;
background-image: url(images/gradient4.gif);
}
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;
}
http://www.chemicalbreakdown.net/Lost/ On the first page, there is no scroll bar. But if you click "next" and go to the second page, a scroll bar appears because the text is too long for the page. Is there some way I can use PHP to determine whether or not there's a scroll bar, and compensate by reducing the padding, so my layout won't shift towards the left? Thanks for the help! I'm working on my first website and have it working perfectly in everything but IE6 on a PC. When you hover over the menu and the drop down list shows, it shifts each item over, pushing the last down to the next row. I've tried adjusting numbers everywhere in the CSS, but no luck. Can anyone take a look and see if you notice anything? The actual menu is at chadmartin.net/Townie09/ Thanks for any help! Here's the CSS: Code: ul, ol, dl {
position: relative; }
#menu ul {
list-style: none;
margin: 0;
padding:0;
width: 99px;
float: left;
font: bold 12px arial, helvetica, sans-serif; color: #FFF;
text-transform: uppercase; text-align: center;
border-right: 1px solid #abe1fa;
background:url(images/list_back.gif);
line-height: 30px;
}
#menu a {
width:99px;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
font: bold 12px arial, helvetica, sans-serif; color: #fff;
text-transform: uppercase; text-align: center;
background:none;
line-height: 30px;
text-decoration: none;
}
#menu ul a:hover {
color: #eee;
}
#menu ul.last {width:100px; border:none; position:absolute; right: 800px; }
#menu {
width: 800px; height:30px; /* set width of menu */
z-index: 1; position:absolute;
}
/* style, color and size links and headings to suit */
#menu ul ul a {
width: 100px;
font: x-small arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: .6em 0;
text-decoration: none;
border-top border-left border-right: 1px solid #999;
background: #eee;
}
#menu ul ul li {
border-top: 1px solid #fff;
}
#menu ul ul a:hover {
color: #666;
background: #eee;
text-decoration: none;
}
#menu ul ul li a {color: #999999; text-size: 10px; background: #6c9c9c96; text-transform: none;}
#menu li {position: relative; top:0;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}
#menu ul {
font: bold 12px arial, helvetica, sans-serif; color: #FFF;
text-transform: uppercase; text-align: center;
background:url(images/list_back.gif);
}
#menu a {
width: 99px;
border-top border-left border-right: 1px solid #FFF;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu ul li:hover ul li{top: 0; width: 100%;}
#menu ul li:hover ul li a {height: 1%;}
#center_content {padding-top: 30px; }
.speakers {padding-top: 15px; }
</style>
<![endif]-->
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 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>
In 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? Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! |
|||||||