|
CSS - Horizontal Scroll Bar Popping Up For No Reason
For some reason (therefore contradicting my thread title) the horizontal scroll bar keeps popping up on my site. I've gone through and checked the width of all my divs and everything seems to be checking out.
Here is the site university square condos (dot) com Any idea where I could be going wrong? Similar Tutorialshello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFD2;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#ffffd2;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}
a.blue {
color:#0000CC;
font-size:11px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
position:absolute;
top:6px;
left:14px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
position:absolute;
top:0px;
left:0px;
width:100%;
height:137px;
background-color:#A4AA54;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
position:absolute;
top: 175px;
left: 185px;
width: 81%;
padding:15px;
border: 0px solid #000000;
background-color:#ffffd2;
z-index:0;
}
body>#Content {width:81%;}
#Menu {
position:absolute;
top: 166px;
left:0px;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A4AA54;
border-top:0px solid #A4AA54;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and the other Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar
.clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF Thanks for taking the time to read my question. I FF v.2 and IE v.7 In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"]. HTML: Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
<div class="LeftNavMainIn">
<div class="LeftNavContentTitle">
Select category below to view available inventory
</div>
<div class="LeftNavContentHolder">
<div class="LeftNavContent">
<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
</div>
<div class="LeftNavContent">
<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
</div>
</div>
</div>
</div>
<div class="ItemListMain">
<div class="ItemListTitle" id="ListOfItemTitles"></div>
<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
<div class="ItemListContent" id="ListOfStuff"></div>
<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}
.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top left;
}
.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;
width: 100%;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top right;
}
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
}
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}
.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}
.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left;
width: 180px;
}
.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}
.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;
}
.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}
.CoverPictures {
width: 150px;
height: 150px;
}
.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}
.ItemDetailsArtist {
float: left;
width: 100%;
}
.ItemDetailsTitle {
float: left;
width: 100%;
}
.ItemDetailsType {
float: left;
width: 100%;
}
.ItemDetailsCost {
float: left;
width: 100%;
}
.ItemDetailsWidescreen {
float: left;
width: 100%;
}
.ItemDetailsActors {
float: left;
width: 100%;
}
.ItemDetailsRating {
float: left;
width: 100%;
}
img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}
.roundtop {
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.roundbottom {
background: url('BottomRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.Nav {
display: block;
width: 100%;
}
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}
a.Nav:link {
color: #000000;
text-decoration: none;
}
a.Nav:visited {
color: #000000;
text-decoration: none;
}
a.Nav:hover {
color: #000000;
text-decoration: underline;
background-color: #0066FF;
}
a.Nav:active {
color: #000000;
text-decoration: none;
}
a.ListStuff:link {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:visited {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:hover {
color: #ffffff;
text-decoration: underline;
background-color:#0066FF;
}
a.ListStuff:active {
color: #ffffff;
text-decoration: none;
}
JS: Code: var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
TheCDTitles=''
TheDVDTitles=''
document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
if (FrameName=='CD') {
for (x in itemsArray)
{
TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
}
if (FrameName=='DVD') {
for (x in itemsArrayDVD)
{
TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
}
}
//*******************CD******************************
var itemsArray=new Array();
var x
function createArray()
{
x=0
var data=getCDContents();
var items=data.split('\n'); //splits the data in retreived from getContents() by line
var stats;
for (var i=0; i<items.length; i++)
{
x++
stats=items[i].split(','); //This is the line that determines what separates values in a line
itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrame=document.getElementById('CDIFrame');
var INdata="";
if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdata);
}
function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}
//*******************DVD******************************
var itemsArrayDVD=new Array();
function createArrayDVD()
{
var dataDVD=getCDContentsDVD();
var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
var statsDVD;
for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
{
statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrameDVD=document.getElementById('DVDIFrame');
var INdataDVD="";
if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdataDVD);
}
function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;
}
}
text doc for the CD iFrame Save this as CD.txt in the local folder Quote: 3 Doors Down,Away From The Sun,Rock,$5.00 3 Doors Down,The Better Life,Rock,$5.00 Adema,Insomniac's Dream,Rock,$5.00 Aerosmith,Get A Grip,Rock,$5.00 AFI,Sing The Sorrow,Rock,$5.00 Alice In Chains,self titled,Rock,$5.00 Alice In Chains,Dirt,Rock,$5.00 Alien Ant Farm,ANThology,Rock,$5.00 Thanks so much. Brad I have a collection of floating divs contained inside a container div. The floating divs are generated dynamically so they could number from one to whatever. The problem I'm having is that when there are too many floating divs, the container elements width is exceeded and the remaing floating divs display below the rest. How can i make the container div expand infinitely depending on it's content? I tried using the overflow properties but didn't have any luck plus such a solution looks ugly in my app. Thanks for any help you can give me. I'm modifying the following style now; http://www.phpbb.com/styles/forum/index.php?style=218. I like this style for variety of reasons, but there is one problem. IE keeps showing horizontal scroll bar no matter what width the window has. How can I fix this problem? Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. Gday CSS PPL, Im still yet to test on other browers, but im using IE 6.0 while the explorer is full screen the width of my div is 100% But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins, div.banner { background-image: url(../images/banner_repeat.gif); width:100%; height:163px; text-align:center; } and yeah, the background image 'banner_repeat' stops repeating at that point. any help would be great, Thx in advance, James Hello, I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll. I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail. I am stuck. Any ideas on how to negate the pussing of a margin? Hi everyone, This is about to drive me to If you look at this page you will see the problem right away: cant post my url: See forum rules - well I'll be... Why is the name, address ect.. out side of my wrap? When I get rid of the <div id="wrapper"> it doesn't do it, but then I cannot get the whole page to center. my css for the page: Code: @charset "UTF-8";
/* CSS Document */
#header { text-align:center;
}
#footerlinks{ text-align:center;
}
#contact{ text-align:center;
}
#copyright{ text-align:center;
}
#wrapper {
width:960px;
margin:0px auto;
padding:15px;
background-color:#ffffff;
}
My form css: Code: @charset "UTF-8";
/* CSS Document */
form {font-family:"Trebuchet MS", Verdana, sans-serif;width:25em}
h2 {margin:0 0 0 0;padding:0}
p {margin:0 0 1em 0;padding:0;font-size:90%}
fieldset {background:#C361D2;border:none;margin-bottom:1em;width:24em;padding-top:1.5em}
p.legend {background:#794f9e;color:black;padding:.2em .3em;font-size:1.2em;border:2px outset #794f9e;position:relative;margin-bottom:-1em;width:10em;margin-left:1em;margin-top:1em}
#personal {background:#b57fe1;border:outset #b57fe1;}
#tours{background:#b57fe1;border:outset #b57fe1;}
#message {background:#b57fe1;border:outset #b57fe1;}
#personal label {position:absolute;font-size:90%;padding-top:.2em;left:20px}
#personal input {margin-left:9em;line-height:1.4em;margin-bottom:.2em;}
#choices label {position:absolute;padding-top:.2em;left:20px}
select {margin-left:0em;margin-bottom:0}
#size {font-size:90%}
#size input {margin-left:9em}
#size input + input {margin-left:1em}
#size br+ input {margin-left:9em}
#extras {font-size:90%}
#extras input {margin-left:9em}
#extras input +input {margin-left:1em}
#extras br+input {margin-left:9em}
textarea {font:.8em "Trebuchet MS", Verdana, sans-serif;width:29em;padding:.2em}
input[type="submit"], input[type="reset"] {background:#794f9e;font:1.2em "Trebuchet MS", Verdana, sans-serif}
#buttons {text-align:center}
My source code: cant post cuz of urls n stuff - If you wouldn't mind helping me out pm me and I can send you the link and you can see this weirdness. edit--> url is at http://lawofattractionfrequency.com My ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div. My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region. Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great. Example 1: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> Example 2: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> this is my code PHP Code: <?php // XML file $file = "http://www.wired.com/news/feeds/rss2/0,2610,12,00.xml"; // set up some variables for use by the parser $currentTag = ""; $flag = ""; $count = 0; // this is an associative array of channel data with keys ("title", //"link", //"description") $channel = array(); // this is an array of arrays, with each array element representing an //<item> // each outer array element is itself an associative array // with keys ("title", "link", "description") $items = array(); // opening tag handler function elementBegin($parser, $name, $attributes) { global $currentTag, $flag; $currentTag = $name; // set flag if entering <channel> or <item> block if ($name == "ITEM") { $flag = 1; } else if ($name == "CHANNEL") { $flag = 2; } } // closing tag handler function elementEnd($parser, $name) { global $currentTag, $flag, $count; $currentTag = ""; // set flag if exiting <channel> or <item> block if ($name == "ITEM") { $count++; $flag = 0; } else if ($name == "CHANNEL") { $flag = 0; } } // character data handler function characterData($parser, $data) { global $currentTag, $flag, $items, $count, $channel; $data = trim(htmlspecialchars($data)); if ($currentTag == "TITLE" || $currentTag == "LINK" || $currentTag == "DESCRIPTION") { // add data to $channels[] or $items[] array if ($flag == 1) { $items[$count][strtolower($currentTag)] .= $data; } else if ($flag == 2) { $channel[strtolower($currentTag)] .= $data; } } } // create parser $xp = xml_parser_create(); // set element handler xml_set_element_handler($xp, "elementBegin", "elementEnd"); xml_set_character_data_handler($xp, "characterData"); xml_parser_set_option($xp, XML_OPTION_CASE_FOLDING, TRUE); xml_parser_set_option($xp, XML_OPTION_SKIP_WHITE, TRUE); // read XML file if (!($fp = fopen($file, "r"))) { die("Could not read $file"); } // parse data while ($xml = fread($fp, 4096)) { if (!xml_parse($xp, $xml, feof($fp))) { die("XML parser error: " . xml_error_string(xml_get_error_code($xp))); } } // destroy parser xml_parser_free($xp); // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> this is the part that generates what parts of the RSS you see, and the links... PHP Code: // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> How can I get the links displayed to pop in a new window, much like this... PHP Code: <a href="http://www.google.com/" target="_new"> This will pop in a new window(RAPP) ... basically, make the headers(which are links), to do _new window For some reason my code adds a vertical scrollbar in firefox (although not in IE but you can make anything work in IE). I am not sure why. The scroll amount is only 1 pixel vertically. Everything looks good to me. Any ideas? PHP Code: <style type="text/css"> <!-- html {height:100%;} body { margin:0; padding:0; height:100%; background:#ffffff url(bg.gif) top right repeat-y; font-family:Papyrus, Rockwell, Poor Richard, Times New Roman, serif; } #wrap { position:relative; background:url(bg.gif) top left repeat-y; min-height:100%; } * html #wrap {height:100%} #clear_footer { clear:both; height:19px; overflow:hidden; } #footer_full_width { position:absolute; bottom:0; height:19px; background-image: url(../images/bottomredstripe.jpg); width:100%; color:#fff; background-color: #999; text-align:center; } #footer_panel { position:relative; bottom:0; height:19px; background-image: url(../images/gray_bottom.jpg); width:730px; height: 19px; color:#fff; background-color: #999; text-align:center; } #left { float:left; width:200px; text-align:center; } #main { position:relative; margin-left:200px; } #right { float:right; width:200px; text-align:center; } #content { padding:5px; margin-right:200px; text-align:left; } * html #content, * html #main { height:1px; } --> </style> <div id="wrap"> <div id="header">header</div> <div id="left">left</div> <div id="main"> <div id="right">right</div> <div id="content">main content</div> </div> <div id="clear_footer"></div> <div id="footer_full_width"> <div id="footer_panel">FOOTER</div> </div> </div> Code on the page: Code: <body> <div class="wrapper_page"> <div class="wrapper_widebackground"> <div class="wrapper_body"> <div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div> <div class="wrapper_nav_top"><!-- navbar goes here --></div> <div class="wrapper_main"> <div class="wrapper_main_insidebackground_blue"> <div class="wrapper_main_insidebackground_white"> <div class="wrapper_main_top"><img src="PageBodyTop.png" width="1000" height="35" /></div> <div class="wrapper_main_content"> <div class="wrapper_main_sword"> <!-- Content here --> </div> </div> </div> </div> </div> </div> </div> </div> </body> Stylesheet: Code:
.wrapper_page {
text-align: center;
width: 100%;
border: 0px solid #FFFF00;
}
.wrapper_widebackground {
background-image: url(../Cloth.png);
width: 1350px;
background-repeat: no-repeat;
margin: auto;
clear: both;
border: 0px solid #FF0000;
}
.wrapper_body {
text-align: left;
margin: auto;
clear: both;
width: 1000px;
border: 0px solid #FF00FF;
padding: 0px;
}
.wrapper_head {
height: 182px;
width: 1000px;
border: 0px solid #33FF00;
margin: 0px;
padding: 0px;
}
.wrapper_nav_top {
height: 24px;
width: 1000px;
border: 0px solid #FFFF00;
margin: 0px;
padding: 0px;
}
.wrapper_main {
background-color: #000000;
background-image: url(../background.jpg);
margin: auto;
padding: 0px;
background-position: top;
background-repeat: repeat;
clear: both;
border: 0px solid #99FFFF;
}
.wrapper_main_insidebackground_blue {
background-repeat: no-repeat;
background-image: url(..Blue.jpg);
background-position: top;
background-color: #000000;
}
.wrapper_main_insidebackground_white {
background-repeat: repeat-y;
background-image: url(..White.png);
background-position: top;
}
.wrapper_main_top {
border: 0px solid #00FF00;
height: 35px;
width: 1000px;
margin: 0px;
padding: 0px;
clear: both;
}
.wrapper_main_sword {
background-image: url(../Sword.png);
background-repeat: no-repeat;
background-position: right top;
vertical-align: top;
padding: 0px;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #FF33CC;
}
.wrapper_main_content {
border: 0px solid #FF9900;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 90px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Here's the issue. wrapper_main will not stretch all the way to the bottom of the page regardless of the amount of text. It maintains what seems to be a bottom margin whether I put a bottom margin of 0 there or not. (Currently, it is set to auto.) I thought maybe wrapper_body was causing the issue, but setting the padding to 0 on wrapper_body did not work. Here's the confusing part. If I set a border with a width of 1px on wrapper_main, it goes all the way to the bottom. However, the border looks bad on the page so I don't want the border. (I'd give you the URL, but the forums wouldn't allow it.) Why is this happening and how do I remedy it? Hello. I am using a percentage bar javascript code on my website, the problem is, The script works fine in FireFox without adding: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But only works in IE if I add that code. The problem is, when I do add that code some of my tables go twice the size in height. What is the problem here? Is this going to be easy to fix? What can I do? Thanks a lot, Ben Hi guys, I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout. I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following: Code: html, body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
background-color: #000000;
}
Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know! I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed. Thanks everyone! I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that? seems to work in IE but not firefox... how do i get around this and make it work for both? well ive used this code snippet in a lot of pages and its worked. but this page is giving me trouble. my problem is the colors on the scroll bar itself not changing to what i tell it to. instead its, 'stock' heres the site, go to the rumors sections: www.mikeberlucchi.com heres the code: Code:
<td align="right">
<DIV
style='
color: #000000;
background-color: #867878;
border: solid 0px black;
width: 300px;
height: 250px;
overflow: auto;
scrollbar-face-color: #C3D6DA;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
'>
any input would be awesome, thanks Hi Guys i want to add a scroll bar to my User Tab so that i scroll for more users ,This is the code for the User Tab of the script i am using Top User Code <div id="an_box_topmember"> <div class="an_btm_header"><span><strong>Top User</strong></span></div> <div class="an_btm_content"> <ul> Scroll Bar Code <div style="width: 190px; height: 190px; overflow: auto; padding: 5px"> </div> Where will i add the scroll bar code,Thanks all comments are welcome Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. How do I create div that shows vertical scroll bar if div id="content_area" is too big? Code: <div style="padding:10px; height: 100px"> <div id="content_area"> some text here </div> <div class="clear"></div> </div> |
|||||||