|
CSS - Css Faux Background - Firefox Issue
Hello everyone
I've created a faux background for a website I'm currently working on to create the illusion of a column extending to the bottom of the page. The url is as follows: http://notquiteperfekt.gamedaemons.net/eruptmediav2/erupt.html The CSS code I've used is: body { background-image: url("images/pgbkg.jpg"); background-repeat: repeat-y; background-position: 50% 0%; } ---- When viewing the page in Internet Explorer 5.0+ it lines up fine. However, in order for it to line up successfully, I had to add the following code to nudge my <body> content over: html body {padding-left:11px;} ---- Fine and dandy, the extra code made things line up quite nicely. Then comes FireFox. The <body> content is 1px to the right of the background & causes the page to be a little off-center. View the previous URL in FireFox to better understand what I mean. ---- When I don't use the html body {padding-left:11px;} then the page is approximately 11-12 pixels off center - however my CSS code tells the background to position itself 50% on the X-axis & my HTML code tells the body to center itself as well via align="center" Why do these two not line up then? ---- If anyone can view->source to pick out what's causing this & reply back it would be greatly appreciated. You can reply here or e-mail me at sevunx@gmail.com.NOSPAM - I thought I was past all of the headaches with CSS Similar TutorialsSo I'm having what I think are CSS issues with a site... I'm supposedly a "new user" though I've been registered for a long time, and just not used this account in a long time, so I can't show my URL's here... tried to abbreviate them... I'm not sure how to show you what the issues are if I'm not allowed to post URLs. Anyone with any suggestions there? This looks fine in IE, but not in Firefox. On (blocked) the main content that sits in the middle of the page sits in an 800px div called "page". I've set the background color for that to be white: FFFFFF, which Internet Explorer seems to understand. But Firefox seems to be leaving "page" to be transparent. This means that either the left div (content) or the right div (reef-job) ends when the content inside of it ends, rather than continuing down to the bottom of the "page" content. I'm not sure how to fix it for Firefox. Again, it's all the pages inside of (carrieandjonathan [dot] com /island-reef-job) and the stylesheet is at (carrieandjonathan [dot] com / island-reef-job / mt-island-reef-job.css) #page { width: 800px; margin: 0 auto; padding: 0px 0; background-color:#ffffff; } Any help is greatly appreciated. Thank-you in advance! Warmest, Jonathan Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! I have a site with 2 faux columns, and on Safari every other pixel of display width shows a 1px strip of the background image to the side of the table. Can anyone help me correct this? It's driving me nuts!! It's only particularly noticeable when resizing the browser window. The background image and table are the same size (750); when I tried setting the background to 749 it left a visible jog. If you're using Safari you can view the problem at danielsobel dot com Thank you SO much! Hi, I've been experiencing a problem that for sure most of you should dealed with, I've found the following article: http://www.alistapart.com/articles/fauxcolumns/ The problem I'm facing is that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div>, the <div> will only expand down the page 200 pixels. On the referenced article the proposed solution is to use a background image. However I'm looking for something else, let's suppose the following html code: Code: <table> <tr> <td width="200" bgcolor="#FFFF00">navigation</td> <td width="500" bgcolor="#CCCCCC">content</td> </tr> </table> Both cells strecth vertically each other on both directions, is navigation is taller the background in content is stretched, and if the content is taller navigation's background is stretched. Is possible to achieve this behaviour avoiding tables? Regards, Caste Im trying the faux column technique but somehow it wont work. I use: Code: body{
background-image: url('themes/default/faux_bg.gif');
background-position: 20% 0%;
background-repeat: repeat-y;
margin: 0%;
padding: 0%;
}
.. in my css file. However it doesnt do anything. I am sure the css file is loaded because when i remove the <link> line the rest of the elements lose their style. When i place the code directly into the body tag like this: <body style="background-ima... etc. it does do something. What am i doing wrong? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="themes/default/basic_sheet.css">
</head>
<body>
<?php require('includes/structure.php'); ?>
<div class="contentsDiv">
blabla blab,ala<br><Br>
dsjkdasdas<br>djsadhjksad<br>djsuiohashd
</div>
<div class="panelDiv">
contact 1<br>
contact 2<br>
contact 3<br>
</div>
</body>
</html>
(PS the image is a 10px line with the first 20% filled with blue and the other 80% filled with white. thanks in advance. Ive first tried a 2 column layout using the faux technique. Now im trying it with 3 columns but i dont understand it. I read some articles about it and still dont get it really. Can someone explain the main idea of how its done? Just a simple one like this: navigation div | contents div | right menu div No headers and footers and all 3 columns extend to the bottom of the page (all same height). thanks in advance. Hello, I was wondering if there is any good alternative to faux columns to make a 2 column layout, where the 2 columns extend from the top to the bottom of the screen (without a footer). The basic structure looks like this: Code: <div id="main_container"> <div id="navigation_menu"> This div is set to float left with a width of 20% (assuming there's no margin, border and padding) </div> <div id="contents"> This div is set to float left with a width of 80% (assuming there's no margin, border and padding) </div> </div> I want the right side of the navigation div to have a dashed border. Probably this could be achieved by using faux columns, but it's too much of a hassle in my opinion. Whenever I want to change the color or column size of the navigation bar, I have to alter the faux-image. Also when i use this dashed border the faux-image has to be larger than 1 pixel height. It would have to be around 10 pixels (5pixels for the part where the dash is showing and 5 pixels for the part where there's no dash. Is there really no easier way to extend the color of the navigation div all the way down to the page? Thanks in advance ok this is taking to long i go think of something else I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below.. Code:
/* image width is 760px, with one px on each end leaving 758px for the content area */
body {
background-image: url(images/bgborder.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below... Code:
#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}
In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side. I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens? -B I feel like I am going backwards instead of forward. I have made many changes to the layout trying to achieve what I want I had something close, but it was for a fixed height for the main page layout box and I needed something that will be a min height of 600px but will stretch if the content exceeds that. So now after reading many tutorials on boxes, blocks, layouts, floats, etc. I am actually further from acheiving my goal (I think). I feel like I am losing my mind trying to figure it out I have made each major box a different color for purposes only of trying to get the layout right and figuring out what each element is actually doing - so ignore all the funky colors. I tried using a background image to create a faux side column (hot pink border) that I hoped would do the trick - however, I can't even get it to show up. I realize there has got to be something I am over looking - but what??? I tried using the css toolbar helper - the bg image is outlined but not showing up?? There are no broken images either ??? Click here to see the page So here is my css: Code:
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 100%;
background-color: #660099;
padding-top: 10px;
position: relative;
}
#sideColumn {
float:left;
width:155px;
height: 100%;
background: url(images/blue.gif) repeat-y;
border: 1px solid #FF00FF;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
margin-left: 175px;
background-color: #99FF00;
}
Here is my xhtml: Code: <body>
<!--begin page -->
<div id="page">
<!--begin header -->
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span> </div>
<!--end of header -->
<!--begin topbar -->
<div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li><a href="other_regions.html">Other Regions</a></li>
</ul>
</div>
<!--end topbar -->
<!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn"> <span class="category">Products</span>
<ul>
<li><a href="products/spirometers.html">Spirometers</a></li>
<li><a href="products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="resources/customer_support.html">Customer Support</a></li>
<li><a href="resources/training_services.html">Training & Services</a></li>
<li><a href="resources/exhibitions.html">Exhibitions</a></li>
<li><a href="resources/newsletters.html">Newsletters</a></li>
<li><a href="resources/downloads.html">Downloads</a></li>
<li><a href="resources/useful_links.html">Useful Links</a></li>
<li><a href="resources/industry_information.html">Industry Information</a></li>
<li><a href="resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p class="home">Vitalgraph offers a wide range of spirometers along
with other asthma management equipment with over 40 years experience.
From simple hand-held units to sophisticated Windows based spirometry
systems, we have it all. Check out our full line of respiratory equipment
under the product category.</p>
<p class="home"><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable --> </div>
<!--end of main column -->
</div>
<!--end of wrapper-->
</div>
<!--end of white border -->
</div>
<!--end of page -->
</body>
so I have a side menu & main content inside a main container which has background so it looks like side menu & main content have diff. backgrounds and they all of same height.. Problem: I would like to add something to the BOTTOM of the side menu but am not able to do so.. this text has to appear at the bottom of the page even if content of side menu is less.. I could do "position:absolute" and give it top:870. but this is not dynamic as when the main content is larger it appears this text is in the MIDDLE rather than at the bottom? Ok, heres what is driving me nuts: Pretty typical 2 column layout, header, footer, etc. Although here's the glitch...I'm using css and js to round the corners on most of my divs, so while the js approach works it successfully destroys my rounded corners, this is also why the fauz column hack won't work either. I have an rss feed in my #sidebar div which being dynamic adjusts the div height to fit the content, great! my main content area (in this case 2 divs in a container) is fairly static content set at 800px. Now I can adjust the height of the rss feed however it also successfully breaks my corners (basically the rounded corners stay some where around 750px but the div does expand to 800px with a squared bottom) Is there anyway to either set the height of my #sidebar or is it possible to have my main content area always expand to the #footer? Geez or anything to solve this problem. Here's my CSS: Code: div#container{width:100%;margin: 0 auto;background-color: #000000; overflow:hidden;text-align: center}
div#header{width:98%;background-color: #000000;padding:0px 0;text-align:center;margin: 0px 0px 0 10px}
#site {width: 100%;margin: 1px 0px 0 10px}
#sidebar {float: left;width: 24%;background-color: #FFFFCC;border-right: 1px solid #000000;text-align:left; overflow:hidden}
#content {float: left;width: 74%;background-color: #FFFFFF}
div#footer{width:98%;background-color: #000000;text-align:center;margin: 0px 0px 0 10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF;font-weight: bold}
#leftcontent {float: left;width:46%;background:#fff;text-align:left; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#rightcontent {float: right;width:46%;background:#fff;text-align:left;padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#leftcontent h1, #rightcontent h1 {font-family: Verdana, Arial, Helvetica, sans-serif;color: #FF0000;font-size: 14px;font-weight: bold; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 0pt}
/* begin styles for RSS Feed
This is the most basic style to use for a list with no bullets */
.rss_box {width: 200px; background-color: #FFFFCC; padding-top:5px}
.rss_title, rss_title a {margin: 0px 0;padding: 0;}
.rss_items {list-style:none;margin:0;padding:0;}
.rss_item {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: x-small;margin-bottom: 1em;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {}
.rss_item a:hover {}
.rss_date {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;}
/* Styles for gliding layers */
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3 {position:absolute; visibility:hidden;left:0; top:0; z-index:200;width:100px; height:24px;background-color:#FFFFCC;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Here's my HTML (minus content) Code: <div id="container" class="clearfix"> <div id="header" class="clearfix"> </div> <div id="site" class="clearfix"> <div id="sidebar" class="clearfix"> </div> <div id="content" class="clearfix"> <div id="leftcontent" class="clearfix"> </div> <div id="rightcontent" class="clearfix"> </div> <div style="clear:both"></div> </div> </div> <div style="clear:both"></div> <div id="footer" class="clearfix"> </div> </div> Thanks! Dave Hi, I believe this to be a IE bug that causes the middle click (used for scrolling a page) to be disabled on floating objects. I've noticed this before in the past but I don't know what the real cause is. If I remember correctly this problem is fixed in IE 7. The problem is I have 2-3 floating columns centred in the middle of the page (using margin: auto). Now in firefox when you middle click within the floated objects in the middle of the page you are able to use the scrolling function. In IE 6 when you middle click on the object it will not work, you have to middle click outside the boundaries in order to scroll. Does anyone know the cause of this strange behaviour? I did a search but I can't seem to find anything about it. Cheers! Please look at http://casadelsol.tmhdesign.com I have this css #main { width:994px; background: transparent url(../images/stripe_bg.gif) repeat-y 0 400px; } That stripe_bg.gif shows up fine in IE, but not in FF, can someone shed some light? Hi, In IE the sidebar background image appears ok yet in FF it doesnt. ***************** Does anyone know how i can fix this? Another issue that will be a problem in the future is that in IE7 it doesnt display the background or the header correctly Thanks, Mike Pleaes look at this page in FF and IE - www.tmhdesign3.com In FF you see the unwanted gap at the top? The issue is with the <div id="content"> element. If I style that element with a border-top:1px solid transparent the gap closes and it looks fine, but IE does not recognize the transparent on a border. Can someone tell me how I can get rid of that gap in FF? Thanks. Tom Hi, Usual story, ive got the site working great in IE but FF has a little problem with the white background. Its like the content isnt actually inside the inside div: (school section example) <div id="new_outside_school"> - the colour box <div id="new_inside_school"> - the white centre LINK TO SITE HERE ive been messing and got the 'our school' section slightly better but its still not right, any ideas? Thanks. Mike |
|||||||