|
CSS - Problem With Absolute Positioned Bg Imgs In Ie And Floating Div
Similar TutorialsI'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content. Here is the css: Code:
#nav {
background-image: url('../images/nav-full-bg.jpg');
background-repeat: repeat-x;
width: 967px;
height: 69px;
padding: 0;
margin: 0;
overflow: hidden;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
padding: 11px 12px 13px 12px;
font-weight:bold;
font-size: 13px;
font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
color: #626262;
margin: 0;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
}
#nav li ul { /* second-level lists */
position:absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom: 2px solid #808080;
background-image: url(../images/davidpng2.png);
z-index: 900;
}
#nav ul li {
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul li a{
padding:5px;
display: block;
width: 190px;
color: #000;
font-weight:normal;
font-family:verdana;
font-size:11px;
}
#nav li ul li a:hover{
background-color:#a2c9f4;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -23px 0 0 200px;
;
}
#nav li ul li ul li a{
display: block;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
hey guys JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc). It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens. Code: <div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div> I need IE to render the same as FF, and start the nav panel from the left. Any ideas? IE Screenshot FF Screenshot Hi all, I want to place a piece of text directly below an item that has a 'position: absolute' style on it, but when I put a div in there for the new text, it just places the text at the top of that absolute positioned item. Is there any way to get past this apart from floating the item? Cheers. It seems strange to me if I begin a page with: body{text-align: center} and a following div with a wrapper: #wrapper{position: absolute; top: 0px} that this would push everything to the left or the right depending on the browser. It seems the logical thing to occur would be that the body tag would shift everything to the center and the wrapper would simply press up to the top of the screen. My problem is fixed simply by changing the position to relative for the wrapper, but I'm curious why that's the case. Thanks. I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display. Here is my full page (short and simple) 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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function DIVshow(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "visible";
}
function DIVhide(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "hidden";
}
</script>
<style type="text/css">
#popupcontent {
position: absolute; top: 50%; left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
visibility: hidden;
overflow: hidden;
background-color: #F6F6BB;
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>
<div id="popupcontent">
<p>This is a popup window!</p>
<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>
</body>
</html>
Working sample can be seen he Click Here It works in both IE and FF if I write my hidden div tag like this: Code: <div id="popupcontent">
<div>
<p>This is a popup window!</p>
<input type="button" value="close"
onClick="DIVhide('popupcontent');" />
</div>
</div>
Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it? Thanks! I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win). In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far. The HTML... 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"><!-- @import url(css/base.css); --></style> <style type="text/css" media="print"><!-- @import url(css/print.css); --></style> </head> <body> <div id="container"> <div id="head"> <div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div> <div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div> </div> <div id="leftColumn"> <img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/> <p class="linkSelectedTop1">Welcome</p> <p class="link1"><a href="bio.php">Biography</a></p> <p class="link1"><a href="blog.php?category=">Musings</a></p> <p class="link1"><a href="guestBook.php">Guest Book</a></p> <p class="link1"><a href="links.php">Links</a></p> <p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p> </div> <div id="rightColumn"> <div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div> <div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div> <h1>Welcome</h1> <p class="clear"> </p> </div> <div id="footer"><p> </p></div> </div> </body> </html> The CSS... html { height: 100%; margin: 0 auto; padding: 0; text-align: left; background-color: #000000; } body { height: 100%; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 80%; background-color: #000000; } a { text-decoration: none; color: #A50023; } #container { position: relative; margin: 0; padding: 0; min-height: 100%; } * html #container { height: 100%; } #head { position: relative; background-image: url("../images/headerBlend.gif"); background-repeat: repeat-x; background-position: 0 0; text-align: left; margin: 0; padding: 0; height: 100px; } #headerTitle { position: absolute; top: 0; left: 0; z-index: 10; } #headerGraphic { position: absolute; top: 0; right: 0; z-index: 9; } #rightPages48 { position: absolute; top: 0px; right: 0; z-index: 10; } #krdPortrait { position: absolute; top: 0px; right: 64px; z-index: 10; } #leftColumn { float: left; top: 100px; left: 0; z-index: 10; width: 120px; margin: 0; padding: 0; background-color: #000000; text-align: right; } #leftColumn p { font-weight: bold; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #leftColumn a { color: #BFA673; } #leftColumn a:hover { color: #A50023; } .link1 { border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelected1 { color: #A50023; border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelectedTop1 { color: #A50023; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #rightColumn { position: relative; min-height: 100%; margin: 0; margin-left: 120px; padding: 0; background-image: url("../images/rightColumnFill48.gif"); background-repeat: repeat-y; background-position: 100% 0%; background-color: #FFFFFF; text-align: left; } * html #rightColumn { height: 100%; } #rightColumn h1, h2, h3, h4, h5, h6, p { margin-left: 36px; margin-right: 320px; margin-top: 0px; margin-bottom: 0px; } #rightColumn h1 { font-size: 200%; color: #606880; padding-top: 36px; } #rightColumn p { color: #333333; margin-top: 9px; } #clear { width: auto; height: 500px; margin-right:48px; margin: 0; padding: 0; margin-right:48px; background-color: Transparent; } #footer { width: auto; height: 72px; margin: 0; padding: 0; background-color: #000000; } #footer p { margin-top: 36px; } I'm trying to place an absolutely positioned layer over other layers. It works in everything but Windows IE (surprise). If you remove the 'main' <DIV> it works fine (unfortunately, that is not an option). http://www.tuttobellotrouve.com/newsite/tuttobello/testpage.html CSS is internal. You SHOULD be able to see a small frame with a gift package in it, floating over a narrow horizontal box. Ideas? Thanks, Brad Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } I cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help? html, body {height:100%;} #container { width: 900px; position: absolute; top: 0px; left: 50%; margin-left: -450px; } #header { width: 900px; height: 105px; position: absolute; left:0; top: 0; } #main { position: absolute; left:0; top: 105px; } #footer { position:absolute; bottom:0; border: 1px solid yellow; } Code: <div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? hello, i have a centered element and i would like to create an absolutely positioned div that attaches to the left side of the centered div. ive been following this resource which states: Quote: #wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; } This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window. and so my css is: Code:
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
position:relative;
border: 4px #99968F solid;
width:587px;
margin: 20px auto;}
#left_block {
position:absolute ; top: 0px; left: 0px;
width: 299px;
height: 209px;
background-image: url(../images/mediaplayer_bg.png);}
what is happening though is that the left block is in the top left of the window and not the top left of the centred div. does anyone know how i can get this in the top left of the centred div and then ultimately to the left of the centred div (is a negative value possible?) thank you! Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig Hi, i think i use too many DIV tags. How can I get around this problem? Is there any direction you think you can push me to? The homepage is here http://www.chocolateriewanders.com/...lder/index.html an image explaining the layout of the graphics is he and another question: would you ever consider to combine CSS and tables? i ask because of this design, that i have .... the main box is kinda easy to arrange in tables, i don't really know yet if i can manage to make it entirely in css .... any ideas are appreciated EDIT: okay - starting from scratch i have a webpage that the layout looks perfectly fine when looking on a monitor larger than 1024x768. when i look at it on that screen size everything inside of a div that is absolutly positioned gets put over it as if it is smaller than it is on the larger screen size. has anyone else come across this problem and know how to resolve it. please ask for more info if needed. many thanks in advance. i have attached an image with the problem showing RESOLVED: i redid my javascript Hi All, I'm trying to re-order the divs in my code, so that when it is previewed, the main content div - which is my first div in code previews below the div containing the navigation, which appears below the main content div in code. I'm told that the closer the main content is to the top of the page in code,the better as far as search engine optimisation is concerned (styles will be in a separate document). I have managed to do this using both negative margins and absolutely positioned divs inside a relative div. my problem is that if the amount of text inside my content div increases, it throws off the margins/positioning so that the text actually appears on top of the navigation div. If anyone has any ideas I'd be grateful for your help. I've included a very simplified version of the page to help you picture the problem. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #maincontent { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #CCCCCC; width: 80%; margin-right: auto; margin-left: auto; position: relative; top: 25px; } #envelope { width: 100%; margin-right: auto; margin-left: auto; position: absolute; } #navigationbar { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #0066CC; width: 80%; margin-right: auto; margin-bottom: 0px; margin-left: auto; top: -15px; position: relative; } --> </style> </head> <body> <div id="envelope"> <div id="maincontent"> Main content div variable sized content </div> <div id="navigationbar">Navigation bar the size of this area will be fixed</div> </div> </body> </html> Hello I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out. The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap). Basically the code is this: Code: <div id="right-footer"> <img src="images/logo_small.gif" border=0><br /> </div> This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall. Here is the relevant section of the stylesheet: Code: #right-footer {
position: relative;
top: -100px;
left: 550px;
width: 100px;
height: 10px;
overflow: none;
z-index: 100;
padding: 0px;
margin: 0px;
}
As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it. Commenting out the div block or setting position to absolute removes the gap, but my position is blown. Any ideas? Please let me know if you need any more information or code. Thanks! hanji So I've only been building layouts with CSS for 2 yrs now and I guess I've never really had this issue before (though I imagine it's an easy one). On the page I'm building I have a text area that starts off with a rough paper texture thats about 400 px tall (with text on top) and I want the rest of the text on top to overflow into a different y-repeat background image. I got it to work PERFECTLY in IE7, but firefox has been nothing but a pain. I know that I'm close since one browser is showing it correctly, but I need either a firefox-only fix or an overall fix that won't mess up the way IE7 displays it. To keep from posting the whole document I'll post the reference on my HTML page and the CSS itself (I can add more later if need be) CSS: Code: #textbgtop {
width: 886px;
min-height: 580px;
background-image: url(img/TextBGtop2.jpg);
background-repeat: no-repeat;
padding-left: 14px;
padding-right: 14px;
}
#maintextarea {
width: 886px;
background-image: url(img/TextBGrepeat.jpg);
background-repeat: repeat-y;
}
HTML REFERENCE: Code:
<div id="maintextarea">
<div id="textbgtop">
TEXT GOES HERE....I am running an DO WHILE statement that pulls content from a mySQL DB. The content is all displaying correctly. As it is, the page displays fine in IE7, but on firefox the top image is in the proper place, but the TextBGrepeat img is directly below it, and then the text overflows in the main page background, THEN the bottom nav bar is placed below that.
</div></div>
I don't know if I've provided enough information but does anyone see an obvious error? If not I can definately post more but I would need to modify some specifics. Thanks in advance for any help! -crazygol4 |
|||||||