|
CSS - Height: 100% Is Going Crazy!?
I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all!
Here is my website: http://panik.owphosting.com/home.php And here is my css: Code:
body {
margin: 0px;
color: #000;
font-size: 8pt;
font-family: verdana;
height: 100%;
width: 100%;
background: url("images/bg2.jpg");
}
a {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:visited {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:hover {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
}
h1 {
font-family: verdana;
color: #000;
font-weight: bold;
font-size: 24pt;
}
#header {
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #FBF2D9;
width: 700px;
margin: 0;
}
#main {
position: relative;
width: 700px;
border-left: 2px solid #000;
border-right: 2px solid #000;
height: 700px;
background: #FBF2D9;
}
#leftcontent {
position: absolute;
padding-top: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: 2px solid #000;
left: -2px;
background: #FBF2D9;
width: 150px;
}
#rightcontent {
position: absolute;
padding-top: 10px;
padding-right: 2px;
padding-left: 2px;
border-right: 2px solid #000;
right: -2px;
background: #FBF2D9;
width: 150px;
}
#centercontent {
position: absolute;
left: 154px;
padding: 10px;
background: #FBF2D9;
width: 375px;
text-align: left;
}
#moduletop {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: center;
border: 1px solid #000;
background: #26476C;
}
#modulebottom {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
text-align: left;
font-size: 8pt;
border: 1px solid #000;
border-top: 0px;
background: #4184B4;
background-image: url("images/modulefill.jpg");
background-position: 0% 100%;
background-repeat: repeat-x;
overflow: auto;
}
#modulebottom a {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:visited {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:hover {
color: #99D8FE;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
table#news {
color: #000;
font-size: 10pt;
font-weight: bold;
width: 375px;
margin: 0;
border: 0;
vertical-align: top;
}
table#news div.head{
color: #237CBB;
font-size: 10pt;
width: 375px;
font-weight: bold;
}
table#news div.date{
color: #919191;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.detail{
color: #000;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.foot{
color: #000000;
font-size: 10pt;
font-weight: bold;
margin: 0;
width: 375px;
}
shout{
width: 130px;
overflow: auto;
}
Similar TutorialsHi, I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment. I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height. Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me. Any help would be greatly appreciated. Thanks, Steph Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Resolved! Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE? You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly Site I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it?? Click Here for My Website CSS code - Code: body {
background-color:#0071E1;
background-image: url(images/head.png);
background-repeat: repeat;
margin-top: 25;
margin-bottom: 25;
margin-right: 0px;
margin-left: 0px;
}
/* LAYOUT */
#catbg {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg1 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 20px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
width: 98%;
}
#catbg2 {
color: #009900;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg3 {
color: #990000;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg4 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
/* Surrounding div */
#wrap {
width: 961px;
margin: 0 auto;
padding: 0;
top: auto;
}
/* Surrounding the nav and main content */
#wrapper {
width:925px;
align:center;
background-color:#FFFFFF;
background-image: url(images/newbkZ2.png);
background-repeat: repeat;
vertical-align: top;
border-top: #005FAC;
border-right: thin inset #005FAC;
border-bottom: #005FAC;
border-left: thin outset #005FAC;
height: auto;
padding: 0px;
margin: 0 auto;
}
/* Header surround */
#shad-l {
padding-left: 18px;
background: url(images/shadow-l.png) 0 0 no-repeat;
}
#shad-r {
padding-right: 18px;
background: url(images/shadow-r.png) 100% 0 no-repeat;
}
#header{
position:relative;
height:215px;
overflow:hidden;
background: #FFFFFF url(images/newbkZ2.png) repeat;
top: auto;
width: 925px;
margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
display: block;
width: 900px;
height: 215px;
cursor: pointer;
padding-left: 30px;
padding-top: 10px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative;
background-position: center;
top: auto;
padding-right: 0px;
padding-bottom: 0px;
}
/* Navbar */
#nav {
margin: 0 auto;
width:925px;
height:38px;
font-family:Arial;
font-size:14px;
color:#ffffff;
background-image: url(images/navbg3.jpg);
background-repeat: repeat;
border-right-width: thin;
border-left-width: thin;
border-right-style: inset;
border-left-style: outset;
border-right-color: #005FAC;
border-left-color: #005FAC;
line-height: 1.8em;
font-weight: bold;
}
#navlist li
{
display: inline;
background-repeat: no-repeat;
padding-left: 10px;
}
#navlist a
{
font-weight: bold;
text-transform: none;
text-decoration: none;
font-size: 16px;
line-height:38px;
}
#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}
#navlist a:hover
{
color: #FFFF00;
background-repeat: no-repeat;
background-position: 0;
background-image: url(images/green.png);
padding-left: 25px;
}
/* Main content Area */
#box1 {
margin:10px;
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px;
font-weight: bold;
float: left;
clear: left;
}
#box2 {
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
#box3 {
text-align:center;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
/* Height Gap */
.hg {
margin:0 auto;
height:5px;
}
#footer{
background: url(images/footer-bg.png) repeat-x 100%;
text-align:center;
margin: 0 auto;
font-size:12px;
font-family:Tahoma;
color:#FFFFFF;
position: relative;
height: 130px;
width: 925px;
font-weight: bold;
line-height: 1.2em;
}
/* LINK STYLES */
/* Linkpage links */
a.weblink {
font-family:Arial;
font-size:16px;
text-decoration:none;
color:#0066CC;
font-weight: bold;
}
a.weblink:hover {
font-family:Arial;
font-size:16px;
text-decoration:underline overline;
color:#990000;
font-weight: bold;
}
/* Footer links */
a.footerlink {
font-family:Tahoma;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}
a.footerlink:hover {
font-family:Tahoma;
font-size:11px;
color:#FFFF00;
text-decoration:none;
}
/* All other links */
a {
font-family:Tahoma;
font-size:11px;
color:#0066CC;
text-decoration:none;
}
a:hover {
text-decoration:overline;
color: #990000;
}
#left {
float: left;
margin: 0;
padding: 20px 20px 0 30px;
width: 300px;
}
#right {
float: right;
margin: 0;
padding: 20px 30px 20px 20px;
width: 400px;
}
/* No image should have a border when linked */
.a img {
border: 0;
}
#bodyarea {
padding: 10px;
margin: 0;
background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
font-family: Tahoma;
font-size: 9px;
color: #0066CC;
font-weight: bold;
text-align: right;
}
/* text classes */
.smalltext {
font-size: 10px;
font-family: verdana, sans-serif;
}
.middletext {
line-height: 14px;
}
.normaltext {
font-size: 12px;
}
.largetext {
font-size: 16px;
}
/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #0066CC;
background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hi - I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain. The website works fine in Firefox and Safari, and almost all the pages work fine in IE. The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari. It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP. The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place. If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code. It would be greatly appreciated if you could let me know if you would like to help me out. I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all. Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member. please click here to read my message. My code: Code:
#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}
Please help me CSS gods. I want pure CSS Menus. I have tried two independent times to get working menus for a site and every time one of the IE browsers is killing me. URL Blocked Works fine on FF and IE6. IE7 users complain. URL Blocked Works fine on FF but IE6 has fat border on right and the whole page jumps a pixel when looking at sub menus. I also can't get it centered or the title evenly spaced on any browser. At this point, I don't care which I get working. But If I get sample2 working then I can add many more pages. The CSS is main.css in the respective folders. Ohh well, the forum won't let me give links to my samples. Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example: normal view: nav | content nav | content nav | content footer-------- problem in ie 5.01 Code: | content
| content
| blank
| blank
nav | blank
nav | blank
nav | blank
| blank
| blank
| blank
| blank
footer--------
Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with. Here is my xhtml And here is my css I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly. Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc. Cheers After doing some small changes to the design I checked it in IE6 and its not slightly out of place but very messed up. The site is http://www.orchard-homes.co.uk/, has anyone got any ideas? It seems like its been stretched vertically... Thanks! If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help? thx dh Hi Everybody, I am really struggling here. I came up with a nice layout in photoshop and then marked up the HTML/CSS. Everything looked great until I tested the browser zoom in. On every single browser, the footer background image stops repeating. Here is a screenshot: You can clearly see that the footer just stop repeating. Please look at the css and the html format. I am developing this layout on my PC so I can only attach the code... I can't provide a link to the server. Thanks in advance and here's the CSS: Code: * {
margin: 0;
padding: 0;
}
html, body {
font-family: Helvetica, sans-serif;
background: url(../images/body_bg_2.png) repeat-x top #ffffff;
margin: 0;
font-size: 100%;
height: 100%;
}
img {
border: none;
}
p {
font-size: 1em;
line-height: 1.2em;
margin-bottom: 0.8em;
}
a {
color: #540000;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
h1 {
font-size: 1.7em;
letter-spacing: 1px;
margin-bottom: 0.8em;
}
h2 {
font-size: 1.3em;
letter-spacing: 1px;
margin-bottom: 0.8em;
}
h3 {
font-size: 1.2em;
font-style: italic;
letter-spacing: 2px;
color: #5e0d04;
margin-bottom: 0.8em;
}
.clear {
clear: both;
}
div#wrapper {
width:100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
}
div#header {
width: 960px;
margin-left: auto;
margin-right: auto;
}
div#header a {
color: #95ba48;
}
div#logo {
height: 110px;
width: 295px;
float: left;
}
div#header_right {
float: right;
width: 295px;
padding-top: 50px;
text-align: right;
font-size: 1em;
color: #95ba48;
}
#header_right p.header_rss {
margin-left: 35px;
margin-top: 17px;
float:left;
}
#header_right #header_rss {
margin-top: -13px;
}
div#navigation_wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
}
div#navigation {
float: left;
width: 700px;
margin-top: -17px;
}
div#search {
float: right;
width: 260px;
text-align: right;
margin-top: -5px;
}
input[type=submit] {
border: none;
padding: 3px;
text-decoration: none;
font-size: 1.2em;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #4A4A4A;
color: #ffffff;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
#searchform #search {
border: 1px solid #999;
background-color: #c3e570;
padding: 3px 2px 2px 0;
height: 23px;
width: 215px;
line-height: 1;
font-size: 1.1em;
letter-spacing: .1em;
vertical-align: top;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover
{
background: black;
cursor: pointer;
}
ul#nav {
width:100%;
list-style: none;
margin: 0px 0 0 0px;
background: url(../images/nav_bg.png) repeat-x top;
}
ul#nav li {
display: block;
float: left;
margin-top: 15px;
}
ul#nav li a {
text-decoration: none;
font-size: 1.3em;
font-family: Helvetica, sans-serif;/*, Verdana, Geneva, Helvetica, sans-serif;*/
color: #4a4a4a;/*#9f9f9f;*/
border-right: 1px solid #ccc;
padding: 7px 15px 7px 15px;
}
ul#nav li a:hover {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#index li.index a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#network_sites li.network_sites a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#recent_tutorials li.recent_tutorials a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#about_us li.about_us a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
#contact_us li.contact_us a {
color: #95ba48;
border-bottom: 3px solid #95ba48;
}
div#content {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding-bottom: 100px;
overflow:auto;
}
div#left_column {
float: left;
width: 600px;
}
div#right_column {
float: right;
width: 330px;
margin-left: 30px;
text-align: right;
}
div#footer_wrapper {
background: url(../images/footer_bg.png) repeat-x #dcdcdc;
width: 100%;
position: absolute;
margin-top: -100px; /* negative value of footer height */
height: 100px; /*still needs to be changed as things are added on to the footer*/
clear:both;
}
div#footer {
width: 960px;
margin-left: auto;
margin-right: auto;
padding-top: 35px;
}
div#footer_left {
float:left;
text-align: left;
font-size: 0.9em;
}
div#footer_left p.copyright {
margin-top: 10px;
}
#footer_right p.footer_rss {
margin-top: 20px;
padding-right: 55px;
}
div#footer_right #footer_rss {
margin-top: -50px;
}
div#footer_right {
float:right;
text-align: right;
font-size: 0.9em;
}
div#footer a {
color: #272727;
}
Here's the HTML: Code: <?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>PSD_Slice</title>
<link rel=StyleSheet href="style/style.css" type="text/css" media="screen, print" charset = "utf-8" />
<link rel=StyleSheet href="style/search.css" type="text/css" media="screen, print" charset = "utf-8" />
</head>
<body id="<?php echo $view; ?>">
<div id="wrapper">
<div id="header">
<div id="logo">
<span><a href="/" title="Go to homepage"><img src="images/logo_test.png" alt="Wishlistr" /></a></span>
</div>
<div id="header_right">
<p class="header_rss">
<a href = "http://www.tuts4.me/feed" title = "Subscribe to Tuts4.me Feed" target = "_new">
RSS Feed By Feed burner
</a>
</p>
<div id="header_rss">
<a href = "http://www.tuts4.me/feed" title = "Subscribe to Tuts4.me Feed" target = "_new">
<img src="images/rss_green.png" alt="Subscribe to Tuts4.me Feed" />
</a>
</div>
</div>
<div class="clear"></div>
</div>
<div id="navigation_wrapper">
<div id="navigation">
<ul id="nav">
<li class="index"><a href="index.php" title="Return home" target="_top">Home</a></li>
<li class="network_sites"><a href="network_sites.php" title="Network Sites" target="_top">Network Sites</a></li>
</ul>
</div><!--#navigation-->
<div id="search">
<form action="page.html" method="post" name="search" id="searchform">
<div>
<input type="text" name="search" id="search" value ="Search..." onfocus="if(this.value=='Search...'){this.value=''};" onblur="if(this.value==''){this.value='Search...'};" />
<input type="submit" value="Go" alt="Search all tutorials" />
</div>
</form>
</div><!--#navigation-->
<div class="clear"></div>
</div><!--#navigation_wrapper-->
<div id="content">
<div id="left_column">
<h1>Title of documents</h1>
</div><!--left_column-->
<div id="right_column">
<h2>Right Column</h2>
<br />
<h3>More Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisl lacus, iaculis id dignissim quis, dapibus eu lacus. Nam nec nunc at diam lobortis bibendum eget nec nibh. Duis accumsan sapien nec felis convallis sit amet pharetra urna sodales. Nam nec arcu nibh. Praesent id semper nisl. Integer luctus venenatis tempus. Morbi consequat, massa a egestas tempor, urna tortor gravida lectus, ac interdum diam nunc nec diam. Duis suscipit pulvinar ipsum ut iaculis. Nullam dapibus egestas leo a sodales. Sed metus metus, luctus consectetur sagittis sit amet, laoreet et purus. Praesent lacinia dapibus ligula, et condimentum nibh facilisis vel. Duis condimentum imperdiet elit, vel interdum ipsum tristique quis. Sed sit amet lorem scelerisque nunc ultricies scelerisque nec rutrum lectus. Morbi erat risus, rutrum eu semper ut, pretium a tellus. Phasellus ultricies facilisis mi a euismod. Maecenas dapibus ante non sapien aliquam pellentesque ornare turpis vulputate. Nullam sit amet condimentum odio. Cras ut tempor est.</p>
</div><!--right_column-->
<div class="clear"></div>
</div><!--content-->
</div><!--#wrapper-->
<div id="footer_wrapper">
<div id="footer">
<div id="footer_left">
</div>
<div id="footer_right">
<p class="footer_rss">
</p>
<div id="footer_rss">
</div>
</div>
</div><!--#footer-->
</div><!--#footer_wrapper-->
</body>
</html>
How is it that safari is toooooo stupid to recognize the fact that I've specified background images... it also doesn't recognize the display:inline attribute. Are these just things that are unsupported in safari? I can't for the life of me figure out why it's doing this. Code:
#tabs ul {
padding-left: 0;
margin:0px;
display: inline;.
}
#tabs ul li{
width:170px;
height:25px;
list-style: none;
display: inline;
text-decoration:none;
z-index:1;
}
#tabs ul li a{
height:25px;
background-image: url("../images/mainTab.jpg");
background-repeat: repeat-x;
display: inline;
font-size: 10pt;
color:#fff;
text-decoration:none;
}
#tabs ul li a.selected{
background-image: url("../images/mainTabSelected.jpg");
background-repeat: repeat-x;
color:#000;
}
|
|||||||