|
CSS - Layout Background Issue With Ie7
Ive been trying to get my new site layout up, but as I was testing different browsers, IE7 has 1 problem.
kb-studio.org/test/ when i was testing how it would look in different browser sizes, i noticed that it looked fine in all sizes above 1280 x 720. If you open, the site in a 1024 resolution, something weird happens to the background (only in IE). I validated my css and xhtml, can anyone help? Similar TutorialsI hope this makes sense - I can send you a link where you can find a screenshot but unfortunately the forum is not allowing me to paste URLs. Hopefully someone can lend me a hand getting my head around this one. I have a background texture which is repeated over my page.(body:width&height:100%) I then have a top centered background image(width:1492px) at the top of my content pane .(width:970px;margin:auto Directly underneath the content pane background image I need a 83px height horizontal black strip which pans 100% width across the site. My content pane needs a different color which also pans 100% width across the site & grows in size with the text inserted although it cant be implemented from the beginning of the content pane or it would overlay the top centered background image and should only start after the black strip as this is where the charcoal color begins. My content pane starts in the middle of the content pane image so the charcoal color should only come into effect after the black strip. The black strips position should remain the same regardless of the content inserted in the content pane . The charcoal colors start position should also remain the same although should grow downwards based on the content pane's text. Thanks a million! Hi everyone, Please take a look at this site: http://174.122.106.156/~johanna/php The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered. Can anyone tell me what's wrong and why? Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code. How do you guys find and fix IE6-specific layout issues? Thanks. Hello Community, I'll get cracking with my code and explain all below. My CSS; Code: html, body { height:100%; margin:0; padding:0; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }
body { text-align:center; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }
#outer { min-height:100%; height:auto; width:987px; margin-left:auto; margin-right:auto; position:relative; text-align:left; background:url(../_images/stretch_body.jpg) repeat-y top left; }
* html #outer { height:100%; width:987px; w\idth:987px; background:url(../_images/stretch_body.jpg) repeat-y top left; }
#contentContainer { width:100%; overflow:auto; }
#headerContainer { margin:0px auto; width:987px; height:117px; background:url(../_images/stretch_header.jpg) repeat-x top left; }
#centerContent { width:735px; float:right; padding:10px 10px 15px 10px; }
#footerContainer { position:absolute; bottom:0; left:0; width:100%; height:61px; text-align:center; background:url(../_images/stretch_footer.jpg) repeat-x top left; }
#footer { width:987px; height:61px; background:url(../_images/footer.jpg) no-repeat top left; }
#clearfooter { clear:both; height:61px; width:100%; }
My HTML; Code: <body> <div id="outer"> <div id="contentContainer"> <div id="headerContainer"></div> <div id="centerContent">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div> <div id="clearfooter"></div> </div> <div id="footerContainer"> <div id="footer"></div> </div> </div> </body> At the moment you will be able to see that this layout is a 1 column, centered layout. As it stands it works very well. However what I am trying to accomplish now is causing problems. You can see from my CSS that I have 3 Background Images (stretch_header, stretch_body, stretch_footer). These are to stretch 100% of the browser, width, height, width respectively. The problem I have is that I only have enough elements present to use 2 of these backgrounds. stretch_header - put on the body/html works perfectly 100% width. stretch_body - put on the "outer" div works perfectly 100% height. This means I don't have another 100% width div to put the stretch_footer on. Every time I try to include a new div, using "position" or "float" cause various div to remove themselves from the document flow, and cause errors. The reason for the excess "a<br>" is to force the document out of the workspace and make sure it still retains it's rigidity when combined with content. So basically i'm asking how can I include another div to include the footer background 100% width. Any help would be greatly appreciated. Hi guys, I'm now working on my first proper site and started with what I think is a fairly complicated layout. Basically I would like to have 3 fixed width columns 2 of which, the left side and the right side one, having fixed position. In addition, the middle column has to have a "backgound-attachment: fixed" and no-repeat properties. At the moment I have 2 main problems: 1. IE7 thinks the left sidebar should be on the right. 2. I can't get the backgound image to be displayed correctly. Basically, it's not displayed if I use no-repeat property. If I don't use it, the backgound image isn't positioned properly (applies to both IE7 and FF3). I hope you can help, because I've spent nearly 2 days trying to work it out, but have had little success <head> <title></title> <link rel='stylesheet' media="screen" type='text/css' href='main.css' /> </head> <body> <div id="logo"><img src="logo4.gif" width="47" height="600" /> </div> <div id="nav"><img src="Images/Nav2.gif" width="162" height="512" /></div> <div id="header"> Filled with lore ipsum </div> </body> </html> and body { margin: 0 auto 0 auto; width: 760px; padding: 0; background:gray; } #logo { position: fixed; float: left; height: 100%; padding: 0; margin: 0; width: 47px; background: white; } #header { width: 551px; float:left; margin-left: 47px; padding: 0px; background-image: url(Images/Contents2.gif); background-attachment: fixed; background-repeat: repeat-x; background-color: white; background-position: top left; } #nav { position: fixed; float:left; margin-left: 598px; width: 162px; background-color: white; height:100%; } THANKS ALOT Hey friends, I am having some problem, may be you ppl can help me. Well i am using Social Engine with template. and i have the probelm that when i click on a link my LOGO and Menu moves upside automatically. Some area of CSS is wrapped in a code snippet. Code: /* GLOBAL STYLES */ html { min-height: 100%; margin-bottom: 1px; } body { background: #FFFFFF; position: relative; text-align: center; font-size: 11px; cursor:default; margin: 0px; } table.body { width: 900px; padding:0px; } p { margin: 0px; padding: 0px; } div, td { font-family: tahoma, "Trebuchet MS", arial, serif; font-size: 11px; color: #555555; line-height: 140%; } #main_background_top{height:59px; margin:0px; padding:0px; background-color:#29404f; width:100%;} #fake_body{position:absolute; top:0; width:990px; padding:0px; margin:0 auto;} #wrap{width:990px; padding:0px; margin:0 auto;} #container6 { float:center; padding:0px; width:990px; margin: 0 auto 0 auto; } /*RESETS*/ *{padding:0; margin:0;} ul{list-style-type:none;} fieldset{border:none;} a img{border:none;} a{-moz-outline:none;} /*HACKS*/ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ .text_replace{background-repeat:no-repeat; outline:0; text-indent:-9999px;} a.text_replace:active{outline:0;} /*header*/ #global_header{position:relative; height:60px; } #focus_top{width:789px; height:38px; float:right; margin-top:20px; background-color:#1a2b37; border:1px solid #475f6f; border-bottom:none;} #global_header a{color:#fff;} #global_header h1#focus_logo{float:left; margin-bottom:0; } #global_header h1#focus_logo a{display:block; background-image:url(../images/focus_logo.gif); height:48px; width:195px; padding-bottom:0px; padding-top:0px; margin-bottom:1px; margin-top:5px; background-position:left top;} #global_header h1#focus_logo a:hover{display:block; background-image:url(../images/focus_logo.gif); height:48px; width:195px; padding-bottom:0px; padding-top:0px; margin-bottom:1px; margin-top:5px; background-position:left bottom;} .focus_top_menu{float:left;} .focus_top_menu ul { float:left; width:100%; outline:none; padding: 0; margin: 0; line-height: 38px; font-size:11px; text-align:left; } .focus_top_menu li { display: inline; outline:none; list-style: none; margin: 0; } .focus_top_menu li a { text-decoration: none; outline:none; text-transform:uppercase; color: #d4d7d9; padding: 13px 9px 12px 9px; line-height:38px; font-weight:normal; } .focus_top_menu li a:hover { background-color:#223644; } .focus_search{float:right;} .btn { border:0px solid #333333; width:21px; height:21px; outline:none; background-color: #191919; background-image: url(../images/search_ok.gif); background-position:bottom left; padding:0px; cursor:pointer; } .busca { border:1px solid #FFF; vertical-align:top; margin:0; position:relative; top:0; background-color: #ffffff; color:#646262; font-size:12px; font-family:Arial, Helvetica, sans-serif; float:left; letter-spacing:1px; height:13px; padding:3px 2px 3px 4px; width:196px;} .left_side{float:left; width:199px; height:400px;} .left_side_green{ background-color:#e2f6d4; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_blue{ background-color:#e4f2f3; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_yellow{ background-color:#f4f1de; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_red{ background-color:#f4e4e7; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_links_blue ul { padding: 0; margin: 0; line-height: 20px; font-size:11px; font-weight:normal; text-align:left; } .left_links_blue li { list-style: none; margin: 0; } .left_links_blue li a { width: 189px; background-color:#ffffff; text-decoration: none; color: #27494E; padding: 2px 0px 2px 10px; display: block; border-bottom: 1px solid #e3eff0; line-height:20px; font-weight:normal; } .left_links_blue li a:hover { background-color:#f0f7f8; color: #292728; text-decoration: none; } .left_links_yellow ul { padding: 0; margin: 0; line-height: 20px; font-size:11px; font-weight:normal; text-align:left; } .left_links_yellow li { list-style: none; margin: 0; } .left_links_yellow li a { width: 189px; background-color:#ffffff; text-decoration: none; color: #27494E; padding: 2px 0px 2px 10px; display: block; border-bottom: 1px solid #f1eedb; line-height:20px; font-weight:normal; } .left_links_yellow li a:hover { background-color:#f8f6eb; color: #292728; text-decoration: none; } input.text4{ border: 1px solid #B5BABA; font-family: arial, verdana, serif; font-size: 11px; font-weight:bold; margin-bottom:1px; margin-top:1px; color: #7C7D7D; vertical-align: middle; padding: 3px; } td.top_menu { background-image: url(../images/topbar_bg.gif); background-repeat: repeat-x; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #BBBBBB; } td.top_menu2 { width: 20%; text-align: right; border-right: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #BBBBBB; background-image: url(../images/topbar_bg.gif); background-repeat: repeat-x; } div.top_menu_link_container, div.top_menu_link_container_end { float: left; height: 31px; border-left: 1px solid #CCCCCC; } div.top_menu_link_container_end { border-left: 1px solid #CCCCCC; } div.top_menu_link { font-weight: bold; font-size: 13px; padding-top: 5px; padding: 6px 10px 0px 10px; } div.top_menu_link_loggedin { height: 25px; text-align: right; font-weight: bold; font-size: 13px; padding-top: 5px; padding: 6px 0px 0px 10px; } div.menu { width: 150px; border: 1px solid #CCCCCC; border-left: 3px solid #7391a8; background: #EEEEEE; padding: 0px 0px 10px 10px; margin-right: 10px; } div.menu_header { margin-top: 10px; margin-bottom: 7px; } td.menu_user { background-image: url(../images/menu_user.gif); background-repeat: repeat-x; background-color: #FFFFFF; padding: 5px 10px 5px 10px; border: 1px solid #CCCCCC; border-top: none; text-align: left; } div.menu_item { float: left; padding-right: 5px; font-weight: bold; background: none; } div.menu_sep { padding: 2px 0px 0px 10px; float: left; background: none; } img.menu_icon { display: block; float: left; margin-right: 6px; margin-top:2px; } img.menu_icon2 { margin-bottom: -3px; margin-right: 3px; } div.menu_arrow { padding: 2px; float: left; } div.menu_item_dropdown a { padding: 3px 40px 5px 7px; font-weight: normal; border-left: 3px solid #DDDDDD; display: block; background: #FFFFFF; } div.menu_item_dropdown a:hover { padding: 3px 40px 5px 7px; font-weight: normal; background: #F2F2F2; border-left: 3px solid #BBBBBB; text-decoration: none; display: block; } div.menu_dropdown { border: 1px solid #CCCCCC; border-top: none; background: #FFFFFF; position: absolute; margin-top: 6px; margin-left: -20px; z-index: 99; width: auto; white-space: nowrap; } td.topbar1 { padding-bottom: 5px; } td.topbar2, td.topbar2_right { background-image: url(../images/menu_bg.gif); background-repeat: repeat-x; font-weight: bold; font-size: 15px; padding: 10px 10px 8px 15px; color: #FFFFFF; border-bottom: 1px solid #31537D; } td.topbar2_right { font-weight: normal; padding: 10px 15px 8px 10px; text-align: right; } td.content { vertical-align: top; text-align: left; background: #FFFFFF; } div.content { width: 759px; min-height:600px; padding: 25px 15px 15px 15px; text-align: left; margin-left: auto; margin-right: auto; float:right; border-left:1px solid #b3b3b3; border-right:1px solid #b3b3b3; border-bottom:1px solid #b3b3b3; }
hi, kinda of new to working with css for layouts, but a friend told me its good to make the change over from using tables... well heres my dilema. i want to make a layout like this..... Code: |-----------------------------------| |Header | |-----------------------------------| | Advert | Loginbox | | |--------------------------| | |Main content | | |Main content | | |Main content | | |-----------------------------------| In tables... its 3 rows 3 column.... with 1st column on 1st row spanning 3 columns and 3rd column on 2nd row spanning 2 rows and 1st column on 3rd row spanning 2 columns Attached is what i have so far for my css... or visit www.ftapro.co.uk/csslayout.html its just the Main content part which i can get to fit into place. I am very greatful for any help. Rob Hi,, Guess you lads will find out the solution quick. The menu on the site: http://www.fisk.pyrabel.net/index.php always push the content down. and some issues in firefox as well. any suggestions to clean it up ? Thanks a million I am attempting to do a site with all divs for the layout. My main issue is that in the body of the homepage, there will be two columns: one a static image, and the other will be the content which may end up being longer than I had designed for. My main concern is that if the content does become longer, is there a way that the div that positions the footer can be moved down accordingly, and if the background image behind the static image will extend with the lengthy content. Links: How I want to look: http://www.mrossana.com/newstrut/ Corresponding Style Sheet: http://www.mrossana.com/newstrut/style2.css (*There is a lot of stuff on there that was not my doing. I'm mostly concerned with the id styles.) How I want the layout to be with divs and my issue: http://www.mrossana.com/newstrut/csslayout.html Style Sheet: http://www.mrossana.com/newstrut/style.css Thanks! I'm working on a site: www.wirelessguy.net As you can see, the middle content is not extending all the way to the end of the middle iFrame. The code I'm dealing with is this. Here is the content id that I created in my css file. Code:
<div id="content">
<iframe src="welcome.php" width = 100% height = 100% frameborder=1 scrolling=auto name="main">
</iframe>
</div>
Here is the welcome.php file. Code:
<body margin=0>
<div id = "welcome">
<table cellpadding=0 cellspacing=0>
<tr>
<th>Welcome to the American Communications Web Site</th>
</tr>
</table>
</div>
</body>
Here is my css that pertains to the middle content. Code:
div#content
{
position: absolute;
top: 17%;
left: 8%;
right: 8%;
bottom: 10%;
height: 75%;
border: 1.5px solid #333399;
}
#welcome table
{
border:1px dotted red;
width: 100%;
height: 100%;
}
#welcome th
{
border:1px solid black;
background: #FF9933;
font: normal 18px;
}
Any idea why the table will not extend all the way to the right? Also, the bottom borders are not being shown. It seems that the table is extending past the area defined by "content" in my css. Hi, I'm having some layout troubles on my website: http://www.whollylife.org/ It looks the way I want when viewed with IE 6.0, but with FF (and I'm sure, all other standards compliant browsers) it looks a little off) I'm just having issues getting the top margin, the float:left nav bar, and the content-container where I'd like them to be. I figure, until I know how to resolve the issue, I'll post the site as viewable in IE... any help? Hello, I am having trouble with the layout for round corners. I got it to work on Firefox, but can't seem to get it to function correctly in IE 6/7. There is a weird white gap at the bottom of the page, and the background color overflows at the top of the page. The site is [mark-richter . com/project1/index.asp] (Without the spaces around the .com. Sorry for brackets, rules prohibit me from posting links lol) Thanks for any help you can give. This is a pretty specific CSS question, but I do not see a CSS forum anywhere so i'm hoping someone here can help. In my site, I have assigned a background image to the <div> that contains my secondary navigation. I'm attempting to overlay my navigation buttons so that they line up at an exact position over the background image. It is working fine and Internet Explorer 6, but seems to be off by pixel or two and Netscape 7.1. http://www.budonk.com/budonk.php?prim=workwedo If you view this page in both browsers (looking specifically at the images beneath the logo), you will see that the text of the buttons lines up perfectly with the shape of the button (which is part of the bg image) and Internet Explorer, while in Netscape, the text for each button is too low by one or two pixels. You can view the page's source to see all of the CSS. I'm thinking it has something to do with the style #leftpane and/or .sNavImg ... but not too sure ... Any ideas? Hey everyone! This is my first post here as I am bordering on throwing my laptop out of the window so I'm in dire need of some help! My problem is - I have a background image which consists of 2 columns and a main content area. I want this to be tiled vertically and to fill the width of the page (but not repeat.) But no matter what I try it will just hugely overflow the browser horizontally and so I'm only seeing the left column and half of the center part. This is a scaled down version of the image I'm using: ht tp://ww w.frontier-music.co.uk/example2.jpg This is driving me absolutely mental as I just expected there to be a quick fix for keeping the image within the browser size! This is the sort of thing I'm after: ht tp://ww w.frontier-music.co.uk/example.jpg If anyone could offer any sort of help I would be hugely greatfull as I'm having a bit of trouble getting my head around all of this code! ht tp://ww w.teddyzoo.com - This is a pretty similar background effect to what I'm after, the based my background image around theirs to try and work out what they had done! Many thanks in advance Josh EDIT - Sorry about the broken links, I wasn't allowed to post working ones. CSS back ground image isn't showing at all. Tried everything, googled, flipped through CSS books, moved the image into different directories, drank more tea and finally flipped Help! Site link : http://weary.me.uk/MT/ Code: * { margin:0; padding:0; }
BODY { background-color:#FFFFFF;
font-size:12px;
}
#header { background-color:#FFFFFF;
padding:0px; }
#left {
float:left;
width:18%;
padding:0%;
margin-left:1%;
margin-top:0%;
}
#right {
background-image: url(right_background.jpg);
background-repeat: no-repeat;
margin-right: 20px;
width: 220px;
border:1px solid #d2d7e4;
float:right;
width:20%;
margin-right:0%;
margin-top:0%;
padding:0px;
}
#center {
margin-right:30%;
margin-left:14%;
padding-left:10%;
background-color:#FFFFFF;
}
#footer { clear:both;
background-color:#FFFFFF;
padding:8px; }
Hello, I've made a layout using Photoshop and Dreamweaver. As you can see here. Everything is fine for me except the Site Updates section. As you can see the sides of the site updates section aren't layers, instead they're images. When I tried making them as layers they didn't give me the outcome I wanted. Can somebody please tell me how to replace those images with layers so the section expands with more content. Thanks Hi I have modified a menu that used tables to now use CSS, it works fine but I can't get the layout to work (I'm learning). Each button has it's own div. I need the menu to go horizontally, not vertically, can anyone help please? jinx-inc.co.uk/development/menu.html Css - jinx-inc.co.uk/development/css.txt Html - jinx-inc.co.uk/development/html.txt I'm happy to provide whatever's needed if someone requires it to help! Thanks I have a basic layout as follows: Code:
<div id="wrapper">
<div id="header">
<!--#include virtual="/siteadmin/includes/inc_header.asp" -->
</div>
<!-- Begin Left Column - Menu -->
<div id="leftcolumn">
<!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" -->
</div>
<!-- End Left Column - Menu -->
<!-- Begin Right Column - Content -->
<div id="rightcolumn" align="left">
<!--#include virtual="/siteadmin/includes/inc_menu_page.asp" -->
</div>
<!-- End Right Column - Content -->
<!-- Begin Footer -->
<div id="footer">
<!--#include virtual="/siteadmin/includes/inc_footer.asp" -->
</div>
<!-- End Footer -->
</div>
Which uses the following css Code:
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
}
#wrapper {
margin: 0px;
width: 100%;
padding: 0px;
}
#header {
color: #333;
width: 100%;
float: left;
border: 0px solid #ccc;
height: 100px;
background-image: url('/media/images/headerBackground.gif');
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
width: 195px;
float: left;
padding-left: 10px;
padding-right: 10px;
}
#rightcolumn {
float: left;
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
height: 100%;
display: inline;
padding-left: 10px;
padding-right: 20px;
}
#footer {
width: 100%;
height:27px;
clear: both;
color: #333;
border: 0px solid #ccc;
background-image: url('/media/images/footer_bg.jpg');
background-repeat:repeat-x;
}
Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css) |
|||||||