|
CSS - Bizzare Border Extending Higher...
At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox.
See he www.djoj.net/test/indexwierd.html Css: (Look at the way bottom of the CSS. The last 3 styles) www.djoj.net/test/styles2.css So I changed my div's to span's and wrapped them in one div labled "bottom" Now look... www.djoj.net/test/index.html Css: (once again, at the bottom) www.djoj.net/test/styles.css How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning. Thank you in advance! ~B Similar TutorialsIn IE-only.com Firefox is extending the bottom border of my blogTitle divs the lenth of the page. The other browsers are fine with the code. Tested on FC4, and IE was tested on XP Home. All are the latest versions (Fx:1.5, Konqi:3.x, Opera: 8.5, IE: 6.x). Why would Firefox do this? How can I correct this? Thank you. My problem is that the site I'm developing for my church displays wonderfully in FireFox Opera Netscape BUT in IE the headings in the content block refuse to be transparent so that my background image shines through like it does for the rest of that block. Here's the page...any help would be appreciated much! Parkview Baptist Church I just noticed that if I resize the IE to a real narrow window, it stacks the first h2 and pushes the background down enough that all of that first h2 shows, but the subsequent on is not visible. Don't know if that helps or not... Best Regards, Jim I would rather be exposed to the inconveniences attending too much liberty than to those attending too small a degree of it. -- Thomas Jefferson So I'm working on a website of mine that needs a varying amount of content boxes (divs with content in) per page. The way I want them to display however, is the catch. So I'll explain what I want first, and then show what I've done at the moment. What I want I want them to display at around 10% from the bottom of the user's page. And be anchored to that point. So no matter what size the browser window is, the content will be fairly similarly laid out (within reason). SO. If a page needs only one content box (one div with content in), I want the bottom left corner of that div to be 10% up the users browser window from the bottom of the page. BUT. Then if I want 2 divs of content on that page, I want the 1st div to be pushed up the page by the 2nd, and have the 2nd div's bottom left corner 10% up the user's page. And then with the same pattern every time I add another div. So to try and make sure you get it, I drew these. On a page that needs 1 content box - http://img163.imageshack.us/img163/945/1div.jpg On a page that needs 2 content boxes - http://img715.imageshack.us/img715/33/2divs.jpg On a page that needs 3 content boxes - http://img693.imageshack.us/img693/1484/3divs.jpg So what I've done Is.. used a container div that is situated at that point of the page that I want the divs to align from. But because I failed at trying to relatively position them, I just positioned them with absolute values. Which is far too rigid for what I need. At the moment it has 3 divs to show the process I want. The 1st content div obviously then has to stay at the bottom, so I need to move my content to other divs when I want to add something below an existing one. Another problem/requirement is that if one of the divs has more lines of content than the other, big inconsistent gaps emerge. So depending on the size of the div, it would need to get pushed further, or less, up the page. HTML Code: <div id="content-container"> <div id="content1"> abc </div> <div id="content2"> def </div> <div id="content3"> ghi </div> </div> CSS Code:
#content-container {
width: 1px;
height: 1px;
position: absolute;
bottom: 10%;
left: 10%;
}
#content1 {
width: 600px;
height: 10px;
position: absolute;
bottom: 110px;
}
#content2 {
width: 600px;
height: 10px;
position: absolute;
bottom: 250px;
}
#content3 {
width: 600px;
height: 10px;
position: absolute;
bottom: 390px;
}
Basically I want it to be flexible, rather than rigid. Which I had hoped could be fixed with relative positioning, but I couldnt manage that. Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. I'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway http://www.psyberarts.com/work/prism/index.html There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away. Should I just make a repeat image for the footer and do it that way? Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out. Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs. Here is the HTML: Code:
<!-- TOP -->
<div class="topOutter clearFloat">
<div class="topInner floatLeft">
<div class="floatLeft">
<div class="floatLeft" style="width: 21px;">
<img src="customStyle/structure/top_left.gif" alt="" />
</div>
<div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">
<a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a>
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_end.gif" alt="" />
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_right.gif" alt="" />
</div>
</div>
<!-- /TOP -->
<!-- MIDDLE -->
<table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
<tbody id="collapseobj_forumbit_16" style="">
<tr>
<td class="thead" style="width: 100%; height: 17px;"></td>
</tr>
</tbody>
</table>
<!-- /MIDDLE-->
<!-- BOTTOM -->
<div class="bottomSpacer bottomOutter clearFloat">
<div class="floatLeft">
<img src="customStyle/structure/blc.gif" alt="" />
</div>
<div class="floatRight">
<img src="customStyle/structure/brc.gif" alt="" />
</div>
</div>
<!-- /BOTTOM -->
The CSS Code (spacer and top/middle classes are just bordering and bottom margins): Code:
.clearFloat { overflow: hidden; }
.floatLeft { float: left; }
.floatRight { float: right; }
Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine. And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem. Thx. I really like this menu: http://alistapart.com/articles/horizdropdowns (see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm) My problem is that it only works in one level. How can I modify it to support more levels? Or do you guys know any simular menu, that support more levels? hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days... Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. I have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window. I dont think its box model issue because there is no major vertical padding..any ideas? Not 100% sure if this is CSS related, however: The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.) I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do I have a div that has a table inside of it. Even though the table expands with content added, the div does not. It's important to me that the div extend with the table because this div in question has a background shadow border for the table. Here is the CSS: Code:
#right {
float: right;
width: 80%;
height: 100%;
}
#rt_brdr {
height: 100%;
width: 100%;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/r_brdr.gif) repeat-y right;
}
My HTML: Code:
<div id="right">
<div id="rt_brdr">
<table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
</tr>
<tr class="white_fill">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
</tr>
</table>
</div>
</div>
I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot. I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements. It has tiered drop downs which extend off the end of the page to the right. Is there a way to make them flip left ONLY if they are at the end of the page? I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy. Anyone else encounter this issue and how did they resolve it? It's hard for me to explain this so bear with me. This is the page in question. The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch. I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right. I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers. Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to? Thanks in advance. Tim I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it. Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
I guess let me start with centering. I have Code: body {
margin: 1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.75em;
background-color: #6E4E1C;
text-align: center;
}
#wrapper {
background-color: #343457;
width: 775px;
position:absolute;
margin: 0px auto;
text-align: left;
By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll. (actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm 2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions? Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it. I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet). You guys are great for newcomers - I know I really appreciate the help! Sarah I'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem. I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers. Example 1: URL. As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs. Example 2: URL. Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content. The effect I'm looking for is something like this: URL. My CSS is here URL. First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too. Thanks in advance for any help you can offer. |
|||||||