Misaligned divs
Hi, Im having some trouble aligning my divs in IE 7 and older versions of FF. The divs in my date block as well as my top nav div are pushing everything down. Ive been trying different things for days and nothing seems to work. As of now Im unable to make it live so you can see the problem but heres my code. To shorten it, i took out some of the scripts. Ill do what i can to get this live but until then, if someone could try and help, that would be excellent. Thanks in advance
<!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>Chalkboard Publishing Inc.</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link rel="stylesheet" href="css/topnav.css" type="text/css" />
<link rel="stylesheet" href="css/mBanner.css" type="text/css" />
<script language="Javascript" type="text/javascript">
var today = new Date();
var monthnum = today.getMonth();
var monthname=new Array("January","February","March","April","May",
"June","July","August","September","October","November","December");
var day=today.getDate();
</script>
<!-- Accoridan Nav Script -->
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script>
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 224;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
currentBlock = this;
lastBlock = this;
</script>
<!-- End Nav Script bgcolor="#00AAAA"-->
</head>
<body background="images/bg.gif">
<div id="pagelayout">
<div id="topdiv">
<a href="index.html"><img src="images/logo.gif" class="border" /></a> <img src="images/toppic.png" class="border" />
<!-- Javascript Date Block -->
<div class="outerbox" style="float:right; margin-top: 0px; position:static"> <!--style=" float:right;; margin-top:-181px;"-->
<div class="datebox"><br />
<script language="Javascript" type="text/javascript">
document.write(monthname[monthnum])
</script>
</div>
<div class="monthbox">
<script language="Javascript" type="text/javascript">
document.write(day)
</script>
</div><img src="images/chalkboard-bottom.gif"/>
</div>
<!-- End Date Block -->
<br />
<img src="images/sidepic.png" class="border" /><div id="topnav">
<ul>
<li>
<a href="#" id="a1">
<img src="images/nav/book1.gif" border="0" />
<p>
<strong>Health Education</strong><br/>
Different health concepts with a variety of fun activities.
</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav/book2.gif" border="0" />
<p>
<strong>Mathematics</strong><br/>
Number sense, patterning, measurement and data management.
</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav/book3.gif" border="0" />
<p>
<strong>Highschool Resources</strong><br/>
Post-Secondary Preparedness!
</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav/book4.gif" border="0" />
<p>
<strong>Time Fillers</strong><br/>
Drawing, colouring, reading, writing, counting and number skills.
</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav/book5.gif" border="0" />
<p>
<strong>Character Education</strong><br/>
Understanding and appreciation for character education.
</p>
</a>
</li>
</ul>
</div> <!-- End topnav -->
</div> <!-- End topdiv -->
<div id="leftsidediv">
<img src="images/subjects.png" width="195" height="40" border="0" /><br />
<a href="Math/indexMathematics.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Math','','images/links/mathematics_over.gif',1)"><img src=
"images/links/Mathematics.gif" name="Math" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Character','','images/links/charactermanagement_over.gif',1)"> <img src="images/links/charactermanagement.gif" name="Character" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Health','','images/links/health_over.gif',1)"><img src="images/links/health.gif" name="Health" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Social','','images/links/social_over.gif',1)"><img src="images/links/social.gif" name="Social" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('French','','images/links/french_over.gif',1)"><img src="images/links/french.gif" name="French" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Time','','images/links/time_over.gif',1)"><img src="images/links/time.gif" name="Time" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Highschool','','images/links/highschool_over.gif',1)"><img src="images/links/highschool.gif" name="Highschool" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Classroom','','images/links/classroom_over.gif',1)"><img src="images/links/classroom.gif" name="Classroom" border="0" /></a><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bulletin','','images/links/bulletin_over.gif',1)"><img src="images/links/bulletin.gif" name="Bulletin" border="0" /></a>
<br />
<a href="indexDealer.html"><img src="images/trade.gif" class="border" style="margin-top:7px"/></a><br />
<a href="mailto:[email protected]"><img src="images/email.gif" class="border" style="margin-top:5px" /></a>
</div> <!-- End leftsidediv -->
<div id="rightsidediv">
<!-- Banner Script -->
<script language="javascript">
banner1.add("IMAGE", "banners/1.jpg", 5, 290, 590,"default.aspx?CategoryID=259");
banner1.add("IMAGE", "banners/2.jpg", 5, 290, 590,"default.aspx?CategoryID=68");
banner1.add("IMAGE", "banners/3.jpg", 5, 290, 590,"default.aspx?CategoryID=177");
// START THE BANNER
document.write(banner1);
banner1.start();
</script>
<!-- End Banner Script --><br />
<img src="images/purplebox.png" />
<img src="images/greenbox.png" />
<img src="images/bluebox.png" />
<img src="images/orangebox.png" />
</div> <!-- End rightsidediv -->
<div id="footerdiv"><br /><br /> <img src="images/footertext.png" border="0" style="margin-top:7px" /><a href="http://www.volumesdirect.com" target="_blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Volumes','','images/volumes_over.png',1)"><img src="images/volumes.png" border="0" name="Volumes" /></a>
<!-- This website and its contents © 2009 Chalkboard Publishing Inc. All Rights Reserved -
Site Design and Development by <a href="http://www.volumesdirect.com">Volumes</a>-->
</div>
<!-- End footerdiv -->
</div> <!-- End pagelayout -->
</body>
</html>
.body {
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
margin:auto;
.border {
border:#00AAAA 1px solid;
#pagelayout {
margin:auto;
width:800px;
min-height:880px;
background-color:#FFFFFF;
padding:5px;
border:#016262 1px solid;
#topdiv {
vertical-align:top;
width:800px;
height:269px;
#topnav {
width:669px;
height:94px;
float:right;
margin-top:-95px;
#topnav a:link {
color:#FFFFFF;
text-decoration:none;
#topnav a:visited {
color:#FFFFFF;
text-decoration:none;
#topnav a:active {
color:#FFFFFF;
text-decoration:none;
#topnav a:hover {
color:#FFFFFF;
text-decoration:none;
#leftsidediv {
width:200px;
min-height:250px;
float:left;
border:none;
padding-top:10px;
color:#00aaaa;
font-size:16px;
line-height:18px;
#rightsidediv {
width:595px;
height:570px;
float:left;
margin-top:15px;
margin-left:5px;
#footerdiv {
width: 800px;
height:65px;
float:right;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:-40px;
background-image:url(../images/footer.gif);
background-repeat:no-repeat;
border:#00aaaa 1px solid;
#footerdiv a:link {
color:#FFFFFF;
text-decoration:none;
#footerdiv a:visited {
color:#FFFFFF;
text-decoration:none;
#footerdiv a:active {
color:#FFFFFF;
text-decoration:none;
#footerdiv a:hover {
color:#FFFFFF;
text-decoration:underline;
<!------- Javascript date block -------->
.outerbox {
border:#00aaaa 1px solid;
padding:0px;
width:120px;
overflow:hidden;
margin:4px;
font-weight:900;
.datebox {
font-size:18pt;
color:#fff;
text-align:center;
background-image: url(../images/chalkboard-top.gif);
/*border-bottom:#00aaaa 1px solid;
border-top:#00aaaa 1px solid;
border-left:#00aaaa 1px solid;
border-right:#00aaaa 1px solid;*/
width:120px;
height:60px;
font-family: Comic Sans MS;
.monthbox {
font-size:40pt;
color:#fff;
background-color:#00aaaa;
text-align:center;
height:60px;
font-family: Comic Sans MS;
background-image: url(../images/chalkboard-mid.gif);
textarea:focus, input:focus {
border: 1px solid #00aaaa;
#displaydiv {
margin:auto;
color:#00aaaa;
font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
Thanks for the reply. Didnt think my code was so messed up. I thought it was the best Ive done so far
1. Get rid of the -195 top margin
did you mena -95 within my topnav?
2. Delete and put into the topnav
a. <img src="images/sidepic.png" class="border" />
b. <img src="images/logo.gif" class="border" />
c. <img src="images/toppic.png" class="border" />
And i put these images in my topnav but then that just puts these images above my page. I added in some float styles and it helped a little but not by much at all. Is there possibly a way of doing this while leaving the images where they originally were? The page works fine in most browsers so it cant be designed all that bad. Im only having issues with topnav and my date block so it has to be something within those two. I added in screenshots below. Again, I appreciate your help
<div id="pagelayout">
<div id="topdiv">
<!-- Javascript Date Block -->
<div class="outerbox" style="float:right; margin-top: 0px; position:static">
<div class="datebox"><br />
<script language="Javascript" type="text/javascript">
document.write(monthname[monthnum])
</script>
</div>
<div class="monthbox">
<script language="Javascript" type="text/javascript">
document.write(day)
</script>
</div><img src="images/chalkboard-bottom.gif"/>
</div>
<!-- End Date Block -->
<br />
<div id="topnav"><a href="index.html"><img src="images/logo.gif" class="border" style="float:left" /></a><img src="images/toppic.png" class="border" style="float:right" width="330" /><img src="images/sidepic.png" class="border" style="float:left" />
<ul>..............
</div>
Similar Messages
-
How to fix graphics that are aligned in Explorer but misaligned in Firefox?
I am editing a website that was created with Div Tags in DW. It looks great in Explorer, but one page (the home page) is misaligned in Firefox. Can someone please take a look and see if anything obvious is creating this problem and if so can you offer a possible solution?
Here is the link: http://spelmanwomenofcolorconf.com/index.htm
Any assistance would be greatly appreciated!Start by fixing your code errors. You appear to have an extra closing </div> on that page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fspelmanwomenofcolorconf.com%2Find ex.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Please look at the page below and tell me why my wife, on her PC, is seeing a misaligned design (it looks fine on my Mac). The black bar at the top, with my name in it, should line up with the rest of the page below it. Everything should be on the far left of the page. But my wife's PC sees the black bar to the left (where it should be) while the rest of the page below is shoved way out to the right.
How do I get the main page elements back over to the left? (I've tried "align left" for that table).
http://www.keithclementson.com/store/
Thanks!This is a very strange problem! After playing for long, long time with your code I figured out a couple of things.
1. I gave the "container" div a background color and noticed that even if it correctly surrounded the tables in the code, it didn't show under anything else than your name. VERY strange!! You might as well have put the tables outside the div!
2. The next step was to remove everything except a single row in each table to make the page as simple as possible.
3. Still the same problem, so I added a new table in DW (to the container area), and it turned out okay.
4. The last step was to remove all the values for cell spacing, cell padding, etc from the table in line 54, and now it worked! The table is now behaving like it's supposed to do when surrounded by the "container" div.
So my suggestion is that you move all the table control values from the html and into the CSS.
The only thing that was different with the table I added in DW was that it didn't contain any html values (except for width). This is a strong indication of the problem originating at that spot in the code.
This problem didn't show up until I gave the div a background color, what I saw then indicated that a browser (with a bug) could misunderstand the layout and give you a problem like the one you mentioned.
I'm pretty sure I found "the glitch".
Good luck! -
How can I have use the same div ID multiple times on the same page?
Okay so a problem I encounter a lot is that often times I want to use the same div ID several times on the same page. An example of this is when I'm creating table like designs.
Let's say for instance I create a div ID called 'product-container'. I want to use 'product-container' multiple times on the same page but if I do this it is improper XHTML and will throw errors in any XHTML validator (you are only allowed to use a div ID once on any XHTML page in order for it to be standards compliant).
Now the first option is that I could define 'product-container' in my CSS style sheet multiple times by doing something like this...
#product-container {
width: 300px;
#product-container-2 {
width: 300px;
#product-container-3 {
width: 300px;
#product-container-4 {
width: 300px;
What you will see there however is that it seems pointless to define the same ID numerous times over (just adding a number on the end) when each ID is the exact same thing and has the exact same attributes.
Now what I have noticed is that there are some sites out there who manage to have the same ID appear several times in the code but add a number to it just like above. The difference is that they only have one definition for 'product-cointainer' in their CSS document but in their actual XHTML code they have IDs for 'product-container' but with numbers on the end like 2,3,4,5, etc. It's almost as if JavaScript or some other code is automatically appending a number on the end of the ID so the validator won't consider the markup to be invalid, but yet it knows that it's using the same 'product-container' style that is contained in the CSS style sheet.
I hope I explained this correctly. I'm just hoping to find a way that I can put the same div ID on a page multiple times without having to define it over and over again in my CSS.
Any help is much appreciated!Because it seems like by using a class you can't make this position as
well as you can by using an ID. Am I wrong?
An ID name can be used only one time per page. A class name can be used multiple times per page.
.product {
width: 300px;
text-align:left;
color: #FF0000
border: 2px solid #666;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
How do I move multiple Divs at a time?
Hi,
I can't seem to figure out how I move multiple Divs at a time. I have resized certain Div in the middle and now I have to move all the Divs that are below it up to align it with that certain div again. How do I select and move all the Divs in once? I know you can move them one at a time by changing the position in the properties or just drag them in the design view, but I have a fairly large amount of Divs.
Thanks in advance,
ECbut is there any other way? Like changing something in the properties that will make the Divs bump up to the Div aoove that when you remove one out of there
I'm afraid not.
I imported the whole site as divs by splitting the images in photoshop and saving it for web and devices.
This is approach is OK for quick comps to show a client but definitely NOT suitable for a production site. As soon as you attempt to edit your layout, the page will explode and fall apart. This is caused by the rigid/fragile code that graphics apps attempt to generate based on the images sizes.
Start over. Use graphics apps to slice and optimize images only.
Use DW to build your HTML and CSS code.
Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Adobe Developer's Center - Getting Started tutorials
http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted
Using DW Page Properties to create a basic CSS style sheet
http://kb2.adobe.com/community/publishing/505/cpsid_50576.html
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
What's wrong with my div tag / site won't center....
Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
margin: 0px;
padding: 0px;
#wrapper{
margin: 0, auto;
background-color: #9B9E6B;
ul {
list-style: none;
table#content1{
background-color: #00C;
background-image: url(_images/content_bgrnd.png);
background-repeat: no-repeat;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20px;
text-align: center;
padding: 8px;
Here is the code for the site......
<!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=UTF-8" />
<title>Kiahuna 104</title>
<script type="text/javascript">
<!--
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_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_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>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">
<!--Header-->
<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>
<!--Navigation table-->
<table width="1000" bgcolor="000">
<tr>
<td width="40"> </td>
<td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
<td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>
<!--Start of content1 table- height = 371-->
<table id="content1" table width="1000" height="371">
<tr>
<td width="34"> </td>
<td width="897"><p>blah blah blah.</p>
<p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
<td width="53"> </td>
</tr>
</table>
</body>
</html>I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
margin: 0px;
padding: 0px;
#wrapper{
margin: 0, auto;
background-color: #000;
ul {
list-style: none;
table#content1{
background-color: #00C;
background-image: url(_images/content_bgrnd.png);
background-repeat: no-repeat;
font-size: 16px;
font-family: Papyrus, Arial, "Helvetica Bold", serif;
font-size: 22px;
text-align: center;
padding: 8px;
table#imagegallery{
background-image: url(_images/imageGallery_bckgrnd.png);
background-repeat: no-repeat;
#imagegallery a img{
padding: 0px;
margin: 2px;
border: 2px solid #000;
#imagegallery a:hover img {
border: 2px solid #C00;
table#footer{
background-image: url(_images/footer_bckgrnd.png);
background-repeat: no-repeat; -
I need help writing a dive scoring program in C#, Help Please?
The state diving commission wants to computerize the scoring at its diving competitions. I have to write a program to automate the scoring of dives. Requirements:
After each dive, the user will be prompted to enter the:
diver's name;
diver's city;
degree of difficulty (ranges from 1.00 to 1.67); and
scores from five judges (scores can range from 0 to 10).
If an invalid score is entered, an error message will be displayed. The user will be prompted for the score repeatedly until a valid score is entered.
The program will then display the following information:
Diver's name
Diver's city
Dive final score: This is calculated by dropping the highest and lowest of the five judges' scores. The remaining three scores are added together, and the result is divided by 3 and then multiplied by the degree of difficulty.
The program will then prompt the user if she/he wants to process another dive. The user can type "Y" or "y" to continue, and "N" or "n" to quit.Hi,
The forum supports VS setup and installation. I think your issue is not about the forum.
Please clarify your project type. Is it webform or winform?
If it is webform, please post your issue to ASP.NET forum.
If it is winform, please post it to
winform forum.
Regards.
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey. -
Hi,
I'm working on a project to convert several hundred thousand life sciences articles into epub format, and we have run in to a problem with character entities.
Being that these are scientific articles, the characters are from a wide range of Unicode charts, and are essential to transmitting the meaning of the data.
The problem is that in my epub, the character entity inside a table data cell is rendering the @font-face correctly, but inside any other HTML element, the character renders as an empty box on our ipad2s.
I've placed pre tags in hopes that the unicode will not be rendered in your browser here. The code point in this example is x1d542 just in case.
So inside div, we see boxes, inside td, we see the character rendered properly.
<pre>
<div class="stix">Let 𝕂 be a field, which will be either the complex numbers ℂ or the finite field 𝔽</div>
<table id="t31" rules="all">
<tr>
<td>𝕂</td>
<td class="stix">𝕂</td>
<td>U+1D542 MATHEMATICAL DOUBLE-STRUCK CAPITAL K </td>
</tr>
</pre>
My CSS looks like this:
<pre>
@font-face {
font-family: 'STIX';
src: url('STIX-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
unicode-range: U+02B0-02FF, U+07C0-07FF, U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
@font-face {
font-family: 'STIX-Math';
src: url('STIXMath-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
unicode-range: U+02B0-02FF, U+07C0-07FF, U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
.stix {
font-family: "STIX", "STIX-Math", sans-serif;
</pre>
Is it possible that this is a rendering bug, because the character is rendering in the table cell, but not in other elements?
Have I missed something obvious?
Thanks,
AbeI assume you are including the STIX font as part of your epub files?
Perhaps the folks who do this blog might be able to help -- they have done some work with font embedding:
http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-an d.html -
Solved! All-in-Ones Misalignment on Costco or Heavy Photo Paper Issue
Hi, after much frustration, I finally came upon a solution to the issue of misalignment when printing heavy (Costco or HP Premium) photo papers. My printer is networked and connected via the router. This fix will probably work with other All-in-Ones as well. (I haven't tried this on business cards yet but will post back when I do). By the way, I'm using Windows 7. This is a very wordy post in order to get all the steps and make it easier to follow. Here goes.
Devices and Printers/Add Printer - this is so your original printer file does not get damaged. Also you might want to create a Restore Point.
Before adding your new printer, check under Devices and Printers/right-click current working printer/Printer Properties (not "Properties")/Ports/. Make note of the port that is current being used and working. You will use this same port on the newly added printer.
Device and Printers/Add Printer/Add Local printer/Under Use Existing Port hold down the arrow at right and select the working port you made note of in step 2.
Select HP on the left/HP OfficeJet 6500 709a on the far right (this is a generic printer driver specially made to fix printer issues like this)/Next/Do not share this printer/Next.
Do a test print on plain paper at the end of install.
Now to print your photo:
Clean the printer rollers(I cleaned the ones on the back door where you clear a jam) with an electronic cleaning wipe (maybe alcohol and paper towel will work, too). This is because I think the printer has a hard time picking up the heavier glossy paper after some years of collecting soil and dust on the rollers so it slips - just my theory.
Select the photo/s you want to print. (I was trying to print a simple photo index/contact sheet. 8.5"x11" using Costco paper. The contact sheet in Explorer is located as you scroll down the options on the side). I was printing directly from Windows Explorer window in the folder where the image was located.)
Print/Select the new printer you just added/paper size 8.5x11/HP Premium Photo Paper/Fit to Picture Frame/Options/Features tab/Borderless unchecked/OK/Print
Result - a beautiful print like the kind HP is known for. Now, whenever you need to print something on heavy photo paper just select this printer. When finished, go back to your default printer.
It is my sincere wishes that this helps somebody who has been as frustrated as I have been not getting this feature to work. Now onto the business cards solution...Thank you for the information.
Does anyone really think that HP or Avery will print this work around in their documentation?
Does HP OfficeJet 6500 709a printer exist on all software editions from HP? And how did YOU know that "this is a generic printer driver specially made to fix printer issues like this"? No one else figured that one out- who told you?
"Clean the printer rollers(I cleaned the ones on the back door where you clear a jam) with an electronic cleaning wipe (maybe alcohol and paper towel will work, too).This is because I think the printer has a hard time picking up the heavier glossy paper after some years of collecting soil and dust on the rollers so it slips - just my theory." Problem: people have had the HP business card printing problem with brand new printers- certaintly without years of soil or dust on the rollers.
How should a user, unfamilar with those gyrations you described above, go about using the printer? The basic issue is that these printers DO NOT work for Avery and other business cards unless you know how to do the actions described.
"The sheet stock business card printing problem you are having is a well documented process or product defect that newer HP printers seem to have. Others have said that older HP printers did not have this problem. I echo that experience also. There are multiple questions on these forums with various answers (revert to older printer drivers, change paper type chosen in printer setup, change brand of card paper) but the end all is that HP printers or all in ones cannot print Avery business card sheet stock with any type of repeatability or consistency due to the wandering margin issue. It is unknown whether this is a software or hardware issue or or paper issue or combination of these."
The best solution seems to be to consider a printer that feeds almost straight through versus up and around. If HP has this type of printer you could consider it. Otherwise there are alternative printer brands that feed straight through that may be better for printing sheet stock business cards.
avery, business cards, cards, margin error
http://h30434.www3.hp.com/t5/Other-printing-questions/Avery-sheet-business-card-printing-problem/m-p... -
Which is best way toalign divs at bottom?
I am hopefully getting near to completing my layout for webste and I am trying to build it as follows:-
First I created a wrapper div to contain everything.
Next I created a header div in which I will put my logo image jpeg as a background.
Then I created a navbar div whch will contain navigation.
I wil save above as a template as most of this should not change. All above divs are 960px wide with margins 0 auto 0 auto
All the above has been achieved and would appear to be ok
What I am trying to do now is create a mainbody div and in it two divs which by using float left and float right have managed to both divs aligning at top of mainbody div. One div is called leftbody and the other called rightbody. I have given mainbody div a red background, leftbody a blue background and rightbody a green background in order to view what s happening.
I am wanting to enter text and images to rightbody and leftbody.
When the text in leftbody goes farther down the page than the text in rightbody , the red background from mainbody appears below the green background of rightbody which is fine.
But when the text in rightbody goes farther down the page than the text in leftbody, the red background from mainbody does not appear.
How do I fix this so that the red background appears?
and can I sort it so that if one dv is longer than the other, it creates a green or blue space to align the divs at the bottom
I am sorry if this is a bit long winded but I am trying to make my question clear - hopefully the answer will be clear also.
My code and css is as follows if it helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id ="wrapper">
this is wrapper div
<div id="header">Content
for id "header" Goes
Here</div>
<div id="navbar">this
is navbar div wrapped
inside wrapper div</div>
<div id="mainbody">Content
for id "mainbody" Goes
Here
<div id="bodyright">
<p>Content
for id "bodyright" Goes
Here GReen writing
goes here Content
for id "bodyright" Goes
Here GReen writing
goes here Content
for id "bodyright"</p>
</div>
<div id="bodyleft">Content
for id "bodyleft" Goes
Here Content
for id "bodyleft" Goes
Here Content<br>
for id "bodyleft" Goes<br>
<br>
</div>
</div>
</div>
</body>
</html>
/* CSS Document */
#wrapper {
background-color: #FFFF00;
width: 960px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#navbar {
background-color: #FFFF00;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#header {
background-color: #FF6666;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#mainbody {
background-color:#FF0033;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#bodyright {
background-color: #66FF00;
float: right;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#bodyleft {
background-color:#0000FF;
width: 200px;To achieve the illusion of equal height columns, create a tri-colored background image (see my example), same width as your #wrapper div, and repeat-y.
BEFORE FAUX COLUMNS:
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
AFTER FAUX COLUMNS:
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Dreamweaver adding div height in tooltip?
I dont normally use dreamweaver, but I must for this project,
in dreamweaver for some bizarre reason the tooltip says height 50px
(54px) and has added 4pxs to an image in a div. Anyone know why? It
aligns in the browsers, IE 6, firefox, but why has dreamweaver
added these 4 pixels and given it a gap in dreamweaver?
Picture example:
http://homepage.ntlworld.com/spensley/dreamweaverbug.jpg
anyone know why and what this is all about?
The css:
#logo{
top: 30px;
width:126px;
height: 51px;
padding:0px;
float: left;
html:
<div id="logo"><a href="index.html"><img
src="media/images/gtfLogo.jpg" title="GTF logo" alt="GTF logo
design" longdesc="three circles showing the letters G, T and F in
orange and green" width="126"
height="51"/><a/></div>Oops - sorry - missed the CSS.
You have a munged <a> tag -
orange and green" width="126" height="51"/><a/></
should be -
orange and green" width="126" height="51"/></a></
Does that solve the problem?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"spongebobcirclepants" <[email protected]>
wrote in message
news:[email protected]...
> <?xml version="1.0" encoding="utf-8"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
> <head>
> <title>GTF - Gardens, Tools &
Furniture</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <meta name="keywords"
>
content="tools,gardens,furniture,spades,water,toys,toy,gardening,uk,giant
>
toys,giant,lawnmowers,tool,diy,outdoor,outdoors,pool,shovels,hoses,hose,fish,aqu
> atics,benches,tables,chairs" />
> <meta name="description" content="GTF Company Site"
/>
> <meta name="author" content="Roy Spensley" />
>
> <link rel="stylesheet" type="text/css"
href="style/textformat.css"/>
> <link rel="stylesheet" type="text/css"
href="style/layout.css"
> title="default"
> />
>
> </head>
>
> <div id="wrapper">
>
> <div id="topSpace"></div>
> <div id="logo"><a href="index.html"><img
src="media/images/gtfLogo.jpg"
> title="GTF logo" alt="GTF logo design" longdesc="three
circles showing the
> letters G, T and F in orange and green" width="126"
> height="51"/><a/></div>
> <div id="logoRight"></div>
> </div>
> </body>
> </html>
>
>
> css
>
>
>
> /*BODY*/
>
> body{
>
> margin-top:0px;
>
> margin:0px;
>
> left:0px;
>
> padding:0px;
>
> font-family: arial, Helvetica, sans-serif;
>
> font-size: 100.1%;/*fixes bug in IE*/
>
> color:#333333;
>
> text-align: center;
>
> background-color: #666666;
>
> overflow: auto;
>
> }
>
> /*ALL IMAGES*/
>
> img{
>
> border-style: none;
>
> }
>
>
> /*CONTAINING WRAPPER*/
>
> #wrapper{
>
> width: 800px;
>
> margin-top: 0px;
>
> height: 597px;
>
> background-color: #000;
>
> margin: 0 auto; /*This will now centre in firefox as
well*/
>
> }
>
> #topSpace{
>
> width: 100%;
>
> height: 30px;
>
> padding:0px;
>
> background-color: #fff;
> }
>
> #logo{
>
> top: 30px;
>
> width:126px;
>
> height: 51px;
>
> padding:0px;
>
> float: left;
>
> }
> -
Div moves down when window is resized
Hello,
Here's my problem: When I resize my browser window the main div is resized up until a certain point when it just falls below all of the other content.
How can I prevent this from happening? I have both the top and bottom div's set to auto width, so I can't figure out whats going wrong.
Here's the website if you want to see for yourself: www.hondovfd.org
Here's some code from my template file:
<!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=UTF-8" />
<!-- TemplateBeginEditable name="Title" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
<meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
<link href="../stylesheet1.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css">
#mainContent, #sidebar1 { zoom: 1;}
</style>
<![endif]-->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColLiqHdr">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<h3>Navigation : </h3>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="/index.php">Home</a></li>
<li><a href="/support.php">Support Hondo</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
<ul>
<li><a href="/people.php">Our People</a></li>
<li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
<li><a href="/medical.php">Medical</a></li>
<li><a href="/apparatus.php">Apparatus</a></li>
<li><a href="/training.php">Training</a></li>
<li><a href="/volunteer.php">Volunteer</a></li>
<li><a href="/statistics.php">Statistics</a></li>
<li><a href="/patchtrading.php">Patch Trading</a></li>
</ul>
</li>
<li><a href="/gallery2/main.php">Photo Gallery</a></li>
<li><a href="/calendar.php">Calendar</a></li>
<li><a href="/news.php">Blog/News</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<span class="lefttext">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8567201">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
</img></input></input>
</span>
</form>
<span class="lefttext"><br />
</span>
<center>
<span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
</center>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
<a href="/membersonly/register.php">Register</a></p>
<p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
<p>Call Statistics as of:<br />
<?php
$myFile = "/home/hondovf1/public_html/membersonly/month.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?><?php
$myFile = "/home/hondovf1/public_html/membersonly/date.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></p>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="60%">EMS Calls</td>
<td width="40%"><?php
$myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
<td>Fire Calls</td>
<td><?php
$myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
<td>Other Calls</td>
<td><?php
$myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
</table>
<hr />
<!-- Begin Google Search Element -->
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
var googleNumSearchResults = 5;
var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<!-- End Google Search Element -->
</div>
<!-- end #sidebar2 -->
<div id="mainContent">
<div class="topleft"></div><div class="top"><div class="topright"></div></div>
<div class="wrap">
<!-- TemplateBeginEditable name="Main Content" -->
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="47" class="h2">Header</td>
</tr>
<tr>
<td>Text Goes Here!</td>
</tr>
</table>
<!-- TemplateEndEditable -->
</div><br class="clearfloat" />
<div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
</div>
</div>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p align="center">© Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
</body>
</html>
And here is my CSS file:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: auto;
color: #333333;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-image: url(images/main-right.png);
background-repeat: repeat-y;
.thrColLiqHdr #container {
width: 95%; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-image: url(/images/halftone1.png);
.thrColLiqHdr #header {
padding: 0 10px;
height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position:center;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000;
.thrColLiqHdr #navbar {
height:45px;
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.thrColLiqHdr #sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 15%; /* top and bottom padding create visual space within this div */
height: 100%;
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
min-width: 150px;
.thrColLiqHdr #sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 15%; /* top and bottom padding create visual space within this div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
min-width: 150px;
.thrColLiqHdr #sidebar3 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 275px; /* top and bottom padding create visual space within this div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
min-width: 150px;
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
text-align: center;
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.thrColLiqHdr #mainContent {
margin-top: 10px;
margin-bottom: 10px;
float: left;
width: 65%;
background-image: url(images/main-right.png);
background-repeat: repeat-y;
background-position: right;
.h2 {
color: #B4241B;
font-size: 20px;
letter-spacing: -2px;
font-weight: 100;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: normal;
.thrColLiqHdr #footer {
text-align: center;
color: #666;
font-size: 11px;
padding: 10px;
background: #f7f7f7;
border-top: 1px solid #aaa;
width: auto;
.thrColLiqHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.topleft {
height:22px;
width:19px;
background-image:url(images/top-left.png);
float: left;
.top {
height:23px;
background-image: url(images/top.png);
background-repeat:repeat-x;
width: auto;
.topright {
height:22px;
width:28px;
background-image:url(images/top-right.png);
float: right;
.textarea{
.wrap{
text-align: justify;
padding-right: 40px;
padding-left: 40px;
background-repeat: repeat-y;
float:left;
background-image: url(images/main-left.png);
width: auto;
clear: left;
.wrapright {
width:4px;
background-image:url(images/main-right.png);
background-repeat: repeat-y;
float: right;
.bottomleft {
height:22px;
width:19px;
background-image:url(images/bottom-left.png);
float: left;
clear: left;
.bottom {
height:23px;
background-image: url(images/bottom.png);
background-repeat:repeat-x;
width: auto;
.bottomright {
height:22px;
width:27px;
background-image:url(images/bottom-right.png);
float: right;That's one of the problems with liquid (%) based layouts. In your default.css file, replace the top 2o selector rules with the following:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin:0;
padding:0;
background: url(images/main-right.png) repeat-y;
.thrColLiqHdr #container {
width: 95%;
min-width: 870px; /**keep page from collapsing**/
margin:0 auto;
background: url(/images/halftone1.png);
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Nested Divs - BG images not showing in IE 6
I'm using nested divs for the layout of the site below. The
div tags have a BG image in each.
Everything works fine except in IE6. In that browser none of
the BG images show up.
Here's the site:
http://www.jesseyoung.com/phenopath/test.html
CSS is pasted in below
Suggestions?
-Jesse
/* CSS Document */
body {
text-align:center;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 62.5%;
margin-top: 31px;
background-color: #333333;
background-image: url(images/BG.gif);
background-repeat: repeat-x;
/* Sets all margins and padding to zero*/
margin: 0;
padding:0;
/* Main Wrapper*/
#wrapper {
text-align:left;
width:900px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-size: 1.2em;
height: auto;
.top {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
background-position: center top;
.right {
background-image: url(images/right.jpg);
background-repeat: no-repeat;
background-position: right top;
.bottom {
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
background-position: center bottom;
.left {
background-image: url(images/left.jpg);
background-repeat: no-repeat;
.tlc {
background-image: url(images/tlc.jpg);
background-repeat: no-repeat;
background-position: left top;
.trc {
background-image: url(images/trc.jpg);
background-repeat: no-repeat;
background-position: right top;
.brc {
background-image: url(images/brc.jpg);
background-repeat: no-repeat;
background-position: right bottom;
.blc {
background-image: url(images/blc.jpg);
background-repeat: no-repeat;
background-position: left bottom;
.contentWrapper {
padding-right: 18px;
padding-left: 18px;
padding-top: 31px;
padding-bottom: 21px;
#logoNavWrap {
height: 71px;
width: 864px;
position: relative;
#logoBox {
width: 175px;
height: 71px;
float: left;
/*End hide from IE-mac */
#NavWrap {
float: right;
width: 650px;
padding-top: 30px;
#contentWrapperInner {
background-color: #FFFFFF;
/* Main Layout */
JESSE FOOTER CREDITS
a.jesse:link { color: #999999; font-size:8pt; font-family:
Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration:
none }
a.jesse:visited { color: #999999; font-size: 8pt;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none }
a.jesse:hover { color: #999999; font-weight: bold; font-size:
8pt; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none; letter-spacing: 1pt }
a.jesse:active { color: #999999; font-size: 8pt; font-family:
Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration:
none }
#jesseCredit {
width: 760px;
padding-top: 10px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
PAGE FOOTER
#footer a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer{
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footerBox {
width: 760px;
padding-top: 10px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
Navigation Banner
#navigationBanner {
background-color: #0033FF;
height: 50px;
width: 760px;
Clears floats within container, so container continues to
wrap around contents
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
.clearfix {display:inline-table;}
/*Hides from IE-mac\*/
*html .clearfix {height:1%;}
.clearfix {display:block;}
#imageBannerWrap {
height: 240px;
width: 862px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-right-color: #FFFFFF;
border-bottom-color: #666666;
border-left-color: #FFFFFF;
padding-top: 1px;
padding-bottom: 1px;
margin-right: auto;
margin-left: auto;
#ColumnLeft {
padding: 20px;
#columnRight {
padding: 20px;
h1 {
color: #335AA3;
font-weight: normal;
letter-spacing: .1em;
font-size: 2em;JesseLY wrote:
> I'm using nested divs for the layout of the site below.
The div tags have a BG
> image in each.
> Everything works fine except in IE6. In that browser
none of the BG images
> show up.
>
> Here's the site:
http://www.jesseyoung.com/phenopath/test.html
>
> CSS is pasted in below
>
> Suggestions?
I see your background images in IE6 - perhaps too much in IE6
even - I
see the BG.gif showing through in the area around the
navigation.
This could be one of these IE quirky things or perhaps a
matter of
needing background-color: #fff; applied to the divs in and
around that area.
HTH
chin chin
Sinclair -
Issue with images and AP div layers
Im a bit of a noobie. but i have a problem with this website
im working on. I have a table with an image in it serving as a
background for some text i wish to put into it. I use an AP Div
layer to put in the text on top of the image. Of course when i open
the page in a full window, it displays properly, but when resizing
the window, the text shifts as a cause of the div layer not
moving... Is there a way to fix this or another way to do this
properly?
thanks in advance.This is a problem with absolute positioned tags it's a CSS
thing not a Dreamweaver problem.
You should be staying from layers and using hand CSS with
divs ID and class. Check out the adobe site for tutorials on using
Dreamweaver with CSS. You should find these in the designer
section. They are quite good and they'll give you what you're
looking for
Also a good book on this is CSS the Missing Manaul it really
explains what's happening and going on here -
Excel Table with Data Connection Manual Text Entry Misaligned After Refresh
Greetings!
I have an Excel 2010 workbook that includes a table linked to my SharePoint 2013 site by a data connection. The SharePoint list feeds the table standard information that's managed on the SharePoint site, but I need the user of the Excel workbook to be able
to enter text manually in the workbook to associate local information with the line-items coming from the SharePoint list. To do this, I've added extra columns to the end of the table.
The user can enter information in the appropriate cells in the "extra" columns at the end of the table, but when I refresh the data connection, the addition of a new list item on the SharePoint side results in the user's manually entered text getting
out of alignment with the row it's supposed to be associated with.
Example
Column 1(SP)
Column 2(Extra)
Row 1
Item 1
Row 2
Item 2
Text entered for Item 2
Row 3
Item 3
Then, if I add a new item to the list in SharePoint, for example, something that would appear between the original items 1 & 2, after refreshing the table, I get the following:
Column 1(SP)
Column 2(Extra)
Row 1
Item 1
Row 2
New Item 1.5
Text entered for Item 2
Row 3
Item 2
Row 4
Item 3
The table's data connection is set to insert rows for new items, and I could swear I had this working properly once upon a time...but I can't seem to make it work now.
Any thoughts on what would cause this?
Thanks in advance!Yes, it is. I realized after posting the first time, that I'd assigned the question to the Visio forum. I wasn't sure how to reassign to the correct (Excel) forum, so I re-posted over there:
http://social.msdn.microsoft.com/Forums/en-US/b3bbe00c-94c0-48d4-bed9-fbd08d707b1d/excel-table-with-sharepoint-data-connection-manual-text-entry-misaligned-after-refresh?forum=exceldev
Maybe you are looking for
-
How do I keep watermarks and presets ( with their order ) synched between computers
I have a desktop which I use for heavy picture editing and a mac book air that I use for on the fly picture editing to show clients during photo trips. I want to figure out a way for keeping my watermarks and presets ( with their order and folders I
-
How do I get Premiere Pro CS6 off Creative Cloud?
I have spent over 100 hours in Premiere Pro CS6 putting together four hours of complicated video (at least for me, a first timer) all with the end objective of producing two DVDs which I'll replicate for the 100+ members of my son's high school march
-
Web Service call - XI - SAP and SAP - XI - Web Service response ???
Hi ALL, Need some guidance on the following Scenario : A Legacy system would transfer some data to SAP thoruhg a Web Service call and would expect a response from SAP by way of a response to the same Web service call A synchronous Interface , inb
-
How do i get Iphoto to connect and open
Iphoto will not respond and will not open how do i fix
-
Stoping the print in a print program
Hi, Please can any one tell me how to <b>stop a print from a print program.</b> I need to extract the data from that point to an internal table. madan