|
CSS - Ie Working Correctly???
I can hardly believe my eyes. Maybe I'm doing something wrong...
I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... Similar TutorialsI uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/. I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time?? Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css Please help! Hello everyone, Thanks in advance for any help you can offer. I have a single page for a site I'm creating located he simplethoughts.com/test/index.html The css file for the page is located he simplethoughts.com/test/css/screen.css The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why. Thanks again for any help...it's extremely appreciated! -Neil Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks. The site Code:
<div id="searchbox">
<h2 id="searchbox_header">Browse Bus Rates and Amenities</h2>
<p style="padding-left: 5px; ">Search by Bus Type:<br />
<select name="bustype">
<option selected value="">All Bus Types</option>
<option value="1" >Deluxe Motor Coach</option>
<option value="7" >Double Decker</option>
<option value="4" >Entertainer</option>
<option value="5" >Executive</option>
<option value="9" >Limo Bus</option>
<option value="2" >Minibus</option>
<option value="3" >School Bus</option>
<option value="0" >Tour Operator</option>
<option value="6" >Trolley</option>
<option value="8" >Van</option>
</select></p>
<p style="padding-left: 5px; ">Departure State / Province:<br />
<select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option>
</select></p>
<p style="padding-left: 5px; ">Departure City / Metro Area:<br />
<select name="city">
<option value="">Entire State</option>
</select></p>
<div id="searchboxrightcol">
<p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p>
<p>Browse local rates & inventory. Locate specific bus types</p>
<p><a href="#">Search</a></p>
</div>
<div id="searchbox_footer">
<p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p>
</div>
</div>
CSS: #searchbox { width: 400px; margin: 0; padding: 0; border: 1px solid #003366; background: #CCCCFF; } #searchboxrightcol { padding: 0; margin: 0; margin-left: 170px; padding-left: 5px; } #searchboxleftcol { width: 160px; float: left; padding: 0; vertical-align: top; border-right: 1px solid black; } #searchbox p { padding-left: 5px; padding-right: 5px; width: auto; height: auto; } #searchbox_header { text-align: center; color: white; background: #003366; padding: 0px; margin: 0px; width: auto; } #searchbox_footer { width: 400px; text-align: center; color: black; padding: 0px; margin: 0px; } #searchbox a, #searchbox a:visited { background: #336699; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; color: white; font-weight: bold; text-decoration: none; } #searchbox a:hover { background: #FC7400; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; text-decoration: none; font-weight: bold; } I am using a transparent png file for a background, obviously this will not work in IE so I am using the AlphaImageLoader hack. Unfortunately I am not sure why but the results are not as expected. Here is my CSS: PHP Code: .wrap[class] { margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.png); text-align: left; } * html .wrap { height:100%; padding-bottom: -20px; margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/content_bg.png'); text-align: left; } The first attachment is IE and the second is Firefox (the correct one). I can't seem to find out how to solve this. Some reason, the body/html/whatever the hell IE uses as its root, doesn't auto-expand past 100%, meaning vertical scrolling can't occur. What could be going wrong here? Attached is html and css, the relevant css is at top, and is readable, the unreadable css isn't relevant Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing. I have two different rollover effects on my page but only one part is working. The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help here is my site: chrisziebarth dot com/test My css file is located in /style.css Hi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. Surprise, surprise. I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected. I'm thinking it has something to do with the float but can't seem to figure it out. Any ideas? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr {
background-color: #ccc;
}
.tab {
padding: 0px 5px;
background-color: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
float: left;
}
.tab.active {
background-color: #fff;
color: #000;
margin: 0px 3px 0px 3px;
}
</style>
</head>
<body>
<div class="hdr">
<div class="tab active">tab 1</div>
<div class="tab">tab 2</div>
<br style="clear: both" />
</div>
</body>
</html>
hello all, my site is at waxmuseumplus dot ie css file is on the top level called layout.css I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again. there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page. I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though? The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors. Please help I'm tearing my hair out and the site is already live! Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up. Thanks Hello Gang! First off, thank you for taking your time to help a noob. Here is my problem: With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section). Can anyone spot why the pages render 2 different ways? LINK 1 LINK 2 Thank you for your time. I'm having some trouble around the bottom of one of my pages, where the CSS is not placing images correctly the first time the page loads. Frequently the footer is not attached to the bottom as it should be, but floating some varying number of pixels off the bottom. If I hit 'refresh' everything snaps into place as it should, but for some reason the first time it isn't working right. Here's the page I'm referring to: http://www.auroratheatre.org/show.php?prod_id=23&ref=seas (you can change that prod_id number to see the page with different queries) The photos are all pulled from a MySQL query, and the code to display them goes something like this: PHP Code: <html> <body> <div id="wrapper"> <div id="content"> <div id="col"> .... </div> <div id="main"> ... <h1>Cast</h1> <div id="cast"> <ul> <?php do { ?> <li><img src="images/headshots/<?=$row_bios['headshot']?>" /></li> <?php } while ($row_bios = mysql_fetch_assoc($bios)); ?> </ul> </div> <div class="clear"></div> <ul style="padding-top: 10px"> <li><a href="show_bios.php?prod_id=<?=$prod_id?>">read all the bios here</a></li> </ul> <div class="clear"></div> </div> <div id="photocol"> <img src="images/rightpics/<?=$rightpic?>" width="217" height="470" /> </div> </div> <div class="clear"></div> <div id="footer">...</div> </div> </body> </html> and the relevant CSS is he Code: html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
text-align: center;
}
html>body, html>body #wrapper {
height: auto;
}
#content {
width: 774px;
margin: 0px auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 403px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
width: 100%;
background-color:#000;
position: absolute;
bottom: -2px;
left: 0px;
text-align: center;
}
.clear {
clear: both;
}
#cast ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#cast li {
display: block;
width: 100px;
float: left;
text-align: center;
line-height: 70%;
}
This happens in both IE and FF - anyone have any idea what's going on, and how I could get it to load correctly the first time? Thanks, Daniel <div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div> When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!! I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong. I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari. Here is the link: http://gregsgoods.com/seestore.php In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it. Here is the CSS code: Code: html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {
color: #005B9C;
}
a:hover {
color: #0B2444
}
img {
border: 0;
}
body {
background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
color: #ccc;
font: normal 62.5% Tahoma,sans-serif;
}
p,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
h2 {
font: normal 1.3em Tahoma,sans-serif;
margin-bottom: 1px;
color: #005B9C;
margin: 0;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
.container {
position: absolute;
left:50px;
top:188px;
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 8px 8px;
width: 780px;
}
.top {
padding: 8px 8px 0;
}
.header {
position: absolute;
left:50px;
top:10px;
background-color: #fff;
font-size: 1.2em;
height: 173px;
margin: 0 auto;
padding: 8px 8px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #000033;
color: #fff;
color: #FFF;
height: 163px;
}
.header .left {
background: transparent url(/img/Top.jpg) top left repeat-x;
border: 1px solid #7795BD;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 163px;
width: 777px;
text-align: left;
}
.header .right div {
padding-left: 16px;
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
.navigation {
background: #D9E1E5 url(/img/nav.jpg);
border: 1px solid #7795BD;
height: 23px;
}
.navigation a {
background: transparent url(/img/nav.jpg) left top repeat-x;
border-right: 1px solid #7795BD;
color: #fff;
display: block;
float: left;
font-size: 12px;
font-family: Arial;
font-weight: bold;
line-height: 23px;
text-decoration: none;
padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom;
color: #f1f1f1;
}
.main {
border-top: 8px solid #FFF;
background: url(/img/bgmain.jpg) repeat-y;
}
.sidenav {
float: left;
margin: 5px;
width: 195px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
font-weight: bold;
line-height: 30px;
margin: 5;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}
/* content */
.content {
float: right;
margin: 5px;
padding: 0 16px;
width: 536px;
}
.content {
color: #666;
font-size: 1.0em;
margin-bottom: 6px;
}
.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}
.footer {
background: url(/img/bluefooter.jpg) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet. When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link. It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?). Heres a link to show you: http://skyyfinancial.com/demo/menutest2.php I put it all together and my list looks like this: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<ul id="nav">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav2">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
</ul>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav3">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
</table>
As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well. Other questions I had: Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive ) Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this? css: Code:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#636363;
font-weight:bold;
}
#menu a {
display: block;
width: 275px;
}
#menu li {
float: left;
width: 275px;
}
#menu li ul {
background-color:#FFFFFF;
position: absolute;
width: 200px;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
Javascript Code:
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Thanks for the help I've been working will many css hacks. I just can't seem to get anything to work with the "first child" posting the full css doc. Hopefully someone can help me. PHP Code: .gridContainer { padding:20px; /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorstr='#003300', endColorstr='#006600'); /* background-color: #006600;*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#003300), to(#007700)); background-image: -webkit-linear-gradient(top, #003300, #007700); background-image: -moz-linear-gradient(top, #003300, #007700); background-image: -ms-linear-gradient(top, #003300 0%, #007700 100%); background-image: -o-linear-gradient(top, #003300, #007700); background-image: linear-gradient(top, #003300, #007700); /* Grid Shadow */ -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; } /* Font Family, Size and Color */ .gridContainer, .grid, .gridHeaderRow, .gridContainer a, .gridContainer input { font-family:arial; font-size:10px; font-weight:bold; color:#fff; } .grid { border-spacing:0px; border-collapse:collapse; /* if you want cell separation border-spacing:1px; border-collapse:separate; */ background:#005501; } /*********************************************************************************/ /*********************************************************************************/ /***************************** END COLORS *****************************/ /*********************************************************************************/ /*********************************************************************************/ /* if you want to turn off animations for speed reasons turns these off */ .gridContainer tr, .gridContainer td, .gridContainer th, .gridContext div { /* -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; */ } /* padding of the cells */ .grid td, .gridHeaderRow th { padding:0px; border-left:1px solid #636470; padding-left:6px; } .grid td { border-left-color:transparent; } .grid td:first-child, .gridHeaderRow th:first-child { padding-left:12px; } .grid td { padding-top:5px; padding-bottom:5px; } /* ODD ROWS */ .grid tr:nth-child(2n) { } /* EVEN ROWS */ .grid tr:nth-child(2n+1) { } /* this can't inherit the color because its fixed to the bottom of the page */ .gridPager.fixed { background:#222; } /* Row Highlight */ .gridWrapper tr:hover, .gridContainer th:hover, .gridWrapper tr:hover input, .gridWrapper tr:hover a{ color:#ffe; background-color: #005500; } /* Current Cell Highlight */ .grid td:hover { background-color: #008800; } /* Cell Borders */ .grid td { } .gridHeaderRow { border-collapse:collapse; } /* column hilte */ .grid td.hilite { background-color:#2A8ADD; color:#000; } /* stuck row */ .stuckRow td{ padding:8px; background:#003300; color:#fff; } /* right click menu main box */ .gridContext { background-color:white; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:3px 3px 15px #000; -webkit-box-shadow:3px 3px 15px #000; box-shadow:3px 3px 15px #000; } /* right click menu each item */ .gridContext div { color:black; font-size:12px; padding:6px 15px; } /* right click menu hover */ .gridContext div:hover { background-color:#4071ee; color:white; } /* editable cell */ .editableInput[type="text"] { border-width:0px; /*border-bottom:1px dashed #ccc;*/ } textarea.editableInput { } /* title bar */ .gridTitle { padding:10px; font-size:14px; } /* structure for entire grid */ .gridContainer { margin-bottom:10px; overflow:hidden; position:relative; border-collapse:collapse; } /* minimum shown before scroll bar apppears */ .gridWrapper { max-height:500px; overflow-x:hidden; } .gridHeaderRow tr:first-child { position: relative; background-image: -ms-linear-gradient(top, #006600, #002200); background: none; background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); background-image: -webkit-linear-gradient(top, #006600, #002200); background-image: -moz-linear-gradient(top, #006600, #002200); background-image: -o-linear-gradient(top, #006600, #002200); background-image: linear-gradient(top, #006600, #002200); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=0, startColorstr='#006600', endColorstr='#002200'); -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorStr=#006600,EndColorStr=#002200)"; } /* the header row cells */ .gridHeaderRow th { width:150px; cursor:pointer; padding-top:12px; padding-bottom:12px; } .gridHeaderRow th:first-child { border-left:0px; } .gridHeaderRow th:last-child { border-right:0px; } /* expand the inner components to meet the size of the container */ .grid, .gridHeaderRow { width: 100%; } /* all input fields */ .gridContainer input, textarea { background-color:rgba(255,255,215,.8); background-color: #CCDCAC; border:1px solid rgba(255,255,255,.2); outline:0px; height:2em; margin-top:-2px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow: inset 0px 2px 5px #111111; -moz-box-shadow: inset 0px 2px 5px #111111; border:0px; color: #000; } /* no border left on first cell */ .grid td:first-child { border-left:0px; } /* no border right on last cell */ .grid td:last-child { border-right:0px; } /* select drop down boxes */ .grid td select { width:95%; border: 1px solid rgba(255,255,255,.1); outline:0px; } /* the pager */ .gridPager { width:auto; height:25px; overflow:hidden; padding:10px 0px 10px 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; background-color: rgba(0,0,0,.2); background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,.2))); background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.1)); background-image: -moz-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: -ms-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: -o-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: linear-gradient(top, transparent, rgba(0,0,0,.2)); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003300', endColorstr='#006600'); } /* when the pager is fixed */ .gridPager.fixed { position:fixed; bottom:0; z-index:999; width:100%; } /* the last button in the pager when its fixed */ .gridPager.fixed > div:last-child { position: relative; left:-20px; } /* every div inside the pager */ .gridPager > div { margin-right:16px; float:left; } /* the text string inside the pager */ .gridTotal { padding:5px; } /* button styles */ .gridButton { padding:5px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; text-align:center; font-size:11px; background-color: #006600; background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); background-image: -webkit-linear-gradient(top, #006600, #002200); background-image: -moz-linear-gradient(top, #006600, #002200); background-image: -ms-linear-gradient(top, #006600 0%, #002200 100%); background-image: -o-linear-gradient(top, #006600, #002200); background-image: linear-gradient(top, #006600, #002200); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002200', endColorstr='#006600'); -webkit-box-shadow:1px 1px 5px #222; box-shadow:1px 1px 5px #222; } .gridButton:active { -webkit-box-shadow:-1px -1px 4px black; -moz-box-shadow:-1px -1px 4px black; } /* buttons in the title bar */ .gridTitle .gridButton { margin-top:-3px; margin-right:6px; float:right; } /* save button in the pager */ .gridPager .gridSave { float:right !important; display:none; } /* refresh button is tinier */ .gridRefresh { font-size:10px; } /* the div inside of each th that will chagne size */ .colResizer { background-color:transparent; position:relative; height:inherit; } /* the handle on each th that will grab to resize */ .colHandle { height:100%; width:20px; background-color:transparent; position:absolute; right:0px; top:0px; } /* the bottom right corner div that allows you to resize */ .gridHandle { width:10px; height:10px; cursor:se-resize; position:absolute; bottom:0px; right:0px; background-color:rgba(0,0,0,.5); } /* the right click menu */ .gridContext { position:fixed; width:200px; padding:2px; z-index:99999; } /* each option in the right click menu */ .gridContext div { cursor:pointer; } /* the close button in the right click menu */ .closeContext { margin:0px !important; padding:0px !important; position:absolute; top:3px; right:3px; z-index:98; font-size:11px !important; } /* each input box inside the table inherits its parent styles */ .editableInput { width:95%; background:transparent; color:inherit; font-weight:inherit; font-size:inherit; font-family:inherit; margin:0px; } /* clickable nRows */ .nRows { cursor:pointer; } .grid a { text-decoration:underline; } http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The borders are not aligning correctly. I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable. This is my html: Code: <div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div> <div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0" /></div> This is my css: Code: body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr {position:static; width:auto; min-width:0px; min-height:100%;
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}
any help would be greatly appreciated. Thanks! |
|||||||