|
CSS - Sidebar Doesn't Display On One Page
I use the same css for all page, but one of them doesn't show sidebar and push down the footer about 100px
Code: http://elsoszabadmagyarkormany.com/torveny-szavazasok/ Anybody can help me? Similar TutorialsOK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!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"> <head> <title>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> Hi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances It's a classic problem, but I was just wondering if anyone could give me some help on it. Heres the link to the webpage (note, none of the links or owt work, it's just filler for the mo): Code: http://users.aber.ac.uk/jdg8/WebSiteHelp/ I want to the make the sidebars on each side stretch to the bottom of the page (Down to the footer) but it won't seem to go. I've tried following googles advice and it's not working either. Here's the code: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
height: 100%;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFF;
}
a:link{color:#00B800;}
a:visited{color:#39F}
a:hover{color:white; text-decoration:underline; font-weight:bold;}
#container {
width: 80%; /* this will create a container 80% of the browser width */
background: #666666; /* the auto margins (in conjunction with a width) center the page */
border: 3px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
background: #999999;
height: auto;
margin-left: auto;
margin-right: auto;
color: #390;
}
IMG.ukdm {
display: block;
margin-left: auto;
margin-right: auto;
}
/* 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 "#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.
*/
#sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 22%; /* since this element is floated, a width must be given */
height:100%;
background-color: #555555;
background-image:url(backgroundshizzle.jpg);
padding: 15px 0; /*top and bottom padding create visual space within this div */
}
#sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 23%; /* since this element is floated, a width must be given */
height:100%;
background-color: #555555;
font-size:14px;
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
IMG.albumom {
display: block;
margin-left: auto;
margin-right: auto;
font-weight:bold;}
#sidebar1breaker {
width: 4%;
height:680px;
}
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #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;
}
#navi{
display:block;
margin-left: auto;
margin-right: auto;
text-align:center;
font-weight: bold;
font-size: 17px;
}
#aom{
font-style:italic;
}
/* 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.
*/
#mainContent {
/* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
font-size:12px;
margin-left: 3px;
}
#footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#999999;
text-align:center;
font-size:9px;
}
#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: 10px 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;
}
It should be noted that I'm not totally sure about CSS and most of it is either stolen from dreamweaver or rehashed together from old websites I made. Any help I could get would be greatly appreciated. Cheers. I tried a bunch of stuff to fix this. I only removed the sidebar from the pages, not the blog. This is how the footer is SUPPOSED to look: http://www.regionalcreations.com/fotografix/?page_id=4 This is how it looks on the pages: http://www.regionalcreations.com/fotografix/ For some reason the footer is up inside the body. Help? All I did was comment out the sidebar like this: Code: <!-- </div class="art-sidebar1"> <?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div> --> And copy the css for the width and change the name and values: Code: .page-contentLayout .page-content
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 876px;
}
.page-contentLayout .page-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 875px;
}
Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site. I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all. I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me. I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed... thanks. blog.mirana[dot]co[dot]uk They work in IE but not FF. Does anyone know a work-around? Is it possible? Code: .blkbars {
SCROLLBAR-FACE-COLOR : #000000;
SCROLLBAR-HIGHLIGHT-COLOR : #CCCCCC;
SCROLLBAR-SHADOW-COLOR : #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR : #000000;
SCROLLBAR-ARROW-COLOR : #CCCCCC;
SCROLLBAR-TRACK-COLOR : #999999;
SCROLLBAR-DARKSHADOW-COLOR : #000000;
}
Thanks for your time! I am wanting to display an image as a background. However that isn't working for me. So can someone please help me solve this problem? Thanks in advance. This is the css code that I am working with: Code:
body {
background-image: url(cattle_bg.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
This is the link for that css code which is the htm file: Code: <link href="/images/styles.css" rel="stylesheet" type="text/css" /> I have the following page, when the user clicks Reply a form should appear within the box. Works greats in Firefox, but in Internet Explorer the form appears within the next box. Anyone know a work around to get this work in IE? I'm pretty new to CSS and JavaScript, so it may be that I am missing something obvious here. Thank you very much for your help, a google search turned up nothing, nor did hours of trial and error. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
<style type="text/css" media="screen">
.pbox {
padding : 10px;
background-color : white;
}
.pboxtitle {
position : relative;
border-bottom : 2px solid black;
background-color:gray;
padding : 2px 5px;
}
.wbox {
padding : 1px;
background-color : white;
font-size: 12px;
margin-bottom: 4px;
}
.wboxtitle {
position : relative;
border-bottom : 2px solid black;
background-color: #CDCDCD;
padding : 2px 0px;
font-size: 12px;
height: 13px;
}
.subbox {
padding : 1px;
background-color : white;
font-size: 12px;
margin-bottom: 4px;
}
.subboxtitle {
position : relative;
border-bottom : 2px solid black;
background-color: #CDCDCD;
padding : 2px 0px;
font-size: 12px;
height: 13px;
margin-left: 10px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function show(id){
var obj = document.getElementById(id);
obj.style.display = 'block';
}
</SCRIPT>
</head>
<body>
<div class='pboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class='pbox'>
<div class='wboxtitle' >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox' style="width: 100%">tester <a onclick='show("id1"); return false;' href=''>Reply</a></span>
<span style='display:none;' id='id1'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='1'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div><div class='wboxtitle' style='float: none;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id2"); return false;' href=''>Reply</a>
<span style='display:none;' id='id2'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='2'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div><div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id3"); return false;' href=''>Reply</a>
<span style='display:none;' id='id3'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='3'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div><div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id4"); return false;' href=''>Reply</a>
<div style='display:none;' id='id4'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='4'>
<input name='submit' type='button' value='Add Comment'></form></div>
</div>
<div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id5"); return false;' href=''>Reply</a>
<span style='display:none;' id='id5'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='5'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div>
<div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id6"); return false;' href=''>Reply</a>
<span style='display:none;position: relative;' id='id6'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='6'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div>
</body>
</html>
This stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility. In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.). Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it. In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me. I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide. body{ background-color: Black; background-position: center; text-align: center; vertical-align: center; margin: 2px; } h4{ font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bolder; color: black; } h6{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-weight: normal; color: black; } h1{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bolder; color: black; text-transform: uppercase; } h2{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; color: #8B0000; } div#wrapper{ background-position: center; background-color: #F0F1EB; width: 762px; height: 420px; margin: 0px; border: 1px solid #black; padding: 0 px; } div#top{ background-position: center; background-image: url(../images/top.jpg); width: 760px; height: 123px; margin: 0px; border: 0px; padding: 0 px; text-align: right; vertical-align: top; text-transform: uppercase; } div#toplinks{ background-position: center; width: 634px; height: 15px; margin: 0px; border: 0px; padding: 2 px; float: right; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; text-align: center; color: white; } div#midlinks{ background-position: center; background-color: #F0F1EB; width: 760px; height: 17px; margin: 0px; padding: 0 px; border-bottom: 1px solid #9E9E9E;; border-left: 0px; border-right: 0px; border-top: 1px solid #9E9E9E; } div#midleft{ background-color: white; width: 126px; height: 16px; margin: 0px; padding: 6 px; float: left; border-bottom: 0px; border-left: 0px; border-right: 1px solid #9E9E9E; border-top: 0px; text-transform: uppercase; color: red; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bolder; text-align: right; } div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{ text-transform: uppercase; color: red; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bolder; text-align: right; text-decoration: none; } div#midright{ width: 631px; height: 16px; margin: 0px; padding: 6 px; float: right; border:0px; font-family: Arial, sans-serif; font-size: 11px; font-weight: bolder; text-align: left; color: white; text-transform: uppercase; } div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{ font-family: Arial, sans-serif; font-size: 11px; font-weight: bolder; text-align: left; color: #990000; text-transform: uppercase; text-decoration: none; } div#left{ background-position: center; background-color: #F0F1EB; width: 125px; margin: 0px; padding: 7 px; float: left; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; text-transform: uppercase; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 900; text-align: right; } div#left a, div#left a:hover, div#left a:visited, div#left a:active{ text-transform: uppercase; color: #990000; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 900; text-align: right; text-decoration: none; } div#main{ background-position: center; background-color: White; width: 635px; height: 470px; margin: 0px; padding: 0 px; float: right; border-left: 1px solid #9E9E9E; } div#mainl{ background-position: center; background-color: white; width: 310px; height: 289px; margin: 0px; border: 0px; padding: 10 px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-align: left; color: black; } div#main2{ background-position: center; background-color: white; width: 317px; height: 450px; margin: 0px; padding: 10 px; float: right; border-bottom: 0px; border-left: 1px solid #9E9E9E; border-right: 0px; border-top: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-align: left; color: black; } div#main1col{ background-position: center; background-color: white; width: 625px; height: 289px; margin: 0px; padding: 10 px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: black; } div#main1col td, div#mainl td, div#main2 td{ font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: black; } div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: #8B0000; text-decoration: underline; } div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: #8B0000; text-decoration: underline; } div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{ font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: #8B0000; text-decoration: underline; } .container { position: relative; left: 1px; top: 1px;} .text {position: absolute; left: 5px; top: 0px;} .container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;} .text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;} Hi - I've just carefully taught myself to design a site in CSS (as you can tell I'm not an expert - please forgive me this!) It looks great in IE, but the CSS doesn't display at all in Firefox. What have I done wrong? Hi, I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items. onmouseover="document.all.child1.style.display='block' onmouseout="document.all.child1.style.display='none' When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not. Please look at the style sheet - and web page. Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout?????? Thanks Vmusic Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it. I hate css http://www.mgan.net/work/10-06-04/layout1.html There is the link, I have my styles in the header section of the html file. Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution. Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser. I've validated my code, and just can't figure out what the problem is. (I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.) Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help. Here is the HTML: <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="parent"> <div id="left_top"> </div> <div class="bigcontainer" id="right_top"> a very<br>special<br>place<br>on the<br>internet </div> <div class="container" id="left_mid"> additional reading </div> <div class="container" id="right_mid"> tab one | tab two | tab three | tab four | tab five </div> <div class="container" id="left_bottom"> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </div> <div id="right_bottom"> <p> Lorem ipsum dolor sit amet... </p> </div> </div> </BODY> </HTML> Here is the CSS: body { font-family: sans-serif; font-size: 10px; margin: 0; padding: 0; background-color: #e5e5e5; } div.bigcontainer { font-size: 20px; font-weight: bolder; vertical-align: middle; padding: 20px 20px 0px 0px; text-align: right; } div.container { font-size: 12px; font-weight: bolder; vertical-align: middle; padding: 10px 20px 5px 0px; text-align: right; } #parent { margin: 0px; padding: 0px; position:relative; } #left_top { width: 35%; height: 190px; background-color: #7d7d7d; float: left } #right_top { width: 65%; height: 190px; color: #ffcc00; background-color: #666666; float: right; } #left_mid { width: 35%; height: 35px; color: #ffff99; background-color: #ffd426; float: left; } #right_mid { width: 65%; height: 35px; color: #666666; background-color: #ffcc00; float: right; } #left_bottom { width: 35%; height: 100%; padding: 20px; color: #999999; text-align: right; background-color: #e5e5e5; float: left; } #right_bottom { width: 65%; padding: 20px; color: #666666; text-align: right; background-color: #ffffff; float: right; } I downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side. If anyone can shed some light on this issue, I would greatly appreciate it! In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css alright I'm stumped so please please please help me out! I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html and this is the code: Code:
html,body {
background-image: url('../images/bg.gif');
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "Trebuchet MS";
font-size: 13px;
height: 100%;
}
#center {
text-align: center;
width: 100%;
height: 100%;
}
#container {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100%;
border: 1px solid #B8B8B8;
background-color: #FFFFFF;
text-align: left;
}
thanks for any suggestions! Hi, I am in the process of migrating a web site over on to a new platform. The old web page had an in text translation feature which I am wanting to keep but just tweek slightly. The original page has the turkish translation appear on the right and the english translation appear on the let each expanding to about 80% of the page when clicked on. Original Website web .archive.org/web/20080719023530/cat .une.edu.au/page/acemhoyuk This is a link to the original site using Wayback Machine and you can see from the moment the page loads both translations are visible. What I am wanting to do is keep the minimised translations to the one side and the bulk of the text to the other to eliminate the inertia that comes with constantly moving your focus from one side of the page to the other. I have done this by changing this bit of css code: .page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b { position: static; margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } .page_language_b .bilingual .language_b { margin: 0 0 0 20%; padding: 0 0 0 1.5em; border-left:1px solid #ccc; border-right: none; } to .page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b { position: static; margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } .page_language_b .bilingual .language_b { margin: 0 20% 0 0; padding: 0 1.5em 0 0; text-align:left; border-right:1px solid #ccc; } This simple change in the code seems to have worked for the most part and everything lines up fine except that it is not initially visible. When you first navigate to the page both translation appear as the body of the text one after each other. It is not until you click the mouse in the body of the text that you see the css doing what it is meant to and the translation appear on the right. New website www .une.edu .au/cat/sites/Acemhoyuk .php I am a relative novice with css but I can 'read' the code and I have gone through it, experimenting with changing different aspect of it but I can't find any solution to my problem. Could someone please help me figure out a solution to this issue as I want both the text and the translation to appear at the same time on the screen from the moment it loads not just after a mouse click. Kim 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 There - Am stumped. Everyone I know is stumped. We're using the cms Drupal on www.digitaldollhouse.com and whenever we update the site from svn, ie decides it doesn't want to display the page. White screen of death. Notice: ie cannot display this page. It occurs on all flavors of ie. It used to be solved by clearing the caches. Not anymore. The original authors of the html/css monster are contractors long since by the wayside. Another themer has taken over and she is very good, but had to work around some serious badness. She's also stumped. That leaves me. I'd be grateful for any ideas on how to even start to troubleshoot this bug. I want to show in a page two different link styles, to achieve this I have created two css files, one for each link style, and I have attached it in the page thus: Code: <html> <head> <title>Link format test</title> <link href="StylesCSS/link1.css" rel="stylesheet" type="text/css"> <link href=" StylesCSS/link2.css" rel="stylesheet" type="text/css"> </head> <body> Then I have applied the styles thus: Code: <a href="index.aspx" class="letterLink1">Home</a> <a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a> And both css files are as follow: link1.css Code:
a:link {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
.letterLink1 {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
link2.css Code:
a:link {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
a:hover {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
a:active {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
.letterLink2 {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
But when I load the page, the link1 a:hover and a:active are showed as link2 a:hover and a:active. What is wrong? Thank you, Cesar well i have totally redesigned my orginal page due to problems with IE browser-- i am now using a two column template and have copied code exactly-- had both XHTML and CSS verified with the W3C validator and they both check out to be ok-- the page is NOT showing up properly at all-- i am using FIREFOX as browser and i am wondering if i have now traded one problem for another i would sure appreciate it if someone would just go and look at page to see if it shows up right in another browser- THE PAGE also here is the url for the CSS CODE here is link to how page is supposed to look-- CORRECT VIEW if the page is not right in FOX does anyone know a work around to make it right?????? UGH UGH THIS IS SO FRUSTRATING thanks in advance-- |
|||||||