|
CSS - Newbie To Css - Footer Breaks Out Of Container
kutassy.com/RedApple/index.html
kutassy.com/RedApple/css/style.css I'm trying to get a centered, fixed width design. so far its adequate but appears to be broken in Firefox and Safari. Its not tooo bad with IE but i guess thats by accident more than design. The footer should hopefully be in the same "container" as the content/everything else in order to get that drop shadow effect of the main background. In Firefox, the footer butts to the left of the browser. In IE, it seems to behave... Any help gratefully recieved. Similar TutorialsI'm attempting to get it so when the main content div exceeds my min-height specifications, that it expands the div, which in turn expands the container with an absolutely positioned footer at bottom:0;. Works fine in all newer browsers with the exception of IE7. What do I need to do to get it to expand in that version? Here is the link to the page: http://www.chcs-ut.com/chcs-new.php And the stylesheet: http://www.chcs-ut.com/css/style.css Also, I would really rather not have to specify a min-height for my main content div. I'd rather just have it automatically fill to 100% of the main container that is set to 100% height and min-height, so that the footer automatically appears at the bottom of the screen if the content is not large enough to push it down there by itself. Can't seem to get it to work, though (in ANY browser) without specifying a min-height for the main content div. Problem with that is different resolutions/browsers would require a different value, so hard-coding it isn't a desireable solution. Any thoughts? EDIT: Both problems were fixed by adding "height:auto !important" to my main content container, instead of specifying a "min-height". Works across the board! Hi I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan I've been working on putting a css/js text navigation together which thus far has seemed to work as intended on a PC. This morning when I checked it on a mac, it broke down. Technically it breaks down gracefully I suppose... All links are present and the nav is displayed fully expanded. The problem is that this nav is going to have hundreds of links, and having it fully expanded just isn't practical. If anyone could take a minute to look at my css & js to see if there's something simple that I'm missing, it'd be great. You can look at my example page he http://www.whitesagemedia.com/cssnav.html All css & js is included in the ssource - no attachements. Thank you, thank you, thank you, to anyone who can help me out. -Chet Hi: I have a MySQL/PHP generated form letter which gets printed and mailed. I have extablished a CSS font (class?) with a "page-break after" parameter as shown he PHP Code: h4 { font-family: Arial, Sans-serif; font-size: 14px; font-weight: 500; text-align: left; page-break-after: always;} This works great on a PC running IE. However, On a Mac, running OSX, the page breaks are entirely ignored and it is printed as a single long page. I have tried using other Browsers (Opera, Netscape, and Safari) and they all heve the same problem. Does anyone have a suggestion? Thanks Sean There must be a better way to accomplish this... I need a line break between the two headers in the page below. As it stands it works in Firefox and IE with <br> tags but this seems sloppy.....Is this what the clear element is for? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#cccccc;
}
#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 1px solid #808080;
background-color:#ffffff;
}
#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}
#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}
#01 {
position:relative;
}
#02 {
position:relative;
margin-top:100px;
}
#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}
</style>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="01">Header 1</div>
<div id="b1w"></div>
<div id="b2w"></div>
<div id="b3w"></div>
<br><br><br>
<div id="02">Header 2</div>
</div>
</div>
</body>
</html>
Ok people, I have a page that contains 2 tables, one beneath the other... The table at the top can vary in height, but the table at the bottom is of fixed height... What I want to do is put some sort of "page break" in, so that the second table is always printed on a second piece of paper... Any ideas anyone? Hey there. Is it possible to add a line break so that the following markup... html Code: Original - html Code <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> ...looks like this? Posts: 33 Topics: 4 Basically, I want it to be like display: block, but only to the RIGHT of the text. Does that make sense? Just like adding a <br />, but with different HTML. The following is how I have always done my navigation. But in IE7 when I zoom above 100% the links seem to squash up and the hit area move away from the link! You can see this at www.stephaniedubois.co.uk What can I do to stop this? Thanks div id="topnavbar" class="navTextTop"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="gallery.html">GALLERIES</a></li> <li><a href="exhibit.html">EXHIBIT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> CSS #topnavbar { text-align: center; position: relative; top: -25px; margin: 0px; padding: 0px; } #topnavbar li { display: inline; } #topnavbar ul { list-style:none; } .navTextTop a:link, .navTextTop a:visited { font:11px/20px Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; letter-spacing: 0.13em; padding-left: 10px; padding-right: 10px; } .navTextTop a:hover { color: #000000; text-decoration:underline; } Hi, This is the page i constructed using CSS. http://81.137.250.65/champs/main.html As you can see at the top of the page, when you hover links eg "about" , "booking" a drop down menu appears. This drop down menu calls a Javascript file which is using a stylesheet. "Style.css" for the formatting of the drop down menu. My colleague gave me some ASP.net code for the login form, as in the sample URL above the login form is not functional. As soon as i enter the asp.net code, all the formatting for the Drop Down menu breaks completely. The positioning, coloring etc is all lost. The menu appears at the bottom of the page, and the hyperlinks are all displayed as tradional blue underlined links. The page itself still appears fine, and doesnt seem to break. So the asp.net code is not affecting the css in the page itself, but the drop down menu I dont know if this is a asp.net problem or a CSS problem. My guess is that its the way the CSS for the drop down menu i setup? Ive only been doing CSS for about 6 weeks, so you will notice the code is not the neatest. I am open to constructive criticism. If anyone can help with this issue, i would appreciate it. Thank you eemo I have coded my css file to display a border and change the background color of any text I put inside of <p> tags. It seems to work fine until I have to create a new line using <br> then it ignores everything after the <br> and strips the styling. My css is attached below: Quote: p.doubleSpaced { line-height: 200%; text-align: left; background-color: #eeeeee; border: #dddddd 2px solid; padding: 10px 15px; } My page can be viewed he http://dev.asbco.com/products/insti...al-recrational/ Thanks for the help! I have been pulling my hair out on this one because for the life of me I cannot make it work. Here is my page: www.nova-dataonline.com Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image. Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding here is the relevant markup: PHP Code: <div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </div> and css: Code:
.featured{
visibility:visible;
width:410px;
height:350px;
position:absolute;
top:250px;
left:340px;
border:1px solid #999999;
border-left:none;
background-repeat:no-repeat;
background-position:center;
background-image:url(images/message/feat.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
padding:102px 27px 29px 29px;
}
#feat_1{visibility:hidden;}
and javascript (if it is even relevant to the problem): PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } --> </script> any idea? Hi everyone, I am stumped at why I'm having this problem in FF only but I'd appreciate any input as to why it's happening. Take a look at www.spotabusiness.com in FF and see how there is a huge whitespace above the content regardless of what links you click. It looks fine in IE6 and 7. Thanks Can anyone give me a hint as to why the CSS drop-down menu on this page breaks in IE7: http://www.mediamogulsweb.com/ I've looked at it for while and I'm not getting anywhere. Thanks. I have a 2 column layout using a left float which breaks in IE, sending the right column way down the page. It works perfectly in Firefox. I've been staring at it for days, and can't grok what I'm doing wrong. Please help! Code: body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#container {
background-image: url(images/background.gif);
background-repeat: repeat-y;
width:700px;
margin: 0 auto;
margin-top: 10px;
}
#header {
background-color:#FCF6EA;
}
#content {
background-color: #FCF6EA;
width:497px;
float: left;
padding-left: 0px;
border-style: solid;
border-color: #F8CA52;
border-left-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-top-width: 0px;
padding-top: 5px;
}
#sidenav {
background-image: url(images/navback.gif);
margin-left: 500px;
width: 200px;
}
#container > #sidenav {
width:203px;
}
#footer {
background-color: #ffffff;
background-image: url(images/footer.gif);
clear: both;
}
h1 {font-size: small;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
color: #663333;
}
a:visited {
color: #000000;
}
B. I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom Like on this page, under each of the photos: http://www.sdtars.com/development/events/camp.php What causes the text to appear like: Quote: Originally Posted by In IE Officers discuss TAR Days at an executive board meeting |
|||||||