|
CSS - Div Shifting Right In Firefox And Safari
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>
Similar TutorialsSo 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, 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! I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them. EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing When I do this, it is centered on Firefox: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#encapsule {
margin-left: auto;
margin-right: auto;
}
#centered
{
text-align: center;
}
#centered table
{
margin: 0 auto;
text-align: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table> </div>
When I do the following, it centers it on Safari: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
}
#encase {
position: relative;
margin-left: auto;
margin-right: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks! EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing Greetings Well, what can I say. I'm a PC. I've been building these websites and have been validating them and all, and look great in IE 6 & 7. But when I finally get around to downloading the latest version (3.2) of Safari and Firefox, for some reason my background-color doesn't work right. Here's the site: http://www.freshrod.com/maryville/maryvillemo.html Have tried googling it, but no real answers yet. Anyone experience this before? Still learning CSS and trying to position simple text inside a layer on my clients site: The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox. What am I doing wrong here? Go to : http://www.fractiousmusic.com At the bottom left corner I am trying to position the Steady Systems text. IE - looks fine Firefox - slightly positioned to the right Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong. Please view source and let me know if its a code error. Thanks! Daniel hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css Code:
<!--[if IE]>QU
<link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"
type="text/css">
<![endif]-->
Here is the menu system: Code: menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
'<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
'<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
'<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
'<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
'<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
'<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
'</li></ul></li></ul></div>';
(It rests inside of a javascript function) and here is the CSS: Code:
/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0; font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;}
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Any help with this is greatly appreciated. Thanks. I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox. I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow. Is there any clever fix for this? Cheers, whiteatom Hi All, I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b". I can't post links so the website is www (dot) authenticimpressions (dot) com I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out. What other information should I post or provide to get some help? Thanks in advance, I really appreciate it. http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. So, here's what I've got: http://www.anthonycarboni.com The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari. Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS: Code: body {
color: #FFFFFF;
background-color: #000000;
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-transform: none;
min-width: 800px;
}
.main{
background-color: #202020;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header{
height: 50px;
background-image: url('images/header.jpg');
background-repeat: repeat;
}
p.headline {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.8em;
vertical-align: middle;
}
And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated. Thanks! Hello all, I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster. Thanks in advance. Hi guys. Straight to pictures: Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer. Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.) Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong. I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically: Code: .corner_topleft{
position: absolute;
top: 0px;
left: 0px;
...
}
and so on in that respect for the 4 corners and: Code: .border_left{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-repeat: x;
...
}
etc. for the borders. I have specified all the heights of the images. Now the problems in the pictures a #1: the left and right borders don't repeat down, #2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.) If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated. Regards, -Luke (: Hi- I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting): 01f086d.netsolhost dot com/yk/services dot html 01f086d.netsolhost dot com/yk/experience dot html 01f086d.netsolhost dot com/yk/principals dot html It seems to be the page length that is causing this, because on shorter length pages, there is no chunk. I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C). Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it! Hi people I have been developing a new cms system www.spindogs.co.uk The pages work using an autostretch facility but for some reason Firefox,Safari and IE5 Mac wont stretch. The bacground stays a set length? I initially thought it was the DOCTYPE so messed around with that but it doesnt seem to be that either? Can anyone help me please!!!! I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: 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=UTF-8">
<title>Quest Sports Medicine</title>
<link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.center-wrap p {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
font-size: 30px;
line-height: 35px;
padding: 0px;
float: left;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 66px;
font-weight: bold;
color: #942610;
text-align: center;
line-height: 64px;
margin-top: 83px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap img {
margin-top: 47px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 248px;
}
}
-->
</style>
</head>
<body>
<div class="all-wrap">
<div class="center-wrap">
<h2>NEW WEBSITE<br />
COMING SOON</br></h2>
<p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br />
or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p>
<img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" />
</img></div>
</div>
</body>
</html>
Any thoughts on what I need to change? Thank you. You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code:
<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li>
<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>
<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>
And the CSS Alignment: Code:
#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}
Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. |
|||||||