|
CSS - Ie Weird Hight (or Something Else I Can't Figure Out) Problem
Hello,
First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box Similar TutorialsOk i made a design for a website in photoshop .. sliced it up into divs put it in dream weaver and i edited to css for the divs there... I'm having a problem with all the columns with background images to stretch to the end of the page dynamically according to the hight of the highest column.. For example if i add more content to the content section of the site i have to go in and change the hight of every repeatable background image that extends to the bottom of the page.... as you may know this sucks and i really want to figure out how to get the site the way it should be so its easily editable. .. I know quite a bit of the problem is the fixed positioning that's being used but the website is not a perfectly square site so some exception need to be made.. i tried to make a website that was way above my lvl to make but i made it.. its just has some bugs i need to figure out.. To get the problem to occur all one has to do is make the text bigger using the browser and watch the background image not extend to the end of the site.. which is all i need to happen ... so if i add or subtract content the site auto adjusts to the size.. really need some help on this.. thanks.. I used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b> Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html>
So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 25px;
padding-left: 25px;
font-family: Verdana,Arial,helvetica, sans-serif;
font-size: 11px;
text-align: justify;
overflow: auto;
width: 543px;
height: 225px;
background-image: url(img/centerblank.jpg);
background-repeat: no-repeat;
_background-attachment: fixed;
}
FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? Hey guys, I was wondering if you can help me out with something. On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right? Can you take a look at help me figure out what I need to fix? www.illuminatedmind.net Thanks! Hey guys, First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */
body {
font: 8pt/16pt georgia;
color: #000000;
background: #AEAEAE url(images/butterflybg.gif) no-repeat top center;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: italic bold 14pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h2 {
font: normal bold 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* divs */
#header {
background: url(images/2006_Header.png) no-repeat;
width: 697px;
height: 127px;
padding: 0px;
margin: 0px auto;
}
#page {
width: 697px;
background: url(images/2006_WideExt.png) repeat-y center;
margin: 0px auto;
padding: 0px;
}
#nav {
background: url(images/2006_LNav.png) no-repeat left;
padding: 0px;
margin: 0px;
width: 175px;
height: 306px;
float: left;
}
#content {
background: none transparent;
margin-top: 0px;
}
#text {
}
#footer {
text-align: center;
}
And my html: 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" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? Hi, I have developed a page using only CSS with html. That means I have two files at the moment, layout.css and default.html. When I test it on my computer it works fine on IE6.0, Firefox, Netscape and Opera. I then decided to give it a go on the live internet. I created an account with geocities and uploaded all the required files. Now, when I loaded the page from IE6.0 the website is broken. Which means it is not displaying as it was when I was loading it from my computer. However Firefox and Opera are loading it fine. For me this is just weird, since if I download the html from the page (right click, view source), save it on my pc, and load it again from my computer (locally), it works fine on IE6.0 again. I know how I could solve this problem, however should I try solving this problem if my page is displaying fine on my computer (on the three browsers) but incorrectly on geocities? Ps: I am only using geocities for testing. Regards, Sim085 I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance. http://www.manliusvillage.org/test/index.html The related CSS is below: Code:
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}
#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}
#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #sublinks a {width:1%;}
#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}
Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase The site is question is: http:// w ww.stolen-bikes.org/index4.php The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help! Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John Dear all I need page height vary from page to page. But I cannot do this , please send your comments for this You can access my css , Other question is , different appear for firefox and IE , some time footer overlap I need to set pages height for their contents, can I do it with one , it is difficult to do all pages for separate styles This is my link "www. kawdoco. com/ test /" Thanks asanka So, I've been making a lot of sites, and keep trying to learn and use divs as you all always recommend. But I always encounter problems, so revert back to tables. Well I'm working on a site using divs right now, but for some reason, it's not working properly. In IE6, there's a gray border between the logo and banner. In FF, the left navigation menu is on the right. Here's the CSS I'm using: Code:
.spacer {width:150px;
float:left;
background-color:yellow;
height:35px;
}
body {background-color:#cccccc;
margin:0;
font-family:Times New Roman;
}
.width780 {width:780px;
}
.sitelinks div{background-color:green;
float:left;
padding:5px;
width:93px;
border-right:2px solid black;
border-bottom:2px solid black;
border-top:2px solid black;
}
.sitelinks a{display:block;
background-color:green;
text-align:center;
text-decoration:none;
color:black;
}
.sitelinks a:hover{background-color:orange;
}
.leftnav {width:150px;
height:500px;
background-color:yellow;
}
.logo {background-color:yellow;
width:150px;
height:150px;
float:left;
}
.banner {background-color:pink;
height:150px;
}
.content {background-color:white;
vertical-align:top;
padding:5px;
}
Here's the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="realty.css" /> </head> <body> <div class="width780"> <div class="logo"> Logo </div> <div class="banner"> Banner </div> </div> <div class="width780"> <div class="spacer"> </div> <!-- Navigational Bar --> <div class="sitelinks"> <div> <a href="#">Cat 1</a> </div> <div> <a href="#">Cat 2</a> </div> <div> <a href="#">Cat 3</a> </div> <div> <a href="#">Cat 4</a> </div> <div> <a href="#">Cat 5</a> </div> <div> <a href="#">Cat 6</a> </div> </div> </div> <!-- End Navigational Bar --> <!-- Left Navigation --> <div style="float:none;"> <div class="leftnav" style="float:left;"> Left menu </div> <!-- End Left Navigation --> <!-- Content Box --> <div style="width:600px;"> <div class="content" style="height:500px;"> <!-- Content goes in here --> Content Goes here <!-- End Content --> </div> </div> </div> <!-- End Content Box --> Here's the site: 805chesapeake.com (Ignore the colors.. i know they're ugly) Hey guys, I'm new (So I hope this will be posted in the right place). I'm working on this website for a friend, but for the life of me I can't figure out how to get this main table's bg color to either have a lower opacity, or display a png that's been modified with a lower opacity. I've tried everything. Whenever I put in a white background and use the lower opacity (for both EI and Firefox) it fades both the background and the text. When I try to put in the png, nothing shows up at all. I know HTML a lot better than I do CSS, but I used a template this time around so that the side navigation bar would actually work (And the template uses CSS). The website's link is: (52ndstreetjewelry . com) The current background in there is a light pink, but it's not that great looking. Anyone have any ideas? (If that made any sense at all?) ...of this funkiness. So hi, folks - I'm a longtime listener, first-time caller. I'm currently building my first CSS/XHTML storefront coded entirely by hand, and have run into some difficulties with--you guessed it--Internet Explorer. The issue is with the Nav Bar - IE seems to want to squash the items up, which makes the bar much taller than it should be. Here's a screenshot of what it looks like in IE6 (or what it DID look like, before I added the AlphaImageLoader filter. Now it looks the same, only the logo is transparent). Here's the same page in Safari. And here's a look at the dev site, in case you want to see it in action yourselves. (We're not live yet, so please don't make an order, thanks.) Ignoring all the other major funkiness (I know the code is a little sloppy, in places - I'm just trying to work through the problems, one at a time, before I go about doing some cleaning), any idea what the deal might be with the Nav Bar? I should mention the following: The Nav items are in an un-ordered list, and floated to line them up. There's some funkiness with IDs - each item in the list is meant to have a distinct ID (was gonna use this for a CSS-based 'you are here' functionality, but got hasty and entered the same ID for all the items. Plan to fix it). As it is, it isn't currently to standards...but I don't think that's what's causing the funky layout. Here's the HTML: Code: <!-- MainNav --> <ul id="MainNav"> <li id="Nav-Shirts"><a href="/store/mens/">Shirts</a></li> <li id="Nav-Shirts"><a href="#">Info</a></li> <li id="Nav-Shirts"><a href="#">About Us</a></li> <li id="Nav-Shirts"><a href="#">Affiliates</a></li> <li id="Nav-Shirts"><a href="#">E-List</a></li> </ul> Here's the CSS: Code: #MainNav {
margin: 25px 50px 0px 0px;
padding: 0px 0px 0px 287px;
background: #b9b18d;
list-style: none;
width: 450px;
float: left;
display: inline;
}
#MainNav li {
float: left;
display: inline;
}
#MainNav a {
padding: 0px 9px;
line-height: 20px;
font-size: 12px;
letter-spacing: -.1em;
text-decoration: none;
text-transform: uppercase;
font-weight: lighter;
color: #695030;
float: left;
display: inline;
}
#MainNav a:visited {
color: #695030;
}
#MainNav a:hover {
color: #ebe9c2;
}
I originally thought it was the double-margin float bug...but as you can see, I added 'display:inline' to all of the CSS elements, and it still doesn't solve the problem. I also thought about giving them each a defined width, as I vaguely remember some IE bug that prefers that sort of thing...but I'm not sure that that would help with this problem, given the way the items are squashed. Anyway, I'm more than a little lost at this point, because I can't figure out which bug in particular is causing this problem (almost all of the IE positioning bugs I've read up on sound like they could be the problem...but since I have no way of seeing what the margins look like in IE (there's no Xyle Scope on Windows, and trial-and-erroring it seems like it would kill me), I can't figure out exactly what's happening to cause it). If I knew the problem I could find a solution. But...alas. Any thoughts? Anyone dealt with this sort of thing before? Could it be the three-pixel text jog bug? What am I missing? (And if you do look at it and know exactly what the problem is, how would you recommend going about fixing it?) Thanks for reading! L I'm wracking my brain, and I can't figure out why my content (which was fine when I just had it sitting in my empty graphical box) is now spaced half-way down the page. My work in progress is at "www *dot* deepwaterchurch *dot* com *slash* next" I'd really appreciate any help. Thanks so much in advance. P.S. The code is below (inline CSS for ease of fiddling): Code: <!--
*,html{margin:0;padding:0;}
body{
background:black url("images/water.jpg") repeat-x top left;
color:white;
font:12pt verdana,arial,helvetica,geneva,sans-serif;
width:100%;
height:auto;
}
#container {
width: 960px;
position:relative;
margin:0 auto;
/*overflow:hidden;*/
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
right: 52px;
top: 15px;
width: 250px;
height: 131px;
}
#top {
background:url(images/top.png) no-repeat;
width: 956px;
height: 646px;
}
#content-container {
background:url(images/boxmiddlerepeatable.png);
position:relative;
width:852px;
overflow:hidden;
margin:0 auto;
margin-top:-631px;
top:0px;
left:-2px;
}
#content{
position:relative;
margin:10px auto 0;
width:805px;
left:10px;
top:0;
min-height:646px;
}
#bottom {
background-image:url(images/boxbottom.png);
position:relative;
height:12px;
width:851px;
top:5px;
}
a:link {
color: #3f7ba3;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#3f7ba3;
}
a:hover {
text-decoration: none;
color: #FFCC33;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 9px;
text-transform: uppercase;
color:#666666;
}
h2 {
font-size: 13px;
font-weight:900;
color:#FFFFFF;
}
h3 {
color:#999999;
font-weight:400;
font-size:12px;
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
right: 52px;
top: 15px;
width: 250px;
height: 131px;
}
.clear{clear:both;height:15px;
}
#navtabs {
width:462px;
height:60px;
position:absolute;
top:-10px;
left:5px;
}
#navtabs ul {
display: inline;
margin: 0;
padding: 0;
}
#navtabs li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: relative;
width: auto;
}
#navtabs li ul {
position: absolute;
width: 10em;
left: -999em;
}
#navtabs li:hover ul {
left: auto;
}
#navtabs li:hover ul, #navtabs li.sfhover ul {
left: auto;
}
li.whoweare a {
background-color:#000000;
background: url(images/navigation/whoweare.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.whoweare a:hover {
background-color:#000001;
background: url(images/navigation/whoweare.jpg);
background-position:
-77px 0;
}
li.whatwedo a {
background-color:#000000;
background: url(images/navigation/whatwedo.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.whatwedo a:hover {
background-color:#000001;
background: url(images/navigation/whatwedo.jpg);
background-position:
-77px 0;
}
li.whatwedodown a {
background-color:#000002;
background: url(images/navigation/whatwedo.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.beforeyoucome a {
background-color:#000000;
background: url(images/navigation/beforeyoucome.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.beforeyoucome a:hover {
background-color:#000001;
background: url(images/navigation/beforeyoucome.jpg);
background-position:
-77px 0;
}
li.beforeyoucomedown a {
background-color:#000002;
background: url(images/navigation/beforeyoucome.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.onceyourehere a {
background-color:#000000;
background: url(images/navigation/onceyourehere.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.onceyourehere a:hover {
background-color:#000001;
background: url(images/navigation/onceyourehere.jpg);
background-position:
-77px 0;
}
li.onceyoureheredown a {
background-color:#000002;
background: url(images/navigation/onceyourehere.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.faq a {
background-color:#000000;
background: url(images/navigation/faq.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.faq a:hover {
background-color:#000001;
background: url(images/navigation/faq.jpg);
background-position:
-77px 0;
}
li.faqdown a {
background-color:#000002;
background: url(images/navigation/faq.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.contactus a {
background-color:#000000;
background: url(images/navigation/contactus.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.contactus a:hover {
background-color:#000001;
background: url(images/navigation/contactus.jpg);
background-position:
-77px 0;
}
li.contactusdown a {
background-color:#000002;
background: url(images/navigation/contactus.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
<div id="navtabs">
<ul id ="nav">
<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
<li class="faq"><a href="faq">FAQ</a></li>
<li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation-->
<div id="wrap">
<div id="controller" class="hidden">
<span class="jFlowControl">Current Series</span>
<span class="jFlowControl">We're Social</span>
<span class="jFlowControl">Compassion</span>
</div>
<div id="prevNext" class="hidden">
<img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
<img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
</div>
<div id="slides">
<div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
<div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" usemap="#social" border="0"></a>
<map name="social"><area shape="rect" coords="21,86,232,258" href="http://www.facebook.com/group.php?gid=8981012794&ref=ts" />
<area shape="rect" coords="252,97,426,271" href="http://twitter.com/deepwaterchurch" /></map>
</div>
<div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
</div>
</div>
<div id="overlay" style="z-index:3; position:relative; top:-209px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:relative; top:-390px; left:492px;"><img src="images/tagline.jpg" /></div>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div><!--end content-->
<div id="bottom"></div><!--end bottom-->
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->
|
|||||||