|
CSS - Css Min-height Driving Me Crazy!
Hi,
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 Similar TutorialsI'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). 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. Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it /* Style for Entries in Category View (Cards View) */ /* -------------------------------------------------------- */ table.sobi2Listing { } table.sobi2Listing td { vertical-align: top; float: left; height: 1%; width: 97%; } /* new */ div.vcard_item { margin: 1px 0px 2px 0; padding: 6px; width: 97%; border:1px solid #dddddd; background-color:#fbfaf2; -moz-border-radius: 5px; The actual page is findawebsitedesigner.info/directory-2.html If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help. Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page: Code: <body> <div id="issingle"> <div id="container"> <div id="sitename"> <a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a> </div> <div id="mainmenu"> <ul> <!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>--> <li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li> <li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li> <li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li> <li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li> <li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li> <li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li> <li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li> </ul> </div> And here is the css pertaining to that code: Code: body {
background:#fff;
color:#303030;
font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
margin:0 auto;
padding:0;
text-align:center;
width:850px;
}
#container {
position: relative;
background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
color:#303030;
border:1px solid #C8C8C8;
margin:10px;
/* padding:10px;*/
text-align:left;
height:598px;
}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
position: absolute;
right: 10px;
top: 27px;
margin-right: 5px;
}
#mainmenu li.page_item {
float:left;
/* height:35px;*/
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
border-right:1px solid #b0b0b0;
color:#808080;
display:block;
margin: 0;
padding: 1px 8px;
text-transform:lowercase;
}
Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all. Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info. Thank you!! J Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates. I'm trying to convert a horrendous table layout into CSS. What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo. I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing. This is my current code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
<style type="text/css">
body {margin: 0px; padding: 0; background-color:#ffffff;}
#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }
</style>
</head>
<body>
<div id="header">
<div style="width: 425px; float: left;">
<img src="logo.jpg" width="220" height="66" alt="logo">
</div>
<div style="float: right;">
<p>This is annoying</p>
</div>
</div>
<div id="nav">
</div>
</body>
</html>
Have a look at this page http://aenui.com/test/hg.html It is exactly the same as the wrapper-free holy grail layout as demonstrated on AListApart (http://www.alistapart.com/d/holygrail/example_4.html), except that I added 2 more divs in the center column. I floated the 2 divs to the left and I expect the 2 divs to start stacking side by side but no, it doesn't do that. Apparently this only happens in the holy grail layout. Does someone have a fix? I'd hate to abandon the otherwise elegant holy grail layout just because of this. 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;
}
Hey, What's messing me around is trying to have three tables next to each other in a row, like; Code: <div style="float:left:"></div> <div style="float:left; width:100px;"></div> <div style="float:left; width:100px;></div> Say someone is viewing the website with a 1000px width resolution. I want the first table to expand to 800px and the last two tables to take up their 200px. I can't seem to get this working. If I add width:100%; to the first table it takes its own row and pushes the other two div's below it. Is there a CSS property to make it take up 100% of the availible space, without pushing the other div tables to the row below, unless the contents of the first table would force a horizontal scroll bar? (i.e if the first table contents can't be shrunk any more, but the user still shrinks their browser width, then it pushes the two other div's below to avoid a scroll bar) Thanks for your time, -Ross Take a look at this page http://www.gameworldx.com/test.html I removed most of the html exept the part giving me problems, but all of the CSS is there. You will see a blue bar(footer) and the white bar (bottom). Both of the links are blue and bold. Why? I have no idea. That is the problem. I noticed that is I remove the CSS for one div or the other, the opposite div shows correctly, but I dont know why it does that. Can anyone see any problems? It's really late, and I am tired, so its gotta be a really stupid mistake. Thanks! Hi everyone! I've been struggling with a few problems with a new site I have just developed in HTML5 and CSS3... These problems only occur in IE8 (and compatibility mode of)...I have IE9 installed and I can't reproduce any of the problems when I use compatibilty mode, however when I use IE Tester I can view the issues...which are.... 1. When I click on a link in the footer or in the top of the header (home/contact) they are assigned 'visited' class but this makes them higher than the other links in the list... could this be anything to do with the 'nav' styling? 2. I can't produce bottom borders in the sub menus of the main navigation - I have tried removing padding, setting relative/absolute positioning and z-index values as has been suggested in other resources and nothing works!!! If anyone can give me any help at all...or if you need any further information or access to my style sheets etc please let me know - I will really appreciate it! Thanks in advance...Rachel Please visit this page - http://www.tmhdesign3.com/real-estate-broker.asp See the gap, about 10px, on the page just below the header? For the life of me I can't get rid of it in FF. I opened Firebug and specified a top:-10px on the content div and it closes the gap. BUT, when I open my css file on the server and chagne that spec and then open the page I still have the gap??? Thanks for any help. 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! Here is my website... in progress... xygps .com .au See my wrapper border extending up into the header at the top? I want this hidden under the header backgrounds. I have been messing around with z-index for ages with no luck... can anyone point me in the right direction?? sorry, this is probably a super newbie question but I just can't work it out!! http://wrath.wr.funpic.org Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why? When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up. Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE. Thanks a lot. If it works in Netscape, it will not work in IE If it works in IE, it will not work in Netscape. Soo, what am I to do? Okay, Im trying to make a table bg have an opacity of 40%. I've gone over the net to figure out the problems, knowing that filter:alpha{} is not recognized by Netscape. So, I found some information to help overcome Netscape woes, and now the opacity isn't work in IE. I need help before I rip all my hair out. So below is what Im working with. Code:
<html>
<head>
<style type="text/css">
#menu {
background-color: #FFFFFF;
filter: alpha(opacity=40);
filter: progid;:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
position:relative; top:0;
}
.tdbg {
background-color: #FFFFFF;
filter: Alpha(Opacity=40);
}
</style>
</head>
<body>
<table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
<tr>
<td align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdbg">FOO</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><div id="menu">FOO</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
So, basically the top cell is "correct" in IE, but the bottom cel is not. And opposite for Netscape (7.0+) How can i fix it so its the same for both browsers? 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. |
|||||||