|
CSS - Ie 8 Covering Left Border With Content
hi,
i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7. However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo. I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8. Does anyone know whats causing this issue? Here is my code below. Thanks in advance. First, the HTML code:- 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' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='stylesheet' type='text/css' href='css/default.css' />
</head>
<body>
<div id='page'>
<div id='logo'>
<img src='gfx/siteLogo.jpg' alt='Our Website Logo' />
</div>
</div>
</body>
</html>
Now the css file:- Code:
/* page structure definitions */
html
{
font-size: 100%;
}
body
{
margin: 0;
padding: 0;
/* 20px */
padding-top: 1.25em;
padding-bottom: 1.25em;
text-align: center;
font-family: Verdana, sans-serif;
background-color: white;
/* 16px */
font-size: 1em;
}
#page
{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* 900px */
width: 56.25em;
/* 1px */
border: solid black 0.0625em;
background-color: #ABBAD9;
}
#logo
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
#logo img
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
The image in the logo is 900px * 150px. Similar Tutorialshi everyone, i have been trying to align border left/right correctly in ff but it always crates gap on top and bottom (see screenshot) while on ie it works as supposed to (screenshot below) here is my code Code: #center_container{margin-left:118px;margin-top:24px;}
#center_container_text{
width: 522px;
border-left:1px solid #757d7b;
border-right:1px solid #757d7b;
}
#banners{float:right;margin-top:20px;margin-bottom: 10px;width:100px;border: 1px solid black;}
Code: <div id="center_container">
<div id="banners">
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
</div>
<div><img src="images/box_header.gif" name="Categories_header" alt="" /></div>
<div id="center_container_text">
<p>a</p>
<p> </p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
<p>asd</p>
</div>
<div><img src="images/box_bottom.gif" name="Categories_bottom" alt="" /></div>
</div>
thx. the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php Hi, Small problem he http://www.salewhale.com/z.html The box with the "What would you like to do?" is as follows: Code: <div class="boxarea"> <div class="boxarea_left"><b>What would you like to do?</b></div> <div class="boxarea_right"><a href='3_changepass.php'>Change Password</a></div> </div> The CSS for this is: Code: .boxarea {
border: 1px solid #0000FF;
background-color: #F5F5F5;
padding: 2px 2px 2px 2px;
}
.boxarea_left {
width: 140px;
float: left;
}
.boxarea_right {
width: 300px;
}
The point is to have the left column (boxarea_left) as 140px, so that the text wraps to the next line. Does anyone have any idea why the border box doesn't really take account of the new line? It simply ignores the divs and has a basic one line height. Of course, if I put a spacer within the boxarea div, the problem will be solved - but this leaves a gap at the bottom of the box - which I dont want. Is there a simpe fix? Thanks very much! This problem just started happening, but frustratingly I can't remember what I was changing when it started happening. The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons. OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem. If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE! GAAAAH Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS: Code:
html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;
}
img {
border:0;
}
a:link {
text-decoration: none;
color: #0096db;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #00abc7;
text-decoration: none;
}
#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}
#logo {
float:left;
width:140px;
margin:0;
padding:0;
}
#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}
#clear_both {
clear:both;
}
#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}
#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}
#content {
float:left;
width:500px;
}
#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}
#content p {
padding-left: 15px;
}
#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}
#focus_box h1 {
padding-top:15px;
}
#focus_box p, h1, ul {
padding-left:15px;
}
table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}
#menu2 {
float: left;
width: 200px;
}
#main {
float: right;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}
/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/
#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}
#sitemap li {
margin-left: 15px;
}
#sitemap ul {
margin-bottom:15px;
}
#sitemap ul li ul {
margin-left:15px;
}
And here is the HTML: Code:
<%@ LANGUAGE="VBSCRIPT" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">
<!-- #INCLUDE FILE="menutop.asp" -->
<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
<td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
<td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
<td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
<td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
<td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>
</body>
</html>
</body>
</html>
A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos. This would be a lot easier if I could show you a picture of what was going on. This may be a stupid question, but is there an easy way to make a div have an image on the left and content on the right... BUT then also make sure that, if the image's height is larger than the div, the div still covers the bottom. I know you can use a "float killer" div, however if I want a float killer on EVERY div class of this type, is there some easy way to tell the css to ALWAYS include code at the bottom? Also what method would a good coder use to vertically align the content on the right so that there isn't a lot of empty space? Thanks I'm working on a really simple theme. You can see the progress here. this is a table-less theme. trouble that I'm having is that I cannot get the content to center. It is all floated left. Now, I'm intentionally floating the left column to the left, but that's the only thing (and changing that didn't fix the problem either). So I'm hoping one of you css gurus will have some suggestions. (link to style.css file) Thanks in Advance! I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing. I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think. It's probably easier to see an example of the page I'm talking about: http://edwin.netbits.co.uk/devshed/...blem/index.html In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot). It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem. I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below. HTML: Code: <div id="contentscontainer">
<div id="left">
Menu
</div>
<div id="contents">
Some text<br /><br />and some more text
</div>
</div>
CSS: Code: div#contentscontainer
{
padding: 0px;
margin: 0px;
}
div#left
{
float: left;
width: 50px;
padding: 0px;
margin: 0px;
}
div#contents
{
padding: 0px;
margin-left: 170px;
}
Thanks, Edwin Hello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help. Code:
#header {
left: 0;
width: 100%;
height:125px;
top: 0;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar{
width:122px;
height:100%;
background-color:#3f79a1;
position: absolute;
top: 125px;
left: 0px;}
#footer{
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
}
Hi, I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page). The site is: http://67.18.220.222/~duoboots/2005/z.html Stylesheet: http://67.18.220.222/~duoboots/2005...s/style2005.css As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution) Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen. However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops. Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS. Here's some CSS: Code:
body, p {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
}
body {
height:100%;
margin: 0px;
background-color: #2F201E;
}
#container {
width: 968px;
height:100%;
}
#nav {
width: 201px;
border-right: 3px solid #FFFFFF;
background: #8D603B;
float: left;
min-height:100%;
}
I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated! Thanks a lot! I've been working on getting a nice look to fit the body of my content in, but I'm having a little difficulty. Based on some tutorials and things I have read, it seems many people do this technique by applying background images to various tags. I know it has a set width. However, the height may vary depending on how long the body copy is, which is where the problem arises. I have it broken into three images (top, bottom, left_right) It seems to display properly in IE7. However, in Firefox, the top and bottom images do not connect with the left_right image. I've tried setting margins and padding for top/bottom to 0 as I thought that may be the issue, but it didn't fix it. Can view files at: http://www.russellholloway.com/beta/test.html http://www.russellholloway.com/beta/main.css I'm pretty new to working with CSS, so if there are any other errors that may arise from the way I have coded this, please let me know. I intend to position the whole content-wrapper div in a floating layout for the site. Essentially there will be menus / such to the left, logo / stuff above, and this body content area will be in the remaining space. CSS copied below: css Code: Original - css Code .content-wrapper { padding: 0; margin: 0px; position:relative; } .content-wrapper .footer { width: 710px; background:url(content_bottom.jpg) no-repeat bottom; padding: 0; margin: 0px; position:relative; min-height: 34px; } .content-wrapper .heading { margin: 0; background-image: url(content_top.jpg); background-repeat: no-repeat; width: 710px; padding: 0px; height: 35px; position:relative; } .content-wrapper .heading h3 { position: relative; top: 20px; left: 20px; } .body { background-image: url(content_lr.jpg); background-repeat: repeat-y; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; width: 670px; position:relative; margin: 0px; }
.content-wrapper {
I have a website like shmah: Code:
<div class="wrapper">
<div id="leftframe"><img src="./intro.gif"></div>
<div id="content">
<div id="header"><?php include("header.php"); ?></div>
<div id="content"><?php include("content.php"); ?></div>
<div id="footer"><?php include("footer.php"); ?></div>
</div></div>
And the corresponding css like shmah: Code:
#wrapper {
text-align: center;
}
#content {
width: 700px;
margin: 0 auto;
}
#header {
width: 700px;
margin-bottom: 5px;
}
#content {
width: 700px;
min-height: 400px;
}
#footer {
width: 700px;
margin-bottom: 50px;
}
#leftframe {
position: absolute;
left: 50%;
margin-left: -600px;
}
table.table-in-the-content-area {
width: 100%;
border-collapse: collapse;
border: 0px;
border-spacing: 0px;
}
The issue is that the content div (the table contained therein) appears shoved off to the right in Firefox. When I set Firefox to use the border-box model, it centers correctly with the rest of the divs. IE and chrome don't have this problem. Any ideas where my weird margins may be coming from? Thanks! Sorry about the vague description, but I'm wondering how to achieve an effect like the ones on this page: http://www.csszengarden.com/?cssfile=/196/196.css&page=0. I've seen the effect on many other websites, but I can't find them at the moment. On the page the content div grabs your attention effectively because its borders make it pop out from the background. How are the border images and divs setup to achieve this effect? The page: http://new.midnighttempest.com/ As you can see, the content div is covering the footer, it sits just below the menu, whereas i want it to sit just below the content the php file: PHP Code: <?php define('IN_PHPBB', true); $phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './'; $phpEx = substr(strrchr(__FILE__, '.'), 1); include($phpbb_root_path . 'common.' . $phpEx); include($phpbb_root_path . 'includes/functions_display.' . $phpEx); include($phpbb_root_path . 'includes/bbcode.' . $phpEx); // Start session management $user->session_begin(); $auth->acl($user->data); $user->setup(); page_header('Homepage'); $template->set_filenames( array( 'body' => 'main.html', ) ); $forumid = 14; $sql_array = array( 'SELECT' => '*', 'FROM' => array(TOPICS_TABLE => 't'), 'LEFT_JOIN' => array( array( 'FROM' => array(POSTS_TABLE => 'p'), 'ON' => 't.topic_first_post_id = p.post_id' ) ), 'WHERE' => 't.forum_id = ' . $forumid . ' AND MONTH(FROM_UNIXTIME(post_time)) = MONTH(CURDATE())', 'GROUP_BY' => 't.topic_id', 'ORDER_BY' => 'post_time DESC' ); $sql = $db->sql_build_query('SELECT', $sql_array); $result = $db->sql_query($sql); while($row = $db->sql_fetchrow($result)) { $url = "<a href='".$phpbb_root_path."viewtopic.php?f=".$forumid."&t=".$row['topic_id']."'>".$row['post_subject']."</a>"; $poster = "<a href='".$phpbb_root_path."memberlist.php?mode=viewprofile&u=".$row['topic_poster']."'>".$row['topic_first_poster_name']."</a>"; $date = $user->format_date($row['post_time'], false, false) . "</strong>"; $text = generate_text_for_display(smiley_text($row['post_text']), $row['bbcode_uid'], $row['bbcode_bitfield'], $row['enable_bbcode'] = $row['enable_smilies'] = $row['enable_magic_url'] = true); $avatar = '<img src="http://new.midnighttempest.com/download/file.php?avatar=2_1260394092.png" />';; $updates[] = '<table width="100%" border="0"> <tr> <td colspan="2"><strong>Title</strong>:'.$url.'</td> </tr> <tr> <td width="10%">'.$avatar.'</td> <td width="90%">'.$text.'</td> </tr> <tr> <td colspan="2"><strong>Posted On:</strong> '.$date.' <strong>by</strong> '.$poster.'</td> </tr> <tr> <td colspan="2"><hr/></td> </tr> </table>'; } $db->sql_freeresult($result); $template->assign_vars( array( 'UPDATES' => implode('', $updates), 'FORUMID' => $forumid ) ); page_footer(); ?> main.html Code: <!-- INCLUDE overall_header.html -->
<div class="forabg" id="main">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Updates</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<p> </p>
{UPDATES}
<p><a href="/viewforum.php?f={FORUMID}">View all previous updates</a> </p>
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<div class="forabg" id="menu">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Menu</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<!-- INCLUDE mt_menu.html -->
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- INCLUDE overall_footer.html -->
mt_menu Code: <p><strong>Info</strong>
<br />
<a href="/">Home</a><br />
About / Rules
<br />
Join Form </p>
<p><strong>Members</strong>
<br />
Memberlist
<br />
Card List
<br />
Games
<br />
Forum
<br />
Donate
<br />
Login </p>
<p><strong>Other</strong>
<br />
Affiliates
<br />
Link to us
<br />
Randomizer
<br />
Staff Pay
<br />
Credits
<br />
Contact Us</p>
css Code: /* Midnight Tempest Layout */
#main {
position:absolute;
width:70%;
overflow:visible;
z-index:1;
}
#menu {
float:right;
width:20%;
overflow:visible;
z-index:2;
}
Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx IE is not very friendly when it comes to iframes. I wanted to know if there is a workaround for iframes on internet explorer. I've been searching high and low, and tried every idea I can think of to fix this. It's really hard to explain what it is I'm looking for, but I'm going to try to be as clear as possible. I've been working on my blog: http://tkthebadomen.blogspot.com/ And I almost got it to the point I want, except I've hit a brick wall with this one. I have the background fixed, and a layer of buildings that scrolls with the page. The problem is filling the area below the scrollable buildings with black. I'm not going to go into detail about all the things I've tried. But if I make a section black, it only fills the screen once, so if I scroll, the next page shows through; and then when I look at just a single post, it makes the bottom of the page go down past the footer. So my question is: Is there a way to fill the background with a color, from a certain point on the page to the end of the content? Here's the css I currently have for the front scrolling sections: Code: div.front {
background-image:url(http://www.tksheppard.com/blog/front.png);
background-repeat: no-repeat;
background-attachment: scroll;
position:absolute;
width:1284px;
height:100%;
top: 500px;
left: 0px;
bottom: 0px;
}
div.middle {
background-color:#000000;
color:#000000;
position:absolute;
overflow:hidden;
width:1284px;
height:100%;
top: 150%;
left:0px;
bottom:0px;
}
If you need anymore code posted, let me know. |
|||||||