|
CSS - Pixel Perfect Layering
Hi all,
I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html and my css file is here http://www.studioflow.net/sfglobal.css Do I need to just abandon my quest for pixel perfect alignment? Thanks, alan Similar TutorialsCheck out the below test page... In FF, i get a left margin of 5px, and a right margin of 10px as expected, but in IE6 i get a left margin of 10px, and a right margin of 20px. Anyone know why? If I absolute position with left:10px, and right:10px on the relevant boxes they are positioned correctly in IE6, so why don't the margins work? (Can't use absolute positioning as i require flow layout in my real-life page) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#leftnav{
width: 20%;
float: left;
clear: left;
margin-left: 5px;
border: solid 1px #000000;
}
#main{
width:76%;
float: right;
clear: right;
margin-right: 10px;
border: solid 1px #000000;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div id="leftnav">
some text some text<br>
some text some text
</div>
<div id="main">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
</body>
</html>
First things first, I am a noob. I am attempting to make a background with a 200 x 200 repeating image with a 1 x 1000 white to transparent gradient overlay. I can get the 200x200 image to show up by itself but when I try to add the background_grad.png the background shows up as the background color. All help is greatly appreciated. Here is the source: 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 id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
Pet ID Express - Tags for Cats and Dogs - Metallic, Glitter Enamel, Stainless, Brass, and Bling ! Free Shipping !
</title><meta name="keywords" content="Pet ID Express, Pet I.D Express, Metallic, Swarovski Crystal, Glitter Enamel, Stainless Steel Pet tags, pet ID tags, dog ID tags, dog ID tag, cat ID tags, cat ID tag, dog tags, cat tags, pet identification tags, pet id, discount pet tag, discount ID tags, discount pet tags, bling pet tags, cool pet tags, brass pet tags, stainless steel pet tags, designer pet tags, metal pet tags, bling dog tags, cute dog tags, stainless steel dog tags" /></title>
<style type="text/css">
body,td,th {
color: #000;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 24px;
}
body {
background-color: #81D3FC;
background-image: url(background_grad.png),url(background.png);
background-position: top left;
background-repeat: repeat-x,repeat;}
a img {
}
a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #000;
}
a:active {
color: #000;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('menubarhome.jpg')">
<p><img src="Pet ID Logo.png" width="284" height="124" /></p>
</table>
<tr>
<table width="600" border="0" align="center">
<tr>
<th scope="col"><table width="200" border="0" align="center">
<tr>
<td><div align="center"><img src="Blue Menu Bar/menu bar blue v2 copy.jpg" width="1220" height="100" border="0" align="middle" usemap="#Map2" /></div></td>
</tr>
</table></th>
</tr>
</table>
<tr>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="metallic.html"><img src="metallic.jpg" alt="Metallic Tags" width="290" height="166" border="2" /></a> </p>
<p><a href="swarovskicrystal.html"> <img src="swarovskicrystal.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<p><a href="glitterenamel.html"><img src="glitterenamel.jpg" alt="Glitter Enamel Tags" width="290" height="166" border="2" /></a></p>
<p><a href="stainlesssteel.html"><img src="stainlesssteel.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<p><a href="brass.html"><img src="brass.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<tr>
<tr>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote> </blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<center>
</center>
<map name="Map" id="Map">
<area shape="circle" coords="61,57,45" href="index.html" alt="Home" />
<area shape="circle" coords="177,60,39" href="aboutus.html" alt="About Us" />
<area shape="rect" coords="255,29,347,84" href="contactus.html" alt="Contact Us" />
<area shape="circle" coords="426,62,45" href="faq.html" alt="FAQ" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="362,25,459,73" href="index.html" />
<area shape="rect" coords="459,26,558,73" href="shop.html" />
<area shape="rect" coords="557,26,656,73" href="faq.html" />
<area shape="rect" coords="656,26,758,73" href="aboutus.html" />
<area shape="rect" coords="758,26,867,72" href="contactus.html" />
</map>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6007803;
var sc_invisible=1;
var sc_security="a2542b38";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript></noscript>
<!-- End of StatCounter Code -->
</body>
</html>
Thanks in Advance, Matt I have a CSS based page w/ a drop down menu (drop down incorporates a little javascript b/c page is being designed for IE6) but when the drop down is activated it appears behind the page content. I've tried giving the drop down ul a higher z-index then the content but it doesn't work. Any ideas? Here is the HTML: Code:
<ul id="nav">
<li><a href="../index.html">OpEx Home</a></li>
<li><a href="../teams.html" class="team">Teams</a>
<ul>
<li><a href="#">Change Management</a></li>
<li><a href="#">Configuration Management</a></li>
<li><a href="#">Continuous Service Improvement</a></li>
<li><a href="#">Internal Controls Evaluation</a></li>
<li><a href="#">Measurement and Analysis</a></li>
<li><a href="#">Process and Performance Management</a></li>
<li><a href="#">Quality Evaluations</a></li>
<li><a href="#">Quality Review Boards</a></li>
<li><a href="#">Release Management</a></li>
<li><a href="#">Service Level Management</a></li>
<li><a href="#">Solutions Delivery Methodology</a></li>
<li><a href="#">Source Control Management</a></li>
</ul>
</li>
<li><a href="../reports.html">Reports</a></li>
<li><a href="../comm.html">Communications</a></li>
<li class="last"><a href="../contact.html">Contact</a></li>
</ul>
and here is the relevant CSS: Code:
#header {
width:800px;
height:75px;
position:relative;;
margin:0 auto 10px auto;
padding:0;
}
#wrapper {
margin:0 auto;
text-align:center;
padding: 10px;
width: 780px;
position: relative;
z-index:100;
}
#header ul {
margin:0px;
padding:0px;
list-style:none;
float:left;
position:absolute;
bottom:8px;
left:110px;
width: 620px;
}
#header li {
padding:0 .4em;
float:left;
border-right:solid 2px #FFF;
}
#header li a:link, #header li a:visited {
display:block;
padding:0 1em;
color:#FFF;
line-height:1.5em;
}
#header li a:hover, #header li a:active {
background:#CCC;
color:#333;
}
#header li.last {
border:none;
}
#header li a.current:link, #header li a.current:visited, #header li a.current:hover {
color:#333;
cursor:default;
background:#82D2E5;
}
#header a.team, #header a.team:visited {
position:relative;
padding-right:0 1.5em 0 1em;
line-height:1.5em;
}
#header a.team:hover, #header a.team:active {
color:#333;
cursor:default;
z-index:1;
}
#header ul ul {
margin:0px;
padding-top:10px;
list-style:none;
position:absolute;
left: 135px;
top: 20px;
z-index:500;
display: none;
}
#header ul ul li {
margin:0px;
padding:0px;
border: none;
}
#header ul ul li a:link, #header ul ul li a:visited {
display:block;
width:250px;
padding:0.4em .5em;
line-height:1.5em;
background:#CCC;
color:#000;
}
#header ul ul li a:hover,#header ul ul li a:active {
background:#82D2E5;
color:#000;
}
#header li:hover ul, #header li.over ul {
display:block;
}
and lastly here is the little javascript function to let IE use hover pseudo-class w/ list items: Code:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
I know this is a rather long winded post. Any help would be greatly appreciated. Hopefully I will be able to post a link to an example later tonight. Thanks in advance for any help, Brian I have a UL with the following rules: Code:
#artSort_options {
z-index: 50;
background-color: #000000;
display: none;
position: absolute;
list-style: none;
width: 138px;
padding: 0px;
}
I use javascript to change the display of #artSort_options to block; The UL is in a DIV floating right. The menu displays perfectly over the parentNodes, but hides behind all elements after - except in IE 7. Any ideas? I am using two CSS/Javascript peices of software together and I am running into some problems. Its best to take a look at the site first: http://hosted.forma3.com/olympia/ne...hp?a=Manila_Bay When you mouse over one of the links in the block text to the left, the pop-up description displays under the block text. What I realy want to happen is have it display above the text (like this: http://hosted.forma3.com/olympia/ne...hp?a=Manila_Bay ). When I add the scroller is causes this error and I'm not sure how to sort out the layers, if thats even possible without recoding large parts of the two JS programs. im kind of a noob at css (altho ive been using it for a while now for simple things (margin, padding, color, etc....)) and im wondering if i can "layer" an image in an area. like what i mean is i want to display content behind that image but i want to layer it over everything else in the <td></td> tags. and i want it to appear only on the bottom right side. i know how to make it appear only once on the right side if it was a background but with this i have no clue, any help is much appreciated! I have a picture of a city.. then i have transparent pictures of stores and stuff i want to layer ontop of the city.. but i was wondering if someone could go about showing me how to layer them? i found help on layering pictures, but they wont show through to the city.. =/ I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table. I'm new to CSS and any help would be greatly appreciated. Here's the code I'm using: <style type="text/css"> <!-- body { background-image: url(images/polkasky.jpg); background-attachment: fixed; } .greentable { background-image: url(images/cloud-back.png); vertical-align: text-top; } .cloudfoot { background-image: url(images/cloudbottom.png); background-attachment: fixed; display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; } #Layer1 { width:100%; height:158px; background-image: urlimages/grass.gif); background-repeat: repeat-x; background-position: bottom center; background-attachment: scroll; } --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/cloud-head-tongue.png')"> <table width="850" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td> </tr> </table> <div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" /> </map> </div> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellpadding="0" cellspacing="10"> <tr> <td> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td> <td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td> </tr> </table> </td> </tr> </table> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td width="636" valign="top"> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script> </div> <div align="left"> <script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td> <td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td> </tr> </table> </td> </tr> </table> <img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" /> <div id="Layer1"></div> </body> </html> Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. I'm having a bit of trouble trying to figure out the problem he http://www.lovemeforme.org/alecia as you can see, in IE the main content is over about 3px, but in firefox it's perfect.. i'm a perfectionist and it's really bothering me. Thanks in advance! Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! I think all I need is a new set of eyes. I have an XHTML-Strict-All-Div-Perfect layout for a new site I am working on. I have all of the heights and widths and alignments perfect. Everything was supurb until I added content that extends greater than 100% of the viewport. Typical story, I know. The thing is, I have made hundreds of web sites and came across and fixed that problem. I've used min-height, I've made sure to include all containers like html and body.. I am pretty sure I've done it all. So what's up? Please take a look at the site and tell me what you think. Realms Of Role Playing Hi, I'm looking for code that will display a ul with nested uls as a dropdown. Furthermore, the links and dropdowns should center in the width of the nav. as I add more top level links, the set should expand both left and right. Right now, I can either make the nav align left, or justify the top level ul so the links fill the nav. I can't seem to make the leap to centered links though. You can see what I'm talking about he lipsitzponterio9[dot]com Notice how the home link is left aligned, but contact us has a little space to the right. Can anyone help? Thanks! Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE. If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place... help? My website open fine in pretty much everything except IE (Ie is terrible). I tried to use the "if ie" stylesheet link but its not working. Help please. Test server is http://ivorygaming.clanservers.com/debuhrs HTML Code: <html> <head> <title>deBuhrs Seed & Feed</title> <!--[if IE 7]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> </head> <body bgcolor="#070707"> <div id="navbar"><ul id="navbar"> <li><a href="index.html"><span id="green">H</span><span id="white">ome</span></a></li> <li><a href="about.html"><span id="green">A</span><span id="white">bout</span></a></li> <li><a href="staff.html"><span id="green">S</span><span id="white">taff</span></a></li> <li><a href="products.html"><span id="green">P</span><span id="white">roducts</span></a></li> <li><a href="contact.html"><span id="green">C</span><span id="white">ontact</span></a></li> </ul> <div id="logo"></div> <div id="front"></div> <div id="side"></div> <h2>New Website</h2> <hr color="#b9bab9" width="60%" align="left" height="50%"> <p class="postinfo">posted by Bernie deBuhr at 10.39 p.m. Sunday, July 4th, 2009</p> <p class="content">    deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.</p> <div id="bottom"></div> <div id="container"></div> </body> </html> ie.css Code: @charset "utf-8"; /* CSS Document */ body { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; text-align: center; } #container { width: 1024px; height: 15px; margin: 0 auto 0 auto; text-align: left; } #logo { height: 112px; width: 702px; padding-bottom: 0px; padding-top: 0px; margin-top: 1000px; margin-left: -200px; background: #FFF url('images/logo.png') ; } #front { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/front.png') ; } #side { height: 444px; width: 312px; padding-bottom: 0px; padding-top: 0px; margin-top: -269px; margin-left: 700px; background: #FFF url('images/side.png') ; } #block { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -177px; margin-left: 10px; background: #FFF url('images/block.png') ; } #block1 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 124px; background: #FFF url('images/block.png') ; } #block2 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 238px; background: #FFF url('images/block.png') ; } #block3 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 352px; background: #FFF url('images/block.png') ; } #block4 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 466px; background: #FFF url('images/block.png') ; } #navbar ul li { padding-left: -10px; position: relative; display: inline; padding-top: 383px; color: #FFFfff; float: left; font-size: 10pt; font-family: arial; font-style: italic; margin-left: 15px; } #green { color: #9bf006; font-size: 11pt; font-family: arial; font-style: italic; } #white { color: #c8cbc3; font-size: 9pt; font-family: arial; font-style: italic; } a { text-decoration:none; color:#930; border-bottom: 1px solid #5b8c04 } h1,h2,h3,h4,h5 { margin:0; text-align:left; color:#9bf006; font: arial; margin-top: -100px; margin-left: 15px; } p.postinfo { margin:0; text-align:left; color:#a0a19e; font: arial; margin-top: 0px; margin-left: 35px; font-size: 8pt; } p.content { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 15px; margin-left: 40px; font-size: 10pt; width: 600px; height: 200px; } p.phone { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: -180px; margin-left: 40px; font-size: 10pt; } p.email { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 3px; margin-left: 40px; font-size: 10pt; } #bottom { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/bottom.png') ; }
I've made this layout: http://superq.dk/skjoldborg It works fine in Firefox, but IE somehow has moved the content one pixel to the left. This shows to the right at the menu, where there is one pixel whitespace, and at the end of the text, to the right, the white content box moves one pixel out in the shadows. Can someone give me an explanation on this? I've checked it all over, sizes on divs and so one, and I've come to the conclusion that IE has moved the content one pixel to the left, but why? OK, so I know what the problem is, but I can't figure out how to fix it. This is what I'm doing. I've got a floated div (left) and another div sitting to it's right. I'm using Nifty Corners to get that nice rounded finish (without using four images). But, here's the problem, the JavaScript is designed (I guess) to only cap the size of the div defined in the css file, so when IE 6.0 generously adds an extra 3px, what am I supposed to do? Ask Google. So, I found the Holly Hack at Position Is Everything but haven't been able to implement it correctly. I've been tinkering with this new layout for about a fortnight, but with no luck. I seek enlightenment, if there is anyone with the wisdom . . . ? Files included a another 1 = html nifty = JScript all = css This page design works in: Mac - Safari 2.0.1, Opera 8.5, Firefox 1.0.7 Win - Firefox 1.5, Opera 8.51 The JavaScript doesn't work at all in Internet Explorer 5.2 for Mac, but degrades the way I think it should. And back to Windows, IE 6.0, the "3px jog" is the only problem. All help appreciated. Hello, I am trying to create a 1 pixel width <tr width="1" style="width: 1px;"><td rowspan="8" width="1" style="width: 1px;"> </td></tr> and a 1 pixel height <tr height="1" style="height: 1px;"><td colspan="8" height="1" style="height: 1px;"> </td></tr> But the following methods are not working, instead it is making them bigger than expected. How can I accomplish this?? Is there some sort of clear method in CSS that will clear the height and width and make sure to set it to 1 pixel?? Thanks Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing. http://mp3realm.org/new/index.php (First one) http://mp3realm.org/new/search.php (search page) http://mp3realm.org/new/default.css (CSS) Thanks. |
|||||||