|
CSS - Shifting Issue + Firefox Issue
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! Similar TutorialsWHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! 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>
Hi, Ive got a site im currently working on using html and css. After just putting the navigation bar in ive discovered it lookins perfect in IE and slightly off in firefox: http://www.lnicholson.co.uk It looks hows i want it to in IE but in fiefox i notice that there is a bigger gap above the navigation bar and I have no idea how to get rid of it. Its quite annoying as some of my friends use firefox! Any help would be much appreciated, if you need anymore info let me know. Thanks Lozza Hi I'm developing a new site and have only just started with CSS. The site uses an external style sheet. I have only developed one page so far which looks fine in IE 6/7 but (some) content appears to 'drop/change position' slightly in Firefox (note the bottom navigation and contact info on the page footer in particular). I needed to add an extra div tag for the hyperlink style - could this be the cause? Also the search button and the form text area seems to change position when viewed in Firefox? Not sure what is going on! Any help would be appreciated! Link he http://www.yarmside.co.uk/version2/index.html Thanks. Kay, So I've been trying to open a gaming league, but unfortunately my skills lie in PHP and C++. Not so much html and css. For some reason this site works pretty well in IE, but has what I call micro-tears in the firefox version, I'm really not sure whats wrong with it, can anyone help? http:// www . vl-league.com / index . html is the site. Again, IE displays fine but firefox the bottom getting_started div is all wierd. Code:
<div id="container">
<div id="inner">
<?php include('header.php'); ?>
<div id="index_login">
<p style="text-align: left"><b><font size="4">Login!
</font></b></p>
<p style="text-align: left"> </p>
<form method="POST" action="">
<p style="text-align: left">Email: </p>
<p style="text-align: left"><input type="text" name="email" size="20" id="index_textbox"></p>
<p style="text-align: left"> </p>
<p style="text-align: left">Password:</p>
<p style="text-align: left"><input type="password" name="password" size="20" id="index_textbox"><br>
</p>
<p style="text-align: left">
<input type="submit" value="Login" name="do_login" id="index_button"></p>
</form>
</div>
<div id="whos_new">
<div id="section_header">
Who's New
</div>
</div>
<div id="get_started">
<div id="get_started_box">
<b>Step One:</b><br/><br/>Sign up with your basic info to get your own personal page.<br/><a href="#"><b>Sign Up!</b></a></div>
<div id="get_started_box">
<b>Step Two:</b><br/><br/>Login and enter your information about yourself to allow people to find you and express yourself with the look of your profile.</div>
<div id="get_started_box">
<b>Step Three:</b><br/><br/>Search for your friends and family and add them as your friend to your friend circle.</div>
<div id="get_started_box_nb">
<b>Step Four:</b><br/><br/>Tell your friends about FriendTrend.com and invite them to join and be your friend.</div>
</div>
</div><font color="white">Copyright 2006 FriendTrend.com</font>
</div>
Here is my css: Code: * {
margin: 0 auto;
padding: 0;
}
body{
font-family: verdana;
font-size: 8pt;
}
#container{
font-family: verdana;
position:absolute;
width: 100%;
height: 100%;
z-index: 1;
text-align: center;
background-color: gray;
}
#inner{
position:relative;
width: 800px;
height: 100%;
border-style: solid;
border-width: 1px;
z-index: 2;
background-color: white;
}
#header{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 100%;
height: 30px;
padding: 5px;
background-color: orange;
z-index: 3;
}
a:link,a:active,a:visited{
text-decoration:none;
color:black;
}
a:hover{
font-weight:bold;
}
#header_link:link,#header_link:active,#header_link:visited{
text-decoration:none;
color:white;
}
#header_link:hover{
color: #ccccff;;
}
#index_login{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 200px;
height: 150px;
top: 25px;
left: -250px;
border-style: solid;
border-width: 1px;
z-index: 3;
background-color: #ccccff;
padding: 10px;
}
#whos_new{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 150px;
top: 25px;
left: -25px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:right;
}
#get_started{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 600px;
height: 75px;
top: 100px;
border-style: solid;
border-width: 1px;
z-index: 3;
}
#get_started_box{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 149px;
height: 100%;
z-index: 3;
float:left;
border-right: 1px, solid;
}
#get_started_box_nb{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 149px;
height: 100%;
z-index: 3;
float:left;
}
#section_header{
background-color: #ccccff;
width: 100%;
position:relative;
font-family:verdana;
font-size: 10pt;
text-align:left;
}
#index_login{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 200px;
height: 150px;
top: 25px;
left: 20px;
border-style: solid;
border-width: 1px;
z-index: 3;
background-color: #ccccff;
padding: 10px;
float:left;
}
#index_textbox{
border-width: 0;
font-family:verdana;
color:orange;
}
#index_button{
border-width: 0;
font-family:verdana;
color:black;
background-color: orange;
}
#user_box{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 350px;
height: 200px;
top: 25px;
left: -200px;
border-style: solid;
border-width: 1px;
z-index: 3;
}
#user_photo{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 150px;
height: 150px;
border-style: solid;
border-width: 1px;
z-index: 3;
left: 15px;
top: 10px;
float:left;
}
#user_friends{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 450px;
height: 200px;
border-style: solid;
border-width: 1px;
z-index: 3;
right: 20px;
top: 150px;
float:right;
}
#view_basic{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 200px;
top: 25px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:left;
left: 12px;
}
#view_contact{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 200px;
top:75px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:left;
left: 12px;
}
#view_custom{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 200px;
top: 25px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:right;
right: 12px;
}
#view_friends{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 450px;
height: 200px;
border-style: solid;
border-width: 1px;
z-index: 3;
top: 150px;
float:right;
right: 12px;
}
Would FF be able to interpret this background-image line? The bullets are not showing up on the page and all the references have been checked and verified the image exists and is in the proper directory. Code:
li.indent{
background-image: url('getdoc?webc=images/bullet_sm.gif');
background-repeat: no-repeat;
background-position: 0,0;
margin-left: 10;
padding-left: 10;
margin-bottom: 5;
}
Thanks Okay I have this strange CSS issue with Firefox. Sounds like a common problem, but oh it isn't. The issue goes a step further and it is a Firefox mac issue. The top nav works fine in Firefox PC, IE PC, and Safari Mac. But you load it in Firefox Mac and the top right list item drops down. No clue why. Anyone know what the issue is? Does Firefox on a mac render text at a different size and that pushes everything? I'm unable to send specific styles to firefox mac vs. firefox pc, unless I use a server-side script to detect the user agent. But that is not practical at all. If anyone has any feed back let me know. Oh the link to see this nav is: http://www.forsalebyowner.com Hello, this is my first post on this forum! I've noticed there's another firefox thread right above mine, I don't mean to spam the forum with firefox issues but I checked that one first and it didn't have the same problem as I'm having. I'm a novice to CSS, I've only been on it for around 2-3 months for college, and i've encountered a problem I can't find a solution to likely because there could be so many ways for it being wrong. If anyone can please help me with this problem, i'd appreciate it so much! I'm just starting to create a template for college, and for some reason I've just noticed it's not working in firefox. I use i.e to develop at school so I haven't noticed it until now, and I can't seem to find a solution. I've uploaded the template here so it can be seen: bonkenmoose.com/john It works fine in internet explorer, but seems to be not working correctly in Firefox. Any help will be great! Thanks. Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness. I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left. I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS. As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here. The code is below. Please let me know what I'm doing wrong! Code:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
<body>
<div id="container">
<div id="navbar">
<div class="navspacer">
<a href=""></a></div>
<div class="nav1">
<a href="plans.html"></a></div>
<div class="nav2">
<a href="phones.html"></a></div>
<div class="nav3">
<a href="broadband.html"></a></div>
<div class="nav4">
<a href="index.html"></a></div>
<div class="nav5">
<a href="services.html"></a></div>
<div class="nav6">
<a href="accessories.html"></a></div>
<div class="nav7">
<a href="locations.html"></a></div>
<div class="display">
<div class="presentation">
<div class="columnzone">
<div class="column1">
<div class="columncontent">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>
</div>
<div class="column2">
<div class="columncontent">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
</div>
<div class="column3">
<div class="columncontent">
<?php
$a = new Area('Column3');
$a->display($c);
?>
</div>
</div>
</div>
</div>
<div id="bottomnav">
<div class="bnav1">
<a href="contactus.html"></a></div>
<div class="bnav2">
<a href="feedback.html"></a></div>
<div class="bnav3">
<a href="employment.html"></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<?php $this->inc('elements/footer.php'); ?>
</div>
</body>
And the CSS: Code: /* CSS Document */
body {
font:12px Trebuchet MS, Tahoma, Arial;
color:#000000;
background:url(/images/bg.jpg) repeat;
}
#container {
margin:0 auto;
width:1050px;
bottom:0;
}
/* NavBar */
#navbar {
width: 928px;
height: 90px;
position:absolute;
padding-left:50px;
top:0;
}
#navbar li {
list-style:none;
display:inline;
}
.navspacer a {
display:inline;
float:left;
width: 20px;
height: 90px;
background:url(/images/nav00.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav1 a {
display:inline;
float:left;
width: 132px;
height: 90px;
background:url(/images/nav01.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav1 a:hover {
background:url(/images/nav08.png) no-repeat;
}
.nav2 a {
display:inline;
float:left;
width: 127px;
height: 90px;
background:url(/images/nav02.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav2 a:hover {
background:url(/images/nav09.png) no-repeat;
}
.nav3 a {
display:inline;
float:left;
width: 139px;
height: 90px;
background:url(/images/nav03.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav3 a:hover {
background:url(/images/nav10.png) no-repeat;
}
.nav4 a {
display:inline;
float:left;
width: 114px;
height: 90px;
background:url(/images/nav04.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav4 a:hover {
background:url(/images/nav04.png) no-repeat;
}
.nav5 a {
display:inline;
float:left;
width: 126px;
height: 90px;
background:url(/images/nav05.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav5 a:hover {
background:url(/images/nav12.png) no-repeat;
}
.nav6 a {
display:inline;
float:left;
width: 129px;
height: 90px;
background:url(/images/nav06.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav6 a:hover {
background:url(/images/nav13.png) no-repeat;
}
.nav7 a {
display:inline;
float:left;
width: 141px;
height: 90px;
background:url(/images/nav07.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav7 a:hover {
background:url(/images/nav14.png) no-repeat;
}
/* NavBar End */
/* Central Display Area */
.display {
display:block;
height:475px;
left: 74Px;
position: static ;
width:950px;
background:url(/images/display.png) top no-repeat;
}
/* Central Display Area */
/* Presentation Area */
.presentation {
display:block;
height:466px;
position: absolute;
left:71px;
width:908px;
top:421px;
background:url(/images/presentation01.png) top no-repeat;
}
.columnzone {
margin-top:-35px;
padding-top:52px;
position:relative;
z-index:0;
}
.columncontent {
padding: 18px 0px 0px 0px;
}
.column1 {
width:259px;
float:left;
padding: 0px 15px 10px 20px;
}
.column2 {
width:303px;
float:left;
padding: 0px 10px 10px 9px;
}
.column3 {
width:259px;
float:left;
padding: 0px 10px 10px 15px;
}
/* Presentation Area End */
/* Bottom Nav */
#bottomnav {
display:block;
width: 928px;
height: 90px;
position:absolute;
margin-top:887px;
margin-left:21px;
}
#bottomnav li {
list-style:none;
display:inline;
}
.bnav1 a {
display:inline;
float:left;
width: 326px;
height: 37px;
background:url(/images/presentation02.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav1 a:hover {
background:url(/images/presentation05.png) no-repeat;
}
.bnav2 a {
display:inline;
float:left;
width: 250px;
height: 37px;
background:url(/images/presentation03.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav2 a:hover {
background:url(/images/presentation06.png) no-repeat;
}
.bnav3 a {
display:inline;
float:left;
width: 332px;
height: 37px;
background:url(/images/presentation04.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav3 a:hover {
background:url(/images/presentation07.png) no-repeat;
}
@-moz-document url-prefix() {
#bottomnav {
display: inline-block;
position:absolute;
width: 928px;
height: 90px;
margin-left:0px;
padding:0 0 0 0;
}
/* Bottom Nav End */
.footer {
background:url(/images/footer.png) no-repeat;
height:60px;
text-align:center;
color:#fefaca;
padding-top:18px;
margin-top: -500px;
margin-bottom:20px;
position:relative;
z-index:2;
}
hey all, i'm having a really strange issue with firefox users on windows. basically, my site is simple. i've got navigation on the left, and a content table on the right. it's all done with CSS. firefox users on windows have been complaining that sometimes (not all the time) the content window has been loading half way. it's beendoing this on numerous PCs with firefox, and i can't figure it out. sometimes it loads the whole content box, sometimes it stops half way. it's fine all the time in IE on both platforms, and firefox on a mac. here is the code i'm using for the content boxes: #content_table { FONT-FAMILY: Verdana, Helvetica; width: 60%; margin: 0 auto; border: 1px solid #999; overflow: hidden; } #content_table h2 { FONT-FAMILY: Verdana, Helvetica; margin: 0; -moz-opacity: 1; font-size: 15px; text-align: left; padding: 2px 0 2px 15px; font-weight: bold; background: #000 url(../../../../images2/title.png) repeat-x; color: #fff; border: 1px solid #000 } #content_table p { font-size: 12px; FONT-FAMILY: Verdana, Helvetica; -moz-opacity: 1; padding: 5px; background: #333333; color: #FFF; margin: 1px } if you're on a PC, check it out: link thanks! I seem to have an issue with the float parameter in Firefox. If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me.. http://www.arestaenterprise.com/enf/ Any help is appreciated Thanks! I have a basic layout as follows: Code:
<div id="wrapper">
<div id="header">
<!--#include virtual="/siteadmin/includes/inc_header.asp" -->
</div>
<!-- Begin Left Column - Menu -->
<div id="leftcolumn">
<!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" -->
</div>
<!-- End Left Column - Menu -->
<!-- Begin Right Column - Content -->
<div id="rightcolumn" align="left">
<!--#include virtual="/siteadmin/includes/inc_menu_page.asp" -->
</div>
<!-- End Right Column - Content -->
<!-- Begin Footer -->
<div id="footer">
<!--#include virtual="/siteadmin/includes/inc_footer.asp" -->
</div>
<!-- End Footer -->
</div>
Which uses the following css Code:
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
}
#wrapper {
margin: 0px;
width: 100%;
padding: 0px;
}
#header {
color: #333;
width: 100%;
float: left;
border: 0px solid #ccc;
height: 100px;
background-image: url('/media/images/headerBackground.gif');
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
width: 195px;
float: left;
padding-left: 10px;
padding-right: 10px;
}
#rightcolumn {
float: left;
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
height: 100%;
display: inline;
padding-left: 10px;
padding-right: 20px;
}
#footer {
width: 100%;
height:27px;
clear: both;
color: #333;
border: 0px solid #ccc;
background-image: url('/media/images/footer_bg.jpg');
background-repeat:repeat-x;
}
Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css) The site I am working now has a discussion group. Sometimes someone will post a pic and the thread will break the 955px boundary of the wrapper. In Firefox, what happens is the thread will leave the wrapper. In IE, the thread makes the wrapper expand. In an ideal world I'd have all images resized or not even limit myself to a 955px width, but this won't work with this site... I'd like to know if it is possible to make the thread div leave the wrapper in tact at 955px like it does in Firefox. Thanks in advance :} Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. I've been working with this issue for the better part of the day, and I think whatever the issue is, is one I'm not seeing because I've been doing just that. So I'm hoping to get a little guidance from those of you who're far superior to me in the world of CSS. On this site ianrobinett.com/designwork/SAMPO/Sitev1/ I've been working on, in Mozilla, the fullwidth div I put below my other divs (in the main body content area), is appearing off to the right of the Twitter widget. In Chrome and IE, funny enough, it's right, and it's Mozilla having the fit. I honestly figure this is something small, and something I'm just missing because I've been looking at the code all day. |
|||||||