|
CSS - Page Breaking/formatting
First off, thanks for reading.
I've finally been hit with a document that requires I create some smart page breaking. What I need to do is get the document to have a page break only after certain things and not within those certain things. What I've done is surrounded these things with <div> tags and put this in my stylesheet: DIV {page-break-inside:avoid;} However, this fails miserably. I also looked at this site, but in Mozilla 1.6 and IE 6, the elements were all broken by page breaks. Anyone had any successful experience with this? Thanks in advance, colin Similar Tutorialsok this isnt so much a need for code, more an need for information. I have worked out how to page break Code: <STYLE TYPE="text/css">
H2 {
page-break-befo always
}
</STYLE>
<div class="H2"> </div>
I am assuming this is right, as the page will always break after the <div> But I would like to know how much success people have had with this? I have tried using it and it doesnt seem to work on IE 6.0. Any luck with any other browsers? I am just wondering whether im doing it wrong or it isnt supported fully yet. I have this page: http://www.taleria.net/ken/ It looks beautiful in Firefox but in IE only the page background shows up. If I comment out the entire CSS file the page shows up in IE so it's obviously a problem with my CSS code - but I don't know where the problem is. Any pointers would be appreciated: Code:
<style type="text/css">
<!--
body
{
background: url(http://www.taleria.net/ken/images/bg2.jpg) repeat-x left top;
font-family: arial;
}
td
{
font-family: arial;
font-size: 13px;
}
.navfont
{
font-variant: small-caps;
font-weight: bold;
color: black;
}
a.navfont
{
color: black;
text-decoration: none;
}
.main_heading
{
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
color: #000033;
}
.bodytable
{
background: url(http://www.taleria.net/ken/images/headingbg.jpg) repeat-x left top;
}
a
{
color: #393d5a;
}
/************************/
/* BEGIN SUCKERFISH*/
/************************/
ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: black;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: black;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #393d5a;
border-width: 0 5px;
}
#nav li {
float: left;
position: relative;
cursor: default;
background-color: white;
padding-right: 1.2em;
}
#nav li#first
{
padding-right: 1.2em;
}
#nav li#last
{
padding-left: 1.2em;
padding-right: 0;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(http://www.taleria.net/ken/images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #393d5a;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li li {
display: block;
float: none;
background-color: transparent;
background-image: none;
border: 0;
}
#nav li:hover ul, li.over ul {
display: block;
}
/************************/
/* END SUCKERFISH*/
/************************/
</style>
Hello everyone, I've been working on my school website for some time now - but I recently started over where the markup and style sheets are concerned. Both my html and css validate. This is my html source: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Secondary School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function view_event(url)
{
window.open(url, 'event', 'top=100, left=100, width=200, height=350');
return false;
}
//-->
</script>
</head>
<body>
<div id="container">
<h1> Secondary.School. </h1>
<div id="nav">
<ul>
<li> <a href="index.php"> Homepage </a> </li>
<li> <a href="#"> School Information </a> </li>
<li> <a href="departments.html"> Departments </a> </li>
<li> <a href="#"> Clubs </a> </li>
<li> <a href="#"> SCC </a> </li>
<li> <a href="#"> Resources </a> </li>
</ul>
</div>
<div id="primaryRail" class="rail">
<h2> Contact information </h2>
<p> <b> 127 Maple Street Testo, Orbuk, H58 435 </b> <br />
<b> Telephone: </b> (456) 245-5677 <br />
<b> Fax: </b> (456) 456-4567 </p>
</div>
<div id="secondaryRail" class="rail">
<h2> Our administration </h2>
<p> <b> Principal: </b> <i> Alan N </i> <br />
<b> Vice-Principal: </b> <i> Lucy S </i> <br />
<b> Vice-Principal: </b> <i> Candice H </i> </p>
</div>
<div id="primaryContent" class="content">
<h3> Welcome to the Secondary School website! </h3>
<p><b>XHTML TESTING</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <a href="#"> link testing </a><br />
<a href="#top">Top</a></p><p><b>admin</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.southern</b><br />
test<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.s</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Testing</b><br />
April 09, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test message.<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 05, 2007<br />
Posted by : <b>test</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Test</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Test.<br />
<a href="#top">Top</a></p><p><b>Another test post.</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Just another test.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p> </div>
<div id="secondaryContent" class="content">
<h2>Calendar for April 2007</h2>
<table>
<tr class="days"><td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
<tr><td class="week" title="Sun, 01st April 2007">1</td>
<td class="week" title="Mon, 02nd April 2007">2</td>
<td class="week" title="Tue, 03rd April 2007">3</td>
<td class="week" title="Wed, 04th April 2007">4</td>
<td class="week" title="Thu, 05th April 2007">5</td>
<td class="week" title="Fri, 06th April 2007">6</td>
<td class="week" title="Sat, 07th April 2007">7</td>
</tr><tr>
<td class="week" title="Sun, 08th April 2007">8</td>
<td class="week" title="Mon, 09th April 2007">9</td>
<td class="week" title="Tue, 10th April 2007">10</td>
<td class="week" title="Wed, 11th April 2007">11</td>
<td class="week" title="Thu, 12th April 2007">12</td>
<td class="week" title="Fri, 13th April 2007">13</td>
<td class="week" title="Sat, 14th April 2007">14</td>
</tr><tr>
<td class="week" title="Sun, 15th April 2007">15</td>
<td class="week" title="Mon, 16th April 2007"><a href="calendar.php?dateline=1176699600" style="padding: 0px;" onclick="return view_event(this.href);"><span style="color: red; font-weight: bold;">16</span></a></td>
<td class="week" title="Tue, 17th April 2007">17</td>
<td class="week" title="Wed, 18th April 2007">18</td>
<td class="week" title="Thu, 19th April 2007">19</td>
<td class="week" title="Fri, 20th April 2007">20</td>
<td class="week" title="Sat, 21st April 2007">21</td>
</tr><tr>
<td class="week" title="Sun, 22nd April 2007">22</td>
<td class="week" title="Mon, 23rd April 2007">23</td>
<td class="week" title="Tue, 24th April 2007">24</td>
<td class="week" title="Wed, 25th April 2007">25</td>
<td class="week" title="Thu, 26th April 2007">26</td>
<td class="week" title="Fri, 27th April 2007">27</td>
<td class="week" title="Sat, 28th April 2007">28</td>
</tr><tr>
<td class="week" title="Sun, 29th April 2007">29</td>
<td class="week" title="Mon, 30th April 2007">30</td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
</tr>
</table>
<a href="index.php?m=3">Previous month</a>
<a href="index.php?m=5">Next month</a>
<p style="font-weight: bold;">XHTML TESTING</p>
<p style="font-weight: bold;">admin</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Testing</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Test</p>
<p style="font-weight: bold;">Another test post.</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p>Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. </p>
</div>
</div>
<div id="footer">
<p> <img src="images/tiger.jpg" alt="tiger logo" style="float: left;" /> | <a href="#"> homepage </a> | <a href="#"> school
information </a> | <a href="#"> departments </a> | <a href="#"> clubs </a> | <a href="#"> scc </a> | <a href="#"> resources </a> | <br />
Copyright <span style="font-size: x-small;"> 2007 </span> Secondary
School. </p>
</div>
</body>
</html>
And this is my style sheet: Code:
/* Secondary School CSS Document
/* Page and Link Formatting
---------------------------- */
a
{
text-decoration: underline;
font-family: Georgia;
padding-bottom: 3px;
color: #FF42B1;
}
#nav a
{
text-decoration: none;
font-family: Georgia;
font-size: 12px;
padding: 12px 10px 8px 10px;
color: #F9F9F9;
}
#nav a:hover
{
background: #454545;
}
#nav li
{
display: inline;
}
body
{
background: url('images/header.png') repeat-x;
margin: 0px;
padding: 0px;
text-align:center;
}
/* Divs etc...
---------------------------- */
#container
{
margin:0px auto;
width: 700px;
text-align: left;
}
#container h1
{
margin-top: 60px;
}
#primaryRail
{
width: 350px;
float: left;
}
#secondaryRail
{
width: 350px;
float: left;
}
#primaryContent
{
margin: 55px 0px 0px 0px;
width: 500px;
float: left;
}
#secondaryContent
{
margin: 55px 0px 0px 25px;
width: 175px;
float: left;
}
#footer
{
clear: both;
text-align: center;
background: #EDEDED;
border: #E2E2E2 2px solid;
}
/* Standard Elements
---------------------------- */
h1
{
font-family: Georgia;
font-weight: normal;
font-size: 2em;
color: #F9F9F9;
}
h2
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #454545;
}
h3
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #812F2F;
}
.rail h2
{
color: #FFD11B;
}
p
{
font-family: Georgia;
font-size: .85em;
color: #454545;
}
.rail p
{
color: #F9F9F9;
}
.content p
{
line-height: 1.5em;
}
ul
{
padding: 0px;
}
li
{
list-style: none;
}
table
{
color: #AFAFAF;
}
td
{
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
.days
{
background: #DCDCDC;
font-weight: bold;
font-size: .75em;
}
.week
{
background: #FFFFFF;
font-size: .75em;
}
.nomonth
{
background: #FAFAFA;
}
#swd_info
{
display: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
width: 180px;
background-color: #FFFF99;
color: #000000;
border: 1px solid #000000;
padding: 3px;
font-size: 10px;
text-align: justify;
}
This is how it looks in FF, and that is how I would like to to be in FF, and any common browser that the user may be operating: img133.imageshack.us/my.php?image=ffexampletx6.jpg Thank you! I have 2 pages that use style.css which has all the classes in it. I used to simply drop one page into my web server root dir, open the page and everything worked fine. Now, when I chage pages in the wwroot, it wont format using the css. The first half of the page does format, but the second part does not. I *think* it is something to do with the webserver or PHP. Once I have fixed it (via a reboot) it works fine untill I drop the other page in there and then it breaks again. Below are 2 pics, 2.jpg of what it is supposed to look like and 1.jpg of what it looks like when I get this prob. Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page. Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd. Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup? Thanks! FYI for those interested: the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is body { text-align:center; border:0px solid #000; } #frame { width:830px; margin-right:auto; margin-left:auto; margin-top:auto; padding:0px; text-align:left; } #contentleft { width:175px; padding:0px; left:auto; top:auto; float:left; background:#fff; border:0px solid #000; } #contentcenter { width:480px; padding:10px; float:left; text-align:left; background:#B7C8EE; } #contentright { width:175px; padding:0px; right:auto; top: auto; float:right; background:#fff; border:0px solid #000; } #contentheader { background:#345EA2; width:auto; } p,h1,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; padding-top:10px; } #contentheader h1 { font-size:14px; padding:10px; margin:0px; } #contentright p { font-size:10px} The .asp page I want to use this style sheet on is <!--#include file="headerauth.asp"--> <meta http-equiv="Content-Language" content="en-us"> <body topmargin="0" leftmargin="0"> <link rel="stylesheet" type="text/css" href="sddm.css" /> <link rel="stylesheet" type="text/css" href="box2.css" /> <STYLE> A:link {font-weight:bold} A:hover {background:white;} A:hover {background-color:white;} A:visited {color:green} A:active {color:red} </STYLE> <!--#include file="footer.asp"--> The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css? Just when you thought you got everything under control, something backfires.. lol Please see acengage.com and try the Reach Us tab under IE 7.0 - and you'd see a broken tab with a line underneath. I have tried every sane CSS maneuver to fix it, but in vain. Any help would be greatly appreciated! Thanks in advance! I have customised an open source wordpress template for my website and somewhere along the line seem to have broken the navigation as it appears in IE6,7,8. I use a mac so I didn't identify the problem straight away and I'm not sure how to fix it. I can work my way around CSS usually but I find navigation very difficult to grasp and so any help would be very much appreciated. blackmarlinfishingblog.com Problem: The child items of the navigation (drop downs) are appearing under the slideshow so you can't click on them. Thanks again in advance for any help you may be able to give! Hi I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image. Does anyone know why, and can they please help me Thanks I inherited a big huge site; so there is way much going on; this is a simplification... I am trying to use CSS to divide it into columns, with a column as a div. For debugging, I draw a border around the columns to show me the boundaries. But when I include the following code within the column div: Code: <div class="mycolumn"> <p>Hi, I'm in the Div!</p> <table><tr><td><p> I'm in the table</p> </td></tr></table> <p>Hi, I'm after the table; I would expect to still be in the div</p> </div> The bottom border of the div is drawn right beneath the words "Hi, I'm in the Div", and both "I'm in the table" and "I'm after the table" are outside the box boundary. This does NOT happen if I create a separate test html file and include my Column CSS, but it does happen withing the application. Now, what's going on in the application is extremely complex, involving dozens of included CSS files, javascript, smarty templates which include other smarty templates, and over 4000 files in all. Could one of the other CSS files or something else be redefining <td> somehow, or any other obvious thing that could be breaking the div? Obviously, I keep trying to debug it, but if any old hand has an explanation that might save me another 8 hours, that would be greatly appreciated. Thanks, Chris I recently inherited an application that, in my opinion, is poorly written. It relies heavily on tables, like so: Code: ... <table> <tr> <td>Error:</td> <td> <table> <tr> <td>P</td><td>a</td><td>g</td><td>e</td><td> </td><td>N</td><td>o</td><td>t</td><td> </td><td>F</td><td>o</td>u</td><td>n</td><td>d</td> </tr> </table> </td> </tr> </table> ... I kid you not. It's horrible but it can't be re-written *yet*. It will be rewritten around October. But there's a problem I'm dealing with now that I am hoping is possible. I have a feeling it isn't because it's logically impossible (even if it may be practically possible. I'm writing some CSS for a media="print" layout. There is so much garbage in some of these table cells, that I'm finding it so much easier to hide the entire cell. For example, there is a page header that has a lot of junk in it that won't be on a print out. But there is one <div> inside that header that we would like. Is it possible to display an element that is nested deep down inside an element that's hidden? It's a div inside a table cell inside a table cell inside a table cell. The top level cell is hidden, but I'd like to stylize the div. I know it makes no sense logically - a hidden element's children should all be hidden too. But practically, I'm wondering if it's possible to break away from the HTML's heirarchy with CSS. Any suggestions (other than "rewrite the app") are appreciated. hey all just new to layouts with CSS and having a few problems i managed to get divs to go side by side (not sure if it the best way to do it). now my content area divs are going crazy the bottom one appears on top and cuts into the navigation etc. Here is the HTML : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: Reflective Web Design ::</title>
<link href="rwd_style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/b_home_over.jpg','images/b_news_over.jpg','images/b_bio_over.jpg','images/b_resume_over.jpg','images/b_portfolio_over.jpg','images/b_gallery_over.jpg','images/b_links_over.jpg','images/b_contact_over.jpg')">
<!-- Center Container -->
<div id="center">
<!-- Banner Container -->
<div id="ban_container">
<!-- Banner -->
<div id="ban_left" style=float:left;clear:right><img src="images/banner_left.jpg" width="326" height="178" /></div>
<div id="ban_right" style=float:left><img src="images/banner_right_top.jpg" width="650" height="87" /><img src="images/banner_right_middle_.jpg" /><img src="images/banner_right_base_.jpg" /></div>
</div>
<!-- Navigation -->
<div id="nav" style=float:left;clear:right><img src="images/nav_side.jpg" width="24" height="279" align="left" />
<a href="home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/b_home_over.jpg',1)">
<img src="images/b_home.jpg" alt="return to the home page" name="home" width="155" height="34" border="0" id="home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/b_news_over.jpg',1)">
<img src="images/b_news.jpg" alt="view the latest news" name="news" width="155" height="35" border="0" id="news" /></a><a href="bio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/b_bio_over.jpg',1)">
<img src="images/b_bio.jpg" alt="get to know me" name="bio" width="155" height="35" border="0" id="bio" /></a><a href="resume.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/b_resume_over.jpg',1)">
<img src="images/b_resume.jpg" alt="check out my resume" name="resume" width="155" height="35" border="0" id="resume" /></a><a href="portfolio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/b_portfolio_over.jpg',1)">
<img src="images/b_portfolio.jpg" alt="view my web design portfolio" name="portfolio" width="155" height="35" border="0" id="portfolio" /></a>
<a href="gallery.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/b_gallery_over.jpg',1)"><img src="images/b_gallery.jpg" alt="view my other graphical works" name="gallery" width="155" height="35" border="0" id="gallery" /> </a><a href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/b_links_over.jpg',1)">
<img src="images/b_links.jpg" alt="check out some useful links" name="links" width="155" height="35" border="0" id="links" /></a><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/b_contact_over.jpg',1)">
<img src="images/b_contact.jpg" alt="contact me " name="contact" width="155" height="35" border="0" id="contact" /></a>
<img src="images/nav_base.jpg" align="left" />
</div>
<!-- Content Container -->
<div id="content_container">
<!-- Content -->
<div id="content_top"><img src="images/content_top.jpg" /></div>
<div id="content_left" style=float:left;clear:right></div>
<div id="content_area" style=float:left>
<!-- Content goes here -->
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA</div>
<div id="content_right"></div>
<div id="content_base"></div>
</div>
</div>
</body>
</html>
and the CSS: Code: body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align:center; /* for IE */
background-color: #2A2A2A;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
}
.heading2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #CCCCCC;
}
.heading3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #CCCCCC;
}
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
a:link {
font-size: 11px;
color: #FFFFFF;
}
a:hover {
font-size: 11px;
color: #66FFFF;
}
a:visited {
font-size: 11px;
color: #CCCCCC;
}
.barref {
background-image: url(images/barref.jpg);
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #e8eaec;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #454545;
}
.barrefbox {
background-image: url(images/barref.jpg);
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #e8eaec;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #161616;
}
#ban_left {
height: 178px;
width: 326px;
position: relative;
}
div#center {
margin-left: auto;
margin-right: auto;
width: 976px;
text-align: left;
position: absolute;
}
div#ban_right {
height: 178px;
width: 650px;
position: relative;
}
div#nav {
position: relative;
width: 179px;
height: 279px;
}
div#ban_container {
position: relative;
width: 976px;
height: 178px;
}
div#content_container {
position: relative;
width: 797px;
}
div#content_top {
position: relative;
height: 35px;
width: 797px;
}
div#content_left {
position: relative;
height: 100%;
width: 34px;
background-image: url(images/content_left.jpg);
background-repeat: repeat-y;
}
div#content_area {
background-color: #171717;
position: relative;
height: 100%;
width: 710px;
}
div#content_right {
background-image: url(images/content_right.jpg);
position: relative;
height: 100%;
width: 53px;
}
div#content_base {
background-image: url(images/content_base.jpg);
background-repeat: no-repeat;
background-position: top;
position: relative;
height: 47px;
width: 797px;
}
If anyone has any ideas how i can get this working or optimise it, it would be greatly appreciated This error happens with firefox but in IE7 the layout seems to stay together but the left side is force to the center of the screen .... Cheers Lance This is the problem, and it is driving me crazy... Code: <html>
<head>
<title>content breaking out of container</title>
<style type="text/css">
div {
border: 1px solid black;
}
#container {
border: 5px solid green;
height: 200px;
}
#sidebar {
height:100%;
width: 50%;
}
#footer {
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
In FF/Safari the footer 'breaks out' of the container. I can't see why it would do this. In IE and Opera, it stays in the container, as I expect it would. I'm trying to find a fix for FF, but it's in vain... any ideas? Hi Folks, I'm still struggling to make table-less pages - CSS layout is NOT easy at all, even with a good book. This page however has a table for displaying images in amongst text [it's in the Content Management System - I have to work with it]. http://www.johniwhite.com/tests/indextest.html The trouble is: the table is longer than its container DIV at some browser dimensions, so it breaks out of the bottom of it - overlapping it, ALSO: pushing the following DIV out of the way. I don't know either (A): Why the table doesn't just stay in the containing DIV or (B): why the containing DIV doesn't stretch with it. Can anyone help? Thanks John http://cad-design-engineering.com/New I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. This post can be deleted, I solved my problem. Hi there, I'm having a tough time getting these two images to align side by side...the line keeps breaking and thus forcing the image to the next line, as show here (not to mention it's messing with my footer): http://www.groundedgroup.com/client...A_Index_v2.html Here's the respective css: CSS Stuff Here's what it's supposed to look like: http://www.groundedgroup.com/client...EA_Show_v2.html Both of the images add up to a total width of 956px, however, the div containing it is set to 947px width. If I change it to 956px, it works, but it pushes out the sides, resulting in the left and right vertical borders not lining up with the rest of header, footer, etc. Ideally, I want these images to hover over this area and thus not spread out the design. Got any ideas? BTW, I checked my css and xhtml before posting and it validates. Thanks for your help. Thanks in advance to anyone who can help. I've been spending some time moving from HTML 4 and a table-based layout to CSS-based layout and XHTML 1.1 compliance. Most of my site looks fine to me. However, on pages where there is not a lot of content in the right-hand column, the contents of the left-hand column end up looking very wonky in Firefox 0.8. It shows up fine in IE, but I don't trust IE. Here's an example of an offending page: http://www.thatlittlebastad.com/more.php?id=1286_0_1_0_M Here's my CSS file http://www.thatlittlebastad.com/style_040805.css Can anyone help? Hello. I am building a site (perelachaisecemetery dot com)for a friend of my bosses. And I'm having problems with Safari on Mac Zoom Feature. When I zoom out my Nav Menu at the top (as well as my copyright at the bottom) get broken up into two lines. A windows safari user said this is not happening in his browser. It does not happen in Firefox. But it is happening in Chrome. Can anyone recommend anything? Is it something I can code not to happen or is it a individual browser preference thing. Please help. Thanks, Colin Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page? I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any. What am I missing here? Thanks Code:
#ticker {
background: transparent url('../images/dark_gradient.png');
overflow: hidden;
display: table;
margin-left: 20px;
margin-top: 10px;
width: 835px;
height: 52px;
}
#ticker #items {
position: relative;
top: 0px;
left: 829px;
}
the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window. |
|||||||