|
CSS - Page Formatting Difficulties, Why Does My Page Work In Ff But Not Ie?
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! Similar TutorialsI 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. 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 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? Hi I have the code below but i cant get it to work in IE, it works perfectly in mozilla but when in ie it messes up, i tried to re create it a different way but i keep having problems aligning the footer, if anyone can help or can edit it so it just works in IE and not mozilla it would be a great help as i can then do a browser check and load the apropriate stlye sheet. cheers CSS body { /*sets properties for the body of the document*/ background-color:#ffffff; margin:0px 0px 0px 0px; } #container { /*sets the properties for the container that all the elements are placed in.*/ margin-top: 50px; /*distance from top of browser window*/ margin-left: 50px; /*discance from left of browser window*/ margin-right: 50px; /*distance from right of browser window*/ margin-bottom: 50px; /*distance from bottom of browser window*/ padding: 0px; /*padding for the edges of the container*/ background-color: #66ccff; /*sets the background colour to blue*/ width: 80%; /*sets the width of the container*/ min-width: 241px; /*sets the minimum width of the container*/ } #footer { /*sets the properties of the footer container*/ padding: 0px; /*sets the padding*/ position: relative; /*sets the position so it is relative to the container its in*/ background-color: #FFFFFF; /*sets background colour to white*/ width: 100%; /*sets width to 100% of the container*/ clear:both; /*clears around the container....vital dont remove it.*/ } #content { /*sets the properties for the content*/ margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/ height: *%; /* sets height of content to fill all availble space*/ background-color: #66ccff; /* sets background colour to blue*/ align: right; /*aligns content frame to right of the container*/ min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/ padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/ /*overflow:hidden; can also be set to visible this causes some silly problems*/ border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/ border-color: #663300; /*sets border colour to brown*/ } #leftnav { /*sets properties for the left nav bar*/ float:left; /* floats the navigation panel on the left of container*/ background-color : #66ccff; /* sets bg colour to blue*/ width: 180px; /*sets withd of the left nav*/ padding-top: 30px; /*sets padding from top of container*/ border-right: 2px solid; /*sets border so that when nav is extended border continues*/ border-color: #663300; /*sets border colour to brown*/ } #topleftspace { /*sets properties for the top left space where the rounded corner will go*/ position: absolute; /*sets positioning for element*/ background-color: #66ccff; /*sets bg colour to blue*/ width: 180px; /*sets witdh of element*/ height: 20px; /*sets height of element*/ } #toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/ margin-left: 180px; /*sets positioning for element*/ background-color: #66ccff; /*sets bg colour to blue*/ height: 20px; /*sets witdh of element*/ padding-left:5 px; /*sets height of element*/ } #topleftcorner { /*sets properties for the top left corner...where the gif goes*/ text-align: left; /*aligns the rounded corner gif*/ } #toprightcorner { /*sets properties for the top left corner...where the gif goes*/ text-align: right; /*aligns the rounded corner gif*/ } #topleftwhite { /*sets the top white space where text could possibly go*/ position: absolute; /*sets position*/ background-color: #FFFFFF; /*sets bg colour to white*/ width: 180px; /*sets width*/ height: 30px; /*sets height*/ border-right: 2px solid; /*sets border*/ border-color: #663300;/*sets border colour to brown*/ } #toprightwhite { /*sets the top white space where text could possibly go*/ margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/ background-color: #FFFFFF; /*sets bg colour to white*/ height:30px; /*sets height*/ padding-left:5px; /*sets padding*/ } #bottomleftspace { /*sets the space where the bottom rounded corner goes*/ position: absolute; /*sets position*/ background-color: #66ccff; /*sets colour*/ width: 180px; /*sets width*/ height :20px; /*sets height*/ border-right: 2px solid; /*sets border*/ border-color: #663300; /*sets border colour*/ } #bottomrightspace {/*sets space where rounded corner will go*/ margin-left: 180px; /*sets left margin to cope with left spaces*/ background-color: #66ccff; /*sets bg colour*/ height: 20px; /*sets height*/ padding-left: 5px; /*sets padding*/ } #bottomleftcorner { /*sets properties for the bottom corner gif*/ text-align: left; /*aligns the gif*/ } #bottomrightcorner { /*sets properties for the bottom corner gif*/ text-align: right; /*aligns the gif*/ } #bottomleftwhite { /*sets the white space for the bottom*/ position: absolute;/*sets position*/ background-color: #FFFFFF; /*sets the bg colour*/ width: 180px; /*sets width*/ height: 30px; /*sets height*/ border-right: 2px solid; /* sets border*/ border-color: #663300; /*sets border colour*/ } #bottomrightwhite {/*sets the white space for the bottom*/ margin-left: 180px; /*sets margin width to cope with left space*/ background-color: #FFFFFF; /*sets bg colour*/ height: 30px; /*sets height*/ padding-left: 5px; /*sets padding*/ } #heading1 { /* sets the main heading properties*/ font-size: 22px ; /* font size*/ font-weight: bold; /* font weight*/ color: black; /* font colour*/ } #contenttext {/*sets content text style*/ font-size: 12px; /*font size*/ color: #663300; /*font colour*/ } HTML <div id="container"> <div id="topleftwhite"></div> <div id="toprightwhite"></div> <div id="topleftspace"> <div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div> </div> <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div> <div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div> <div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go </div></div> <div id="footer"> <div id="bottomleftspace"> <div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div> </div> <div id="bottomrightspace"> <div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div> </div> <div id="bottomleftwhite"></div> <div id="bottomrightwhite"></div> </div> Hi, i need a bit of help here.. i got my page up and running perfectly on FF but as for IE7.. well it does load! I have problems with the right menu, the div's i use as containers are not working as they suppose to do. plz see for youself www.soyunapendeja.com.ar can i get a litle help here? Thank you. I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi, My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code:
body {
color:#FFFFFF ;
font-family: Trebuchet MS, Arial ;
font-size:9pt ;
font-weight:normal;
line-height: 18px;
background-color: #FFFFFF;
margin:0px;
width:100%;
height:100%;
}
#bgcolor_area {
background: #000000;
height: 100%;
width: auto;
float: left;
}
#container {
text-align: left;
width: 760px;
float: left;
}
#logo {
height: 89px;
width: 760px;
background: url(../images/0_top.jpg) no-repeat;
margin: 0;
}
Does anyone know what I'm doing wrong? Thanks a lot! Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. I am trying to make a pattern tile the full height of the page and match up with an image at the top. It's a little bit hard to explain and a lot easier to show, so I've documented my first two attempts below. Failed Solution 1 - Pattern as a part of a div set at height: 100%; with outer divs also set at height: 100%; See attempt 1: Code: http://www.hesterdesigns.com/Web2/yellow.html Problem is that the divs aren't growing to the height of the page, and so the pattern isn't tiling the whole height of the page. Failed Solution 2 - The Pattern is part of the body background which tiles on y. See attempt 2: Code: http://www.hesterdesigns.com/Web2/index.html Any suggestions? I'm hoping to find a way to do this using only CSS and without having to resort to Javascript solutions. Hi, I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is). i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically. Many thanks! I could do this using Frames but I absolutely loathe them so I need to do it in CSS I have an A-Z across the top of the page which stays there while the results scroll below. Unfortunately, while I can do basic CSS, complicated stuff like this is way beyond me! Help would be most appreciated! Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference. Thanks for looking at it because I have been working on this for quite a few days now and it is buggin the ba-jesus out of me? I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot - here is the site in question Okay, so a while ago a create a simple web page using only CSS and <div> among other assorted tags - bascially, a tableless layout. Recently, however, it has been displaying weird in IE6, and has never displayed correctly in Firefox. The content is supposed to float right, right next to the sidebar, but instead induces a return then floats right. I think this may have to do with block-level elements, but I am not sure. Also, there seems to be problems with my line-height and <h1> within .content in Firefox, but not Internet Explorer. I did submit my XHTML to W3C and it returned fine. My CSS returned no errors, but warnings, quoted below. Quote: * Line : 2 (Level : 1) You have no color with your background-color : body * Line : 20 (Level : 1) You have no background-color with your color : a.nav:visited * Line : 20 (Level : 1) You have no background-color with your color : a.nav:visited * Line : 22 (Level : 2) Redefinition of font-weight : a.nav:link * Line : 22 (Level : 2) Redefinition of font-weight : a.nav:visited * Line : 27 (Level : 1) You have no background-color with your color : a.nav:active * Line : 40 (Level : 1) You have no background-color with your color : a.first * Line : 48 (Level : 1) You have no background-color with your color : a.first:visited * Line : 48 (Level : 1) You have no background-color with your color : a.first:visited * Line : 57 (Level : 1) You have no background-color with your color : a.first:hover * Line : 57 (Level : 1) You have no background-color with your color : a.first:hover * Line : 65 (Level : 1) You have no background-color with your color : a:hover * Line : 65 (Level : 1) You have no background-color with your color : a:hover * Line : 65 (Level : 1) You have no background-color with your color : a:hover * Line : 65 (Level : 1) You have no background-color with your color : a:hover * Line : 74 (Level : 1) You have no background-color with your color : a.last * Line : 82 (Level : 1) You have no background-color with your color : a.last:active * Line : 82 (Level : 1) You have no background-color with your color : a.last:active * Line : 82 (Level : 1) You have no background-color with your color : a.last:active * Line : 91 (Level : 1) You have no background-color with your color : a.last:hover * Line : 100 (Level : 1) Same colors for color and background-color in two contexts #firstheader and a.paralink * Line : 100 (Level : 1) Same colors for color and background-color in two contexts .content h1 and a.paralink * Line : 100 (Level : 1) You have no background-color with your color : a.paralink * Line : 100 (Level : 1) Same colors for color and background-color in two contexts #footer and a.paralink * Line : 100 (Level : 1) Same colors for color and background-color in two contexts #thirdheader and a.paralink * Line : 100 (Level : 1) Same colors for color and background-color in two contexts #navheader and a.paralink * Line : 100 (Level : 1) Same colors for color and background-color in two contexts a.nav:hover and a.paralink * Line : 109 (Level : 1) Same colors for color and background-color in two contexts .content h1 and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #firstheader and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #navheader and a.paralink:visited * Line : 109 (Level : 1) You have no background-color with your color : a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #firstheader and a.paralink:visited * Line : 109 (Level : 1) You have no background-color with your color : a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #thirdheader and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #thirdheader and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts a.nav:hover and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #footer and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts .content h1 and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts a.nav:hover and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #footer and a.paralink:visited * Line : 109 (Level : 1) Same colors for color and background-color in two contexts #navheader and a.paralink:visited * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #footer and a.paralink:hover * Line : 118 (Level : 1) You have no background-color with your color : a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts .content h1 and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #footer and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #navheader and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #navheader and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #firstheader and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #thirdheader and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #thirdheader and a.paralink:hover * Line : 118 (Level : 1) You have no background-color with your color : a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts a.nav:hover and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts a.nav:hover and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts .content h1 and a.paralink:hover * Line : 118 (Level : 1) Same colors for color and background-color in two contexts #firstheader and a.paralink:hover * Line : 157 (Level : 1) You have no background-color with your color : #auc * Line : 157 (Level : 1) You have no background-color with your color : #auc * Line : 165 (Level : 1) You have no background-color with your color : #quote * Line : 200 (Level : 1) You have no color with your background-color : .sidebar * Line : 212 (Level : 1) You have no color with your background-color : .darkersidebar * Line : 223 (Level : 1) You have no color with your background-color : #lastsidebar * Line : 236 (Level : 1) You have no background-color with your color : .sidebar div * Line : 236 (Level : 1) Same colors for color and background-color in two contexts #secondheader and .sidebar div * Line : 236 (Level : 1) Same colors for color and background-color in two contexts .darkersidebar and .sidebar div * Line : 236 (Level : 1) Same colors for color and background-color in two contexts #lastsidebar and .sidebar div * Line : 268 (Level : 1) You have no color with your background-color : .content * Line : 283 (Level : 1) You have no background-color with your color : .content p * Line : 321 (Level : 1) You have no background-color with your color : ul Now, I have images to show my problems since the site is no longer up; however, it has irked me lately that I haven't figured out a solution to this problem. Forgive me if I made a stupid mistake, as I haven't touched CSS in a few months and am still "refreshing" my memory on it - but even so, I couldn't pinpoint this problem while I still had my finger on CSS pretty well. These imaged will be linked, since they are enormous. IE6 Firefox-Part 1 Firefox-Part 2 And now, finally, my stylesheet and XHTML document. XHTML document CSS file Forgive me, again, if it's a REALLY stupid mistake, but I can't figure out the problem and seeing as I'm the one assigned to make a web site for a school project, I'd like to know what I did wrong so I won't make the same mistake again. I managed to figure out what was wrong with the script in the XHTML document (not corrected in this version, though) so this would be getting a real big monkey off my back. As you can see, there are alignment issues in addition to the detestable return problem. And yes, I did try making .content "display:inline;" same with one of the sidebar classes, to no avail... EDIT: I just realized that the IE pic is cut off - the only problem with this version is that the side content seen in Firefox 2 is not floated to the right of the .sidebar correctly. So it's the same as Firefox 2 basically. Hey guys, I was wondering if you could enlighten me on the right way to do this. URL On this CSS blog I'm designing for a friend, I'm trying to get the leafy sidebar to span the height of the content. My CSS for the property is: #sidebar { float: left; background: #589f45 url(images/sidebar.gif) repeat-y; height: 100%; width: 44px; } I have a feeling that the height: 100% property is causing the problem. When you look at the site, the sidebar repeats exactly one page-length and stops. The HTML markup for the page: <div id="sidebar"></div> <div id="header"></div> <div id="topbar"></div> <div id="blog"> Test<br />... </div> <div id="footer"></div> All of the other IDs are floated left. Do you guys have any suggestions? Any help would be greatly appreciated. Thanks for looking! Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code:
.top {
position: relative;
left: 0px;
top: -75px;
}
That will of course run an image off the top of the page, but Code:
.bottom {
position: relative;
left: 0px;
bottom: -250px;
}
this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. Dear all I need page height vary from page to page. But I cannot do this , please send your comments for this You can access my css , Other question is , different appear for firefox and IE , some time footer overlap I need to set pages height for their contents, can I do it with one , it is difficult to do all pages for separate styles This is my link "www. kawdoco. com/ test /" Thanks asanka When I start my page layout, it always starts around an inch down from the top of the browser. Ive seen websites, like techeblog.com that start all the way from the top. How do i do that? Thanks. Hi i'm trying to get my DIV to fit 100% in height of the page, i have set it to height:100%; but its only as big as the content in it. is there a way i can get it to fit the screen 100%? Thanks Shem Maybe you guys could tell me why my site is so messed up in IE. http://tabmatic.com/tabmatic/showartist.php?aid=1 2 of the 3 top links are underlined, but aren't supposed to be. The rows in the main area aren't the right height. The images on the sides aren't the right height. If you refresh it after going there, it changes the row heights again. Could anyone tell me what's wrong? |
|||||||